/* ============================================================
   SECTION: Hero — headline + cinematic video (the centerpiece)
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(9.5rem, 20vh, 15rem);   /* air below the fixed header */
  padding-bottom: clamp(2.5rem, 5vh, 4.5rem);
  overflow: clip;
}

.hero__inner { flex: 0 0 auto; }

.hero__title {
  max-width: 20ch;
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tight);
}

/* Large cinematic media panel that fills the rest of the viewport */
.hero__media {
  position: relative;
  flex: 1 1 auto;
  margin-top: clamp(2.5rem, 6vh, 5.5rem);
  margin-inline: var(--gutter);
  min-height: clamp(320px, 52vh, 680px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__media-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,14,15,0.18), rgba(14,14,15,0) 28%);
  pointer-events: none;
}
.hero__video:not([data-ready]) { background: var(--color-bg-soft); }

@media (max-width: 640px) {
  .hero { padding-top: clamp(6.5rem, 18vh, 9rem); }
  .hero__title { font-size: clamp(2.1rem, 8vw, 3rem); }
  .hero__media { min-height: 52vh; }
}