/* Lightweight vector controls, consistent across desktop and mobile. */
.icon{display:inline-block;width:18px;height:18px;flex-shrink:0;vertical-align:middle;overflow:visible}
.icon-play{width:15px;height:15px}.icon-pause{display:none}
#film-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;white-space:nowrap}
#film-symbol{display:inline-flex;align-items:center;justify-content:center;width:16px;height:18px}
#film-toggle[data-playing=true] .icon-play{display:none}
#film-toggle[data-playing=true] .icon-pause{display:inline-block}
.menu-toggle{min-width:44px;min-height:44px}.icon-menu{width:21px;height:21px}
.menu-toggle[aria-expanded=true] .icon-menu{transform:rotate(90deg)}
.play-small .icon,.play-circle .icon{width:16px;height:16px}
.button>.icon,.button>span>.icon,.nav-button .icon,.text-link .icon{width:17px;height:17px}
.film-link{min-height:44px}#close-film,#film-close{min-height:44px;min-width:44px}
.footer a .icon,.site-footer a .icon,.phone .icon{width:14px;height:14px;margin-left:6px}
/* Use the hero's own dimensions, including mobile browser chrome, for video cover. */
.hero-film{container-type:size}
.hero-film iframe{width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);min-width:0;min-height:0}
@media(max-width:600px){
 .cinema-hero{height:calc(100svh - 45px);min-height:650px}
 .cinematic .hero-content{padding-top:clamp(155px,21svh,180px)}
 .cinematic .hero-content h1{font-size:clamp(56px,15.8vw,85px)}
 .cinematic .film-bottom{bottom:max(18px,env(safe-area-inset-bottom));gap:14px}
 .cinematic .film-chapters{gap:12px;flex:1;min-width:0}
 .cinematic #film-toggle{font-size:9px;padding:10px 12px;min-width:110px}
 .hero{min-height:700px}.hero-bottom{bottom:max(18px,env(safe-area-inset-bottom))}
 .film-meta button{font-size:9px;gap:9px}.hero-bottom .scroll-cue{min-height:44px}
 .hero-film{transition:opacity .3s}
}