/* =========================================================
   LEGACY AV SOLUTIONS
   HOME PAGE STYLESHEET

   DESIGN DIRECTION:
   - Dark / industrial
   - Professional audiovisual technology
   - Bold typography
   - Subtle metal influence
   - Restrained red, white, and blue accents
   - Clear visual separation between page sections

   Global navigation, buttons, footer, typography,
   variables, and reusable containers are in style.css.
   ========================================================= */


/* =========================================================
   1. HOMEPAGE SECTION SEPARATION
   ========================================================= */

/*
   Selected sections use a thin Legacy-blue line along
   their upper edge.

   This makes the transition between sections easier to
   recognize while keeping the divider subtle.
*/

.company-intro,
.services-preview,
.home-values,
.featured-project,
.testimonial,
.cta {
    border-top: 4px solid var(--brand-blue);
}

/* =========================================================
   BRANDED LEGACY DIVIDER
   ========================================================= */

/*
   This divider takes inspiration from the red, white,
   and blue horizontal lines in the Legacy AV Solutions logo.

   The full company logo is placed in the center while the
   red, white, and blue stripes continue outward on both sides.

   This divider is intended for special transitions on the
   homepage rather than replacing every standard blue divider.
*/

.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 red, white, and blue horizontal stripes.

   The stripes stretch across the entire divider and run
   behind the centered company logo.
*/

.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%);
}


/*
   Holds the official Legacy AV Solutions logo in the
   center of the divider.

   The black background creates a clean break in the
   stripes so they appear to stop on either side of
   the logo instead of showing behind 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);
}


/*
   Controls the size of the centered company logo.

   Because the logo is wide and relatively short,
   190px gives it enough visibility without allowing
   it to overpower the divider.
*/

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

    height: auto;

    display: block;
}

/* =========================================================
   2. HERO SECTION
   ========================================================= */

.hero {
    position: relative;

    width: 90%;

    max-width: var(--max-width);

    margin: 0 auto;

    min-height: 680px;

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    align-items: center;

    gap: 5rem;

    padding: 90px 0;

    background-color: var(--color-dark);
}


/*
   Subtle blue glow behind the image side of the hero.

   This introduces the Legacy blue more like AV lighting
   than a large decorative brand color.
*/

.hero::after {
    content: "";

    position: absolute;

    right: -80px;

    top: 50%;

    transform: translateY(-50%);

    width: 420px;

    height: 420px;

    background:
        radial-gradient(circle,
            rgba(6, 75, 120, 0.15) 0%,
            rgba(6, 75, 120, 0.05) 40%,
            rgba(6, 75, 120, 0) 72%);

    pointer-events: none;

    z-index: 0;
}


.hero-content,
.hero-image {
    position: relative;

    z-index: 1;
}


/* =========================================================
   3. HERO EYEBROW
   ========================================================= */

.hero-eyebrow {
    font-family: var(--font-display);

    color: var(--brand-red);

    font-size: 0.78rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    margin-bottom: 1.25rem;
}


/* =========================================================
   4. HERO HEADING
   ========================================================= */

.hero h1 {
    max-width: 720px;

    margin-bottom: 1.75rem;

    color: var(--brand-white);

    font-size: clamp(3.3rem, 5.5vw, 5rem);

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: 0.005em;
}


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

    display: block;

    width: 90px;

    height: 4px;

    margin-top: 1.75rem;

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


/* =========================================================
   5. HERO DESCRIPTION
   ========================================================= */

.hero-description {
    max-width: 620px;

    margin-bottom: 2.25rem;

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

    font-size: 1.08rem;

    line-height: 1.85;
}


/* =========================================================
   6. HERO BUTTONS
   ========================================================= */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;
}


/*
   Secondary hero button introduces Legacy blue.
*/

.hero-buttons .button-secondary {
    border-color: var(--brand-blue);

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


.hero-buttons .button-secondary:hover {
    background-color: var(--brand-blue);

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

    color: var(--brand-white);

    box-shadow:
        0 8px 24px rgba(6, 75, 120, 0.2);
}


/* =========================================================
   7. HERO IMAGE
   ========================================================= */

/*
   Displays the real Legacy AV Solutions image
   inside the homepage hero section.

   The image fills the available space while keeping
   its original proportions.
*/

.hero-image {
    width: 100%;

    min-height: 500px;

    overflow: hidden;

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

    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.35);
}


/*
   object-fit: cover prevents the photograph from
   stretching or becoming distorted.

   The image may crop slightly around the edges
   depending on the available screen size.
*/

.hero-image img {
    display: block;

    width: 100%;

    height: 500px;

    object-fit: cover;

    object-position: center;
}

/* =========================================================
   8. COMPANY INTRODUCTION
   ========================================================= */

/*
   This is our first major light section.

   The warm off-white background gives visitors' eyes a
   visual reset after the dark hero and creates an obvious
   separation between homepage sections.
*/

.company-intro {
    position: relative;

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

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

    text-align: center;

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


.company-intro .section-container {
    max-width: 900px;
}


.company-intro .section-label {
    color: var(--brand-red);
}


.company-intro h2 {
    max-width: 760px;

    margin: 0 auto 1.75rem;

    color: #111214;

    font-size: clamp(2.5rem, 4vw, 3.7rem);

    line-height: 1.08;
}


.company-intro p:not(.section-label) {
    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

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

    font-size: 1.05rem;

    line-height: 1.9;
}


.company-intro .text-link {
    margin-top: 1rem;
}


/* =========================================================
   9. SERVICES PREVIEW
   ========================================================= */

.services-preview {
    background-color: var(--color-dark);

    text-align: center;
}


.services-preview h2 {
    color: var(--brand-white);
}


.services-preview .section-intro {
    max-width: 750px;

    margin-left: auto;

    margin-right: auto;

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

    line-height: 1.85;
}


.service-card-container {
    display: grid;

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

    gap: 1.5rem;

    margin-top: 3.5rem;

    margin-bottom: 3rem;

    text-align: left;
}


/* =========================================================
   10. SERVICE CARDS
   ========================================================= */

.service-card {
    position: relative;

    min-height: 330px;

    padding: 2.5rem;

    background-color: var(--color-dark-secondary);

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

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

    border-radius: 2px;

    overflow: hidden;

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


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

    background-color: var(--color-surface);

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

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

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28);
}


.service-card h3 {
    position: relative;

    z-index: 1;

    margin-bottom: 1.1rem;

    color: var(--brand-white);

    font-size: 1.45rem;

    line-height: 1.2;
}


.service-card p {
    position: relative;

    z-index: 1;

    margin-bottom: 0;

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

    line-height: 1.85;
}


/* =========================================================
   11. SERVICE NUMBERS
   ========================================================= */

.service-number {
    position: relative;

    z-index: 1;

    margin-bottom: 1.5rem;

    color: var(--brand-red);

    font-size: 1rem;

    font-weight: 900;

    letter-spacing: 0.18em;

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


/*
   Small blue detail beneath each service number.
*/

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

    display: block;

    width: 45px;

    height: 2px;

    margin-top: 0.75rem;

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


/* =========================================================
   12. CUSTOMER-FIRST SECTION
   ========================================================= */

.customer-first {
    position: relative;

    /*
       Dark steel-blue background.

       This separates Customer First from the black branded
       divider while keeping the section darker and more
       understated than the final CTA.
    */

    background:
        linear-gradient(135deg,
            #101820 0%,
            #122431 55%,
            #0d2b3d 100%);

    color: var(--brand-white);

    border-bottom: 1px solid var(--color-border);

    overflow: hidden;
}


.customer-first::after {
    content: "";

    position: absolute;

    right: -150px;

    top: 50%;

    transform: translateY(-50%);

    width: 450px;

    height: 450px;

    background:
        radial-gradient(circle,
            rgba(6, 75, 120, 0.12),
            transparent 68%);

    pointer-events: none;
}


.customer-first-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 90px;

    align-items: start;
}


.customer-first h2 {
    max-width: 520px;

    color: var(--brand-white);

    font-size: clamp(2.75rem, 5vw, 4.4rem);

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: 0.005em;
}


.customer-first .section-label {
    color: var(--brand-red);
}


.customer-first h2::after {
    content: "";

    display: block;

    width: 80px;

    height: 4px;

    margin-top: 28px;

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


.customer-first-content {
    padding-top: 1rem;
}


.customer-first-content p {
    margin-bottom: 26px;

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

    font-size: 1.08rem;

    line-height: 1.95;
}


.customer-first-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   13. CORE VALUES PREVIEW
   ========================================================= */

/*
   The Core Values section is our second major light section.

   This prevents the second half of the homepage from
   becoming one uninterrupted dark canvas.
*/

.home-values {
    background-color: var(--color-light-section);

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

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


.home-values-heading {
    max-width: 780px;

    margin-bottom: 4rem;
}


.home-values-heading .section-label {
    color: var(--brand-red);
}


.home-values-heading h2 {
    color: #111214;

    font-size: clamp(2.75rem, 5vw, 4rem);

    line-height: 1.05;

    margin-bottom: 1.5rem;
}


.home-values-heading .section-intro {
    max-width: 650px;

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

    line-height: 1.85;
}


.home-values-grid {
    display: grid;

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

    gap: 0 4rem;

    margin-bottom: 3rem;
}


/* =========================================================
   14. HOME CORE VALUE ITEMS
   ========================================================= */

.home-value {
    position: relative;

    min-height: 245px;

    padding: 2.5rem 0;

    border-top: 1px solid #b8b8b5;

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


.home-value:hover {
    transform: translateY(-4px);

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


.home-value-number {
    display: block;

    margin-bottom: 1.15rem;

    color: var(--brand-red);

    font-size: 0.9rem;

    font-weight: 900;

    letter-spacing: 0.2em;

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

}


.home-value h3 {
    margin-bottom: 1rem;

    color: #111214;

    font-size: 1.6rem;

    line-height: 1.2;
}


.home-value p {
    max-width: 500px;

    margin-bottom: 0;

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

    line-height: 1.85;
}


.values-link {
    margin-top: 0.75rem;
}


/* =========================================================
   15. FEATURED PROJECT
   ========================================================= */

.featured-project {
    background-color: var(--color-dark);
}


.featured-project h2 {
    color: var(--brand-white);
}


.featured-project-content {
    display: grid;

    grid-template-columns: 1.25fr 0.75fr;

    align-items: center;

    gap: 5rem;

    margin-top: 3.5rem;
}


.project-image {
    min-height: 470px;

    background:
        linear-gradient(135deg,
            var(--color-surface),
            var(--color-dark-secondary));

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.3);
}

/*
   FEATURED PROJECT IMAGE

   Allows the real Legacy AV project photograph to fill
   the Featured Project image container without
   stretching or distorting the photograph.
*/

.project-image img {
    width: 100%;

    height: 470px;

    object-fit: cover;

    object-position: center;

    display: block;
}


.project-text {
    border-left: 2px solid var(--brand-red);

    padding-left: 2rem;
}


.project-text h3 {
    margin-bottom: 1.25rem;

    color: var(--brand-white);

    font-size: 2rem;

    line-height: 1.15;
}


.project-text p {
    margin-bottom: 1.75rem;

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

    line-height: 1.85;
}


/* =========================================================
   16. TESTIMONIAL SECTION
   ========================================================= */

.testimonial {
    position: relative;

    background-color: var(--color-dark-secondary);

    text-align: center;

    border-bottom: 1px solid var(--color-border);
}


.testimonial .section-container {
    max-width: 900px;
}


.testimonial h2 {
    color: var(--brand-white);

    font-size: clamp(2.5rem, 4vw, 3.7rem);
}


/* =========================================================
   17. TESTIMONIAL PLACEHOLDER
   ========================================================= */

.testimonial-card {
    position: relative;

    margin: 3rem 0;

    padding: 3rem;

    background-color: var(--color-dark);

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

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

    border-radius: 2px;

    text-align: left;
}


.testimonial-card::before {
    content: "“";

    position: absolute;

    top: 5px;

    right: 25px;

    color: rgba(170, 50, 50, 0.18);

    font-family: Georgia, serif;

    font-size: 7rem;

    line-height: 1;
}


.testimonial-placeholder {
    position: relative;

    z-index: 1;

    margin-bottom: 0;

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

    font-size: 1.15rem;

    font-style: italic;

    line-height: 1.9;
}


/* =========================================================
   18. CALL TO ACTION
   ========================================================= */

.cta {
    position: relative;

    overflow: hidden;

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

    color: var(--brand-white);

    text-align: center;

    padding: 120px 0;


}


/*
   Subtle red glow on the left.
*/

.cta::before {
    content: "";

    position: absolute;

    left: -180px;

    top: 50%;

    transform: translateY(-50%);

    width: 500px;

    height: 500px;

    background:
        radial-gradient(circle,
            rgba(170, 50, 50, 0.12),
            transparent 68%);

    pointer-events: none;
}


/*
   Subtle blue glow on the right.
*/

.cta::after {
    content: "";

    position: absolute;

    right: -180px;

    top: 50%;

    transform: translateY(-50%);

    width: 500px;

    height: 500px;

    background:
        radial-gradient(circle,
            rgba(6, 75, 120, 0.14),
            transparent 68%);

    pointer-events: none;
}


.cta .section-container {
    position: relative;

    z-index: 1;

    max-width: 850px;
}


.cta .section-label {
    color: var(--brand-red);
}


.cta h2 {
    color: var(--brand-white);

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

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: 0.005em;

    margin-bottom: 1.5rem;
}


.cta p {
    max-width: 700px;

    margin: 0 auto 2.25rem;

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

    font-size: 1.1rem;

    line-height: 1.85;
}


.cta .button-primary {
    background-color: var(--brand-red);

    color: var(--brand-white);

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


.cta .button-primary:hover {
    background-color: var(--brand-white);

    color: var(--brand-black);

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

    box-shadow:
        0 10px 30px rgba(255, 255, 255, 0.08);
}


/* =========================================================
   19. TABLET RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    /* Hero becomes one column */

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

        min-height: auto;

        gap: 3.5rem;

        padding: 80px 0;
    }


    .hero::after {
        right: 50%;

        top: auto;

        bottom: 40px;

        transform: translateX(50%);
    }


    /* Services become two columns */

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


    /* Customer-first becomes one column */

    .customer-first-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* Core Values become one column */

    .home-values-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .home-value {
        min-height: auto;
    }


    /* Featured project stacks */

    .featured-project-content {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .project-text {
        max-width: 700px;
    }

}


/* =========================================================
   20. MOBILE RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 600px) {

    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        width: 90%;

        gap: 2.75rem;

        padding: 65px 0;
    }


    .hero h1 {
        font-size: 2.7rem;

        line-height: 1;
    }


    .hero h1::after {
        width: 65px;

        height: 3px;

        margin-top: 1.4rem;
    }


    .hero-description {
        font-size: 1rem;

        line-height: 1.8;
    }


    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }


    .hero-buttons .button {
        width: 100%;

        text-align: center;
    }


    .hero-image {
        min-height: 320px;
    }


    /* =====================================================
       COMPANY INTRODUCTION
       ===================================================== */

    .company-intro h2 {
        font-size: 2.25rem;
    }


    /* =====================================================
       SERVICES
       ===================================================== */

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

        margin-top: 2.5rem;
    }


    .service-card {
        min-height: auto;

        padding: 2rem;
    }


    /* =====================================================
       CUSTOMER-FIRST
       ===================================================== */

    .customer-first h2 {
        font-size: 2.6rem;
    }


    .customer-first-grid {
        gap: 35px;
    }


    .customer-first-content {
        padding-top: 0;
    }


    /* =====================================================
       CORE VALUES
       ===================================================== */

    .home-values-heading {
        margin-bottom: 2.75rem;
    }


    .home-values-heading h2 {
        font-size: 2.5rem;
    }


    .home-value {
        padding: 2rem 0;
    }


    .home-value h3 {
        font-size: 1.4rem;
    }


    /* =====================================================
       FEATURED PROJECT
       ===================================================== */

    .project-image {
        min-height: 300px;
    }


    .project-text {
        padding-left: 1.25rem;
    }


    .project-text h3 {
        font-size: 1.6rem;
    }


    /* =====================================================
       TESTIMONIAL
       ===================================================== */

    .testimonial-card {
        padding: 2rem;
    }


    .testimonial-card::before {
        right: 12px;

        font-size: 5rem;
    }


    /* =====================================================
       CALL TO ACTION
       ===================================================== */

    .cta {
        padding: 90px 0;
    }


    .cta h2 {
        font-size: 2.8rem;
    }


    .cta p {
        font-size: 1rem;
    }

}