/* =========================================================
   OUR STORY PAGE
   Legacy AV Solutions

   Page-specific styles for the Our Story page.

   Shared elements such as navigation, footer, buttons,
   global colors, and site-wide variables are handled
   by style.css.

   DESIGN DIRECTION:
   - Dark industrial / professional AV aesthetic
   - Warm off-white sections for contrast
   - Steel-blue / navy backgrounds
   - Legacy red used as a controlled accent
   - Blue section dividers
   - Stronger Core Values presentation
   - Brighter body text for improved readability
   ========================================================= */


/* =========================================================
   1. STORY HERO
   ========================================================= */

/*
   The Our Story hero stays text-focused rather than copying
   the two-column layout used on the Home page.

   A subtle blue radial glow gives the black background
   more depth and connects it visually to the Home page.
*/

.story-hero {
    position: relative;

    min-height: 70vh;

    display: flex;

    align-items: center;

    padding: 120px 8%;

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

    color: var(--brand-white);

    overflow: hidden;
}


/*
   Adds a very subtle red glow on the opposite side of
   the hero.

   This keeps the red/blue branding understated rather
   than making the page look overtly patriotic.
*/

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

    position: absolute;

    width: 420px;

    height: 420px;

    left: -220px;

    bottom: -240px;

    border-radius: 50%;

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

    pointer-events: none;
}


.story-hero-content {
    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/*
   Large opening statement establishes the primary
   visual hierarchy for the Our Story page.
*/

.story-hero h1 {
    max-width: 950px;

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

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: 0.005em;

    margin-bottom: 30px;

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


/*
   Short red line beneath the main hero heading.

   This mirrors the controlled red accents used
   throughout the redesigned Home page.
*/

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

    display: block;

    width: 95px;

    height: 4px;

    margin-top: 28px;

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


/*
   Brighter off-white text replaces the more muted gray
   previously used here.

   This keeps the description secondary to the heading
   while making it much easier to read.
*/

.story-hero-text {
    max-width: 760px;

    font-size: 1.2rem;

    line-height: 1.8;

    color: #e2e2df;
}


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

/*
   Major sections use the same strong blue divider language
   established on the Home page.

   Later, selected dividers will be replaced by the special
   red / white / blue Legacy logo divider.
*/

.story-beginning,
.story-mission,
.story-customer,
.core-values {
    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.

   These dividers are reserved for important transitions
   so the branded treatment does not become repetitive.
*/

.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 the lines stop visually on either side
   of the logo.
*/

.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.
*/

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

    height: auto;

    display: block;
}


/* =========================================================
   3. SECTION LABELS
   ========================================================= */

/*
   Small uppercase red labels provide a consistent hierarchy
   across both light and dark sections.
*/

.story-hero .section-label,
.story-beginning .section-label,
.story-mission .section-label,
.story-growth .section-label,
.story-customer .section-label,
.core-values .section-label,
.story-closing .section-label {
    margin-bottom: 20px;

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

    font-size: 0.85rem;

    font-weight: 800;

    letter-spacing: 0.2em;

    text-transform: uppercase;

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


/* =========================================================
   4. SHARED TWO-COLUMN STORY LAYOUT
   ========================================================= */

.story-content-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}


/*
   Shared heading treatment for the two image/text sections.
*/

.story-content h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: 0.005em;

    margin-bottom: 30px;
}


.story-content h2::after {
    content: "";

    display: block;

    width: 72px;

    height: 4px;

    margin-top: 24px;

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


/*
   Shared paragraph spacing.

   Individual sections below determine whether the text
   should be dark or light based on their background.
*/

.story-content p {
    margin-bottom: 22px;

    font-size: 1.05rem;

    line-height: 1.85;
}


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


/* =========================================================
   5. OUR BEGINNING
   ========================================================= */

/*
   Warm off-white creates a strong contrast immediately
   after the dark hero.

   This is intentionally not pure white.
*/

.story-beginning {
    padding: 120px 8%;

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

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


.story-beginning .story-content h2 {
    color: var(--color-light-section-text);
}


.story-beginning .story-content p {
    color: var(--color-light-section-text-secondary);
}


/* =========================================================
   6. STORY IMAGES
   ========================================================= */

/*
   Real Legacy AV Solutions photography is used throughout
   the Our Story page.

   Each image uses the same container treatment so the
   photography remains visually consistent across sections.
*/

.story-image {
    position: relative;

    width: 100%;

    height: 440px;

    overflow: hidden;

    border: 1px solid #30343a;

    border-radius: 2px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.16);
}


/*
   The photograph fills the image area while maintaining
   its original proportions.

   object-fit: cover prevents stretching while allowing
   the image to crop naturally when necessary.
*/

.story-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


/*
   Adds the same controlled Legacy-red accent used
   throughout the rest of the website.
*/

.story-image::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

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

    pointer-events: none;
}


/* =========================================================
   7. OUR FOUNDATION
   ========================================================= */

/*
   Foundation becomes the first major dark interior section.

   This gives the page more personality than the previous
   sequence of multiple light sections.
*/

.story-mission {
    position: relative;

    padding: 120px 8%;

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

    color: var(--brand-white);

    overflow: hidden;
}


/*
   Text-only sections remain slightly narrower so longer
   paragraphs are comfortable to read.
*/

.story-text-container {
    position: relative;

    z-index: 1;

    max-width: 900px;

    margin: 0 auto;
}


.story-text-container h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: 0.005em;

    margin-bottom: 35px;
}


.story-text-container h2::after {
    content: "";

    display: block;

    width: 72px;

    height: 4px;

    margin-top: 24px;

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


.story-text-container p {
    margin-bottom: 24px;

    font-size: 1.08rem;

    line-height: 1.9;
}


.story-text-container p:last-child {
    margin-bottom: 0;
}


/*
   Brighter paragraph text improves readability against
   the dark charcoal Foundation background.
*/

.story-mission .story-text-container h2 {
    color: var(--brand-white);
}


.story-mission .story-text-container p {
    color: #e2e2df;
}


/* =========================================================
   8. OUR GROWTH
   ========================================================= */

/*
   Steel/navy treatment gives this section a distinct
   identity while keeping it within the same palette
   and complementing the branded Legacy dividers.
*/

.story-growth {
    padding: 120px 8%;

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

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


/*
   Desktop keeps the image on the left and story text
   on the right, preserving the existing visual variation.
*/

.story-content-grid-reverse {
    grid-template-columns: 1fr 1fr;
}


.story-growth .story-content h2 {
    color: var(--brand-white);
}


.story-growth .story-content p {
    color: #e2e2df;
}




/* =========================================================
   9. YOUR GOALS COME FIRST
   ========================================================= */

/*
   Returning to warm off-white after the steel/navy Growth
   section keeps neighboring sections visually distinct.
*/

.story-customer {
    padding: 120px 8%;

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

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


.story-customer .story-text-container h2 {
    color: var(--color-light-section-text);
}


.story-customer .story-text-container p {
    color: var(--color-light-section-text-secondary);
}


/* =========================================================
   10. CORE VALUES
   ========================================================= */

/*
   Core Values is intentionally one of the strongest visual
   sections on the page.

   Rather than generic floating cards, the values are treated
   more like company standards / principles.

   The near-black background and subtle blue lighting help
   differentiate it from the story sections above.
*/

.core-values {
    position: relative;

    padding: 130px 8%;

    background:
        radial-gradient(circle at 90% 15%,
            rgba(6, 75, 120, 0.20) 0%,
            transparent 38%),
        radial-gradient(circle at 5% 90%,
            rgba(170, 50, 50, 0.09) 0%,
            transparent 32%),
        var(--color-dark);

    color: var(--brand-white);

    overflow: hidden;
}


.core-values-container {
    position: relative;

    z-index: 1;

    max-width: 1200px;

    margin: 0 auto;
}


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

    margin-bottom: 75px;
}


.core-values-heading h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: 0.005em;

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


.core-values-heading h2::after {
    content: "";

    display: block;

    width: 90px;

    height: 4px;

    margin-top: 26px;

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


/* =========================================================
   11. CORE VALUES GRID
   ========================================================= */

/*
   Two values per row on desktop.

   Instead of separate boxed cards, the values are divided
   using structural lines. This makes the section feel more
   like a standards wall or company manifesto.
*/

.core-values-grid {
    display: grid;

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

    column-gap: 60px;

    row-gap: 0;

    border-top: 1px solid rgba(255, 255, 255, 0.16);
}


/* =========================================================
   12. CORE VALUE ITEMS
   ========================================================= */

.value-card {
    position: relative;

    min-height: 245px;

    padding: 42px 20px 42px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.16);

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


/*
   Adds a subtle vertical division between the two columns.
*/

.value-card:nth-child(even) {
    padding-left: 30px;

    border-left: 1px solid rgba(255, 255, 255, 0.10);
}


/*
   Larger red numbers make the ten values feel more like
   clearly defined company standards.
*/

.value-number {
    display: block;

    margin-bottom: 18px;

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

    font-size: 1.25rem;

    font-weight: 800;

    letter-spacing: 0.12em;

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


.value-card h3 {
    max-width: 500px;

    margin-bottom: 16px;

    font-size: 1.55rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.005em;

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


/*
   Core Value descriptions use the brighter body color.

   The headings and red numbers still provide enough
   hierarchy that the descriptions do not need to be muted.
*/

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

    font-size: 1rem;

    line-height: 1.8;

    color: #e2e2df;
}


/*
   Hover interaction is intentionally subtle.

   A faint blue background and red line reinforce the
   Legacy palette without turning the values into buttons.
*/

.value-card:hover {
    transform: translateY(-3px);

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

    background:
        linear-gradient(90deg,
            rgba(6, 75, 120, 0.09),
            transparent 75%);
}


/* =========================================================
   13. CLOSING / CALL TO ACTION
   ========================================================= */

/*
   The closing section uses a richer Legacy navy.

   This gives the page a strong conclusion without repeating
   the exact near-black Core Values background.
*/

.story-closing {
    position: relative;

    padding: 120px 8%;

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

    color: var(--brand-white);

    overflow: hidden;
}


/*
   Subtle red and blue lighting gives the CTA more depth.
*/

.story-closing::before {
    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    left: -180px;

    top: -200px;

    border-radius: 50%;

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

    pointer-events: none;
}


.story-closing::after {
    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -200px;

    bottom: -250px;

    border-radius: 50%;

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

    pointer-events: none;
}


.story-closing-content {
    position: relative;

    z-index: 1;

    max-width: 900px;

    margin: 0 auto;
}


.story-closing-content h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: 0.005em;

    margin-bottom: 35px;

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


.story-closing-content h2::after {
    content: "";

    display: block;

    width: 72px;

    height: 4px;

    margin-top: 24px;

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


/*
   The CTA contains a fair amount of important information,
   so the brighter body text keeps it readable against navy.
*/

.story-closing-content p {
    margin-bottom: 22px;

    font-size: 1.08rem;

    line-height: 1.9;

    color: #e2e2df;
}


/* =========================================================
   14. CONTACT BUTTON
   ========================================================= */

/*
   Sharp corners and uppercase styling keep the CTA aligned
   with the stronger industrial direction established on Home.
*/

.story-contact-button {
    display: inline-block;

    margin-top: 20px;

    padding: 15px 32px;

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

    color: var(--brand-white);

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

    border-radius: 2px;

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-decoration: none;

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


.story-contact-button:hover {
    transform: translateY(-2px);

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

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


/* =========================================================
   15. TABLET RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    /*
       The hero no longer requires the large desktop
       minimum height.
    */

    .story-hero {
        min-height: auto;

        padding-top: 100px;

        padding-bottom: 100px;
    }


    /*
       Two-column story sections collapse into one column.
    */

    .story-content-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    /*
       Growth currently places the image before the text
       in the HTML.

       On smaller screens, text appears first so visitors
       encounter the story before the photograph.
    */

    .story-content-grid-reverse .story-content {
        order: 1;
    }


    .story-content-grid-reverse .story-image {
        order: 2;
    }


    /*
       Core Values collapse to a single column.

       Remove the desktop vertical dividing line because
       there is no longer a second column.
    */

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

        column-gap: 0;
    }


    .value-card {
        min-height: auto;

        padding-left: 0;

        padding-right: 0;
    }


    .value-card:nth-child(even) {
        padding-left: 0;

        border-left: none;
    }

}


/* =========================================================
   16. MOBILE RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 600px) {

    /*
       Reduce horizontal and vertical spacing throughout
       the page on phones.
    */

    .story-hero {
        padding: 80px 6%;
    }


    .story-beginning,
    .story-mission,
    .story-growth,
    .story-customer,
    .core-values,
    .story-closing {
        padding: 80px 6%;
    }


    .story-hero-text {
        font-size: 1.05rem;

        line-height: 1.75;
    }


    .story-content p,
    .story-text-container p,
    .story-closing-content p {
        font-size: 1rem;

        line-height: 1.8;
    }


    /*
   Story images become shorter on phones so they
   do not dominate the screen.
    */

    .story-image {
        height: 300px;
    }

    .story-image {
        height: 300px;
    }


    .core-values-heading {
        margin-bottom: 50px;
    }


    .value-card {
        padding-top: 32px;

        padding-bottom: 32px;
    }


    .value-number {
        font-size: 1.05rem;
    }


    .value-card h3 {
        font-size: 1.35rem;
    }


    /*
       Contact button becomes full-width on small screens
       for easier tapping.
    */

    .story-contact-button {
        width: 100%;

        text-align: center;
    }

    .story-hero h1 {
        line-height: 1.03;

        letter-spacing: 0.005em;
    }

}