/* Hero v2 video over the existing poster image. The box size comes from the
   existing `.hero-media{aspect-ratio:1050/700}` → no layout shift. */
.hero-media { position: relative; }
.hero-media .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; border-radius: calc(16 * var(--u));
  background: transparent; opacity: 0; transition: opacity 300ms ease;
}
.hero-media .hero-video.is-shown { opacity: 1; }

.hero-motion-toggle {
  position: absolute; left: calc(18 * var(--u)); bottom: calc(18 * var(--u)); z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 170, 80, .7);
  background: rgba(11, 14, 18, .72); color: var(--orange); cursor: pointer;
  box-shadow: 0 0 7px #ff913b55; transition: filter 200ms ease, box-shadow 200ms ease;
}
.hero-motion-toggle:hover, .hero-motion-toggle:focus-visible { filter: brightness(1.15); box-shadow: 0 0 10px #ff913ba6, 0 0 24px #ff520855; }
.hero-motion-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.hero-motion-toggle .hm-play { display: none; }
.hero-motion-toggle[aria-pressed="false"] .hm-play { display: block; }
.hero-motion-toggle[aria-pressed="false"] .hm-pause { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-video { transition: none; }
}