/* ==========================================================================
   Mobile Banner
   ========================================================================== */

.banner-mobile {
    display: none;
}

@media (max-width: 768px) {
    /* Reorders the video-scrub clip below the mobile banner without
       duplicating markup — desktop keeps normal source order since
       .hero-stack is only display:flex inside this media query. */
    .hero-stack {
        display: flex;
        flex-direction: column;
    }

    .banner-mobile {
        order: 1;
        display: block;
        position: relative;
        min-width: 100%;
        background: var(--Blue, #001E5A);
        background-image: url('data:image/svg+xml,%3Csvg width="240" height="470" viewBox="0 0 240 470" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M352.533 273.894L165.922 470H0.0106156L223.479 235.112L0 0H165.985L352.522 196.318C373.159 218.041 373.159 252.172 352.522 273.894H352.533Z" fill="%23193C78"/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: right center;
        /* background-size: auto 100%; */
        padding: 2rem 1.5rem;
        overflow: hidden;
    }

    /* `order` lives on the wrapper, not on .banner-transition itself — GSAP's
       ScrollTrigger pin swaps .banner-transition for an unclassed pin-spacer
       once pinning engages, and that spacer would fall back to the default
       order, jumping the video back above the mobile banner mid-scrub. */
    .hero-video {
        order: 2;
    }

    /* The desktop hero is a pinned 100vh crop; on mobile the clip sits in
       normal flow below the banner, so it's sized off the video's own
       aspect ratio (1500x566) instead of being force-cropped to fill the
       viewport height. */
    .banner-transition {
        /* Sized to its content (video + scene text) with a little breathing
           room. The pin now holds the whole hero stack (blue banner + this
           section) with its bottom at the bottom of the screen, so the held
           screen is always filled - no big white areas above and below. */
        height: auto;
        padding: 1.5rem 0 2rem;
        background: #fff;
    }

    /* The hero stack is at least one screen tall (under the header); any
       extra height goes to the blue banner, whose content stays centred. */
    .hero-stack {
        min-height: calc(100vh - var(--mobile-header-height, 3.875rem));
        min-height: calc(100svh - var(--mobile-header-height, 3.875rem));
    }

    .hero-stack .banner-mobile {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .why-beexact-reveal {
        position: static;
        width: 100%;
        height: auto;
    }

    /* The desktop arrow-reveal/mask is skipped on mobile (banner-transition.js
       disables the clip-path there); the clip sits in normal flow, unmasked. */
    .why-beexact-clip {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        clip-path: none;
        -webkit-clip-path: none;
        /* Desktop starts this at opacity: 0 (see banner-desktop.css) since
           its clip-path window needs to stay hidden until scroll reveals it;
           mobile has no mask phase at all, so the video should just be
           visible immediately. */
        opacity: 1;
    }

    /* Desktop reserves a fixed 65% share of .why-beexact-clip for this;
       mobile has no such split (no .banner-scrub-text overlay to share
       space with in the pinned sense), so it just sizes to the video. */
    .why-beexact-video-area {
        flex: 0 0 auto;
    }

    .video-scrub {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        display: block;
    }

    /* Desktop overlays this on the bottom 35% of the pinned video; mobile has
       no pin/mask to overlay, so it sits in normal flow right below the
       video instead (banner-transition.js sets its opacity to 1 rather than
       fading it in with the arrow-mask removal). */
    .banner-scrub-text {
        position: static;
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        gap: 1.25rem;
        padding: 1.5rem 1.25rem 0;
    }

    .banner-scrub-text__track {
        max-width: 100%;
        height: auto;
        /* Reserve room for the longest scene text so the page below doesn't
           jump up and down every time the scene changes. */
        min-height: 8.5rem;
    }

    .banner-scrub-text__title {
        font-size: 1.5rem;
    }

    .banner-scrub-text__body {
        font-size: 0.9375rem;
        line-height: 1.35rem;
    }

    .banner-mobile-content {
        position: relative;
        z-index: 1;
        max-width: 100%;
    }

    .banner-mobile-subtitle {
        color: #8AA2CC;
        font-family: Swiza, sans-serif;
        font-size: 1.3125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.75rem;
        margin: 0 0 1.5rem 0;
    }

    .banner-mobile-title {
        margin: 0 0 1.5rem 0;
    }

    .banner-mobile-title-orange {
        color: #FF7D00;
        font-family: Swiza, sans-serif;
        font-size: 2.8125rem;
        font-style: normal;
        font-weight: 600;
        line-height: 3.5rem;
        display: block;
    }

    .banner-mobile-title-white {
        color: #FFF;
        font-family: Swiza, sans-serif;
        font-size: 2.8125rem;
        font-style: normal;
        font-weight: 600;
        line-height: 3.5rem;
        display: block;
    }

    .banner-mobile-description {
        color: #FFF;
        font-family: Swiza, sans-serif;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.375rem;
        margin: 0 0 2rem 0;
    }

        .banner-mobile-buttons {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        align-items: center;
        width: 100%;
        max-width: 85%;
        flex-wrap: wrap;
    }

    .banner-mobile-btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-family: Swiza, sans-serif;
        font-size: 0.9375rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.4rem;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
        flex: 0 0 auto;
    }

    .banner-mobile-btn-primary {
        border-radius: 0.5rem;
        background: #FF7D00;
        padding: 0.875rem 1.5rem;
        color: #FFF;
        border: none;
    }

    .banner-mobile-btn-primary:hover {
        background: #e67000;
    }

    .banner-mobile-btn-secondary {
        border-radius: 0.5rem;
        border: 1.5px solid #FFF;
        background: transparent;
        padding: 0.875rem 1.5rem;
        color: #FFF;
        font-weight: 500;
    }

    .banner-mobile-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
    }

}



/* Extra small screens (phones under 375px) */
@media (max-width: 374px) {
    .banner-mobile {
        padding: 2rem 1.25rem;
        min-height: auto;
    }

    .banner-mobile-subtitle {
        font-size: 0.9375rem;
        line-height: 1.3rem;
        max-width: 90%;
    }

    .banner-mobile-title {
        max-width: 90%;
    }

    .banner-mobile-title-orange,
    .banner-mobile-title-white {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .banner-mobile-description {
        font-size: 0.9375rem;
        line-height: 1.4rem;
        max-width: 90%;
    }

    .banner-mobile-buttons {
        max-width: 90%;
        gap: 0.5rem;
    }

    .banner-mobile-btn {
        font-size: 0.875rem;
        padding: 0.75rem 1.25rem;
    }
}




/* Mobile scroll-scrub: frames are drawn onto a canvas laid exactly over the
   video (iOS doesn't repaint a seeked <video> inside the pinned section).
   The video itself stays in place underneath - it keeps the layout size and
   shows its poster until the first frame has been drawn. */
@media (max-width: 768px) {
    .why-beexact-video-area.has-scrub-canvas {
        position: relative;
    }

    .video-scrub-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 0;
        pointer-events: none;
    }

    .why-beexact-video-area.is-canvas-ready .video-scrub-canvas {
        opacity: 1;
    }

    .why-beexact-video-area.is-canvas-ready .video-scrub {
        opacity: 0;
    }
}