/* A compact preview that expands in place, without affecting page layout. */
.hero-video {
  position: fixed;
  z-index: 65;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  width: 9rem;
  height: 6rem;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, .14);
  border-radius: 1.2rem;
  background: #111;
  box-shadow: 0 1rem 2.5rem rgba(17, 17, 17, .22);
  transform-origin: bottom right;
  transition: width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1), border-radius .45s ease, opacity .25s ease, transform .25s ease;
}
.hero-video.is-open { width: min(18rem, calc(100vw - 2rem), calc(56.25dvh - 3.94rem)); height: min(32rem, calc(177.7778vw - 3.56rem), calc(100dvh - 7rem)); border-radius: 1.35rem; }
.hero-video__media { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
.hero-video.is-open .hero-video__media { object-fit: contain; }
.hero-video__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .35rem; width: 100%; border: 0; color: white; background: rgba(0,0,0,.22); cursor: pointer; font: 700 .7rem/1.2 Manrope, sans-serif; }
.hero-video__play:hover { background: rgba(0,0,0,.36); }
.hero-video__play-icon { display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; border-radius: 50%; background: #b0ff80; box-shadow: 0 .25rem 1rem rgba(0,0,0,.2); }
.hero-video__play-icon::after { content: ''; display: block; margin-left: .18rem; border-top: .38rem solid transparent; border-bottom: .38rem solid transparent; border-left: .58rem solid #111; }
.hero-video__close { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(17,17,17,.78); font: 400 1.6rem/1 Manrope, sans-serif; cursor: pointer; }
.hero-video__close[hidden], .hero-video__play[hidden] { display: none; }
.hero-video :is(button):focus-visible { outline: 3px solid #b0ff80; outline-offset: -3px; }
@media (max-width: 900px) {
  .hero-video { width: 6.4rem; height: 4.7rem; right: max(.7rem, env(safe-area-inset-right)); bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); border-radius: .9rem; }
  .hero-video__play { font-size: .6rem; }
  .hero-video__play-icon { width: 2.1rem; }
  .hero-video.is-open { width: min(15.75rem, calc(100vw - 1.4rem), calc(56.25dvh - 3.66rem)); height: min(28rem, calc(177.7778vw - 2.49rem), calc(100dvh - 6.5rem)); }
}
@media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } }