/* Hero film stage (added 2026-10-17, CT): the mission film plays muted in a near-full-screen header,
   then crossfades (1.2 s) to the opening Earth image with the headline. Donate stays visible throughout. */
.stage { position: relative; height: 90vh; height: 90svh; min-height: 560px; max-height: 1100px; overflow: hidden; background: var(--navy); color: #fff; isolation: isolate; }
.stage-media, .stage-media > *, .stage-media picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-img { object-fit: cover; object-position: 50% 40%; }
.stage-video { object-fit: cover; opacity: 0; transition: opacity 1.2s ease; background: transparent; }
.stage.is-playing .stage-video { opacity: 1; }
.stage-shade {
  background: linear-gradient(180deg, rgba(16,36,72,.30) 0%, rgba(16,36,72,0) 26%, rgba(16,36,72,0) 50%, rgba(16,36,72,.78) 100%);
  transition: opacity 1.2s ease;
}
.stage.is-playing .stage-shade { opacity: .55; }
.stage-copy { position: absolute; z-index: 2; left: 6vw; right: 6vw; bottom: 9vh; max-width: 1100px; }
.stage-copy .kicker { color: var(--gold); }
.stage h1 { color: #fff; font-size: clamp(48px, 6.4vw, 96px); line-height: .92; max-width: 12ch; margin: 0 0 30px; text-shadow: 0 2px 24px rgba(8,18,38,.35); }
.stage h1.long { font-size: clamp(42px, 5.2vw, 78px); max-width: 15ch; }
.stage-copy .kicker, .stage h1 { transition: opacity 1.2s ease, transform 1.2s ease; }
.stage.is-film .stage-copy .kicker, .stage.is-film h1 { opacity: 0; transform: translateY(14px); }
.stage.instant .stage-copy .kicker, .stage.instant h1 { transition: none; }
.stage .hero-ctas .btn { color: #fff; border-color: var(--gold); }
.stage .hero-ctas .btn:hover { color: var(--gold); }
.stage .btn-donate:hover { background: #fff; border-color: #fff; color: var(--navy); }
.stage .btn-donate:focus-visible { outline-color: #fff; }

.stage-controls { position: absolute; z-index: 3; right: 6vw; top: 28px; display: flex; gap: 10px; }
.stage-controls[hidden], .stage-play[hidden] { display: none; }
.stage-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 10px 16px; border: 1px solid var(--gold); border-radius: 0;
  background: rgba(16,36,72,.74); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: Outfit, sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  transition: background-color .2s, border-color .2s, color .2s;
}
.stage-btn:hover { background: var(--navy); color: var(--gold); }
.stage-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.stage-btn svg { width: 18px; height: 18px; flex: none; }
.stage-btn .ic { display: inline-flex; }
.stage-btn .ic-on { display: none; }
.stage-btn[aria-pressed=false] .ic-off { display: inline-flex; }
.stage-btn[aria-pressed=false] .ic-on { display: none; }
.stage-btn[aria-pressed=true] .ic-on { display: inline-flex; }
.stage-btn[aria-pressed=true] .ic-off { display: none; }
.stage-btn.ghost { border-color: rgba(255,255,255,.5); }
.stage-play { position: absolute; z-index: 3; right: 6vw; bottom: 9vh; }
.stage-play .dur { color: var(--gold); letter-spacing: .1em; }
.stage-cap {
  display: flex; justify-content: space-between; gap: 24px; padding: 14px 6vw 16px;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.film-credit a { color: inherit; }
.hero.intro { align-items: center; }
.hero.intro .lede.big { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.25; color: var(--navy); max-width: 26ch; margin: 0; }

@media (max-width: 860px) {
  .stage { height: 86vh; height: 86svh; min-height: 520px; }
  .stage-video { object-fit: contain; background: #07101f; }
  .stage-img { object-position: 31% 50%; }
  .stage-copy { bottom: 6vh; }
  .stage h1 { font-size: clamp(42px, 11vw, 60px); margin-bottom: 24px; }
  .stage h1.long { font-size: clamp(34px, 9vw, 48px); }
  .stage-controls, .stage-play { top: 16px; bottom: auto; right: 6vw; }
  .stage-controls { right: 6vw; }
  .stage-btn { padding: 9px 13px; letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-video, .stage-shade, .stage-copy .kicker, .stage h1 { transition: none; }
}
.stage .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }