/* ============================================================
   HORIZON — luxury orbital + lunar tourism
   Global styles, liquid-glass, cosmic scene, cube, orbit, menu
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&display=swap');

:root {
  --bg: #050505;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Manrope', system-ui, sans-serif;
  --gold: #e8c89a;
  --blue: #8fb6ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: default;
}

#root { position: relative; }

::selection { background: rgba(232,200,154,0.25); color: #fff; }

/* lock scroll while menu open */
body.no-scroll { overflow: hidden; }

/* ---------- Liquid glass ---------- */
.liquid-glass,
.liquid-glass-strong {
  position: relative;
  background: rgba(255,255,255,0.01);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.22),
              inset 0 0 28px rgba(255,255,255,0.025),
              0 22px 60px rgba(0,0,0,0.5);
  isolation: isolate;
}
.liquid-glass-strong {
  -webkit-backdrop-filter: blur(50px) saturate(1.3);
  backdrop-filter: blur(50px) saturate(1.3);
  background: rgba(255,255,255,0.012);
}
/* gradient border via mask-composite */
.liquid-glass::before,
.liquid-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.06) 32%,
      rgba(255,255,255,0.02) 60%,
      rgba(255,255,255,0.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Cosmic scene (CSS fallback layered under video) ---------- */
.cosmic-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 70% 18%, rgba(80,60,130,0.40), transparent 55%),
    radial-gradient(ellipse 90% 70% at 18% 80%, rgba(30,70,130,0.38), transparent 58%),
    radial-gradient(circle at 50% 50%, #0a0a14 0%, #050507 60%, #020203 100%);
}
.cosmic-scene .nebula {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(150,110,200,0.18), transparent 40%),
    radial-gradient(circle at 75% 65%, rgba(90,150,220,0.16), transparent 42%);
  filter: blur(40px);
  animation: nebulaDrift 38s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.15); }
}
.starfield { position: absolute; inset: 0; }
.starfield .layer {
  position: absolute; inset: 0;
  background-repeat: repeat;
  will-change: transform;
}
.star-twinkle { animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.5; } to { opacity: 1; } }

/* fullscreen background video */
.bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bg-video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.10); z-index: 1; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(20px, 4vw, 54px);
  pointer-events: none;
  mix-blend-mode: difference;
}
.site-header .logo {
  font-family: var(--font-serif);
  font-size: 28px; letter-spacing: 0.01em;
  color: #fff; pointer-events: auto; text-decoration: none;
}
.menu-btn {
  pointer-events: auto;
  width: 54px; height: 54px; border-radius: 50%;
  border: none; cursor: pointer;
  display: grid; place-items: center; gap: 4px;
  color: #fff; background: rgba(255,255,255,0.01);
  mix-blend-mode: normal;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.site-header .menu-btn { mix-blend-mode: normal; }
.menu-btn:hover { transform: scale(1.08); }
.menu-btn .bar { display: block; width: 18px; height: 1.5px; background: #fff; border-radius: 2px; transition: .35s; }

/* ---------- Full-screen pill menu ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: rgba(4,4,6,0.55);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }
.menu-overlay .close-x {
  position: absolute; top: 30px; right: clamp(20px,4vw,54px);
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  color: #fff; font-size: 22px; background: rgba(255,255,255,0.02);
}
.pill {
  font-family: var(--font-serif);
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.02;
  color: #fff; text-decoration: none;
  padding: 6px 40px; border-radius: 100px;
  opacity: 0; transform: translateY(40px) scale(0.96);
  transition: color .3s ease;
}
.menu-overlay.open .pill { animation: pillIn .7s cubic-bezier(.16,1,.3,1) forwards; }
.pill:hover { color: var(--gold); }
.pill .idx { font-family: var(--font-sans); font-size: 13px; font-weight:400; vertical-align: super; opacity:.5; margin-left: 10px; }
@keyframes pillIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- Hero portal ---------- */
.hero-wrap { position: relative; height: 600vh; }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.portal {
  position: absolute; inset: 0; z-index: 4;
  -webkit-clip-path: ellipse(0% 0% at 50% 50%);
  clip-path: ellipse(0% 0% at 50% 50%);
  will-change: clip-path;
}
.portal-inner {
  position: absolute; inset: -10%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, rgba(58,48,30,0.045) 46px 47px),
    radial-gradient(circle at 50% 45%, #ffffff 0%, #f4f2ec 52%, #e6e0d4 100%);
  display: grid; place-items: center;
  transform: rotate(-15deg);
  will-change: transform;
}
.portal-content { transform: rotate(15deg); width: 100%; height: 100%; position: relative; }

.hero-headline {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none; will-change: opacity, filter;
  padding: 0 24px;
}
.hero-headline h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(54px, 11vw, 168px);
  line-height: 0.96;
  letter-spacing: -0.01em;
}
.hero-headline h1 .word { display: inline-block; margin: 0 0.16em; }
.hero-sub {
  margin-top: 30px; font-size: clamp(14px,1.4vw,18px); font-weight: 300;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.78); max-width: 540px;
}

.hero-cta-row {
  position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%);
  z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 30px;
  width: min(92vw, 880px);
}
.btn-reserve {
  pointer-events: auto; cursor: pointer; border: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  color: #fff; padding: 16px 38px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.btn-reserve:hover { transform: translateY(-3px); }
.stat-row { display: flex; gap: 16px; }
.stat-card { border-radius: 18px; padding: 16px 26px; min-width: 150px; text-align: left; }
.stat-card .num { font-family: var(--font-serif); font-size: 30px; line-height: 1; }
.stat-card .lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 8px; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 7; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint .line { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,0.6), transparent); animation: hintPulse 2s ease-in-out infinite; }
@keyframes hintPulse { 0%,100%{ opacity:.3; transform: scaleY(.6);} 50%{opacity:1; transform: scaleY(1);} }

/* ---------- Orbit gallery ---------- */
.orbit-stage { position: absolute; inset: 0; }
.orbit-core {
  position: absolute; left: 50%; top: 50%;
  width: 104px; height: 104px; margin: -52px 0 0 -52px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #ffeec4 24%, #f4ad53 58%, #c2620f 100%);
  box-shadow: 0 0 50px 14px rgba(255,180,90,0.5), 0 0 150px 38px rgba(255,140,40,0.26);
  z-index: 5;
  animation: corePulse 6s ease-in-out infinite;
}
.orbit-core::after {
  content: ''; position: absolute; inset: -22px; border-radius: 50%;
  border: 1px solid rgba(196,98,15,0.22);
  animation: coronaSpin 24s linear infinite;
}
@keyframes coronaSpin { to { transform: rotate(360deg); } }
@keyframes corePulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }
.orbit-node {
  position: absolute; left: 50%; top: 50%;
  border-radius: 16px; overflow: visible;
  cursor: pointer; will-change: transform;
  --sz: 120px;
  width: var(--sz); height: var(--sz); margin: calc(var(--sz)/-2) 0 0 calc(var(--sz)/-2);
}
.orbit-node .thumb {
  width: 100%; height: 100%; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.14);
  transition: box-shadow .3s ease;
}
.orbit-node.selected .thumb { box-shadow: 0 18px 60px rgba(0,0,0,0.6), inset 0 0 0 2px var(--gold), 0 0 0 3px rgba(232,200,154,0.25); }
.orbit-node .node-label {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(20,18,14,0.7); opacity: 0; transition: opacity .3s ease;
}
.portal-inner .orbit-node .node-label { color: rgba(20,18,14,0.7); }

/* ---------- Generic section ---------- */
.section { position: relative; padding: clamp(80px, 12vh, 180px) clamp(20px, 6vw, 120px); }
.eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.eyebrow::before { content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); opacity: 0.85; }
.stat-card .num, .info-row .v, .detail-panel .d-name { font-variant-numeric: tabular-nums; }
.display-2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.01em; }
.lede { font-weight: 300; font-size: clamp(15px,1.4vw,19px); line-height: 1.6; color: rgba(255,255,255,0.66); max-width: 46ch; }

/* destinations layout */
.dest-section { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.dest-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px,5vw,80px); align-items: center; }
@media (max-width: 900px){ .dest-grid { grid-template-columns: 1fr; } }
.detail-panel { border-radius: 22px; padding: 30px 34px; }
.detail-panel .d-name { font-family: var(--font-serif); font-size: 42px; line-height: 1; }
.detail-panel .d-tag { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.info-rows { margin-top: 24px; display: grid; gap: 0; }
.info-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.info-row .k { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.info-row .v { font-size: 15px; font-weight: 400; color: #fff; }
.info-row .v.price { font-family: var(--font-serif); font-size: 26px; color: var(--gold); }
.dest-list { display: flex; flex-direction: column; gap: 2px; margin-top: 30px; }
.dest-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: none; cursor: pointer; color: #fff; text-align: left;
  padding: 16px 6px; border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-sans); transition: padding .35s cubic-bezier(.2,.8,.2,1), color .3s;
}
.dest-list button:hover, .dest-list button.active { padding-left: 18px; }
.dest-list button .dl-name { font-family: var(--font-serif); font-size: 24px; }
.dest-list button.active .dl-name { color: var(--gold); }
.dest-list button .dl-coord { font-size: 11px; letter-spacing: 0.16em; color: rgba(255,255,255,0.4); }

/* ---------- Spacecraft / cube ---------- */
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; min-height: 80vh; }
@media (max-width: 900px){ .craft-grid { grid-template-columns: 1fr; } }
.cube-scene { position: relative; height: clamp(380px, 56vh, 620px); display: grid; place-items: center; perspective: 1000px; }
.cube-stage { transform-style: preserve-3d; position: relative; z-index: 1; }
.core-cube {
  position: relative; transform-style: preserve-3d;
  width: clamp(142px, 18vw, 250px); height: clamp(142px, 18vw, 250px);
  animation: cubeFloat 6s ease-in-out infinite;
  transition: transform .7s cubic-bezier(.17,.78,.18,1);
  cursor: pointer;
}
.cube-stage.is-exploded .core-cube { transform: scale(0.72); }
@keyframes cubeFloat {
  0%,100% { transform: translateY(-10px) rotateX(-18deg) rotateY(28deg); }
  50%     { transform: translateY(10px) rotateX(-12deg) rotateY(42deg); }
}
.cube-face {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,240,210,0.9), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(120,160,255,0.55), transparent 60%),
    linear-gradient(135deg, #d9b277 0%, #6f86c9 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), inset 0 0 30px rgba(255,255,255,0.18);
  opacity: 0.96;
}
.cube-particle {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; border-radius: 8px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,240,210,0.95), transparent 60%),
    linear-gradient(135deg, #e0bd86, #7088cf);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  transform: translate3d(0,0,0) scale(1); opacity: 0; filter: blur(6px);
  transition: transform .76s cubic-bezier(.17,.78,.18,1), opacity .42s ease, filter .42s ease;
  pointer-events: none;
}
.cube-stage.is-exploded .cube-particle {
  transform: translate3d(var(--tx), var(--ty), var(--tz)) scale(var(--s)) rotate(var(--r,40deg));
  opacity: 1; filter: blur(0px);
  transition-delay: var(--d);
}
.cube-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.spec-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; min-height: 64px; }
.spec-chip { border-radius: 14px; padding: 14px 18px; opacity: 0; transform: translateY(14px); transition: .5s cubic-bezier(.16,1,.3,1); }
.spec-chip.show { opacity: 1; transform: translateY(0); }
.spec-chip .sc-k { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.spec-chip .sc-v { font-size: 14px; margin-top: 6px; color: rgba(255,255,255,0.85); }

/* ---------- Partners marquee ---------- */
.marquee-wrap { overflow: hidden; position: relative; padding: 40px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: inline-flex; gap: 64px; white-space: nowrap; animation: marquee 60s linear infinite; will-change: transform; }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.marquee-item { font-family: var(--font-serif); font-style: italic; font-size: clamp(40px,6vw,84px); color: rgba(255,255,255,0.30); }
.marquee-dot { font-size: 40px; color: rgba(255,255,255,0.18); align-self: center; }
.partner-chip { border-radius: 100px; padding: 10px 24px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: inline-block; }

/* ---------- Booking / footer ---------- */
.booking-band { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.booking-inner { position: relative; z-index: 3; width: min(92vw, 720px); text-align: center; padding: 60px 0; }
.booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; text-align: left; }
@media (max-width: 640px){ .booking-form { grid-template-columns: 1fr; } }
.field { border-radius: 14px; padding: 14px 18px; }
.field label { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; background: transparent; border: none; outline: none;
  color: #fff; font-family: var(--font-sans); font-size: 15px; font-weight: 300;
}
.field select option { background: #0a0a12; color: #fff; }
.field.full { grid-column: 1 / -1; }
.booking-submit { grid-column: 1/-1; cursor: pointer; border: none; color: #050505; background: var(--gold); font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; padding: 18px; border-radius: 100px; transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s; }
.booking-submit:hover { transform: translateY(-3px); background: #f3dcb6; }

.site-footer { position: relative; z-index: 3; padding: 70px clamp(20px,6vw,120px) 50px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-col h4 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 16px; font-weight: 500; }
.footer-col a { display: block; color: rgba(255,255,255,0.75); text-decoration: none; font-size: 15px; padding: 5px 0; transition: color .25s; }
.footer-col a:hover { color: var(--gold); }
.footer-logo { font-family: var(--font-serif); font-size: clamp(60px, 14vw, 200px); line-height: 0.9; color: rgba(255,255,255,0.06); margin-top: 50px; user-select: none; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 30px; font-size: 12px; color: rgba(255,255,255,0.4); letter-spacing: 0.04em; }

/* ============================================================
   PREMIUM OVERLAYS — grain, vignette, cursor, rail, intro, reveal
   ============================================================ */
.grain {
  position: fixed; inset: 0; z-index: 320; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}
.vignette { position: fixed; inset: 0; z-index: 319; pointer-events: none; box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.45), inset 0 0 80px rgba(0,0,0,0.25); }

/* custom cursor (fine pointers only) */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, [role='button'], input, select, .orbit-node, .dest-list button, .menu-btn { cursor: none; }
}
@media (pointer: coarse) { .cursor-ring, .cursor-dot { display: none !important; } }
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.7); border-radius: 50%;
  transform: translate(-50%,-50%); z-index: 400; pointer-events: none;
  mix-blend-mode: difference; will-change: transform;
  transition: width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), background .28s, opacity .28s;
}
.cursor-dot { position: fixed; top: 0; left: 0; width: 5px; height: 5px; background: #fff; border-radius: 50%; transform: translate(-50%,-50%); z-index: 401; pointer-events: none; mix-blend-mode: difference; will-change: transform; }
.cursor-ring.hover { width: 58px; height: 58px; background: rgba(255,255,255,0.06); }

/* section rail */
.section-rail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 18px; mix-blend-mode: difference; }
.section-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; background: none; border: none; padding: 2px 0; color: #fff; font-family: var(--font-sans); }
.section-rail .rlabel { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0; transform: translateX(8px); transition: .35s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.section-rail .rdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: .35s cubic-bezier(.2,.8,.2,1); flex: none; }
.section-rail button.active .rdot { background: #fff; transform: scale(1.6); }
.section-rail button:hover .rlabel, .section-rail button.active .rlabel { opacity: 0.9; transform: translateX(0); }
@media (max-width: 900px) { .section-rail { display: none; } }

/* intro preloader */
.preloader { position: fixed; inset: 0; z-index: 500; background: #050505; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .9s ease, transform 1.1s cubic-bezier(.7,0,.18,1); }
.preloader.done { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.pl-logo { font-family: var(--font-serif); font-size: clamp(56px, 12vw, 150px); letter-spacing: 0.03em; display: flex; line-height: 1; overflow: hidden; color: #fff; }
.pl-logo span { display: inline-block; transform: translateY(115%); animation: plRise 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes plRise { to { transform: translateY(0); } }
.pl-bar { width: min(300px, 62vw); height: 1px; background: rgba(255,255,255,0.14); margin-top: 38px; position: relative; overflow: hidden; }
.pl-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), #fff); transform-origin: left; transform: scaleX(0); }
.pl-meta { width: min(300px, 62vw); margin-top: 16px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* scroll progress hairline */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), #fff); z-index: 330; }

/* form focus underline */
.field { position: relative; transition: background .3s; }
.field::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 9px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.field:focus-within::after { transform: scaleX(1); }
.field:focus-within { background: rgba(255,255,255,0.02); }

/* marquee pause on hover */
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* subtle Ken Burns on orbit imagery */
.orbit-node .thumb { animation: kenburns 22s ease-in-out infinite alternate; }
.orbit-node:nth-child(3n) .thumb { animation-duration: 26s; animation-delay: -6s; }
.orbit-node:nth-child(2n) .thumb { animation-delay: -11s; }
@keyframes kenburns { from { background-size: 108%; background-position: 48% 46%; } to { background-size: 122%; background-position: 54% 56%; } }

/* ---------- orbital logo mark ---------- */
.logo { display: inline-flex; align-items: center; gap: 13px; }
.logo .mark { position: relative; width: 34px; height: 22px; transform: rotate(-18deg); flex: none; }
.logo .mark .ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; }
.logo .mark .ring.inner { inset: 5px 9px; opacity: 0.35; }
.logo .mark .dot {
  position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 7px 1px rgba(232,200,154,0.85);
  offset-path: path("M 0 11 a 17 11 0 1 0 34 0 a 17 11 0 1 0 -34 0");
  offset-distance: 0%; animation: logoOrbit 7s linear infinite;
}
@keyframes logoOrbit { to { offset-distance: 100%; } }
.logo .word { font-family: var(--font-serif); font-size: 28px; letter-spacing: 0.01em; line-height: 1; }
.logo:hover .mark .dot { animation-duration: 2.6s; }

/* ---------- choreographed load-in (after intro) ---------- */
.site-header { opacity: 0; transform: translateY(-14px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
body.ready .site-header { opacity: 1; transform: none; }
.section-rail { opacity: 0; transition: opacity 1.2s ease .25s; }
body.ready .section-rail { opacity: 1; }

/* ---------- line-wipe reveal for display headings ---------- */
.reveal-line { clip-path: inset(0 0 102% 0); opacity: 0.001; transition: clip-path 1.15s cubic-bezier(.16,1,.3,1), opacity .2s; }
.reveal-line.in { clip-path: inset(-8% 0 -14% 0); opacity: 1; }

/* ---------- generic circular icon button ---------- */
.icon-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: none; cursor: pointer; background: rgba(255,255,255,0.02); color: #fff; transition: transform .45s cubic-bezier(.2,.8,.2,1), background .3s; }
.icon-btn:hover { transform: translateY(-3px); background: rgba(255,255,255,0.07); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- reserve button: icon disc that fills gold ---------- */
.btn-reserve { overflow: hidden; padding: 14px 14px 14px 32px; gap: 16px; }
.btn-reserve .label { position: relative; z-index: 1; }
.btn-reserve .btn-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.12); transition: background .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.btn-reserve:hover .btn-ico { background: var(--gold); transform: translateX(3px); }
.btn-reserve .btn-ico svg { width: 15px; height: 15px; stroke: #fff; transition: stroke .4s; }
.btn-reserve:hover .btn-ico svg { stroke: #050505; }

/* ---------- dossier list: gold arrow on hover/active ---------- */
.dest-list .dl-right { display: flex; align-items: center; gap: 14px; }
.dest-list .dl-go { color: var(--gold); display: inline-flex; opacity: 0; transform: translateX(-8px); transition: opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1); }
.dest-list button:hover .dl-go, .dest-list button.active .dl-go { opacity: 1; transform: translateX(0); }
.dest-list .dl-go svg { width: 16px; height: 16px; }

/* ---------- booking submit icon ---------- */
.booking-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.booking-submit svg { width: 17px; height: 17px; stroke: #050505; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.booking-submit:hover svg { transform: translateX(5px); }

/* ---------- footer links: sliding arrow ---------- */
.footer-col a { display: inline-flex; align-items: center; gap: 7px; }
.footer-col a .lk-ico { display: inline-flex; opacity: 0; transform: translate(-5px, 3px); transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.footer-col a:hover .lk-ico { opacity: 1; transform: translate(0,0); }
.footer-col a .lk-ico svg { width: 13px; height: 13px; }

/* ---------- hero load-in stagger ---------- */
.hero-enter { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1); }
body.ready .hero-enter { opacity: 1; transform: none; }

/* ---------- header actions + Book pill + scroll hairline ---------- */
.header-actions { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.book-pill { display: inline-flex; align-items: center; gap: 12px; padding: 9px 9px 9px 22px; border-radius: 100px; border: none; cursor: pointer; color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; background: rgba(255,255,255,0.01); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.book-pill:hover { transform: translateY(-2px); }
.book-pill .bp-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); flex: none; }
.book-pill .bp-ico svg { width: 14px; height: 14px; stroke: #050505; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.book-pill:hover .bp-ico svg { transform: translateX(2px); }
@media (max-width: 620px) { .book-pill .bp-label { display: none; } .book-pill { padding: 7px; } }
.site-header::after { content: ''; position: absolute; left: clamp(20px,4vw,54px); right: clamp(20px,4vw,54px); bottom: 6px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); opacity: 0; transition: opacity .6s ease; }
.site-header.scrolled::after { opacity: 1; }

/* ---------- menu: pill arrows + meta footer ---------- */
.pill { display: inline-flex; align-items: center; }
.pill .p-arrow { display: inline-flex; opacity: 0; transform: translateX(-14px); transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); margin-left: 22px; }
.pill:hover .p-arrow { opacity: 0.85; transform: translateX(0); }
.pill .p-arrow svg { width: clamp(30px, 4vw, 46px); height: clamp(30px, 4vw, 46px); stroke: var(--gold); }
.menu-meta { position: absolute; bottom: 38px; left: 0; right: 0; display: flex; justify-content: center; gap: 44px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 0 24px; }
.menu-meta span { color: rgba(255,255,255,0.7); }

/* ---------- cursor text label ---------- */
.cursor-ring { display: grid; place-items: center; }
.cursor-ring .clabel { font-family: var(--font-sans); font-size: 8px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .25s ease; text-align: center; line-height: 1.1; pointer-events: none; }
.cursor-ring.labeled { width: 72px; height: 72px; background: rgba(255,255,255,0.05); }
.cursor-ring.labeled .clabel { opacity: 1; }
body.cursor-labeled .cursor-dot { opacity: 0; }

/* ---------- back-to-top ---------- */
.to-top { position: fixed; right: 26px; bottom: 26px; z-index: 95; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), background .3s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { transform: rotate(180deg); }
@media (max-width: 620px) { .to-top { right: 18px; bottom: 18px; } }

/* ---------- spacecraft: orbital rings behind cube ---------- */
.cube-orbits { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; }
.cube-orbits .c-ring { position: absolute; border: 1px solid rgba(232,200,154,0.10); border-radius: 50%; }
.cube-orbits .c-ring.a { width: clamp(300px,42vw,470px); height: clamp(170px,22vw,250px); animation: ringSpinA 36s linear infinite; }
.cube-orbits .c-ring.b { width: clamp(210px,30vw,330px); height: clamp(300px,42vw,450px); border-color: rgba(143,182,255,0.10); animation: ringSpinB 30s linear infinite; }
@keyframes ringSpinA { to { transform: rotate(360deg); } }
@keyframes ringSpinB { to { transform: rotate(-360deg); } }

/* ============================================================
   NEW SECTIONS
   ============================================================ */

/* ---- scroll-velocity warp veil ---- */
.warp-veil { position: fixed; inset: -10% 0; z-index: 58; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: repeating-linear-gradient(90deg, transparent 0 2px, rgba(180,200,255,0.5) 2px 2.4px, transparent 2.4px 7px); will-change: opacity, transform; }

/* ---- cursor-following glow (dark sections) ---- */
.glow-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow-layer .glow { position: absolute; width: 600px; height: 600px; left: 0; top: 0; margin: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(232,200,154,0.10), rgba(143,182,255,0.05) 40%, transparent 68%); will-change: transform; transition: opacity .6s ease; }

/* ---- stats band ---- */
.stats-band { position: relative; padding: clamp(70px,10vh,130px) clamp(20px,6vw,120px); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.stats-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,4vw,60px); }
@media (max-width: 760px){ .stats-grid { grid-template-columns: 1fr 1fr; row-gap: 46px; } }
.stat-block { text-align: left; }
.stat-block .s-num { font-family: var(--font-serif); font-size: clamp(48px,6.5vw,104px); line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; }
.stat-block .s-num .pre { font-size: 0.5em; color: var(--gold); margin-right: 0.12em; }
.stat-block .s-num .suf { font-size: 0.34em; color: rgba(255,255,255,0.5); margin-left: 0.18em; letter-spacing: 0.02em; }
.stat-block .s-lbl { margin-top: 16px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); max-width: 22ch; }
.stat-block .s-rule { width: 28px; height: 1px; background: var(--gold); margin-top: 18px; opacity: 0.6; }

/* ---- The Ascent timeline ---- */
.ascent { position: relative; }
.ascent-head { max-width: 620px; margin-bottom: clamp(40px,7vh,90px); }
.timeline { position: relative; max-width: 880px; margin: 0 auto; }
.timeline .spine { position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,0.12); }
.timeline .spine i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); background: linear-gradient(var(--gold), rgba(143,182,255,0.6)); will-change: transform; }
.tl-step { position: relative; padding: 0 0 clamp(44px,6vh,78px) 56px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step .node { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: #0b0b0f; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); transition: box-shadow .5s ease, background .5s ease; }
.tl-step.in .node { background: var(--gold); box-shadow: 0 0 0 4px rgba(232,200,154,0.16), 0 0 18px rgba(232,200,154,0.5); }
.tl-step .t-time { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.tl-step .t-title { font-family: var(--font-serif); font-size: clamp(26px,3.4vw,46px); line-height: 1.02; margin-top: 10px; }
.tl-step .t-desc { margin-top: 12px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 52ch; }

/* ---- Membership tiers ---- */
.tiers-head { text-align: center; max-width: 640px; margin: 0 auto clamp(44px,7vh,84px); }
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 960px){ .tiers-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.tier { position: relative; border-radius: 24px; padding: 38px 34px; display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tier:hover { transform: translateY(-6px); }
.tier.featured { background: rgba(232,200,154,0.04); }
.tier .t-badge { position: absolute; top: 20px; right: 22px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #050505; background: var(--gold); padding: 5px 12px; border-radius: 100px; }
.tier .t-name { font-family: var(--font-serif); font-size: 34px; line-height: 1; }
.tier .t-sub { margin-top: 8px; font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }
.tier .t-price { margin-top: 26px; font-family: var(--font-serif); font-size: 30px; color: #fff; font-variant-numeric: tabular-nums; }
.tier .t-price small { display: block; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 6px; }
.tier .t-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.tier .t-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.8); }
.tier .t-feats li svg { width: 15px; height: 15px; stroke: var(--gold); flex: none; margin-top: 2px; }
.tier .t-cta { margin-top: 32px; cursor: pointer; border: none; border-radius: 100px; padding: 14px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: #fff; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); transition: background .3s, color .3s, transform .4s cubic-bezier(.2,.8,.2,1); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.tier .t-cta svg { width: 15px; height: 15px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.tier .t-cta:hover { transform: translateY(-2px); }
.tier.featured .t-cta { background: var(--gold); color: #050505; }
.tier.featured .t-cta:hover { background: #f3dcb6; }
.tier .t-cta:hover svg { transform: translateX(4px); }

/* ---- Flight log testimonials ---- */
.flightlog { position: relative; }
.log-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .log-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.log-card { border-radius: 22px; padding: 34px 32px; display: flex; flex-direction: column; }
.log-card .quote-mark { font-family: var(--font-serif); font-size: 64px; line-height: 0.5; color: var(--gold); height: 28px; }
.log-card blockquote { font-family: var(--font-serif); font-size: clamp(20px,1.8vw,25px); line-height: 1.32; color: rgba(255,255,255,0.92); margin: 18px 0 0; }
.log-card .log-by { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; letter-spacing: 0.04em; }
.log-card .log-by .nm { color: #fff; }
.log-card .log-by .rl { color: rgba(255,255,255,0.5); margin-top: 3px; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; }

/* ---------- menu button morph (bars -> X) ---------- */
.menu-btn .bars { display: grid; gap: 4px; place-items: center; }
.menu-btn.is-open .bar:first-child { transform: translateY(3px) rotate(45deg); width: 18px; }
.menu-btn.is-open .bar:last-child { transform: translateY(-2.5px) rotate(-45deg); width: 18px; }
.menu-btn .bar { transition: transform .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1); }

/* ---------- dossier name: per-letter rise on selection ---------- */
.d-name { display: inline-flex; flex-wrap: wrap; overflow: hidden; }
.d-name .ch { display: inline-block; white-space: pre; animation: chRise .7s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes chRise { from { transform: translateY(115%) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- eyebrow shimmer sweep ---------- */
.eyebrow { position: relative; overflow: hidden; }
.eyebrow .eb-txt { background: linear-gradient(100deg, var(--gold) 30%, #fff 50%, var(--gold) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ebShimmer 6s linear infinite; }

@keyframes ebShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------- orbit node hover lift ring ---------- */
.orbit-node .thumb::after { content: ''; position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 0 rgba(232,200,154,0); transition: box-shadow .4s ease; pointer-events: none; }
.orbit-node:hover .thumb::after { box-shadow: inset 0 0 0 2px rgba(232,200,154,0.7), 0 0 30px rgba(232,200,154,0.25); }

/* ---------- footer social icon row ---------- */
.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); transition: transform .4s cubic-bezier(.2,.8,.2,1), color .3s, background .3s; gap: 0; }
.footer-social a:hover { transform: translateY(-3px); color: #050505; background: var(--gold); }
.footer-social a svg { width: 16px; height: 16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dest-grid { grid-template-columns: 1fr; gap: 36px; }
  .craft-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .hero-sub { margin-top: 20px; }
  .hero-cta-row { bottom: 5vh; gap: 22px; }
  .stat-card { min-width: 0; padding: 13px 20px; }
  .stat-card .num { font-size: 26px; }
  .detail-panel { padding: 26px; }
  .detail-panel .d-name { font-size: 36px; }
  .dest-list button .dl-name { font-size: 22px; }
  .orbit-alt { left: 50% !important; transform: translateX(-50%); top: 9vh !important; text-align: center; max-width: 82vw !important; }
  .cube-scene { height: clamp(320px, 46vh, 520px); }
}

@media (max-width: 620px) {
  .site-header { padding: 16px 18px; }
  .site-header .logo { font-size: 22px; }
  .menu-btn { width: 46px; height: 46px; }
  .menu-overlay .close-x { width: 46px; height: 46px; top: 18px; }
  .pill { padding: 4px 22px; }

  .hero-headline { padding: 0 18px; }
  .hero-sub { font-size: 13px; max-width: 90vw; letter-spacing: 0.02em; }
  .hero-cta-row { gap: 18px; width: 94vw; }
  .btn-reserve { padding: 14px 28px; font-size: 14px; }
  .stat-row { gap: 10px; }
  .stat-card { padding: 11px 16px; border-radius: 14px; }
  .stat-card .num { font-size: 22px; }
  .stat-card .lbl { font-size: 9px; letter-spacing: 0.1em; }

  .section { padding: 72px 20px; }
  .display-2 { font-size: clamp(32px, 9vw, 50px); }
  .lede { font-size: 15px; }
  .detail-panel { padding: 22px; border-radius: 18px; }
  .detail-panel .d-name { font-size: 30px; }
  .info-row { padding: 12px 0; }
  .info-row .v.price { font-size: 22px; }
  .dest-list button { padding: 14px 4px; }
  .dest-list button .dl-name { font-size: 19px; }
  .dest-list button .dl-coord { font-size: 10px; opacity: 0.6; }

  .spec-chips { gap: 8px; margin-top: 22px; }
  .spec-chip { padding: 12px 14px; }

  .marquee-track { gap: 36px; }
  .marquee-item { font-size: 13.5vw; }
  .marquee-dot { font-size: 24px; }

  .booking-inner { width: 92vw; }
  .booking-form { gap: 12px; margin-top: 30px; }

  .footer-grid { gap: 26px; }
  .footer-col { min-width: 42%; }
  .footer-base { font-size: 11px; }

  .stat-block .s-lbl { font-size: 11px; letter-spacing: 0.12em; }
  .tier { padding: 30px 26px; }
  .log-card { padding: 28px 24px; }
  .tl-step { padding-left: 44px; }
}

/* short viewports (landscape phones / small embeds): keep the hero legible */
@media (max-height: 640px) and (min-width: 621px) {
  .hero-headline { justify-content: flex-start; padding-top: 13vh; }
  .hero-headline h1 { font-size: clamp(34px, 7.5vw, 76px); }
  .hero-sub { margin-top: 14px; }
  .hero-cta-row { bottom: 14px; gap: 14px; }
  .stat-card { padding: 9px 16px; }
  .stat-card .num { font-size: 20px; }
}

@media (max-height: 560px) and (max-width: 620px) {
  .hero-headline { justify-content: flex-start; padding-top: 16vh; }
  .hero-cta-row { bottom: 10px; }
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES (≤768px) — keep desktop look intact
   ============================================================ */
@media (max-width: 768px) {
  /* Nav: drop mix-blend-mode (it reads as text-through-nav on scroll),
     give a solid fade-down background so scrolled content can't show through. */
  .site-header {
    mix-blend-mode: normal;
    background: linear-gradient(180deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.78) 60%, rgba(5,5,5,0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 14px 16px;
  }
  .site-header.scrolled {
    background: rgba(5,5,5,0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .site-header .logo { font-size: 20px; }

  /* Section-rail dots also use mix-blend-mode: difference — hide on mobile,
     they're decorative and not tappable at this size */
  .section-rail { display: none; }

  /* Cursor ring/dot — touch device, no cursor */
  .cursor-ring, .cursor-dot { display: none; }

  /* Floating back-to-top: overlaps every section's bottom-right content.
     Mobile users have native scroll-to-top via status-bar tap. Hide. */
  .to-top { display: none !important; }

  /* Hero scroll-hint sits at bottom: 26px and collides with the stat-row
     that lives inside .hero-cta-row. Hide on mobile — the stat tiles
     already say "this section continues". */
  .scroll-hint { display: none; }

  /* Hero CTA row: push above the bottom safe area, tighten the gap so
     Reserve button + stat-row both fit cleanly inside the viewport. */
  .hero-cta-row {
    bottom: max(28px, env(safe-area-inset-bottom, 28px));
    gap: 18px;
    width: 92vw;
  }
  .stat-row { gap: 12px; }
  .stat-card { padding: 12px 18px; min-width: 0; }
  .stat-card .num { font-size: 22px; }
  .stat-card .lbl { font-size: 10px; letter-spacing: 0.12em; }

  /* Hero headline: ease the line-height so 2-line "Venture past our sky"
     doesn't pull the CTA row up against the stats */
  .hero-headline h1 { line-height: 1.05; }

  /* Stats-band: the top labels above giant numbers were rendering behind
     the fixed nav. Add a generous top buffer so they enter the viewport
     below the nav band. */
  .stats-band { padding-top: clamp(96px, 14vh, 140px); }

  /* Booking band: prevent its CTA pill from scrolling underneath the
     transparent fade-out edge of the nav. Add bottom padding so the form
     doesn't kiss the footer when min-height: 100vh resolves short. */
  .booking-band { padding-top: clamp(96px, 14vh, 140px); padding-bottom: 60px; }
  .booking-inner { padding: 40px 0; }
  .booking-form { gap: 12px; margin-top: 28px; }
  .booking-submit { padding: 16px; font-size: 14px; }
  .field { padding: 12px 14px; border-radius: 12px; }

  /* Section base padding: unify so transitions feel uniform on phones.
     Existing .section base uses clamp(80px,12vh,180px); 64px both ends fits
     the mobile content rhythm + nav offset better. */
  .section { padding-top: 64px; padding-bottom: 64px; }
  .eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: 0.26em; }
  .eyebrow::before { width: 26px; }
  .lede { font-size: 14.5px; line-height: 1.55; }
  .display-2 { line-height: 1.0; letter-spacing: -0.005em; }

  /* Destinations dossier — base shows 30/34 padding which feels chunky next
     to the dest list on narrow widths; tighten and tame the panel name. */
  .detail-panel { padding: 24px 22px; border-radius: 20px; }
  .detail-panel .d-name { font-size: clamp(28px, 7.5vw, 36px); }
  .info-row { padding: 12px 0; }
  .info-row .k { font-size: 10px; letter-spacing: 0.16em; }
  .info-row .v { font-size: 14.5px; }
  .info-rows { margin-top: 18px; }
  .dest-list { margin-top: 22px; }
  .dest-list button { padding: 13px 0; }
  .dest-list button:hover, .dest-list button.active { padding-left: 14px; }

  /* Spec chips: at narrow widths flex-row forces awkward 2-line wraps with
     50/50 chips that truncate label text. Stack vertically below ~640. */
  .spec-chips { flex-direction: column; gap: 10px; min-height: 0; }
  .spec-chip { padding: 12px 16px; width: 100%; }
  .spec-chip .sc-v { font-size: 13.5px; }

  /* Spacecraft cube: clamp() floors keep .c-ring rings at 300px / 210px on
     phones — they bleed past viewport edge inside the .cube-scene grid cell.
     Tighten the floor + cap height so the cube reads centered without
     decorative rings clipping. */
  .cube-scene { height: clamp(300px, 48vh, 460px); }
  .cube-orbits .c-ring.a { width: clamp(240px, 70vw, 340px); height: clamp(140px, 36vw, 200px); }
  .cube-orbits .c-ring.b { width: clamp(180px, 56vw, 240px); height: clamp(240px, 70vw, 320px); }

  /* Stats band: tighten the giant numbers so the 2-col grid (existing @760
     rule) doesn't crowd against the 20px section gutter. */
  .stats-band { padding-left: 20px; padding-right: 20px; }
  .stats-grid { gap: 30px 18px; }
  .stat-block .num { font-size: clamp(42px, 13vw, 64px); }

  /* Ascent timeline: tighten the per-step bottom padding so 5 steps don't
     blow the section out vertically on phones. */
  .tl-step { padding-bottom: clamp(34px, 5vh, 56px); padding-left: 40px; }
  .tl-step .t-title { font-size: clamp(22px, 6vw, 30px); }
  .tl-step .t-desc { font-size: 14px; line-height: 1.55; }

  /* Membership tiers: card padding feels chunky at 460w. Soften + tighten
     feature list density so cards feel scan-able instead of tall. */
  .tier { padding: 28px 24px; border-radius: 20px; }
  .tier .t-name { font-size: 28px; }
  .tier .t-price { margin-top: 22px; font-size: 26px; }
  .tier .t-feats { margin-top: 22px; gap: 11px; }
  .tier .t-feats li { font-size: 13.5px; line-height: 1.45; }
  .tier .t-cta { margin-top: 26px; padding: 13px; }

  /* Partners marquee: 13.5vw renders ~67px at 500w which crowds the chip
     above. Pull back to ~10vw so the marquee feels like a quiet ribbon. */
  #partners { padding-top: 48px; padding-bottom: 48px; }
  .marquee-track { gap: 28px; }
  .marquee-item { font-size: clamp(36px, 10vw, 54px); }
  .marquee-dot { font-size: 20px; }
  .partner-chip { font-size: 11px; padding: 8px 18px; }

  /* Flight log: tighten card padding so each card reads as a card, not a
     full-width slab. */
  .log-card { padding: 26px 22px; border-radius: 20px; }
  .log-card blockquote { font-size: 17px; line-height: 1.4; margin-top: 14px; }
  .log-card .quote-mark { font-size: 50px; }
  .log-card .log-by { margin-top: 22px; padding-top: 14px; }

  /* Footer: existing flex wrap makes 3 cols stack uneven (413/321/228).
     Switch to a 2-col grid so the Voyages/Company/Connect columns share
     row geometry; logo + base row still flow below. */
  .site-footer { padding: 60px 24px 36px; }
  .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-col { min-width: 0; }
  .footer-col:nth-child(3) { grid-column: 1 / -1; }
  .footer-col h4 { margin-bottom: 12px; font-size: 10px; }
  .footer-col a { font-size: 14px; padding: 4px 0; }
  .footer-logo { font-size: clamp(52px, 16vw, 96px); margin-top: 36px; }
  .footer-base { flex-direction: column; gap: 10px; margin-top: 22px; font-size: 11px; align-items: flex-start; }
  .footer-social { gap: 14px; }

  /* Hero stat-card label tightening to avoid 2-line wrap on small phones. */
  .stat-card .lbl { font-size: 9.5px; letter-spacing: 0.1em; white-space: nowrap; }
}

/* ============================================================
   VERY SMALL PHONES (≤480px) — final polish for 360–414 widths
   ============================================================ */
@media (max-width: 480px) {
  /* Header: tighten further so brand + book pill don't fight for space. */
  .site-header { padding: 12px 14px; }
  .site-header .logo { font-size: 19px; }
  .book-pill { padding: 7px 7px 7px 16px; }

  /* Hero: pull h1 line spacing in slightly for 3-line wraps. */
  .hero-headline { padding: 0 16px; }
  .hero-sub { font-size: 12.5px; margin-top: 16px; }
  .stat-card { padding: 10px 14px; }
  .stat-card .num { font-size: 20px; }
  .btn-reserve { padding: 12px 22px; font-size: 13.5px; }
  .btn-reserve .btn-ico { width: 30px; height: 30px; }

  /* Section gutters: ease to 16px so glass cards have breathing room. */
  .section { padding: 56px 16px; }
  .stats-band { padding-left: 16px; padding-right: 16px; }

  /* Display headings: cap to 28px so 2-line headings fit cleanly. */
  .display-2 { font-size: clamp(26px, 8.5vw, 34px); }

  /* Detail panel + dest list: tighter still. */
  .detail-panel { padding: 20px 18px; }
  .detail-panel .d-name { font-size: 26px; }
  .dest-list button .dl-name { font-size: 17px; }

  /* Booking form: take field padding down a notch so labels + inputs read
     as one tight unit instead of a chunky card. */
  .booking-band { padding-top: clamp(88px, 13vh, 120px); padding-bottom: 48px; }
  .booking-inner { width: 100%; padding: 28px 18px; }
  .field { padding: 10px 12px; }
  .field label { font-size: 9px; margin-bottom: 4px; }
  .field input, .field select { font-size: 14.5px; }

  /* Tier card: pricing column needs more vertical breathing. */
  .tier { padding: 24px 20px; }
  .tier .t-name { font-size: 24px; }
  .tier .t-feats li { font-size: 13px; }

  /* Footer: collapse to single column for the cleanest read on small phones. */
  .site-footer { padding: 48px 20px 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-col:nth-child(3) { grid-column: auto; }
  .footer-logo { font-size: clamp(44px, 18vw, 72px); margin-top: 28px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}