.film-band {
  --film-h: min(80vh, 800px);
  --hero-pos: 50% 58%;
  --film-pos: 50% 58%;
  min-height: var(--film-h);
}
.film-band > video.film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--film-pos);
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease-editorial);
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 50%,
      rgba(0, 0, 0, 0.74) 68%,
      rgba(0, 0, 0, 0.34) 84%,
      transparent 96%);
  mask-image:
    linear-gradient(
      180deg,
      #000 50%,
      rgba(0, 0, 0, 0.74) 68%,
      rgba(0, 0, 0, 0.34) 84%,
      transparent 96%);
}
.film-band[data-state=run] > video.film {
  opacity: 1;
}
.film-band + .section {
  border-top: 0;
}
.film-band .page-head {
  padding-top: clamp(160px, 34vh, 360px);
  padding-bottom: clamp(18px, 3vw, 36px);
}
.film-band .page-head .section-head {
  margin-bottom: 0;
  max-width: 60ch;
}
.film-band .page-head h2 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 16ch;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.film-band .film-actions {
  margin: 22px 0 0;
}
.after-film-band {
  padding-top: clamp(28px, 4vw, 52px);
}
@media (max-width: 899px) {
  .film-band {
    --film-h: min(calc(100svh - var(--header-h, 65px)), 820px);
    --hero-pos: 50% 42%;
    --film-pos: 50% 42%;
  }
  .film-band .page-head {
    padding-top: clamp(300px, 52vh, 520px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .film-band > video.film {
    display: none;
  }
}
html.motion-off .film-band > video.film {
  opacity: 0;
}