/*
 * .hero-about — Main hero section for the About page.
 * Blue background with white text; uses flexbox to vertically center the
 * inner content block. Overflow is hidden to contain any animated children,
 * and box-sizing ensures padding doesn't push the section beyond its width.
 */
.hero-about {
    background-color: #1C48AA;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 70px 5%;
    overflow: hidden;
    box-sizing: border-box;
}

/*
 * .hero-about-inner — Content wrapper inside the hero section.
 * Caps the readable content width at 1200px while stretching to fill
 * available space on narrower viewports.
 */
.hero-about-inner {
    max-width: 1200px;
    width: 100%;
}

/*
 * .hero-about-headline — Large display headline inside the hero.
 * Uses a fluid clamp size that scales aggressively with viewport width,
 * compressed line-height and tight letter-spacing create a bold typographic
 * block. Text is uppercased and heavy-weight to match the brand voice.
 */
.hero-about-headline {
    font-size: clamp(4rem, 10vw, 10rem);
    font-weight: 900;
    line-height: 0.92;
    text-transform: uppercase;
    margin: 0 0 28px 0;
    letter-spacing: -3px;
}

/*
 * .headline-block, .headline-suffix — Inline headline segments forced onto
 * separate lines. display: block turns each span into its own stacked row so
 * the headline reads as a multi-line typographic stack.
 */
.headline-block,
.headline-suffix {
    display: block;
}

/*
 * .text-highlight — Animated accent colour for highlighted headline words.
 * Starts as yellow (#F8D648) to draw attention, then transitions smoothly to
 * white once the .settled class is added by JavaScript.
 */
.text-highlight {
    color: #F8D648;
    transition: color 0.5s ease;
}

/*
 * .text-highlight.settled — Final resting state for the highlight animation.
 * Overrides the yellow accent with white so the word blends into the rest of
 * the headline after the attention-grabbing phase completes.
 */
.text-highlight.settled {
    color: #ffffff;
}

/*
 * #dynamic-word — Container for the cycling/animated word in the headline.
 * Inline-block lets it sit inline with sibling text while still accepting
 * transform and opacity transitions used during word-swap animations.
 */
#dynamic-word {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/*
 * .word-out — Exit keyframe state for the word-swap animation.
 * Slides the current word upward and fades it out before the next word
 * slides in from below.
 */
.word-out {
    transform: translateY(-20px);
    opacity: 0;
}

/*
 * .word-in — Entry keyframe state for the word-swap animation.
 * Positions the incoming word below the baseline so it can slide up
 * into place while fading in after the previous word has exited.
 */
.word-in {
    transform: translateY(20px);
    opacity: 0;
}

/*
 * .reveal-element — Hidden state for scroll-triggered reveal elements.
 * Collapses height to zero and hides opacity so the element is invisible
 * before JavaScript adds .visible. The cubic-bezier on max-height produces
 * a smooth accordion-style expansion rather than a linear slide.
 */
.reveal-element {
    max-height: 0;
    opacity: 0;
    overflow: hidden;

    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

/*
 * .reveal-element.visible — Revealed state added by JavaScript on scroll.
 * Expands the element to a generous max-height and restores full opacity,
 * triggering the transition defined on the base class.
 */
.reveal-element.visible {
    max-height: 400px;
    opacity: 1;
}

/*
 * .hero-about-subtext — Supporting body copy below the hero headline.
 * Fluid font size keeps it readable across screen widths; relaxed line-height
 * and a top margin separate it visually from the large headline above.
 */
.hero-about-subtext {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 400;
    line-height: 1.5;
    margin-top: 20px;
}

/*
 * @media (prefers-reduced-motion: reduce) — Accessibility override for users
 * who have requested reduced motion in their OS settings. Disables all
 * transitions and transforms on animated hero elements and forces them into
 * their visible/settled end states so the page is fully readable without
 * any motion.
 */
@media (prefers-reduced-motion: reduce) {
    #dynamic-word {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .reveal-element {
        transition: none !important;
        max-height: 400px !important;
        opacity: 1 !important;
    }

    .text-highlight {
        transition: none !important;
        color: #ffffff !important;
    }
}

/*
 * .section-brand-story — Full-width section containing the brand story rows.
 * Light blue background creates a distinct zone that separates this section
 * from the white hero and cards sections. Generous vertical padding gives the
 * alternating story rows room to breathe.
 */
.section-brand-story {

    background-color: #d1e0f0;
    padding: 80px 5%;
}

/*
 * .story-container — Centred content wrapper for the brand story section.
 * Constrains the story rows to 1000px and centres them with auto margins,
 * keeping line lengths comfortable on large monitors.
 */
.story-container {
    max-width: 1000px;
    margin: 0 auto;
}

/*
 * .story-row — A single alternating text-and-image pair in the brand story.
 * Flexbox with space-between spreads the content and image columns to the
 * edges of the container. A bottom border in brand blue acts as a divider
 * between consecutive rows.
 */
.story-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0;

    border-bottom: 1px solid #1C48AA;
}

/*
 * .story-row:first-child — Removes extra top padding from the first row.
 * Keeps the top of the content flush with the section padding rather than
 * adding a double gap above the opening story entry.
 */
.story-row:first-child {
    padding-top: 0;
}

/*
 * .story-row:last-child — Cleans up the final row in the story list.
 * Removes the bottom padding and the divider border so the section ends
 * cleanly without a trailing line or extra whitespace.
 */
.story-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/*
 * .story-content — Text column within a story row.
 * Fixed at 45% width so it occupies roughly half the row and leaves room
 * for the accompanying image column on the other side.
 */
.story-content {
    width: 45%;
}

/*
 * .story-heading — Section heading inside a brand story text block.
 * Brand blue colour ties it to the BBOS palette; fluid clamped size scales
 * between 2 rem and 2.8 rem; heavy weight makes it stand out as a chapter
 * title within the story.
 */
.story-heading {
    color: #1C48AA;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 20px 0;
}

/*
 * .story-text — Body copy wrapper in a brand story text block.
 * Dark-grey colour and a comfortable line-height maximise readability for
 * multi-paragraph narrative content.
 */
.story-text {
    color: #444;
    font-size: 1.1rem;
    line-height: 1.6;
}

/*
 * .story-text p — Individual paragraphs within the story body copy.
 * Bottom margin creates consistent spacing between consecutive paragraphs
 * inside the text block.
 */
.story-text p {
    margin: 0 0 15px 0;
}

/*
 * .story-text p:last-child — Removes the bottom margin from the final
 * paragraph. Prevents double-spacing between the text block and whatever
 * follows it in the layout.
 */
.story-text p:last-child {
    margin: 0;
}

/*
 * .story-image — Image column within a story row.
 * Mirrors the 45% width of the text column so the two columns sit in
 * balanced proportion across the row.
 */
.story-image {
    width: 45%;
}

/*
 * .story-image img — The photograph inside a story image column.
 * Full-width with auto height and object-fit cover ensures the image fills
 * its container without distortion. Rounded corners and a subtle shadow
 * give it a card-like, elevated appearance.
 */
.story-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/*
 * @media (max-width: 900px) — Tablet/narrow-desktop layout for the brand
 * story section. Reduces section padding, collapses the side-by-side row
 * layout to a vertical stack, and stretches both the content and image
 * columns to full width so they read comfortably on smaller screens.
 */
@media (max-width: 900px) {
    .section-brand-story {
        padding: 60px 5%;
    }

    .story-row {
        flex-direction: column;
        padding: 40px 0;
    }

    .story-content {
        width: 100%;
        margin-bottom: 30px;
    }

    .story-image {
        width: 100%;
    }
}

/*
 * .section-feature-cards — White section housing the two feature cards.
 * Plain white background contrasts with the blue hero and light-blue story
 * sections. Vertical padding keeps the cards from sitting flush against the
 * section edges.
 */
.section-feature-cards {
    background-color: #ffffff;
    padding: 80px 5%;
}

/*
 * .cards-container — Grid wrapper that lays out the feature cards.
 * A two-column equal-width grid centres the pair of cards within a 1000px
 * max-width container, with a 40px gap providing clear separation between
 * cards.
 */
.cards-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/*
 * .feature-card — Individual feature card container.
 * A subtle border and rounded corners define the card boundary; overflow
 * hidden clips the top image to the card's border-radius. Flex column layout
 * lets the card content grow to fill the card height, enabling the button
 * to pin to the bottom.
 */
.feature-card {
    border: 1px solid #444;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/*
 * .card-image — Image area at the top of a feature card.
 * Explicitly resets border-radius to zero so the image fills the card's top
 * corners squarely, relying on the parent's overflow: hidden to clip it.
 */
.card-image {
    border-radius: 0;
}

/*
 * .card-image img — The photograph inside a feature card's image area.
 * Fixed height of 320px with object-fit cover and centred positioning crops
 * the image to a consistent banner-like ratio regardless of the source
 * image's natural dimensions.
 */
.card-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
}

/*
 * .card-content — Text and button area inside a feature card.
 * Padding frames the content within the card; flex column with flex-grow: 1
 * allows this area to expand and fill remaining card height, which pushes
 * the CTA button to the bottom of the card consistently across cards of
 * varying text length.
 */
.card-content {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

/*
 * .card-heading — Title inside a feature card's content area.
 * Brand blue colour and heavy weight make the card title stand out clearly
 * above the supporting copy. Fluid clamped size adapts the heading to the
 * card's current width.
 */
.card-heading {
    color: #1C48AA;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 900;
    margin: 0 0 10px 0;
}

/*
 * .card-subtext — Supporting description below the card heading.
 * Medium grey keeps the copy readable without competing with the blue
 * heading. Generous bottom margin creates a visual gap between the text
 * and the CTA button below.
 */
.card-subtext {
    color: #555;
    font-size: 1.1rem;
    margin: 0 0 30px 0;
    line-height: 1.4;
}

/*
 * .card-btn — Call-to-action button at the bottom of a feature card.
 * margin-top: auto pushes it to the very bottom of the flex card-content
 * area. Solid blue fill with white text and bold weight matches the primary
 * button style; a short background-color transition gives hover feedback.
 */
.card-btn {
    margin-top: auto;
    display: inline-block;
    background-color: #1C48AA;
    color: #ffffff;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

/*
 * .card-btn:hover — Hover state for the feature card CTA button.
 * Darkens the blue background slightly to give clear visual feedback that
 * the button is interactive without changing its size or shape.
 */
.card-btn:hover {
    background-color: #1C48AA;
}

/*
 * @media (max-width: 768px) — Mobile layout adjustments for the hero section.
 * Removes the fixed min-height, reduces padding, and left-aligns content so
 * the hero reads naturally on small phone screens. The headline font size is
 * reined in and the letter-spacing loosened to remain legible at mobile scale.
 */
@media (max-width: 768px) {
    .hero-about {
        min-height: auto;
        padding: 44px 24px;
        align-items: flex-start;
    }

    .hero-about-headline {
        font-size: clamp(3rem, 14vw, 5rem);
        letter-spacing: -1.5px;
        margin-bottom: 20px;
    }

    .hero-about-subtext {
        font-size: 1rem;
        margin-top: 20px;
    }
}

/*
 * @media (max-width: 768px) — Mobile layout adjustments for the feature cards
 * section. Reduces section padding, collapses the two-column card grid to a
 * single column, tightens the card image height, and reduces internal card
 * padding so each card fits comfortably within the phone viewport.
 */
@media (max-width: 768px) {
    .section-feature-cards {
        padding: 60px 5%;
    }

    .cards-container {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 100%;
    }

    .card-image img {
        height: 250px;
    }

    .card-content {
        padding: 24px 20px;
    }
}