/* =========================================================
   Inner-page cinematic headers (footage / stills behind the title)
   ========================================================= */
.inner-hero.has-media {
  min-height: clamp(440px, 66vh, 720px);
  display: flex; align-items: flex-end;
  padding-bottom: 72px;
  background: #050e26;
  isolation: isolate;
}
.inner-hero.has-media .hero-media {
  position: absolute; inset: -3%;
  z-index: -2;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.inner-hero.has-media .hero-media img,
.inner-hero.has-media .hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Slow push-in on the stills so the header never sits dead still. */
.inner-hero.has-media .hero-media img { animation: hero-drift 22s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1.06); } to { transform: scale(1.0) translateY(-1%); } }

/* Legibility: dark from the text side and the bottom, subject left clear. */
.inner-hero.has-media::before {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4,10,28,.86) 0%, rgba(4,10,28,.55) 42%, rgba(4,10,28,.12) 75%),
    linear-gradient(0deg, rgba(4,10,28,.85) 0%, rgba(4,10,28,0) 55%),
    linear-gradient(180deg, rgba(4,10,28,.55) 0%, rgba(4,10,28,0) 28%);
}
.inner-hero.has-media::after { display: none; }
.inner-hero.has-media .container { z-index: 1; }
.inner-hero.has-media h1 { text-shadow: 0 2px 24px rgba(0,0,0,.35); }

@media (max-width: 760px) {
  .inner-hero.has-media { min-height: 78vh; min-height: 78svh; padding-bottom: 48px; }
  .inner-hero.has-media::before {
    background: linear-gradient(0deg, rgba(4,10,28,.92) 0%, rgba(4,10,28,.55) 45%, rgba(4,10,28,.2) 70%, rgba(4,10,28,.55) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .inner-hero.has-media .hero-media img { animation: none; }
  .inner-hero.has-media .hero-media { transition: none; }
}