.hero-video { opacity: 0; pointer-events: none; }
.hero-video.is-playing { opacity: 1; }
.hero-video-toggle { position: absolute; right: 20px; bottom: 22px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; }
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { background: rgba(0,0,0,.8); }
.hero-video-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }