.site-hero { isolation: isolate; }
.site-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #111; }
.site-hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.site-hero.has-frame .site-hero__video { opacity: 1; }
.site-hero.is-fallback .site-hero__media { background: transparent; }
.site-hero__media::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 45%); }
.site-hero__toggle { position: absolute; right: 16px; bottom: 16px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; cursor: pointer; }
.site-hero__toggle[hidden] { display: none; }
.site-hero__toggle svg { width: 18px; height: 18px; fill: currentColor; }
.site-hero__pause, .site-hero.is-playing .site-hero__play { display: none; }
.site-hero.is-playing .site-hero__pause { display: block; }
.site-hero__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #111; }