/* ==========================================================================
   Silicon Valley Skydiving
   1. Tokens   2. Base   3. Layout   4. Buttons   5. Navigation   6. Hero
   7. Ticker   8. Section pieces   9. Sections   10. Flight scene
   11. Reveal motion   12. Responsive (container queries)   13. Reduced motion
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --orange: #ff5e00;
    --orange-hot: #ff8a3d;
    --orange-deep: #d94b00;   /* large accents on light surfaces (>= 3:1) */
    --orange-text: #b83c00;   /* small text on light surfaces (>= 4.5:1) */
    --ink: #07111f;
    --ink-2: #0b1a2c;
    --ink-3: #10233a;
    --paper: #f4f7fb;
    --white: #fff;

    --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --nav-h: 76px;
    --rail-w: 0px;            /* width reserved for the flight corridor */
    --radius: 20px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

/* The corridor only exists when JS is running and the viewport is wide enough. */
@media (min-width: 1100px) {
    /* Only the home page reserves a column for the fixed flight corridor. */
    html.js body[data-page="home"] { --rail-w: clamp(300px, 26vw, 400px); }
}

/* Surface themes: every section picks one, so text colours never fight their background. */
.theme-dark {
    --surface: var(--ink);
    --fg: #fff;
    --fg-muted: rgba(255, 255, 255, .76);
    --fg-soft: rgba(255, 255, 255, .7);
    --accent: var(--orange);
    --accent-text: var(--orange-hot);
    --line: rgba(255, 255, 255, .12);
    --card: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    --ghost-number: rgba(255, 255, 255, .07);
}
.theme-navy {
    --surface: #0a1c33;
    --fg: #fff;
    --fg-muted: rgba(255, 255, 255, .78);
    --fg-soft: rgba(255, 255, 255, .72);
    --accent: var(--orange);
    --accent-text: var(--orange-hot);
    --line: rgba(255, 255, 255, .14);
    --card: rgba(255, 255, 255, .05);
    --ghost-number: rgba(255, 255, 255, .08);
}
.theme-sky {
    --surface: #0b3a66;
    --fg: #fff;
    --fg-muted: rgba(255, 255, 255, .86);
    --fg-soft: rgba(255, 255, 255, .8);
    --accent: var(--orange);
    --accent-text: #ffd9bf;
    --line: rgba(255, 255, 255, .22);
}
.theme-light {
    --surface: var(--paper);
    --fg: var(--ink);
    --fg-muted: #42556a;
    --fg-soft: #4d5c6c;
    --accent: var(--orange-deep);
    --accent-text: var(--orange-text);
    --line: rgba(7, 17, 31, .12);
    --card: #fff;
    --ghost-number: rgba(7, 17, 31, .1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.nav-locked { overflow: hidden; }
body {
    font-family: var(--font-body);
    background: var(--ink);
    color: #fff;
    line-height: 1.65;
    overflow-x: hidden;
}
::selection { background: var(--orange); color: var(--ink); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; }
ul { list-style: none; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
.theme-light :focus-visible { outline-color: var(--ink); }

.skip-link {
    position: fixed; left: 16px; top: -80px; z-index: 100;
    padding: 12px 18px; border-radius: 8px;
    background: #fff; color: var(--ink); font-weight: 700; text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Layout ---------- */
.page {
    position: relative;
    margin-right: var(--rail-w);
    container: page / inline-size;   /* breakpoints follow the content column, not the viewport */
}
.container { width: min(1160px, calc(100% - 2 * clamp(20px, 5cqw, 64px))); margin-inline: auto; }
main { overflow-x: clip; }
.section { position: relative; padding: clamp(84px, 11cqw, 132px) 0; background: var(--surface); color: var(--fg); }

/* ---------- 4. Buttons ---------- */
.btn {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 56px; padding: 0 30px;
    border: 0; background: none; cursor: pointer;
    color: var(--ink); text-decoration: none; white-space: nowrap;
    font: italic 800 18px/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase;
    transition: transform .2s var(--ease-out);
}
/* The slanted plate sits on a pseudo-element so focus outlines are never clipped. */
.btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    transform: skewX(-12deg); border-radius: 5px;
    background:
        linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%) no-repeat -160% 0 / 70% 100%,
        var(--orange);
    box-shadow: 0 16px 38px rgba(255, 94, 0, .28);
    transition: background-position .5s ease, box-shadow .25s ease, background-color .2s ease;
}
.btn i { font-size: .82em; transition: transform .25s var(--ease-out); }
.btn:hover::before { background-position: 260% 0, 0 0; box-shadow: 0 20px 46px rgba(255, 94, 0, .42); }
.btn:hover i.fa-arrow-right { transform: translateX(6px); }
.btn:hover i.fa-chevron-down { transform: translateY(4px); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .7; cursor: progress; }

.btn--ghost { color: var(--fg, #fff); }
.btn--ghost::before { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 2px currentColor; opacity: .9; }
.btn--ghost:hover { color: var(--ink); }
.btn--ghost:hover::before { background: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 16px; }
.btn--block { width: 100%; }

.text-link {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px;
    color: var(--fg); text-decoration: none;
    font: italic 800 17px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 2px solid var(--accent);
}
.text-link i { transition: transform .25s var(--ease-out); }
.text-link:hover i { transform: translateX(6px); }

/* ---------- 5. Navigation ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; }
.nav {
    position: relative;
    height: var(--nav-h); padding: 0 clamp(18px, 2.4vw, 34px);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* The frosted bar is a pseudo-element: a backdrop-filter on .nav itself would trap
   the fixed-position mobile menu inside the 76px bar. */
.nav::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: rgba(3, 10, 18, .5);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    transition: background .3s ease;
}
.site-header.is-scrolled .nav::before, .site-header.nav-open .nav::before { background: rgba(3, 10, 18, .92); }

.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.logo-mark {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
    background: var(--orange); color: var(--ink);
    font: italic 900 17px/1 var(--font-display); letter-spacing: .02em;
    transform: skewX(-8deg);
    box-shadow: 0 8px 26px rgba(255, 94, 0, .32);
}
.logo-text { font: 800 16px/1.02 var(--font-display); letter-spacing: .1em; }
.logo-text b { display: block; color: var(--orange-hot); }

.nav-menu { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav-menu > a:not(.btn) {
    position: relative; padding: 12px 0;
    color: rgba(255, 255, 255, .88); text-decoration: none;
    font: 700 15px/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase;
    transition: color .2s ease;
}
.nav-menu > a:not(.btn)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
    background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.nav-menu > a:not(.btn):hover, .nav-menu > a[aria-current='true'] { color: #fff; }
.nav-menu > a:not(.btn):hover::after, .nav-menu > a[aria-current='true']::after { transform: scaleX(1); }
.nav-book, .nav-toggle, .nav-call-mini { display: none; }

/* Phone in the desktop nav — calling is a primary path */
.nav-phone {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff;
    padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
    font: 800 15px/1 var(--font-display); letter-spacing: .05em; white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}
.nav-phone i { color: var(--orange-hot); }
.nav-phone:hover { background: rgba(255, 94, 0, .14); border-color: var(--orange); }

.nav-toggle {
    width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px;
    background: rgba(255, 255, 255, .04); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s var(--ease-out), opacity .2s ease; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 999px) {
    .nav-toggle { display: inline-flex; }
    /* On phones the top bar is phone-first; booking lives in the sticky bottom bar. */
    .nav-call-mini { display: grid; place-items: center; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 94, 0, .12); color: #fff; text-decoration: none; font-size: 18px; }
    .nav-call-mini i { color: var(--orange-hot); }
    .nav-menu .nav-phone { order: -1; justify-content: center; margin-bottom: 8px; padding: 18px; font-size: 22px; border-color: rgba(255, 94, 0, .4); background: rgba(255, 94, 0, .1); }
    .nav-menu {
        position: fixed; inset: var(--nav-h) 0 0 0;
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        padding: 18px 24px 32px; overflow-y: auto;
        background: rgba(3, 10, 18, .97);
        visibility: hidden; opacity: 0; transform: translateY(-12px);
        transition: opacity .25s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
    }
    .nav-open .nav-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    .nav-menu > a:not(.btn) {
        padding: 20px 4px; border-bottom: 1px solid rgba(255, 255, 255, .1);
        font: italic 900 34px/1 var(--font-display); letter-spacing: .02em;
    }
    .nav-menu > a:not(.btn)::after { display: none; }
    .nav-menu .nav-cta { margin-top: 28px; min-height: 56px; font-size: 18px; }
}
@media (max-width: 400px) {
    .logo-text { font-size: 14px; }
    .nav-book { padding: 0 14px; }
}

/* ---------- 6. Hero ---------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: grid; align-items: center;
    padding: calc(var(--nav-h) + 48px) 0 96px;
    background: var(--ink); color: #fff;
}
.hero-backdrop {
    position: absolute; inset: 0; z-index: -3;
    background:
        linear-gradient(90deg, rgba(2, 8, 15, .93) 0%, rgba(2, 8, 15, .74) 42%, rgba(2, 8, 15, .32) 100%),
        linear-gradient(0deg, rgba(2, 8, 15, .62), transparent 44%),
        url('content/skydive1.avif') 5% 30% / cover no-repeat,
        radial-gradient(120% 90% at 85% 10%, #1a6aa3 0%, #0c355c 40%, #07111f 74%);
}
.hero-grid {
    position: absolute; inset: 0; z-index: -2; opacity: .22;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 82%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 82%);
}
/* Wind streaks rising behind the headline */
.hero-streaks { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-streaks i {
    position: absolute; bottom: -30%; width: 1px; height: 26%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .5), transparent);
    opacity: .0; animation: heroStreak 1.5s linear infinite;
}
.hero-streaks i:nth-child(1) { left: 8%;  animation-duration: 1.3s; }
.hero-streaks i:nth-child(2) { left: 27%; animation-duration: 1.7s; animation-delay: .5s; }
.hero-streaks i:nth-child(3) { left: 49%; animation-duration: 1.1s; animation-delay: .2s; }
.hero-streaks i:nth-child(4) { left: 68%; animation-duration: 1.5s; animation-delay: .9s; }
.hero-streaks i:nth-child(5) { left: 86%; animation-duration: 1.2s; animation-delay: .35s; }
@keyframes heroStreak {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: .22; }
    100% { transform: translateY(-560%); opacity: 0; }
}

.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.hero-copy { min-width: 0; }

.eyebrow, .section-kicker {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--accent-text, var(--orange-hot));
    font: 800 14px/1.2 var(--font-display); letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow span, .section-kicker::before { content: ''; flex: none; width: 34px; height: 2px; background: var(--orange); }

.hero-title {
    margin: 22px 0 26px;
    font: italic 900 clamp(5.2rem, 21cqw, 11.5rem)/.82 var(--font-display);
    letter-spacing: -.02em; text-transform: uppercase;
}
.hero-title-line { display: block; }
.hero-title-accent { position: relative; width: fit-content; color: var(--orange); }
/* Outlined echoes trail above the word, as if it were falling. */
.hero-title-accent::before, .hero-title-accent::after {
    content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1;
    color: transparent; -webkit-text-stroke: 2px var(--orange); pointer-events: none;
}
.hero-title-accent::before { transform: translate(-.045em, -.07em); opacity: .42; }
.hero-title-accent::after { transform: translate(-.09em, -.14em); opacity: .18; }
.js .hero-title-accent { animation: heroDrop .9s var(--ease-out) both .15s; }
.js .hero-title-accent::before { animation: heroEcho 1.1s var(--ease-out) both .15s; --echo-x: -.045em; --echo: -.07em; --echo-op: .42; }
.js .hero-title-accent::after { animation: heroEcho 1.3s var(--ease-out) both .15s; --echo-x: -.09em; --echo: -.14em; --echo-op: .18; }
@keyframes heroDrop { from { transform: translateY(-.55em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes heroEcho { from { transform: translate(-.3em, -.9em); opacity: 0; } to { transform: translate(var(--echo-x), var(--echo)); opacity: var(--echo-op); } }

.hero-subtext { max-width: 620px; color: rgba(255, 255, 255, .82); font-size: clamp(1.02rem, 1.9cqw, 1.25rem); }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 34px; padding-left: 6px; }

.hero-stats {
    position: relative; display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 5cqw, 56px);
    width: fit-content; max-width: 100%; margin-top: 52px; padding-top: 22px;
}
/* tick ruler, like the edge of an altimeter tape */
.hero-stats::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 1px, transparent 1px 12px);
    border-top: 1px solid rgba(255, 255, 255, .34);
}
.hero-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.hero-stats dt { color: rgba(255, 255, 255, .72); font: 700 13px/1.1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.hero-stats dd { font: italic 900 clamp(2.5rem, 5.4cqw, 4rem)/.9 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-stats dd small { margin-left: 6px; color: var(--orange-hot); font-size: .38em; letter-spacing: .1em; font-style: normal; }

.scroll-cue {
    position: absolute; right: clamp(20px, 5cqw, 64px); bottom: 54px;
    display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
    color: rgba(255, 255, 255, .72);
    font: 700 12px/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase;
}
.scroll-cue-line { position: relative; width: 1px; height: 34px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.scroll-cue-line::after { content: ''; position: absolute; inset: 0; background: var(--orange); animation: cueDrop 1.6s var(--ease-out) infinite; }
@keyframes cueDrop { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

.hero-scene-slot:empty { display: none; }

/* ---------- 7. Ticker ---------- */
.ticker {
    position: relative; z-index: 2; overflow: hidden;
    margin: -22px 0; padding: 16px 0;
    background: var(--orange); color: var(--ink);
    transform: rotate(-1.4deg) scale(1.02);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.ticker-track { display: flex; width: max-content; animation: ticker 26s linear infinite; }
.ticker-track span {
    display: inline-flex; align-items: center; white-space: nowrap;
    font: italic 900 clamp(1.5rem, 3.6cqw, 2.5rem)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
}
.ticker-track span::after { content: ''; width: 12px; height: 12px; margin: 0 clamp(18px, 3cqw, 34px); background: var(--ink); transform: skewX(-12deg) rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- 8. Section pieces ---------- */
.section-heading { margin-bottom: clamp(40px, 6cqw, 64px); }
.section h2 {
    margin-top: 16px;
    font: 900 clamp(3rem, 7.4cqw, 6.2rem)/.86 var(--font-display);
    letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance;
}
.section h2 span { display: block; color: var(--accent); font-style: italic; }
.section h3 { font: 800 28px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(32px, 6cqw, 80px); align-items: end; }
.section-heading > p, .split-heading > p { color: var(--fg-muted); max-width: 480px; font-size: 1.05rem; }
.split-heading > p { justify-self: end; }
.center-heading { text-align: center; max-width: 820px; margin-inline: auto; }
.center-heading > p { max-width: 620px; margin: 20px auto 0; }
.center-heading h2 span { margin-inline: auto; }

/* ---------- 9. Sections ---------- */

/* Experience */
.experience-section { background: linear-gradient(180deg, #07111f 0%, #091625 100%); padding-top: clamp(110px, 13cqw, 160px); }
.experience-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.feature-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; min-height: 400px; padding: 34px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .35s var(--ease-out), border-color .3s ease;
}
.feature-card::after {
    content: ''; position: absolute; inset: auto -20% -42% -20%; height: 58%;
    background: radial-gradient(circle, rgba(255, 94, 0, .2), transparent 65%); pointer-events: none;
    transition: opacity .3s ease; opacity: .75;
}
.feature-card:hover { border-color: rgba(255, 94, 0, .45); }
.feature-card:hover::after { opacity: 1; }
.feature-number { position: absolute; right: 18px; top: 10px; font: italic 900 96px/1 var(--font-display); color: var(--ghost-number); }
.feature-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 94, 0, .14); color: var(--orange-hot); font-size: 20px; margin-bottom: 56px; transform: skewX(-8deg); }
.feature-icon i { transform: skewX(8deg); }
.feature-card p { color: var(--fg-muted); margin-top: 14px; max-width: 420px; }
.micro-stat, .feature-foot { margin-top: auto; padding-top: 28px; position: relative; z-index: 1; }
.micro-stat { display: grid; gap: 10px; }
.micro-stat strong { font: italic 900 52px/.9 var(--font-display); color: var(--orange); }
.micro-stat span, .feature-foot small { color: var(--fg-soft); font: 700 13px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.feature-line { display: block; width: 42px; height: 2px; margin-bottom: 14px; background: var(--orange); }

/* Altitude story */
.altitude-story {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(7, 17, 31, .88) 0%, rgba(9, 38, 74, .6) 52%, rgba(13, 60, 104, .72) 100%),
        url('content/skydive2.avif') 88% 42% / cover;
}
.altitude-story::before {
    content: ''; position: absolute; inset: auto -10% -46% -10%; height: 80%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .2), transparent); pointer-events: none;
}
.altitude-layout { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7cqw, 90px); align-items: center; }
.story-copy > p:not(.section-kicker) { max-width: 520px; color: var(--fg-muted); margin-top: 22px; font-size: 1.05rem; }
.altitude-chart {
    padding: clamp(24px, 3.4cqw, 38px); border-radius: var(--radius);
    background: rgba(4, 18, 34, .46); border: 1px solid var(--line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}
.chart-head { display: flex; justify-content: space-between; margin-bottom: 18px; color: var(--fg-soft); font: 700 13px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.chart-row { display: grid; grid-template-columns: 108px 1fr 88px; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.chart-label, .chart-value { font: italic 900 30px/1 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-value { text-align: right; }
.chart-label small, .chart-value small { font-size: .46em; font-style: normal; letter-spacing: .1em; color: var(--fg-soft); }
.chart-bar { position: relative; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .14); transform: skewX(-18deg); overflow: hidden; }
.chart-bar i { position: absolute; inset: 0; width: var(--fill); background: linear-gradient(90deg, rgba(255, 94, 0, .55), var(--orange)); transform-origin: left; }
.chart-row--max .chart-label, .chart-row--max .chart-value { color: #ffb37f; }
.chart-row--max .chart-bar i { background: linear-gradient(90deg, var(--orange), #ffb37f); box-shadow: 0 0 22px rgba(255, 94, 0, .7); }

/* Jump day */
.flight-profile { position: relative; height: clamp(120px, 17cqw, 190px); margin: 0 0 6px; }
.flight-profile svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.profile-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.profile-pin {
    position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: var(--paper); border: 4px solid var(--orange-deep);
}
.profile-pin--peak { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: var(--orange); border-color: var(--ink); }
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.journey-card {
    position: relative; overflow: hidden; min-height: 300px; padding: 28px;
    background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 20px 55px rgba(7, 17, 31, .08);
}
.journey-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--orange); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease-out); }
.journey-card.is-in::after { transform: scaleX(1); }
.journey-index { position: absolute; right: 16px; top: 8px; font: italic 900 84px/1 var(--font-display); color: var(--ghost-number); }
.journey-card > i { color: var(--orange-deep); font-size: 24px; margin-bottom: 48px; }
.journey-card p { color: var(--fg-muted); margin-top: 12px; font-size: .96rem; }

/* Packages */
.package-section { background: #050c14; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card {
    container-type: inline-size;     /* the big numeral scales with the card, not the page */
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; padding: 34px;
    border: 1px solid var(--line); border-radius: 22px; background: var(--card);
    transition: transform .35s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.price-card:hover { transform: translateY(-6px); border-color: rgba(255, 94, 0, .5); }
.price-card.featured { background: linear-gradient(180deg, rgba(255, 94, 0, .18), rgba(255, 255, 255, .03)); border-color: rgba(255, 94, 0, .5); box-shadow: 0 28px 80px rgba(255, 94, 0, .12); }
.price-card.extreme { border-color: rgba(255, 255, 255, .22); }
.card-tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; color: var(--fg-soft); font: 800 13px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.ribbon { padding: 7px 12px; border-radius: 4px; background: var(--orange); color: var(--ink); font: italic 800 13px/1 var(--font-display); letter-spacing: .1em; transform: skewX(-10deg); }
.ribbon--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.altitude { margin-top: 34px; font: italic 900 clamp(2.9rem, 27cqw, 5.4rem)/.8 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.altitude small { font-size: .3em; font-style: normal; color: var(--orange-hot); vertical-align: .3em; letter-spacing: .08em; }
.price-card h3 { margin-top: 18px; font-size: 30px; }
.card-price { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card-price strong { font: italic 900 34px/1 var(--font-display); color: var(--orange); letter-spacing: .01em; }
.card-price span { color: var(--fg-soft); font: 700 13px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.freefall-meter { margin-top: 16px; display: grid; gap: 9px; }
.freefall-label { color: var(--orange-hot); font: 800 14px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.freefall-bar { position: relative; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .12); transform: skewX(-18deg); overflow: hidden; }
.freefall-bar i { position: absolute; inset: 0; width: var(--freefall); background: var(--orange); transform-origin: left; }
.price-desc { color: var(--fg-muted); margin-top: 22px; }
.features { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.features li { position: relative; padding-left: 26px; margin-bottom: 11px; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.features li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 12px; height: 6px; border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(-45deg) translateY(-50%); }
.card-link {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: auto; min-height: 50px; padding: 0 18px; border-radius: 6px;
    background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none;
    font: italic 800 17px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
.features + .card-link { margin-top: 26px; }
.price-card .card-link { margin-top: auto; }
.price-card .features { margin-bottom: 26px; }
.card-link i { transition: transform .25s var(--ease-out); }
.card-link:hover, .featured .card-link { background: var(--orange); color: var(--ink); }
.card-link:hover i { transform: translateX(6px); }

/* Media */
.media-section { background: linear-gradient(180deg, #0a1c33, #07111f); }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.video-card { overflow: hidden; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.video-art { position: relative; overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-items: center; background: #0b1a2c; }
.video-art::after { content: ''; position: absolute; inset: 40% 0 0 0; background: linear-gradient(transparent, rgba(4, 14, 26, .8)); pointer-events: none; z-index: 1; }
.video-art > span { z-index: 2; }
.video-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.video-card:hover .video-shot { transform: scale(1.06); }
.vf-corner { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .8); }
.vf-tl { left: 18px; top: 18px; border-right: 0; border-bottom: 0; }
.vf-tr { right: 18px; top: 18px; border-left: 0; border-bottom: 0; }
.vf-bl { left: 18px; bottom: 18px; border-right: 0; border-top: 0; }
.vf-br { right: 18px; bottom: 18px; border-left: 0; border-top: 0; }
.vf-rec { position: absolute; right: 30px; top: 28px; display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 800 14px/1 var(--font-display); letter-spacing: .16em; }
.vf-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: blink 1.2s steps(2, jump-none) infinite; }
.video-label { position: absolute; left: 30px; bottom: 28px; color: #fff; font: 800 14px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.video-label b { margin-right: 8px; padding: 3px 7px; border-radius: 3px; background: var(--orange); color: var(--ink); }
.video-copy { padding: 24px 26px 28px; }
.video-copy p { color: var(--fg-muted); margin-top: 8px; }
.media-note { margin-top: 28px; text-align: center; color: var(--fg-muted); }
.media-note strong { color: #fff; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: .15; } }

/* FAQ */
.faq-section { background: #fff; }
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 8cqw, 90px); align-items: start; }
.faq-intro { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-intro h2, .booking-info h2, .story-copy h2 { font-size: clamp(3rem, 6.6cqw, 5.6rem); }
.story-copy h2 { font-size: clamp(3rem, 5.6cqw, 5.6rem); }
.faq-intro > p:not(.section-kicker) { margin-top: 18px; color: var(--fg-muted); max-width: 430px; }
.faq-intro .btn { margin: 30px 0 0 6px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 24px 0; cursor: pointer;
    font: 800 23px/1.1 var(--font-display); text-transform: uppercase;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(217, 75, 0, .1); color: var(--orange-text); transition: transform .25s var(--ease-out), background .2s ease, color .2s ease; }
.faq-list summary:hover i { background: var(--orange); color: var(--ink); }
.faq-list details[open] summary i { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq-list details p { max-width: 680px; color: var(--fg-muted); padding: 0 56px 26px 0; }

/* Booking */
.booking-section { background: linear-gradient(180deg, #07111f, #050c14); padding-bottom: clamp(100px, 13cqw, 150px); }
.booking-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7cqw, 80px); align-items: start; }
.booking-info > p:not(.section-kicker) { color: var(--fg-muted); max-width: 470px; margin-top: 20px; font-size: 1.05rem; }
.booking-perks { margin-top: 30px; display: grid; gap: 14px; }
.booking-perks li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, .86); }
.booking-perks i { flex: none; width: 20px; margin-top: 5px; color: var(--orange-hot); text-align: center; }
.booking-form-container {
    padding: clamp(22px, 3.4cqw, 32px); border-radius: 26px;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
    color-scheme: dark;
}
.form-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.form-header span { font: italic 800 26px/1 var(--font-display); text-transform: uppercase; }
/* The badge only shows while the form is in demo mode (data-demo="true"). */
.demo-badge { display: none; padding: 6px 10px; border-radius: 4px; background: rgba(255, 210, 60, .16); color: #ffd23c; font: 800 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.booking-form-container:has(form[data-demo='true']) .demo-badge { display: inline-block; }
.secure-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 4px; background: rgba(120, 220, 150, .14); color: #88e0a8; font: 800 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.booking-form-container:has(form[data-demo='true']) .secure-badge { display: none; }
.form-error { margin-top: -2px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 70, 60, .12); border: 1px solid rgba(255, 70, 60, .4); color: #ffb3ad; font-size: 14px; }
.form-error a { color: #fff; font-weight: 700; white-space: nowrap; }
form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: grid; gap: 8px; min-width: 0; }
label { color: rgba(255, 255, 255, .78); font: 700 13px/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
input, select {
    width: 100%; height: 52px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 10px;
    background: rgba(0, 0, 0, .28); color: #fff; font-size: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
select option { background: #0b1a2c; color: #fff; }
input::placeholder { color: rgba(255, 255, 255, .5); }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 94, 0, .45); }
.consent-row { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .8); font: 500 14px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
.consent-row input { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 0; accent-color: var(--orange); }
form .btn { margin-top: 4px; }
.btn.is-busy i { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-note { text-align: center; color: rgba(255, 255, 255, .72); font-size: 13px; }
.booking-success { display: grid; justify-items: center; gap: 14px; padding: 46px 12px; text-align: center; outline: none; }
.booking-success h3 { font: italic 900 38px/1 var(--font-display); text-transform: uppercase; }
.booking-success p { max-width: 420px; color: var(--fg-muted); }
.booking-success .btn { margin-top: 14px; }
.success-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: 26px; animation: pop .5s var(--ease-out) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Footer */
.site-footer { background: #03080e; border-top: 1px solid rgba(255, 255, 255, .08); padding: 64px 0 24px; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .7fr 1.1fr; gap: clamp(32px, 6cqw, 60px); padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer-brand p { color: rgba(255, 255, 255, .72); margin-top: 18px; max-width: 420px; font-size: .95rem; }
.footer-col { display: grid; align-content: start; gap: 4px; }
.footer-col h2 { margin-bottom: 8px; color: #fff; font: 800 15px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.footer-col a, .footer-col p { display: flex; align-items: center; gap: 10px; min-height: 36px; color: rgba(255, 255, 255, .74); text-decoration: none; font-size: .95rem; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--orange-hot); }
.footer-col i { flex: none; width: 16px; color: var(--orange-hot); text-align: center; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding-top: 20px; color: rgba(255, 255, 255, .7); font: 700 13px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- 10. Flight scene ---------- */
/* Kept in the render tree even when unused (zero width, not display:none) so the
   artwork it defines can still be referenced by the media tiles. */
.flight-host {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
    width: var(--rail-w); overflow: hidden;
}

.flight {
    --hud-h: 196px;
    --stage-top: var(--nav-h);
    /* Defaults match the "at the door" frame so the first paint is already correct. */
    --a-x: 67; --a-y: 14; --a-yw: 11;
    --j-rot: 82deg; --j-scale: .235; --j-op: 1;
    --p-x: 66; --p-y: 14; --p-yw: 10; --p-rot: 2deg; --p-scale: 1; --p-op: 1;
    --c-op: 0; --c-inflate: 0; --c-collapse: 0; --c-flare: 0; --c-sway: 0deg; --c-pilot-op: 0;
    --pc-op: 0; --pc-ext: 0;
    --w-angle: 90deg; --w-str: .3;
    --g-rise: 0; --sky: 0; --progress: 0;

    position: absolute; inset: 0; overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, .14);
    background: #06203d;
    font-family: var(--font-display);
    color: #fff;
}
.flight-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #04162c 0%, #0b3f74 30%, #1f7cbc 66%, #63b4e0 100%); }
.flight-sky--low { background: linear-gradient(180deg, #2f87c6 0%, #7cc3e8 48%, #cfe9f4 100%); opacity: var(--sky); }
.flight-sun {
    position: absolute; left: -30%; top: -8%; width: 120%; aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(255, 244, 214, .5), rgba(255, 244, 214, .12) 42%, transparent 70%);
    opacity: calc(.5 + var(--sky) * .4); pointer-events: none;
}

.flight-stage { position: absolute; inset: var(--stage-top) 0 var(--hud-h) 0; overflow: hidden; container-type: size; }

/* far-away earth haze, fades in as the jumper gets lower */
.flight-earth {
    position: absolute; left: 0; right: 0; bottom: 0; height: 30cqh;
    background: linear-gradient(to top, rgba(112, 150, 128, .55), rgba(150, 188, 190, .22) 46%, transparent);
    opacity: calc(.35 + var(--sky) * .65);
}

/* Clouds: soft radial blobs, positioned by JS (translate in cqw / cqh) */
.cloud {
    position: absolute; left: 0; top: 0; width: 78cqw; aspect-ratio: 2.3; pointer-events: none;
    will-change: transform;
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .95) 30%, rgba(255, 255, 255, 0)) 6% 78% / 46% 56% no-repeat,
        radial-gradient(closest-side, #fff 42%, rgba(255, 255, 255, 0)) 30% 30% / 46% 84% no-repeat,
        radial-gradient(closest-side, rgba(255, 255, 255, .96) 38%, rgba(255, 255, 255, 0)) 62% 46% / 50% 78% no-repeat,
        radial-gradient(closest-side, rgba(255, 255, 255, .9) 28%, rgba(255, 255, 255, 0)) 96% 82% / 44% 52% no-repeat,
        radial-gradient(closest-side, rgba(255, 255, 255, .85) 30%, rgba(255, 255, 255, 0)) 50% 96% / 86% 40% no-repeat;
    opacity: calc(.62 - var(--g-rise) * .5);
}
.cloud--b { width: 64cqw; opacity: calc(.46 - var(--g-rise) * .4); }
.cloud--c { width: 96cqw; opacity: calc(.7 - var(--g-rise) * .56); }
.cloud--wisp { width: 120cqw; aspect-ratio: 3.4; opacity: calc(.26 - var(--g-rise) * .22); z-index: 6; }

/* Wind: streaks blow along the relative wind (sideways at exit, straight up in freefall) */
.wind {
    position: absolute; left: 50%; top: 50%; width: 170cqmax; height: 170cqmax;
    transform: translate(-50%, -50%) rotate(var(--w-angle));
    opacity: var(--w-str); pointer-events: none;
}
.wind i {
    position: absolute; top: 0; width: 1.5px; height: 12cqmax; border-radius: 2px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: windStreak .7s linear infinite;
}
.wind i:nth-child(1)  { left: 31%; animation-duration: .62s; animation-delay: -.1s; }
.wind i:nth-child(2)  { left: 36%; animation-duration: .8s;  animation-delay: -.45s; height: 8cqmax; }
.wind i:nth-child(3)  { left: 40%; animation-duration: .55s; animation-delay: -.3s; }
.wind i:nth-child(4)  { left: 44%; animation-duration: .72s; animation-delay: -.6s; height: 16cqmax; }
.wind i:nth-child(5)  { left: 47%; animation-duration: .9s;  animation-delay: -.2s; height: 7cqmax; }
.wind i:nth-child(6)  { left: 51%; animation-duration: .6s;  animation-delay: -.5s; }
.wind i:nth-child(7)  { left: 54%; animation-duration: .78s; animation-delay: -.05s; height: 15cqmax; }
.wind i:nth-child(8)  { left: 58%; animation-duration: .58s; animation-delay: -.38s; }
.wind i:nth-child(9)  { left: 61%; animation-duration: .85s; animation-delay: -.7s; height: 9cqmax; }
.wind i:nth-child(10) { left: 65%; animation-duration: .66s; animation-delay: -.25s; }
.wind i:nth-child(11) { left: 68%; animation-duration: .74s; animation-delay: -.55s; height: 14cqmax; }
.wind i:nth-child(12) { left: 34%; animation-duration: .95s; animation-delay: -.8s; height: 6cqmax; }
@keyframes windStreak {
    from { transform: translateY(135cqmax); }
    to { transform: translateY(20cqmax); }
}
.flight[data-phase='canopy'] .wind i, .flight[data-phase='landing'] .wind i { animation-play-state: paused; }

/* Aircraft: positioned by its door, so the jumper stays registered to it */
.plane {
    position: absolute; left: 0; top: 0; width: 106cqw; aspect-ratio: 770 / 270;
    transform-origin: 57.8% 55.6%;
    transform:
        translate(calc(var(--p-x) * 1cqw - 57.8%), calc(var(--p-y) * 1cqh + var(--p-yw) * 1cqw - 55.6%))
        rotate(var(--p-rot)) scale(var(--p-scale));
    opacity: var(--p-op);
    filter: drop-shadow(0 1.6cqw 2.4cqw rgba(2, 10, 20, .35));
    will-change: transform, opacity;
}
.plane svg, .jumper svg, .canopy-system svg { width: 100%; height: 100%; overflow: visible; }
.plane-bob { animation: planeBob 3.4s ease-in-out infinite; }
@keyframes planeBob { 0%, 100% { transform: translateY(-.5cqw) rotate(-.4deg); } 50% { transform: translateY(.6cqw) rotate(.5deg); } }
.pl-blade { transform-box: fill-box; transform-origin: center; animation: propSpin .09s linear infinite; }
@keyframes propSpin { 0%, 100% { transform: scaleY(1); opacity: .5; } 50% { transform: scaleY(.25); opacity: .25; } }
.pl-beacon, .pl-navlight { animation: blink 1.1s steps(2, jump-none) infinite; }
.pl-jumplight { animation: jumpLight 1.4s ease-in-out infinite; }
@keyframes jumpLight { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.flight:not([data-phase='door']):not([data-phase='exit']) .plane { visibility: hidden; }

/* Everything attached to the jumper hangs off one anchor point */
.rig-anchor {
    position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4;
    transform: translate(calc(var(--a-x) * 1cqw), calc(var(--a-y) * 1cqh + var(--a-yw) * 1cqw));
    will-change: transform;
}

.jumper {
    position: absolute; width: 76cqw; aspect-ratio: 560 / 260;
    left: calc(76cqw * -.43); top: calc(76cqw * 260 / 560 * -.62);
    transform-origin: 43% 62%;
    transform: rotate(var(--j-rot)) scale(var(--j-scale));
    opacity: var(--j-op);
    filter: drop-shadow(0 2cqw 2.6cqw rgba(2, 10, 20, .32));
    will-change: transform, opacity;
}
.flight[data-phase='canopy'] .jumper, .flight[data-phase='landing'] .jumper { visibility: hidden; }

/* Freefall life: the whole body floats, limbs fight the wind */
.flight[data-phase='exit'] .jumper-float,
.flight[data-phase='freefall'] .jumper-float,
.flight[data-phase='deploy'] .jumper-float { animation: bodyFloat 1.25s ease-in-out infinite; }
@keyframes bodyFloat {
    0%, 100% { transform: translate(0, -.5cqw) rotate(-.9deg); }
    50% { transform: translate(.4cqw, .6cqw) rotate(1deg); }
}
.jf-near-arm { transform-origin: 236px 205px; }
.jf-far-arm { transform-origin: 238px 170px; }
.jf-near-shin { transform-origin: 464px 206px; }
.jf-far-leg { transform-origin: 346px 204px; }
.flight[data-phase='exit'] .jf-near-arm, .flight[data-phase='freefall'] .jf-near-arm { animation: limbFlutter .37s ease-in-out infinite alternate; --flutter: 2.4deg; }
.flight[data-phase='exit'] .jf-far-arm, .flight[data-phase='freefall'] .jf-far-arm { animation: limbFlutter .43s ease-in-out infinite alternate; --flutter: -2.8deg; }
.flight[data-phase='exit'] .jf-near-shin, .flight[data-phase='freefall'] .jf-near-shin { animation: limbFlutter .31s ease-in-out infinite alternate; --flutter: 3.2deg; }
.flight[data-phase='exit'] .jf-far-leg, .flight[data-phase='freefall'] .jf-far-leg { animation: limbFlutter .47s ease-in-out infinite alternate; --flutter: -2deg; }
@keyframes limbFlutter { from { transform: rotate(calc(var(--flutter) * -1)); } to { transform: rotate(var(--flutter)); } }

/* Pilot chute and bridle, thrown at deployment */
.pilot-chute {
    position: absolute; left: -1px; bottom: 0; width: 2px; height: calc(var(--pc-ext) * 40cqw);
    background: linear-gradient(to top, #0e1826, #33465c);
    opacity: var(--pc-op); transform-origin: 50% 100%; transform: rotate(-3deg);
}
.pilot-chute::before {
    content: ''; position: absolute; left: 50%; top: 0; width: 11cqw; height: 6.5cqw;
    transform: translate(-50%, -70%);
    border-radius: 50% 50% 46% 46% / 78% 78% 22% 22%;
    background: radial-gradient(120% 110% at 40% 10%, #ffb37f, var(--orange) 46%, #a83200);
}

/* Canopy, lines and the pilot hanging under them */
.canopy-system {
    position: absolute; width: 92cqw; aspect-ratio: 660 / 635;
    left: -46cqw; top: calc(92cqw * 635 / 660 * -.745);
    transform-origin: 50% 74.5%;
    transform: rotate(var(--c-sway));
    opacity: var(--c-op);
    filter: drop-shadow(0 2cqw 3cqw rgba(2, 10, 20, .3));
    will-change: transform, opacity;
}
.flight:not([data-phase='deploy']):not([data-phase='canopy']):not([data-phase='landing']) .canopy-system { visibility: hidden; }
.flight[data-phase='canopy'] .canopy-swing { transform-origin: 50% 8%; animation: canopySwing 3.4s ease-in-out infinite; }
@keyframes canopySwing { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
/* The wing streams out narrow, snaps open, and finally settles on the grass behind the pilot. */
.cn-wing {
    transform-origin: 350px 398px;
    transform:
        translate(calc(var(--c-collapse) * 20px), calc(var(--c-collapse) * 292px))
        rotate(calc(var(--c-collapse) * 5deg))
        scale(calc(.16 + .84 * var(--c-inflate)), calc(1.42 - .42 * var(--c-inflate) - .66 * var(--c-collapse)));
}
.cn-lines { opacity: calc(1 - var(--c-collapse)); }
.cn-fabric { transform-origin: 350px 220px; }
.flight[data-phase='canopy'] .cn-fabric { animation: canopyBreathe 1.9s ease-in-out infinite; }
@keyframes canopyBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
.cn-pilot { opacity: var(--c-pilot-op); }
.cn-steer { opacity: calc(1 - var(--c-flare) * 4); }
/* Flare: both hands pull the toggles down */
.cn-arm-l { transform: rotate(calc(var(--c-flare) * -55deg)); }
.cn-fore-l { transform: rotate(calc(var(--c-flare) * -118deg)); }
.cn-arm-r { transform: rotate(calc(var(--c-flare) * 55deg)); }
.cn-fore-r { transform: rotate(calc(var(--c-flare) * 118deg)); }

/* Landing field rises into frame during the canopy ride */
.ground {
    position: absolute; left: 0; right: 0; bottom: 0; height: 45cqw; z-index: 3;
    transform: translateY(calc((1 - var(--g-rise)) * 101%));
    will-change: transform;
}
.ground svg { width: 100%; height: 100%; }
.windsock { transform-origin: 0 5px; animation: sock 1.8s ease-in-out infinite alternate; }
@keyframes sock { from { transform: rotate(-4deg); } to { transform: rotate(7deg); } }
.dust {
    position: absolute; bottom: 7cqw; left: 50%; width: 16cqw; height: 6cqw; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); opacity: 0;
}
.flight[data-landed] .dust--l { animation: dustPuff .9s ease-out both; --dx: -17cqw; }
.flight[data-landed] .dust--r { animation: dustPuff .9s ease-out both .06s; --dx: 3cqw; }
@keyframes dustPuff {
    0% { transform: translateX(-50%) scale(.3); opacity: .9; }
    100% { transform: translateX(calc(-50% + var(--dx))) translateY(-2cqw) scale(1.5); opacity: 0; }
}

/* Telemetry */
.flight-hud {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--hud-h); z-index: 8;
    display: flex; flex-direction: column; padding: 16px 20px 18px;
    background: rgba(3, 10, 18, .9); border-top: 1px solid rgba(255, 255, 255, .14);
}
.hud-kicker { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .74); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.hud-live { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: blink 1.2s steps(2, jump-none) infinite; }
.hud-phase { margin-top: 9px; font-style: italic; font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.hud-detail { margin-top: 6px; min-height: 2.9em; color: rgba(255, 255, 255, .82); font: 400 13px/1.45 var(--font-body); }
.hud-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: auto; }
.hud-readouts > div { display: grid; gap: 5px; }
.hud-label { color: rgba(255, 255, 255, .72); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.hud-value { color: var(--orange-hot); font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hud-value b { margin-right: 3px; color: #fff; font-style: italic; font-weight: 900; font-size: 30px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hud-progress { position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: rgba(255, 255, 255, .16); }
.hud-progress span { display: block; height: 100%; background: var(--orange); box-shadow: 0 0 14px rgba(255, 94, 0, .8); transform-origin: left; transform: scaleX(var(--progress)); }

/* Autoplay mode: the scene sits inside the hero on small screens */
.hero-scene-slot { position: relative; min-width: 0; }
.hero-scene-slot .flight {
    --hud-h: 82px; --stage-top: 0px;
    position: relative; inset: auto; height: clamp(420px, 122cqw, 580px);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 24px;
    box-shadow: var(--shadow);
}
.flight[data-mode='loop'] .hud-detail, .flight[data-mode='loop'] .hud-hint { display: none; }
.flight[data-mode='loop'] .flight-hud { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; }
.flight[data-mode='loop'] .hud-kicker { display: none; }
.flight[data-mode='loop'] .hud-phase { margin: 0; font-size: 24px; }
.flight[data-mode='loop'] .hud-readouts { margin: 0; gap: 16px; grid-template-columns: auto auto; }
.flight[data-mode='loop'] .hud-label { font-size: 11px; }
.flight[data-mode='loop'] .hud-value { font-size: 12px; }
.flight[data-mode='loop'] .hud-value b { font-size: 22px; }

/* ---------- 11. Reveal motion (things fall into place) ---------- */
.js [data-reveal] {
    opacity: 0; transform: translateY(-26px);
    transition: opacity .6s ease, transform .7s var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .price-card[data-reveal].is-in:hover { transform: translateY(-6px); transition-delay: 0s; }

.js .chart-bar i, .js .freefall-bar i { transform: scaleX(0); transition: transform 1.3s var(--ease-out) .25s; }
.js .is-in .chart-bar i, .js .is-in .freefall-bar i, .js .is-in.price-card .freefall-bar i { transform: none; }
.js .chart-row:nth-child(3) .chart-bar i { transition-duration: 1.7s; }
.js .chart-row:nth-child(4) .chart-bar i { transition-duration: 2.1s; }
.js .profile-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) .2s; }
.js .is-in .profile-line { stroke-dashoffset: 0; }
.js .profile-pin { transform: scale(0); transition: transform .5s var(--ease-out); }
.js .is-in .profile-pin { transform: none; }
.js .is-in .profile-pin:nth-of-type(1) { transition-delay: .25s; }
.js .is-in .profile-pin:nth-of-type(2) { transition-delay: .7s; }
.js .is-in .profile-pin:nth-of-type(3) { transition-delay: 1.15s; }
.js .is-in .profile-pin:nth-of-type(4) { transition-delay: 1.7s; }

/* ---------- 14. Video section + photo gallery ---------- */
.video-section { position: relative; overflow: hidden; background: #050c16; }
.video-section-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(62% 54% at 50% -4%, rgba(255, 94, 0, .16), transparent 68%);
}
.video-section .container { position: relative; z-index: 1; }
.video-stage { margin: 0 auto; max-width: 1060px; }
.video-facade {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 22px; border: 1px solid rgba(255, 255, 255, .16);
    background: #0a1626 var(--poster, none) center / cover no-repeat;
    box-shadow: 0 44px 110px rgba(0, 0, 0, .55);
    cursor: pointer;
}
/* vignette + slow drift so the still feels alive before you press play */
.video-facade::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(70% 70% at 50% 42%, transparent 40%, rgba(4, 12, 22, .55)),
        linear-gradient(0deg, rgba(4, 12, 22, .7), transparent 46%);
}
.js .video-facade { background-size: 108% auto; animation: posterDrift 18s ease-in-out infinite alternate; }
@keyframes posterDrift { from { background-position: 48% 32%; } to { background-position: 52% 42%; } }
.video-facade-btn {
    position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
    display: grid; place-items: center; border: 0; background: transparent; cursor: pointer;
}
.video-play {
    position: relative; width: clamp(74px, 9cqw, 108px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--orange); color: var(--ink); font-size: clamp(26px, 3.4cqw, 36px);
    box-shadow: 0 22px 54px rgba(255, 94, 0, .5);
    transition: transform .25s var(--ease-out);
}
.video-play i { margin-left: .14em; }   /* optically centre the triangle */
.video-play::after {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    animation: playPulse 2.2s var(--ease-out) infinite;
}
@keyframes playPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.video-facade:hover .video-play, .video-facade-btn:focus-visible .video-play { transform: scale(1.09); }
.video-facade-btn:focus-visible { outline: none; }
.video-facade-btn:focus-visible .video-play { box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px #fff; }
.video-facade-chrome {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: clamp(16px, 2.4cqw, 26px);
}
.video-facade-rec { display: inline-flex; align-items: center; gap: 9px; color: #fff; font: 800 14px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.video-facade-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: blink 1.2s steps(2, jump-none) infinite; }
.video-facade-name { color: rgba(255, 255, 255, .92); font: 700 14px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.video-frame { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.video-caption { margin-top: 16px; text-align: center; color: var(--fg-muted); font-size: .95rem; }
.video-caption a { color: var(--orange-hot); font-weight: 600; white-space: nowrap; }
.video-caption a i { font-size: .82em; margin-left: 2px; }

/* Photo gallery (marquee) */
.gallery-section { background: linear-gradient(180deg, #07111f 0%, #0a1c33 100%); overflow: hidden; }
.gallery-marquee {
    position: relative; overflow: hidden; margin-top: clamp(34px, 5cqw, 58px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery-track { display: flex; gap: 16px; width: max-content; animation: galleryScroll 46s linear infinite; will-change: transform; }
.gallery-marquee:hover .gallery-track, .gallery-marquee:focus-within .gallery-track { animation-play-state: paused; }
.gallery-item {
    position: relative; flex: none; height: clamp(220px, 30cqw, 320px); margin: 0;
    border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.gallery-item img { height: 100%; width: auto; max-width: none; display: block; object-fit: cover; }
.gallery-item figcaption {
    position: absolute; left: 14px; bottom: 12px;
    padding: 6px 11px; border-radius: 6px; background: rgba(5, 12, 22, .72);
    color: #fff; font: 800 12px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@keyframes galleryScroll { to { transform: translateX(-50%); } }

/* ---------- 15. Call-to-action: phone everywhere ---------- */
.hero-call { margin-top: 18px; color: rgba(255, 255, 255, .74); font-size: .98rem; }
.hero-call a { color: var(--orange-hot); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.btn--call i { font-size: .78em; }

/* Booking "call to book" card */
.call-card {
    display: inline-flex; align-items: center; gap: 16px; margin-top: 26px;
    padding: 12px 24px 12px 12px; border-radius: 16px; text-decoration: none; color: #fff;
    background: rgba(255, 94, 0, .12); border: 1px solid rgba(255, 94, 0, .42);
    transition: background .2s ease, transform .2s ease;
}
.call-card:hover { background: rgba(255, 94, 0, .2); transform: translateY(-2px); }
.call-card-icon { flex: none; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: var(--orange); color: var(--ink); font-size: 20px; }
.call-card-text { display: grid; gap: 3px; }
.call-card-text small { color: var(--orange-hot); font: 800 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.call-card-text strong { font: 900 28px/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Footer phone, made prominent */
.footer-phone { font-size: 1.15rem !important; font-weight: 700; }
.footer-phone strong { color: #fff; }

/* Sticky action bar on phones */
.mobile-bar { display: none; }
@media (max-width: 720px) {
    .mobile-bar {
        display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(3, 10, 18, .94); border-top: 1px solid rgba(255, 255, 255, .12);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    }
    .mobile-bar .btn { flex: 1; min-height: 52px; padding: 0 12px; font-size: 16px; }
    .mobile-bar-call { flex: 1.35; }
    .page { padding-bottom: 74px; }   /* keep the footer clear of the bar */
}

/* ---------- 16. Sub-pages: nav state, page hero, packages, contact ---------- */
body[data-page="packages"] .nav-lk-packages,
body[data-page="contact"] .nav-lk-contact,
body[data-page="aff"] .nav-lk-aff,
body[data-page="giftcards"] .nav-lk-gift { color: #fff; }
body[data-page="packages"] .nav-lk-packages::after,
body[data-page="contact"] .nav-lk-contact::after,
body[data-page="aff"] .nav-lk-aff::after,
body[data-page="giftcards"] .nav-lk-gift::after { transform: scaleX(1); }

/* Compact hero for interior pages */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--nav-h) + 74px) 0 74px; background: var(--ink); color: #fff; }
.page-hero-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(92deg, rgba(2, 8, 15, .93) 0%, rgba(2, 8, 15, .6) 56%, rgba(2, 8, 15, .32) 100%), var(--img, none) center 30% / cover, radial-gradient(120% 90% at 85% 10%, #1a6aa3, #0c355c 45%, #07111f 78%); }
.page-hero h1 { margin: 14px 0 16px; font: italic 900 clamp(3rem, 9cqw, 5.6rem)/.88 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.page-hero h1 span { color: var(--orange); }
.page-hero p { max-width: 640px; color: rgba(255, 255, 255, .84); font-size: clamp(1rem, 1.8cqw, 1.2rem); }
.page-hero .eyebrow { color: var(--orange-hot); }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 30px; }

/* Packages page */
.packages-intro { max-width: 720px; }
.section-lead { color: var(--fg-muted); max-width: 640px; margin-top: 16px; font-size: 1.05rem; }
.bundle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(32px, 5cqw, 52px); }
.bundle-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); transition: transform .3s var(--ease-out), border-color .3s ease; }
.bundle-card:hover { transform: translateY(-6px); border-color: rgba(255, 94, 0, .5); }
.bundle-card.is-popular { background: linear-gradient(180deg, rgba(255, 94, 0, .16), rgba(255, 255, 255, .03)); border-color: rgba(255, 94, 0, .5); }
.bundle-ribbon { position: absolute; top: 16px; right: 16px; padding: 6px 11px; border-radius: 4px; background: var(--orange); color: var(--ink); font: italic 800 12px/1 var(--font-display); letter-spacing: .1em; transform: skewX(-10deg); }
.bundle-head { display: flex; align-items: baseline; gap: 8px; }
.bundle-count { font: italic 900 clamp(3.4rem, 22cqw, 4.6rem)/.8 var(--font-display); color: var(--orange); }
.bundle-label { font: 800 15px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
.bundle-card h3 { margin-top: 10px; font: 800 24px/1 var(--font-display); text-transform: uppercase; }
.bundle-per { margin-top: 16px; display: flex; align-items: baseline; gap: 7px; }
.bundle-per strong { font: italic 900 40px/1 var(--font-display); }
.bundle-per span { color: var(--fg-soft); font: 700 14px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.bundle-total { margin-top: 8px; color: var(--fg-muted); font-size: .95rem; }
.bundle-total em { font-style: normal; color: var(--orange-hot); font-weight: 700; }
.bundle-desc { margin-top: 14px; color: var(--fg-muted); font-size: .95rem; }
.bundle-card .card-link { margin-top: auto; }
.bundle-card .bundle-desc + .card-link { margin-top: 20px; }
.price-note { margin-top: 28px; color: var(--fg-soft); font-size: .92rem; max-width: 760px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6cqw, 68px); align-items: start; }
.contact-method { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.contact-method:first-of-type { border-top: 0; }
.contact-method .ci { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 94, 0, .14); color: var(--orange-hot); font-size: 19px; }
.contact-method h3 { font: 800 15px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); margin-bottom: 6px; }
.contact-method a, .contact-method p { color: #fff; text-decoration: none; font-size: 1.05rem; }
.contact-method .big { font: italic 900 28px/1 var(--font-display); }
.contact-method a.big:hover { color: var(--orange-hot); }
.contact-method small { display: block; margin-top: 4px; color: var(--fg-soft); font-size: .88rem; }
.map-embed { margin-top: 28px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: #0b1a2c; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }
.contact-form-container { padding: clamp(22px, 3.4cqw, 32px); border-radius: 26px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0, 0, 0, .3); color-scheme: dark; }
.contact-form-container textarea { width: 100%; min-height: 130px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 10px; background: rgba(0, 0, 0, .28); color: #fff; font: inherit; resize: vertical; }
.contact-form-container textarea:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 94, 0, .45); }
.contact-success { display: grid; justify-items: center; gap: 12px; padding: 40px 12px; text-align: center; }
.contact-success .success-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: 24px; }
.contact-success h3 { font: italic 900 32px/1 var(--font-display); text-transform: uppercase; }

@container page (max-width: 1040px) { .bundle-grid { grid-template-columns: 1fr 1fr; } }
@container page (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@container page (max-width: 560px) { .bundle-grid { grid-template-columns: 1fr; } }

/* ---------- 17. AFF course + Gift cards ---------- */
.quickfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(28px, 4cqw, 44px); }
.quickfacts > div { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.quickfacts dt { color: var(--fg-soft); font: 700 13px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.quickfacts dd { margin-top: 8px; font: italic 900 clamp(2rem, 5cqw, 2.8rem)/1 var(--font-display); color: var(--orange); }

.aff-packs { grid-template-columns: 1fr 1fr; }
.price-list-title { margin: clamp(36px, 5cqw, 52px) 0 14px; font: 800 22px/1 var(--font-display); text-transform: uppercase; }
.price-list { border-top: 1px solid var(--line); max-width: 760px; }
.price-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.price-list li > span { color: rgba(255, 255, 255, .9); font-size: 1.02rem; }
.price-list li > span small { display: block; color: var(--fg-soft); font-size: .82rem; margin-top: 2px; }
.price-list li b { font: italic 900 24px/1 var(--font-display); white-space: nowrap; }
.price-list li b small { font-size: .5em; color: var(--fg-soft); font-style: normal; font-weight: 700; margin-left: 2px; letter-spacing: .06em; }
.big-features { border-top: 0; margin-top: 0; padding-top: 0; }
.big-features li { font-size: 1.08rem; margin-bottom: 16px; padding-left: 30px; color: rgba(255, 255, 255, .88); }
.big-features li::before { top: .62em; }

.gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(28px, 4cqw, 48px); }
.gift-card { display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); transition: transform .3s var(--ease-out), border-color .3s ease; }
.gift-card:hover { transform: translateY(-6px); border-color: rgba(255, 94, 0, .5); }
.gift-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: rgba(255, 94, 0, .14); color: var(--orange-hot); font-size: 22px; transform: skewX(-8deg); }
.gift-icon i { transform: skewX(8deg); }
.gift-card h3 { margin-top: 22px; font: 800 28px/1 var(--font-display); text-transform: uppercase; }
.gift-from { margin-top: 12px; color: var(--fg-soft); font: 700 15px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: baseline; }
.gift-from strong { font: italic 900 34px/1 var(--font-display); color: var(--orange); margin-left: 8px; }
.gift-desc { margin-top: 16px; color: var(--fg-muted); }
.gift-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gift-amounts span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font: 800 14px/1 var(--font-display); letter-spacing: .04em; color: var(--fg-soft); }
.gift-card .card-link { margin-top: auto; }
.gift-card .gift-desc + .card-link, .gift-card .gift-amounts + .card-link { margin-top: 24px; }

@container page (max-width: 900px) { .aff-packs { grid-template-columns: 1fr; } .gift-grid { grid-template-columns: 1fr; } }
@container page (max-width: 620px) { .quickfacts { grid-template-columns: 1fr 1fr; } }

/* ---------- 12. Responsive: queries measure the content column ---------- */
@container page (max-width: 1040px) {
    .experience-grid { grid-template-columns: 1fr 1fr; }
    .feature-card-large { grid-column: 1 / -1; min-height: 340px; }
    .journey-grid { grid-template-columns: 1fr 1fr; }
    .flight-profile { display: none; }
    .journey-card { min-height: 0; }
}
@container page (max-width: 900px) {
    .split-heading, .altitude-layout, .faq-layout, .booking-shell { grid-template-columns: 1fr; }
    .split-heading > p { justify-self: start; }
    .faq-intro { position: static; }
    .pricing-grid { grid-template-columns: 1fr; }
    .price-card .altitude { margin-top: 24px; }
}
/* Tablet: copy and the autoplay scene sit side by side in the hero */
@container page (min-width: 820px) {
    .hero-inner:has(.hero-scene-slot:not(:empty)) {
        --scene-w: clamp(300px, 38cqw, 380px);
        grid-template-columns: minmax(0, 1fr) var(--scene-w);
    }
    /* Sized from the width left for the copy column, so "GRAVITY." never runs under the scene. */
    .hero-inner:has(.hero-scene-slot:not(:empty)) .hero-title { font-size: min(8.5rem, calc((90cqw - 44px - var(--scene-w)) / 4)); }
    .hero-scene-slot .flight { height: clamp(460px, 62cqw, 600px); }
}
@container page (max-width: 720px) {
    .experience-grid, .video-grid, .footer-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: 0; }
    .feature-icon { margin-bottom: 36px; }
    .scroll-cue { display: none; }
    .hero { padding-bottom: 72px; }
    .footer-grid { gap: 34px; }
}
@container page (max-width: 560px) {
    .container { width: calc(100% - 36px); }
    .journey-grid, .form-row { grid-template-columns: 1fr; }
    .journey-card > i { margin-bottom: 28px; }
    .hero-buttons { flex-direction: column; align-items: stretch; padding: 0 8px; }
    .hero-stats { width: 100%; justify-content: space-between; gap: 14px 16px; }
    .hero-stats dd { font-size: 2.2rem; }
    .hero-stats dt { font-size: 12px; letter-spacing: .1em; }
    .section h2, .faq-intro h2, .booking-info h2, .story-copy h2 { font-size: clamp(2.75rem, 13cqw, 4rem); }
    .feature-card, .price-card, .journey-card { padding: 26px; }
    .chart-row { grid-template-columns: 88px 1fr 70px; gap: 10px; }
    .chart-label, .chart-value { font-size: 24px; }
    .faq-list summary { font-size: 20px; }
    .faq-list details p { padding-right: 0; }
    .faq-intro .btn { width: calc(100% - 12px); }
    .form-header { flex-wrap: wrap; }
    .gallery-item { height: clamp(180px, 52cqw, 240px); }
    .video-facade { border-radius: 16px; }
    .video-facade-name { display: none; }   /* keep the chrome uncluttered on phones */
}

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; transition-delay: 0s !important;
    }
    .ticker-track { animation: none; }
    .hero-streaks, .wind { display: none; }
    .js [data-reveal] { opacity: 1; transform: none; }
    /* Marquee becomes a static, swipeable strip; the poster stops drifting. */
    .gallery-track { animation: none; }
    .gallery-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .js .video-facade { animation: none; }
    .video-play::after { display: none; }
}