/* Fixed layered hero layout. */
[data-hero="overlay"] .hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  height: calc(100svh - 116px);
  max-height: 920px;
}
[data-hero="overlay"] .hero .cinema {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
}
[data-hero="overlay"] .hero .film-poster,
[data-hero="overlay"] .hero #product-film { object-position: center; }
/* Readability scrims over the original film; no recolouring or generated media. */
[data-hero="overlay"] .cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .7), rgb(255 255 255 / .46) 38%, transparent 63%, rgb(255 255 255 / .94));
  pointer-events: none;
}
[data-hero="overlay"] .hero-copy {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 12px 46px;
  pointer-events: none;
}
[data-hero="overlay"] .hero h1 { font-size: clamp(76px, 7.6vw, 110px); line-height: .99; }
[data-hero="overlay"] .hero .eyebrow { margin-bottom: 16px; }
[data-hero="overlay"] .hero-description { margin-block: 0 22px; }
[data-hero="overlay"] .hero-copy a { pointer-events: auto; }
[data-hero="overlay"] .hero .text-link { color: #004d99; }

@media (max-width: 1100px) {
  [data-hero="overlay"] .hero { --film-height: clamp(250px, 80vw, 600px); height: auto; min-height: 0; max-height: none; }
  [data-hero="overlay"] .hero .cinema { height: var(--film-height); }
  [data-hero="overlay"] .hero .cinema::after {
    background: linear-gradient(180deg, rgb(255 255 255 / .7), rgb(255 255 255 / .46) 46%, transparent 72%);
  }
  [data-hero="overlay"] .hero-copy { display: block; padding: 0; width: 100%; }
  [data-hero="overlay"] .hero-heading { height: var(--film-height); padding: 12px 24px 0; }
  [data-hero="overlay"] .hero .eyebrow { font-size: 14px; margin-bottom: 13px; }
  [data-hero="overlay"] .hero h1 { font-size: clamp(39px, 9.5vw, 84px); line-height: 1; }
  [data-hero="overlay"] .hero-details { padding: 29px 24px 34px; background: var(--white); }
  [data-hero="overlay"] .hero-description { margin-block: 0 20px; font-size: 18px; }
  [data-hero="overlay"] .hero .text-link { color: var(--blue); }
}
@media (max-width: 767px) {
}
@media (max-width: 374px) {
  [data-hero="overlay"] .hero-heading { padding-inline: 18px; }
  [data-hero="overlay"] .hero h1 { font-size: 36px; }
  [data-hero="overlay"] .hero-details { padding-inline: 18px; }
}