/* Preserve the existing hero geometry at both responsive breakpoints. */
.hero-parallax > .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.hero-parallax > .hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-parallax > .hero-video { display: none; transition: none; }
}

/* Dedicated 6:13 phone edit fills the available iPhone viewport. */
@media (max-width: 750px) {
  .hero { display: block; height: 100svh; min-height: 560px; max-height: none; padding: 0; }
  .hero .hero-parallax { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none !important; }
  .hero .hero-poster-picture { position: absolute; inset: 0; }
  .hero .hero-image, .hero-parallax > .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
  .hero .hero-shade { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, #080c0a5c, transparent 24%, transparent 44%, #080c0a66 63%, #080c0ae8); pointer-events: none; }
  .hero .hero-copy { position: absolute; inset: auto 6% 18%; margin: 0; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.22; letter-spacing: -.02em; }
  .hero .hero-baseline { position: absolute; inset: auto 6% max(24px, env(safe-area-inset-bottom)); margin: 0; }
}
@media (max-width: 750px) and (max-height: 600px) {
  .hero { min-height: 100svh; }
  .hero .hero-copy { bottom: 22%; }
  .hero h1 { font-size: clamp(1.65rem, 7vw, 2.3rem); }
}