.hero-video-section {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #000;
        }
        /* Mobile: solid header above, video shown at its native 16:9 aspect (no full-bleed) */
        @media (max-width: 768px) {
            #site-header { background: rgba(120,67,86,0.97) !important; backdrop-filter: blur(10px) !important; }
            .hero-video-section { margin-top: 90px !important; height: 56.25vw !important; min-height: 0 !important; max-height: 56.25vw !important; }
            #{{ $playerId }} { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }
        }
        /* Phone landscape — height-based detection (covers all phones
           inc. iPhone 14/15/16 Pro Max at 932px wide). Treat landscape
           as a wide-screen variant: section fills the viewport below
           the menu (using the desktop cover pattern), no letterbox bars,
           and jumplinks scroll naturally rather than sticky. */
        @media (orientation: landscape) and (max-height: 600px) {
            /* Force the compact "scrolled" header look — same size and
               logo treatment the user sees after scrolling on any other
               page. The site-header lives in layouts/app.blade.php as
               an inline <style> block; the real selectors are .site-header
               (the bar) and .site-logo__img (the logo). */
            .site-header {
                /* Solid #784356 (no rgba, no backdrop blur) so the header
                   matches the welcome curtain *exactly*. With rgba+blur the
                   3% transparency picked up the cream body bg behind it and
                   shifted the apparent colour — visible in landscape where
                   header and curtain sit side-by-side. */
                background: #784356 !important;
                backdrop-filter: none !important;
                height: 64px !important;
            }
            .site-logo__img { height: 34px !important; }
            .site-logo { top: 50% !important; }
            /* Welcome curtain content sits at the top of the section in
               landscape so the subhead doesn't get clipped by the short
               viewport. Sizes shrunk to fit the limited vertical space. */
            .hero-video-intro {
                justify-content: flex-start !important;
                padding: 22px 24px 0 !important;
            }
            .hero-video-intro h2 {
                font-size: clamp(28px, 5vw, 48px) !important;
                line-height: 1 !important;
            }
            .hero-video-intro p {
                font-size: clamp(14px, 1.9vw, 19px) !important;
            }
            .hero-video-intro > span:first-of-type {
                margin-bottom: 10px !important;
            }
            .hero-video-intro > span:nth-of-type(2) {
                margin: 14px auto !important;
            }
            /* Swap the phone number to the inline (scrolled-state) version
               so it sits next to the Book Direct button from the start —
               hides the absolutely-positioned variant that was floating
               over the video. */
            .header-phone-mobile { display: none !important; }
            .header-phone { display: inline !important; font-size: 0.85rem !important; }
            .hero-video-section {
                margin-top: 64px !important;
                height: calc(100vh - 64px) !important;
                min-height: 0 !important;
                max-height: calc(100vh - 64px) !important;
            }
            /* Let the iframe's inline cover-pattern style stay in effect
               (no width/height override here). Video center-crops to fill
               the section — no black bars on the squished aspect ratio. */
            /* Jumplinks: sticky behaviour eats half the visible viewport
               in landscape. Disable it here. */
            .editorial-jumplinks,
            .editorial-jumplinks__inner { position: static !important; top: auto !important; }
        }
        /* Block all pointer events on the iframe — YouTube can't see
           hover/tap, so no controls, no "Watch on YouTube" pill, no
           big-play overlay. Cross-origin means CSS can't reach inside
           the iframe; this is the only reliable suppression. */
        #{{ $playerId }} { pointer-events: none !important; }

        /* Cinema-curtain reveal: a single full-width burgundy panel
           (with welcome content baked in) covers the iframe while the
           video plays through 0→startTime, hiding the YouTube title
           overlay. At startTime a timer adds .is-open and the whole
           panel slides off to the right with an ease-in curve (slow
           start, accelerating exit) to match the video's own L→R
           slide transitions. */
        .hero-video-intro {
            position: absolute; inset: 0; z-index: 2;
            background: #784356;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            text-align: center; padding: 24px; color: #f5ead2;
            transform: translateX(0);
            /* IN transition (curtain returning between loops) — quick start,
               decelerates as it lands. Feels like the curtain catches and
               settles into place. */
            transition: transform 0.9s cubic-bezier(0.18, 0.65, 0.32, 1);
            will-change: transform;
            pointer-events: none;
        }
        .hero-video-intro.is-open {
            transform: translateX(100%);
            /* OUT transition — slow start, accelerating exit. Matches the
               video's own left→right slide cuts. */
            transition: transform 1.4s cubic-bezier(0.55, 0.05, 0.95, 0.55);
        }

.hero--page {
            --hero-h-desktop: {{ $heightDesktop }};
            --hero-h-tablet:  {{ $heightTablet }};
            --hero-h-mobile:  {{ $heightMobile }};
            min-height: var(--hero-h-desktop);
        }
        @media (max-width: 1024px) {
            .hero--page { min-height: var(--hero-h-tablet); }
        }
        @media (max-width: 768px) {
            .hero--page { min-height: var(--hero-h-mobile); }
        }
        /* Font size picker — hero grows gracefully with larger text */
        .fs-large  .hero--page { min-height: calc(var(--hero-h-desktop) + 40px); }
        .fs-xlarge .hero--page { min-height: calc(var(--hero-h-desktop) + 80px); }
        @media (max-width: 768px) {
            .fs-large  .hero--page { min-height: calc(var(--hero-h-mobile) + 30px); }
            .fs-xlarge .hero--page { min-height: calc(var(--hero-h-mobile) + 60px); }
        }