/* =========================================================
   LEGACY AV SOLUTIONS
   SERVICES PAGE

   Page-specific styles for services.html.

   Shared website elements such as:
   - Header
   - Navigation
   - Footer
   - Global buttons
   - Brand colors
   - Reusable containers

   are handled by style.css.

   DESIGN DIRECTION:
   - Professional / technical AV aesthetic
   - Dark hero with subtle blue lighting
   - Warm off-white integration section
   - Dark steel capabilities section
   - Light manufacturer section
   - Dark markets section
   - Deep navy closing CTA
   - Sharp edges rather than rounded corporate cards
   - Brighter body copy on dark backgrounds
   ========================================================= */


/* =========================================================
   1. SERVICES HERO
   ========================================================= */

.services-hero {
    position: relative;

    padding: 110px 0;

    background:
        radial-gradient(circle at 82% 40%,
            rgba(6, 75, 120, 0.28) 0%,
            rgba(6, 75, 120, 0.09) 28%,
            transparent 58%),
        var(--color-dark);

    color: var(--brand-white);

    overflow: hidden;
}


.services-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(170, 50, 50, 0.13) 0%,
            transparent 70%);

    pointer-events: none;
}


.services-hero-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4.5rem;

    align-items: center;
}


.services-hero-content h1 {
    max-width: 680px;

    margin-bottom: 1.5rem;

    font-size: clamp(3rem, 5vw, 4.7rem);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: 0.005em;

    color: var(--brand-white);
}


.services-hero-content h1::after {
    content: "";

    display: block;

    width: 90px;
    height: 4px;

    margin-top: 26px;

    background-color: var(--brand-red);
}


.services-hero-text {
    max-width: 620px;

    margin-bottom: 2rem;

    font-size: 1.1rem;

    line-height: 1.8;

    color: #e2e2df;
}


.services-hero-image {
    position: relative;

    width: 100%;

    height: 440px;

    border: 1px solid #30343a;

    border-top: 4px solid var(--brand-red);

    border-radius: 2px;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);
}


/*
   The real project photograph fills the hero image area
   without stretching or distorting.
*/

.services-hero-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   2. MAJOR SECTION SEPARATION
   ========================================================= */

/*
   Standard sections use the 4px Legacy blue divider.

   Capabilities and the final CTA are NOT included because
   those sections now have the large branded Legacy divider
   immediately above them.
*/

.services-integration,
.manufacturers-section,
.markets-section {
    border-top: 4px solid var(--brand-blue);
}


/* =========================================================
   3. BRANDED LEGACY DIVIDER
   ========================================================= */

/*
   This is the same branded divider treatment used on the
   Home and Our Story pages.

   The red, white, and blue horizontal stripes are inspired
   by the Legacy AV Solutions logo.

   The full company logo sits in the center and its black
   background interrupts the stripes.
*/

.legacy-divider {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 54px;

    background-color: var(--brand-black);

    overflow: hidden;
}


/*
   Creates the three horizontal brand stripes.
*/

.legacy-divider::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 9px;

    transform: translateY(-50%);

    background:
        linear-gradient(to bottom,
            var(--brand-red) 0,
            var(--brand-red) 33.33%,
            var(--brand-white) 33.33%,
            var(--brand-white) 66.66%,
            var(--brand-blue) 66.66%,
            var(--brand-blue) 100%);
}


/*
   Black container behind the logo.

   This hides the stripes behind the logo and makes them
   appear to stop on either side of it.
*/

.legacy-divider-logo {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 18px;

    background-color: var(--brand-black);
}


.legacy-divider-logo img {
    width: 190px;

    height: auto;

    display: block;
}


/* =========================================================
   4. REUSABLE SERVICES SECTION HEADINGS
   ========================================================= */

.services-section-heading {
    max-width: 800px;

    margin: 0 auto 4rem;

    text-align: center;
}


.services-section-heading h2 {
    margin-bottom: 1rem;

    font-size: clamp(2.3rem, 4vw, 3.6rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: 0.005em;
}


.services-centered-intro {
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    font-size: 1.05rem;

    line-height: 1.8;
}


/*
   These are the SMALL red lines underneath section headings.

   They are intentionally different from the large branded
   Legacy dividers above.
*/

.services-section-heading .section-divider--brand {
    width: 72px;

    height: 4px;

    margin: 24px auto;

    background-color: var(--brand-red);

    border-radius: 0;
}


/* =========================================================
   5. AUDIOVISUAL SYSTEMS INTEGRATION
   ========================================================= */

.services-integration {
    padding-top: 120px;
    padding-bottom: 120px;

    background-color: var(--color-light-section);

    color: var(--color-light-section-text);
}


.services-integration .services-section-heading h2 {
    color: var(--color-light-section-text);
}


.services-integration .services-centered-intro {
    color: var(--color-light-section-text-secondary);
}


/* =========================================================
   6. SERVICE CARD GRID
   ========================================================= */

.service-card-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;
}


.service-card {
    position: relative;

    min-height: 285px;

    padding: 2.5rem;

    background:
        linear-gradient(145deg,
            #17191d 0%,
            #111216 100%);

    border: 1px solid #303238;

    border-top: 4px solid var(--brand-red);

    border-radius: 2px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.service-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -110px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(6, 75, 120, 0.22) 0%,
            transparent 70%);

    pointer-events: none;
}


.service-card:hover {
    transform: translateY(-5px);

    border-color: var(--brand-blue-light);

    border-top-color: var(--brand-red);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.18);
}


.service-number {
    position: relative;

    z-index: 1;

    display: inline-block;

    margin-bottom: 1.1rem;

    color: var(--brand-red);

    font-family: var(--font-display);

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: 0.14em;
}


.service-card h3 {
    position: relative;

    z-index: 1;

    margin-bottom: 1rem;

    font-size: 1.5rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.005em;

    color: var(--brand-white);
}


.service-card p {
    position: relative;

    z-index: 1;

    margin-bottom: 0;

    font-size: 1rem;

    line-height: 1.8;

    color: #e2e2df;
}


/* =========================================================
   7. AUDIO & VISUAL CAPABILITIES
   ========================================================= */

.capabilities-section {
    position: relative;

    padding-top: 120px;
    padding-bottom: 120px;

    background:
        radial-gradient(circle at 90% 12%,
            rgba(11, 101, 158, 0.16) 0%,
            transparent 35%),
        linear-gradient(135deg,
            #101820 0%,
            #122431 55%,
            #0d2b3d 100%);

    color: var(--brand-white);

    overflow: hidden;
}


.capabilities-section .services-section-heading h2 {
    color: var(--brand-white);
}


.capabilities-section .services-centered-intro {
    color: #e2e2df;
}


/* =========================================================
   8. CAPABILITY ROWS
   ========================================================= */

.capability-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5rem;

    align-items: center;

    margin-bottom: 7rem;
}


.capability-row:last-child {
    margin-bottom: 0;
}


.capability-row-reverse .capability-image {
    order: 2;
}


.capability-row-reverse .capability-content {
    order: 1;
}


/* =========================================================
   9. CAPABILITY IMAGES
   ========================================================= */

/*
   Real Legacy AV Solutions installation photography is used
   for both the Audio and Visual capability sections.
*/

.capability-image {
    position: relative;

    width: 100%;

    height: 400px;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-top: 4px solid var(--brand-red);

    border-radius: 2px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.20);
}


.capability-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   10. CAPABILITY CONTENT
   ========================================================= */

.capability-label {
    margin-bottom: 0.9rem;

    color: var(--brand-red);

    font-family: var(--font-display);

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.capability-content h3 {
    max-width: 560px;

    margin-bottom: 1.4rem;

    font-size: clamp(2rem, 3vw, 2.8rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: 0.005em;

    color: var(--brand-white);
}


.capability-content h3::after {
    content: "";

    display: block;

    width: 65px;

    height: 4px;

    margin-top: 22px;

    background-color: var(--brand-red);
}


.capability-content p {
    max-width: 600px;

    margin-bottom: 1.1rem;

    font-size: 1.03rem;

    line-height: 1.8;

    color: #e2e2df;
}


/* =========================================================
   11. CAPABILITY LISTS
   ========================================================= */

.capability-list {
    margin-top: 1.7rem;
}


.capability-list li {
    position: relative;

    padding-left: 1.5rem;

    margin-bottom: 0.85rem;

    font-weight: 700;

    line-height: 1.5;

    color: var(--brand-white);
}


.capability-list li::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0.55rem;

    width: 8px;

    height: 8px;

    background-color: var(--brand-red);
}


/* =========================================================
   12. MANUFACTURERS & CERTIFICATIONS
   ========================================================= */

.manufacturers-section {
    padding-top: 120px;
    padding-bottom: 120px;

    background-color: var(--color-light-section);

    color: var(--color-light-section-text);

    overflow: hidden;
}


.manufacturers-section .services-section-heading h2 {
    color: var(--color-light-section-text);
}


.manufacturers-section .services-centered-intro {
    color: var(--color-light-section-text-secondary);
}


/* =========================================================
   13. MANUFACTURER LOGO CAROUSEL
   ========================================================= */

.logo-carousel {
    position: relative;

    width: 100%;

    padding: 1.25rem 0;

    overflow: hidden;
}


.logo-carousel::before,
.logo-carousel::after {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    bottom: 0;

    width: 80px;

    pointer-events: none;
}


.logo-carousel::before {
    left: 0;

    background:
        linear-gradient(to right,
            var(--color-light-section),
            transparent);
}


.logo-carousel::after {
    right: 0;

    background:
        linear-gradient(to left,
            var(--color-light-section),
            transparent);
}


.logo-carousel-track {
    display: flex;

    align-items: center;

    gap: 2rem;

    width: max-content;

    animation: logo-scroll 28s linear infinite;
}


.logo-carousel:hover .logo-carousel-track {
    animation-play-state: paused;
}


.manufacturer-logo {
    width: 190px;

    height: 110px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.25rem;

    background-color: var(--brand-white);

    border: 1px solid var(--color-light-section-border);

    border-bottom: 3px solid var(--brand-blue);

    border-radius: 2px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.manufacturer-logo:hover {
    transform: translateY(-3px);

    border-bottom-color: var(--brand-red);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.10);
}


.manufacturer-logo img {
    max-width: 100%;

    max-height: 70px;

    width: auto;

    height: auto;

    object-fit: contain;
}


@keyframes logo-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   14. MARKETS WE SERVE
   ========================================================= */

.markets-section {
    position: relative;

    padding-top: 110px;
    padding-bottom: 110px;

    background:
        radial-gradient(circle at 10% 85%,
            rgba(6, 75, 120, 0.16) 0%,
            transparent 35%),
        var(--color-dark);

    color: var(--brand-white);

    overflow: hidden;
}


.markets-section .services-section-heading {
    margin-bottom: 3rem;
}


.markets-section .services-section-heading h2 {
    color: var(--brand-white);
}


.markets-section .services-centered-intro {
    color: #e2e2df;
}


/* =========================================================
   15. MARKETS GRID
   ========================================================= */

.markets-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;
}


.market-card {
    position: relative;

    min-height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.5rem;

    text-align: center;

    background:
        linear-gradient(145deg,
            #181a1e 0%,
            #111216 100%);

    border: 1px solid #303238;

    border-left: 4px solid var(--brand-blue);

    border-radius: 2px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}


.market-card:hover {
    transform: translateY(-4px);

    border-left-color: var(--brand-red);

    border-top-color: #3b3d43;
    border-right-color: #3b3d43;
    border-bottom-color: #3b3d43;

    background:
        linear-gradient(145deg,
            #1b1e22 0%,
            #121820 100%);
}


.market-card h3 {
    position: relative;

    z-index: 1;

    margin-bottom: 0;

    font-size: 1.15rem;

    font-weight: 800;

    line-height: 1.25;

    letter-spacing: 0.005em;

    color: var(--brand-white);
}


/* =========================================================
   16. CALL TO ACTION
   ========================================================= */

.services-cta {
    position: relative;

    padding: 85px 0;

    background:
        linear-gradient(135deg,
            #071722 0%,
            #09283d 50%,
            #06304c 100%);

    color: var(--brand-white);

    overflow: hidden;
}


.services-cta::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -190px;
    top: -210px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(170, 50, 50, 0.14) 0%,
            transparent 70%);

    pointer-events: none;
}


.services-cta::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -210px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(11, 101, 158, 0.20) 0%,
            transparent 70%);

    pointer-events: none;
}


.services-cta-content {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;
}


.services-cta-label {
    margin-bottom: 0.8rem;

    color: var(--brand-red);

    font-family: var(--font-display);

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.services-cta h2 {
    margin-bottom: 1rem;

    font-size: clamp(2.2rem, 4vw, 3.3rem);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: 0.005em;

    color: var(--brand-white);
}


.services-cta p {
    max-width: 650px;

    margin-bottom: 0;

    font-size: 1.05rem;

    line-height: 1.8;

    color: #e2e2df;
}


.services-cta-button {
    flex-shrink: 0;

    padding: 15px 32px;

    background-color: var(--brand-red);

    color: var(--brand-white);

    border: 1px solid var(--brand-red);

    border-radius: 2px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.services-cta-button:hover {
    transform: translateY(-2px);

    background-color: var(--brand-red-hover);

    border-color: var(--brand-red-hover);

    color: var(--brand-white);
}


/* =========================================================
   17. TABLET RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    .services-hero {
        padding-top: 100px;
        padding-bottom: 100px;
    }


    .services-hero-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .service-card-grid {
        grid-template-columns: 1fr;
    }


    .capability-row {
        grid-template-columns: 1fr;

        gap: 2.5rem;

        margin-bottom: 5rem;
    }


    /*
       Both capability sections display:

       Image
       Text
    */

    .capability-row-reverse .capability-image {
        order: 1;
    }


    .capability-row-reverse .capability-content {
        order: 2;
    }


    .manufacturer-logo {
        width: 165px;

        height: 100px;
    }


    .manufacturer-logo img {
        max-height: 60px;
    }


    .markets-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .services-cta-content {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   18. MOBILE RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 600px) {

    .services-hero {
        padding: 80px 0;
    }


    .services-integration,
    .capabilities-section,
    .manufacturers-section,
    .markets-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }


    .services-hero-content h1 {
        font-size: 2.6rem;

        line-height: 1.03;

        letter-spacing: 0.005em;
    }


    .services-hero-text {
        font-size: 1.02rem;

        line-height: 1.75;
    }


    .services-hero-image {
        height: 300px;
    }


    .services-section-heading {
        margin-bottom: 3rem;
    }


    .service-card {
        min-height: auto;

        padding: 1.8rem;
    }


    .capability-image {
        height: 290px;
    }


    .capability-content h3 {
        font-size: 1.8rem;
    }


    .capability-content p {
        font-size: 1rem;
    }


    .logo-carousel::before,
    .logo-carousel::after {
        width: 35px;
    }


    .logo-carousel-track {
        gap: 1rem;

        animation-duration: 24s;
    }


    .manufacturer-logo {
        width: 145px;

        height: 90px;

        padding: 1rem;
    }


    .manufacturer-logo img {
        max-height: 55px;
    }


    .markets-grid {
        grid-template-columns: 1fr;
    }


    .market-card {
        min-height: 95px;
    }


    .services-cta {
        padding: 75px 0;
    }


    .services-cta h2 {
        font-size: 2rem;
    }


    .services-cta-button {
        width: 100%;

        text-align: center;
    }

}