/* 2. Hero – full-bleed media with scrim, Cinema ground */
.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--surface-300); }
.hero__media picture { display: block; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Background loop fades in over the poster once it is actually playing */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.hero__video.is-playing { opacity: 1; }

/* Scrim: dark at the bottom for the headline, and at the top for the transparent header */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--scrim) 0%, transparent 25%),
    linear-gradient(to top, var(--scrim) 0%, var(--scrim) 35%, transparent 100%);
}
.hero__content { padding-block: var(--space-10) var(--space-9); }
.hero__title { max-width: var(--measure); }
.hero__lead { max-width: var(--measure); margin-top: var(--space-5); }
.hero__actions { margin-top: var(--space-7); }

/* Before the reveal starts: hidden (only when motion is allowed and JS is running) */
.js-anim:not(.anim-ready) .hero__media,
.js-anim:not(.anim-ready) .hero__title,
.js-anim:not(.anim-ready) .hero__lead,
.js-anim:not(.anim-ready) .hero__actions,
.js-anim:not(.anim-ready) .site-header--overlay { opacity: 0; }

@media (max-width: 767px) {
  .hero { min-height: 82vh; }
  .hero__content { padding-block: var(--space-9) var(--space-8); }
  .hero__lead { font-size: var(--fs-body); line-height: var(--lh-body); }
  .hero__actions .btn { flex: 1 1 100%; }
}