/* The approved film is background footage only; copy and actions stay live. */
.hero-cinematic{height:100vh;height:100svh;min-height:680px;background:#070b0e;color:#fafbf6;isolation:isolate}
.hero-media,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-media{z-index:-2;overflow:hidden;background:#070b0e}
.hero-poster,.hero-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-video{opacity:0;transition:opacity .35s ease}
.hero-cinematic.has-video .hero-video{opacity:1}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(4,8,12,.65),rgba(4,8,12,.55) 32%,rgba(4,8,12,.43) 44%,rgba(4,8,12,0) 75%),linear-gradient(0deg,rgba(3,6,8,.52),transparent 24%,transparent 76%,rgba(3,6,8,.25))}
.hero-cinematic .hero-top{display:block;padding-top:clamp(170px,26.48svh,286px)}
.hero-cinematic .hero-copy{max-width:1100px}
.hero-cinematic .hero-eyebrow{margin-bottom:27px;font-weight:600;color:#e7eae4}
.hero-cinematic .hero-eyebrow .dot{width:5px;height:5px;margin-right:11px;color:var(--lime)}
.hero-cinematic h1{font-size:clamp(60px,5.3125vw,102px);line-height:1.06;letter-spacing:-.06em;font-weight:550;max-width:none;text-wrap:initial}
.hero-cinematic h1 .line{padding:0;overflow:visible;white-space:nowrap}
.hero-cinematic h1 em{isolation:isolate}
.hero-cinematic h1 em:after{left:2px;bottom:.06em;height:.049em}
.hero-cinematic .hero-description{max-width:590px;margin-top:34px;font-size:20px;line-height:1.55;color:#e1e5e1}
/* SpaceX's current hero CTA treatment, adapted to a text-only demo action. */

.hero-cinematic .hero-cta{display:inline-flex;align-items:center;justify-content:center;height:50px;min-height:50px;min-width:0;padding:0 20px;border:1px solid rgba(240,240,250,.35);border-radius:4px;background:rgba(0,0,0,.5);color:#f0f0fa;font-family:D-DIN,sans-serif;font-size:12px;font-weight:400;line-height:12px;letter-spacing:normal;text-transform:uppercase;text-align:center;box-shadow:none;transform:none;transition:background .5s cubic-bezier(.19,1,.22,1),color .5s cubic-bezier(.19,1,.22,1)}
.hero-cinematic .hero-cta:hover{background:#f0f0fa;color:#000;transform:none;transition:background .4s ease,color .5s cubic-bezier(.19,1,.22,1)}
.hero-cinematic .hero-cta:active{transform:none}
.hero-cinematic .hero-cta:focus-visible{outline:1px auto -webkit-focus-ring-color;outline-offset:1px}
.hero-cinematic .hero-cta{margin-top:30px}
.hero-cinematic .hero-bottom{bottom:30px;gap:24px;color:#e3e7e0}
.hero-cinematic .scroll-cue{display:inline-flex;min-height:44px;gap:0}
.hero-cinematic .scroll-cue:hover{text-decoration:underline;text-underline-offset:5px}
.hero-cinematic a:focus-visible{outline-color:var(--lime)}

@media(max-height:850px) and (min-width:901px){
  .hero-cinematic{min-height:650px}
  .hero-cinematic .hero-top{padding-top:clamp(150px,24svh,204px)}
  .hero-cinematic .hero-description{font-size:18px;max-width:540px;margin-top:28px}
  .hero-cinematic .hero-cta{margin-top:26px}
}
@media(max-width:900px){
  .hero-cinematic{height:100svh;min-height:650px}
  .hero-cinematic .hero-top{padding-top:clamp(150px,25svh,220px)}
  .hero-cinematic h1{font-size:clamp(38px,8.1vw,68px);letter-spacing:-.06em;line-height:1.08}
  .hero-cinematic .hero-eyebrow{margin-bottom:22px;font-size:11px;letter-spacing:.11em}
  .hero-cinematic .hero-description{font-size:18px;line-height:1.55;max-width:470px;margin-top:26px}
  .hero-cinematic .hero-cta{margin-top:26px}
  .hero-poster,.hero-video{object-position:62% center}
  .hero-shade{background:linear-gradient(90deg,rgba(4,8,12,.64),rgba(4,8,12,.32)),linear-gradient(0deg,rgba(3,6,8,.62),rgba(3,6,8,.18) 35%,rgba(3,6,8,.34) 75%,rgba(3,6,8,.52))}
  .hero-cinematic .hero-bottom{bottom:22px;gap:16px}
}
@media(max-width:480px){
  .hero-cinematic .hero-top{padding-top:clamp(140px,23svh,180px)}
  .hero-cinematic .hero-description{font-size:16px;max-width:340px;margin-top:24px}
  .hero-cinematic .hero-bottom{font-size:11px}
}

@media(max-height:560px){
  .hero-cinematic{height:auto;min-height:560px}
  .hero-cinematic .hero-top{padding-top:120px;padding-bottom:130px}
  .hero-cinematic h1{font-size:clamp(38px,5.5vw,60px)}
  .hero-cinematic .hero-description{font-size:16px;max-width:510px;margin-top:22px}
  .hero-cinematic .hero-cta{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){.hero-video,.hero-cinematic .hero-cta,.hero-cinematic .hero-cta:hover{transition:none}}

.tour-control{display:none}
.has-tour-control .tour-control{display:flex}
.capture .tour-control{display:none}