/* Scoped opt-in hero. Stacked layouts keep their existing autoplay treatment. */
html[data-hero-film] body {
  background: linear-gradient(180deg, #f4f6fa 0%, #f6f8fb 48%, #fff 100%);
}
html[data-hero-film] .hero--film {
  width: 100%; height: auto; min-height: 100svh; padding: 0; background: none;
}
.hero--film::before { display: none; }
.hero--film .hero-pin {
  position: relative; top: auto;
  width: min(1480px, calc(100% - 144px));
  min-height: 100svh; height: auto;
  margin-inline: auto; padding: 116px 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px; align-items: center;
}
.hero--film .hero-copy { min-width: 0; transform: none; }
.hero--film .hero-title { opacity: 1; transform: none; filter: none; }
.hero--film .hero-title span { white-space: normal; }
.hero--film .hero-title__lead { font-size: 52px; line-height: 1.08; }
.hero--film .hero-title__tail { font-size: 36px; line-height: 1.15; }
.hero--film .hero-subtitle { font-size: 18px; }
.hero--film .hero-proof { font-size: 16px; }
.hero-film-track { min-width: 0; }
.hero--film .hero-film {
  position: relative; width: 100%;
  max-width: calc(100svh - 152px);
  min-height: 0; aspect-ratio: 1; margin-inline: auto;
  transform: none; transition: none; isolation: isolate;
  mask-image: linear-gradient(transparent, #000 2%, #000 98%, transparent),
              linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
  mask-composite: intersect;
}
.hero-film__poster, .hero-film__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.hero-film__video { opacity: 0; }
.hero-film.is-film-ready .hero-film__video { opacity: 1; }
.hero-film.is-film-ready .hero-film__poster { visibility: hidden; }
@media (min-width: 1600px) {
  .hero--film .hero-title__lead { font-size: 64px; }
  .hero--film .hero-title__tail { font-size: 42px; }
  .hero--film .hero-subtitle { font-size: 20px; }
}
@media (max-width: 1300px), (max-height: 739px) {
  .hero--film .hero-pin {
    width: min(840px, calc(100% - 80px));
    grid-template-columns: minmax(0, 1fr);
    gap: 36px; padding: 140px 0 32px;
  }
  .hero--film .hero-copy { min-height: 0; }
  .hero--film .hero-film { max-width: 700px; }
}
@media (max-width: 820px) {
  .hero--film .hero-pin { width: 100%; padding: 124px 0 0; gap: 24px; }
  .hero--film .hero-copy { padding-inline: 20px; min-height: 0; }
  .hero--film .hero-title__lead { font-size: 44px; }
  .hero--film .hero-title__tail { font-size: 31px; }
  .hero--film .hero-subtitle { font-size: 16px; }
  .hero--film .hero-proof { font-size: 15px; }
  .hero--film .hero-film {
    width: 100%; height: 100svh; max-width: none; aspect-ratio: auto;
  }
  .hero-film__poster, .hero-film__video {
    top: 88px; bottom: 12px; height: calc(100% - 100px);
  }
}
@media (max-width: 360px) {
  .hero--film .hero-title__lead { font-size: 38px; }
  .hero--film .hero-title__tail { font-size: 28px; }
}

/* Desktop scroll chapter. No wheel interception or forced steps. */
html[data-hero-film] .hero--film-scroll {
  height: calc(100svh + var(--film-distance, 1600px));
  overflow: visible;
}
.hero--film-scroll .hero-pin {
  position: sticky; top: 0; height: 100svh;
}
.hero--film-scroll .hero-copy { position: relative; }
.hero--film-scroll .hero-title,
.hero--film-scroll .hero-subtitle {
  opacity: 0; transition: none; pointer-events: none;
}
.hero--film-scroll .hero-proof { opacity: 0; transition: none; }
.hero-film-words {
  position: absolute; inset: 0; pointer-events: none;
}
.hero-film-words > span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  transform-origin: 0 0; letter-spacing: 0;
}

/* Compact landscape: same narrative, with a tighter two-column composition. */
@media (min-width: 1180px) and (max-width: 1300px) and (min-height: 740px) {
  .hero--film-scroll .hero-pin {
    width: min(1180px, calc(100% - 64px));
    padding: 104px 0 24px;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: 24px;
    align-items: center;
  }
  .hero--film-scroll .hero-title__lead { font-size: 46px; }
  .hero--film-scroll .hero-title__tail { font-size: 32px; }
  .hero--film-scroll .hero-subtitle { font-size: 17px; }
  .hero--film-scroll .hero-proof { font-size: 15px; }
  .hero--film-scroll .hero-actions { margin-top: 24px; }
  .hero--film-scroll .hero-film {
    width: 100%; max-width: calc(100svh - 132px);
  }
}