/* The film is the primary action; the terrain is a quiet, static backdrop. */
.hero-film {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(30px, 4.5vw, 76px);
  height: auto;
  min-height: min(710px, calc(100svh - 100px));
  max-height: none;
  padding: 62px var(--gutter) 74px;
}
.hero-film .hero-content { width: 100%; max-width: 530px; pointer-events: auto; }
.hero-film .hero-kicker { font-size: 12px; line-height: 1.65; margin-bottom: 26px; }
.hero-film .hero-headline { font-size: clamp(38px, 3.65vw, 60px); line-height: 1.12; text-wrap: pretty; }
.hero-film .hero-content p { font-size: 14px; margin-top: 24px; }
.hero-film .hero-sales { display: inline-flex; margin-top: 30px; font-size: 13px; min-height: 44px; align-items: center; gap: 30px; }
.hero-film .terrain-wrap { width: 88%; height: 110%; inset: auto -18% -28% auto; opacity: .13; pointer-events: none; }
.hero-film .terrain-wrap:after { background: linear-gradient(90deg, var(--mineral), transparent 65%); }
.intro-film { position: relative; z-index: 2; min-width: 0; animation: hero-enter .9s .16s both; }
.film-stage { position: relative; aspect-ratio: 16 / 9; background: #071610; border-radius: 4px; box-shadow: 0 22px 65px -35px #123d3166; }
.film-launch { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: var(--paper); }
.film-launch:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #071610b8, #07161000 85%), linear-gradient(0deg, #071610c4, #07161000 65%); pointer-events: none; }
.film-poster { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.film-launch:hover .film-poster { transform: scale(1.025); }
.film-question { position: absolute; z-index: 1; top: 11%; left: 7%; font-size: clamp(23px, 2.55vw, 41px); line-height: 1.2; letter-spacing: -.045em; font-weight: 500; }
.film-action { position: absolute; z-index: 1; bottom: 10%; left: 7%; display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 650; }
.film-play-icon { display: grid; place-items: center; width: 58px; height: 58px; padding-left: 3px; background: var(--copper); border: 1px solid #ffffff24; border-radius: 50%; font-size: 19px; transition: background .2s, transform .2s; }
.film-play-icon .ui-icon { width: 1.2em; height: 1.2em; }
.film-launch:hover .film-play-icon { background: var(--copper-hover); transform: scale(1.06); }
.film-duration { display: block; margin-top: 5px; font-size: 11px; font-weight: 450; color: #dee7df; font-variant-numeric: tabular-nums; }
.intro-video { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.film-launch[hidden], .intro-video[hidden], .film-error[hidden] { display: none; }
.film-launch:focus-visible, .intro-video:focus-visible { outline: 3px solid var(--copper); outline-offset: 6px; }
.film-error { font-size: 12px; margin-top: 16px; line-height: 1.7; }
.film-error a { text-decoration: underline; text-underline-offset: 3px; }
@media(min-width:1680px) {
  .hero-film { padding-left: calc((100vw - 1680px)/2 + 88px); padding-right: calc((100vw - 1680px)/2 + 88px); }
}
@media(max-width:1100px) and (min-width:801px) {
  .hero-film { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 30px; }
  .hero-film .hero-headline { font-size: 39px; }
  .film-question { font-size: 27px; }
}
@media(max-width:800px) {
  .hero-film { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 36px var(--gutter) 42px; }
  .hero-film .hero-content { max-width: 640px; }
  .hero-film .hero-kicker { display: block; font-size: 11px; margin-bottom: 17px; }
  .hero-film .hero-kicker br { display: none; }
  .hero-film .hero-headline { font-size: clamp(35px, 6.2vw, 48px); max-width: 610px; line-height: 1.1; }
  .hero-film .hero-content p { font-size: 13px; margin-top: 18px; }
  .hero-film .hero-sales { margin-top: 12px; font-size: 12px; }
  .hero-film .terrain-wrap { width: 120%; height: 90%; right: -35%; bottom: -26%; opacity: .1; }
  .film-question { font-size: clamp(23px, 4.5vw, 36px); }
}
@media(max-width:560px) {
  .hero-film { padding-top: 25px; gap: 22px; }
  .hero-film .hero-kicker { font-size: 10px; margin-bottom: 16px; }
  .hero-film .hero-headline { font-size: clamp(32px, 8.6vw, 44px); }
  .hero-film .hero-content p { font-size: 12px; margin-top: 17px; }
  .hero-film .hero-sales { margin-top: 7px; }
  .film-play-icon { width: 45px; height: 45px; font-size: 15px; }
  .film-action { gap: 12px; font-size: 12px; }
  .film-duration { font-size: 10px; margin-top: 3px; }
}
@media(prefers-reduced-motion:reduce) {
  .intro-film { animation: none; }
  .film-poster, .film-play-icon { transition: none; }
  .film-launch:hover .film-poster, .film-launch:hover .film-play-icon { transform: none; }
}