/* ═══════════════════════════════════════════════════════════════════════
   REEL HERO (2026-09-29)
   The hero IS the reel: a designed 16:9 film on desktop, a 9:16 cut on
   phones. The box is sized to the film's own aspect ratio so no headline in
   the film is ever cropped. The page's H1 stays in the DOM for SEO and
   screen readers — the film carries the visible type.
   Loaded LAST on index + the four campaign landing pages.
   ═══════════════════════════════════════════════════════════════════════ */
.hero.has-reel,
html[data-theme] .d1hero.has-reel,
.d1hero.has-reel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  background: #000;
  margin-top: 72px;                    /* the nav sits on black above the film, never over its type */
}
@media (max-width: 760px) {
  .hero.has-reel,
  html[data-theme] .d1hero.has-reel,
  .d1hero.has-reel { aspect-ratio: 9 / 16; margin-top: 62px; }
}
.has-reel > video {
  position: absolute; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center center !important;
  transform: none !important;          /* cancels the old parallax drift */
}
.has-reel::after { display: none !important; }   /* the film has its own scrims */

/* visually hidden, still read by search engines and screen readers */
.has-reel .hero-head,
.has-reel .d1hero-head,
.has-reel .hero-cap {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; margin: -1px !important; padding: 0 !important;
}

/* pause / play — required for any autoplaying film longer than 5 seconds */
.reel-toggle {
  position: absolute; z-index: 5; left: 18px; bottom: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(14,13,13,.55); color: #fff; cursor: pointer;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s ease;
}
.reel-toggle:hover { background: rgba(77,123,255,.85); }
.reel-toggle:focus-visible { outline: 2px solid #4d7bff; outline-offset: 3px; }
@media (max-width: 760px) { .reel-toggle { left: 12px; bottom: 12px; } }

/* ── ship-date line: turns "six weeks" into a real date ── */
.ship-est {
  display: inline-flex; align-items: center; gap: .7em; flex-wrap: wrap;
  margin: 1.4em auto 0; padding: .75em 1.15em;
  border: 1px solid rgba(77,123,255,.45); border-radius: 999px;
  background: rgba(77,123,255,.10);
  color: #fff; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.35;
}
.ship-est::before {
  content: ""; width: .6em; height: .6em; border-radius: 50%; flex: none;
  background: #4d7bff; box-shadow: 0 0 0 0 rgba(77,123,255,.7);
  animation: shipPulse 2.2s ease-out infinite;
}
.ship-est b { color: #7aa0ff; font-weight: 600; }
@keyframes shipPulse { 0% { box-shadow: 0 0 0 0 rgba(77,123,255,.65); } 80%,100% { box-shadow: 0 0 0 .7em rgba(77,123,255,0); } }
@media (prefers-reduced-motion: reduce) { .ship-est::before { animation: none; } }

/* ── second door: send a photo (a reply is an easier yes than a call) ── */
.lp-photo-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:min(340px,100%);
  font-family:inherit; font-weight:600; font-size:1.2rem; line-height:1;
  padding:15px 24px; border-radius:14px;
  color:#fff; text-decoration:none;
  border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.04);
  transition:border-color .15s ease, background .15s ease;
}
.lp-photo-btn:hover { border-color:#4d7bff; background:rgba(77,123,255,.12); }
.lp-photo-btn:focus-visible { outline:2px solid #4d7bff; outline-offset:3px; }
@media (max-width:760px) { .lp-photo-btn { width:100%; } }