/* Mobile hero v7 (2026-09-24), layered on mobile-hero-v6 + mobile-header-v1.
   1. Film sits directly under the slim header (no dead band above it).
   2. The opening copy shows on load and hands over cleanly to the ending copy,
      so the first screen is never an empty panel with ghosted text.
   3. The copy follows scroll position (--progress), not decoded film frames (--ending),
      so a slow frame download can no longer leave the ending half-faded and untappable. */
@media(max-width:800px){
html{scroll-padding-top:60px}
body .hero-frame-sequence,body .film-stage video,body:not(.static-film) .film-stage video{top:calc(56px + env(safe-area-inset-top))!important}
body .film-mobile-intro,body .film-ending{top:calc(56px + env(safe-area-inset-top) + 56.25vw + 24px)!important;bottom:auto!important;left:7%!important;right:7%!important;width:auto!important;padding:0!important;background:none!important;border:0!important}
body .film-mobile-intro{display:block!important;visibility:visible!important;z-index:2;color:#252627;opacity:calc((.84 - var(--progress,0))/.06)!important;transform:none}
body .film-mobile-intro .overline{display:block;font-size:9px;margin:0 0 12px}
body .film-mobile-intro h2{font-size:clamp(30px,8.4vw,40px);line-height:1.06;letter-spacing:-.04em;margin:0}
body .film-mobile-intro>p:not(.overline){font-size:13px;line-height:1.5;margin:13px 0 19px;max-width:34ch}
body .film-mobile-intro .button{font-size:12px;min-height:46px;padding:12px 17px}
body .film-ending{opacity:calc((var(--progress,0) - .86)/.08)!important;transform:none!important}
body.static-film .film-mobile-intro{display:none!important}
body.static-film .film-ending{opacity:1!important}
body.static-film .film-stage{background-position:center calc(56px + env(safe-area-inset-top))!important}
}
@media(max-width:800px) and (max-height:690px){
body .film-mobile-intro,body .film-ending{top:calc(56px + env(safe-area-inset-top) + 56.25vw + 14px)!important}
body .film-mobile-intro .overline{display:none}
body .film-mobile-intro h2{font-size:27px}
body .film-mobile-intro>p:not(.overline){margin:10px 0 12px}
}
@media(max-width:800px) and (orientation:landscape){body .film-mobile-intro{display:none!important}body .film-ending{top:auto!important;bottom:60px!important;opacity:calc((var(--progress,0) - .8)/.12)!important}}
/* Lighter film (2026-09-24): 3 screen-heights of scroll instead of 5, paired with mobile-sequence-v7.js. */
@media(max-width:800px){body:not(.static-film) .film-story{height:300svh!important}}