.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.hero-video.is-ready { opacity:1; }
.hero-video-tools { position:absolute; z-index:3; top:20px; right:clamp(18px,5vw,72px); display:flex; align-items:center; gap:12px; font-size:12px; }
.hero-video-tools span { background:#101918c9; padding:8px 12px; border-radius:20px; }
.hero-video-toggle { min-height:44px; padding:10px 16px; border:1px solid #ffffff90; border-radius:24px; background:#101918dc; color:white; cursor:pointer; font:600 14px Arial,sans-serif; }
.hero-video-toggle:focus-visible { outline:3px solid #c8e45a; outline-offset:4px; }
.hero-video-tools:has(button[hidden]) { display:none; }
@media(prefers-reduced-motion:reduce) { .hero-video { display:none; transition:none; } .hero-video-tools { display:none; } }

.hero > img.hero-video-poster { object-position:center; transform:none; scale:1; animation:none; will-change:auto; }

/* Keep the opening background stationary while the hero scrolls away. */
.hero { clip-path: inset(0); }
.hero .hero-video,
.hero > img.hero-video-poster { position:fixed; inset:0; width:100%; height:100svh; object-fit:cover; transform:none; scale:1; }