/* Keep the existing image beneath the video for loading and playback failures. */
.hero { isolation: isolate; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  z-index: 0; opacity: 0; pointer-events: none;
}
.hero-video.is-visible { opacity: 1; }
.hero::before { z-index: 1; }
.hero-grid { z-index: 2; }
.hero-image-credit { z-index: 3; }
.hero-video-control {
  position: absolute; right: 22px; bottom: 32px; z-index: 3;
  border: 1px solid #ffffff80; border-radius: 999px;
  padding: 7px 12px; background: #201037d9; color: #fff;
  font: inherit; font-size: 11px; line-height: 1.5; cursor: pointer;
}
.hero-video-control[hidden] { display: none; }
.hero-video-control:hover { background: #442076; }
.hero-video-control:focus-visible { outline: 3px solid #d5ff55; outline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 821px) {
  .hero-video { object-position: 58% center; }
}
@media (max-width: 820px) {
  .hero-video { object-position: 68% center; }
}
@media (max-width: 620px) {
  .hero { background-position: 82% top; }
  .hero-video { object-position: 82% top; }
  .hero-video-control { right: 12px; padding: 6px 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video, .hero-video-control { display: none; }
}