/* Global Quest · base, nav, environment, hero */
:root{
  --canvas:#0B2630;
  --canvas-deep:#08202A;
  --panel:#123642;
  --panel-2:#16404D;
  --accent:#D9714A;
  --accent-hover:#E5845D;
  --accent-muted:rgba(217,113,74,.26);
  --text-primary:#F2ECE2;
  --text-secondary:#A7BDC3;
  --line:rgba(167,189,195,.2);
  --line-strong:#6E8185;
  --horizon:#E7B08A;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --maxw:1120px;
  --gutter:clamp(16px,4vw,40px);
  --navh:76px;
  --r:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;animation:pageIn .9s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--canvas)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--accent);color:var(--canvas);padding:12px 18px;border-radius:999px;font-weight:500;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}

/* mono labels */
.kicker{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:500 16px/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;text-shadow:none;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out),color .35s var(--ease-out)}
.btn-primary{background:var(--accent);color:var(--canvas)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(217,113,74,.55)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:rgba(8,32,42,.35);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--text-primary);transform:translateY(-1px)}
.btn .arrow{transition:transform .35s var(--ease-out)}
.btn:hover .arrow{transform:translateX(3px)}
.micro{font:400 13px/1.4 var(--f-mono);color:var(--text-secondary);letter-spacing:.02em}

/* fixed environment layer */
.env{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--canvas);pointer-events:none}
.env-grad{position:absolute;inset:-20%;background:
  radial-gradient(60% 40% at 50% 112%,rgba(231,176,138,.12),transparent 70%),
  radial-gradient(45% 55% at 12% 0%,rgba(28,78,92,.7),transparent 70%),
  radial-gradient(40% 50% at 92% 40%,rgba(20,58,70,.6),transparent 70%),
  linear-gradient(180deg,#0C2A35 0%,#0B2630 45%,#09212A 100%);
  animation:envDrift 90s var(--ease-inout) -30s infinite alternate}
@keyframes envDrift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,-2%,0) scale(1.06)}}
.env-wisp{position:absolute;width:70vw;height:22vw;border-radius:50%;background:radial-gradient(closest-side,rgba(242,236,226,.05),transparent);filter:blur(10px);animation:wisp 120s linear infinite}
.env-wisp.w1{top:18%;left:-30%;animation-delay:-40s}
.env-wisp.w2{top:58%;left:-40%;animation-duration:150s;animation-delay:-95s;opacity:.7}
.env-wisp.w3{top:82%;left:-35%;animation-duration:170s;animation-delay:-10s;opacity:.5}
@keyframes wisp{from{transform:translate3d(0,0,0)}to{transform:translate3d(170vw,-4vh,0)}}
.env-grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--navh);display:flex;align-items:center;gap:28px;padding:0 var(--gutter);transition:background-color .5s var(--ease-out),backdrop-filter .5s var(--ease-out),border-color .5s var(--ease-out);border-bottom:1px solid transparent}
.nav.solid{background:rgba(9,33,42,.78);backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;margin-right:auto}
.brand-mark{height:40px;width:auto}
.brand-word{height:30px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{position:relative;font:500 15px/1 var(--f-body);text-decoration:none;color:var(--text-primary);opacity:.86;padding:8px 0;transition:opacity .3s var(--ease-out)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav-cta{min-height:42px;padding:0 20px;font-size:15px}
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.nav-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--horizon));transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:980px){.nav-links{display:none}.nav-cta{margin-left:auto}}
@media (max-width:420px){.brand-word{height:24px}.brand-mark{height:34px}.nav-cta{padding:0 16px}}

/* hero: scrub stage */
.hero{position:relative;height:1000vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0B2630}
.poster{position:absolute;inset:0;background:#0B2630 center/cover no-repeat}
#heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity .9s var(--ease-out)}
.stage.video-ready #heroVideo{opacity:1}
.stage.video-failed #heroVideo{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,22,28,.55) 0%,rgba(8,22,28,0) 24%),
  radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

.band{position:absolute;inset:0;display:flex;align-items:flex-start;padding:calc(var(--navh) + 7vh) var(--gutter) 0;opacity:0;pointer-events:none;text-shadow:var(--tshadow)}
.band.on{pointer-events:auto}
.band.center{justify-content:center;text-align:center}
.band-inner{position:relative;isolation:isolate;width:min(820px,100%);margin-left:max(0px,calc((100vw - var(--maxw))/2 - var(--gutter)))}
.band.center .band-inner{margin-left:0}
/* per-band scrim: a flat plateau under the words, then a long falloff so the footage corners stay alive.
   Widened after the worst-frame audit: the atmosphere line, the golden route and the sunset band all cross behind the headlines. */
.band-inner::before{content:"";position:absolute;left:50%;top:50%;width:2200px;height:900px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;opacity:clamp(.25,calc(.25 + 1.5*var(--k,1)),1);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(5,5,10,var(--sa,.72)) 0%,rgba(5,5,10,var(--sa,.72)) 38%,rgba(5,5,10,calc(var(--sa,.72)*.55)) 64%,rgba(5,5,10,0) 100%)}
.band.center .band-inner::before{height:860px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(5,5,10,var(--sa,.72)) 0%,rgba(5,5,10,var(--sa,.72)) 46%,rgba(5,5,10,calc(var(--sa,.72)*.55)) 70%,rgba(5,5,10,0) 100%)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);backdrop-filter:blur(10px);font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-primary);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(217,113,74,.6);animation:pulse 4s var(--ease-out) -1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,113,74,.55)}70%{box-shadow:0 0 0 10px rgba(217,113,74,0)}100%{box-shadow:0 0 0 0 rgba(217,113,74,0)}}

.hero-title{font-family:var(--f-display);font-weight:600;font-size:clamp(42px,6.4vw,92px);line-height:1.03;letter-spacing:-.018em;font-variation-settings:"opsz" 144;margin-top:22px;max-width:15ch}
.hero-title em{font-style:italic;font-weight:400;color:var(--horizon)}
.band.center .hero-title{margin-left:auto;margin-right:auto;max-width:17ch}
.hero-sub{font-size:clamp(17px,1.45vw,21px);line-height:1.55;margin-top:20px;max-width:46ch;color:var(--text-primary)}
.band.center .hero-sub{margin-left:auto;margin-right:auto}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;align-items:center}
.band.center .hero-cta{justify-content:center}
.hero-cta .micro{flex-basis:100%;text-shadow:0 1px 3px rgba(5,5,10,.9)}

/* split text */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}

/* entrance: drift-down (band 1) */
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-28px))}
.fx-drift .chip{opacity:clamp(0,var(--k,0)*3,1)}
/* entrance: blur-to-sharp (band 2) */
.fx-blur .stack{position:relative;display:block}
.fx-blur .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));transform:scale(1.03)}
.fx-blur .sharp{opacity:var(--k,0);transform:scale(calc(1.03 - .03*var(--k,0)))}
.fx-blur .hero-sub{opacity:clamp(0,(var(--k,0) - .45)*2.5,1)}
/* entrance: halves parting (band 3) */
.fx-part .half{display:inline-block;--kc:clamp(0,var(--k,0)*1.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.fx-part .hero-sub{opacity:clamp(0,(var(--k,0) - .4)*2.5,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .4)*2.5,1))*12px))}
/* entrance: word rise into staged settle (band 4) */
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3.2,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*34px))}
.fx-rise .hero-sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.fx-rise .hero-cta{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* loading ring and scroll cue */
.loader{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-primary);text-shadow:0 1px 3px rgba(5,5,10,.9);transition:opacity .6s var(--ease-out)}
.ring{width:40px;height:40px;transform:rotate(-90deg)}
.ring .track{opacity:.22}
.ring .bar{transition:stroke-dashoffset .2s linear}
.chev{width:22px;height:22px;animation:cue 2.4s var(--ease-inout) -0.6s infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
.stage.scrolled .loader{opacity:0}
@media (max-height:560px){.loader{display:none}}

/* hero: static version (the five gates) */
.static-hero{display:none;position:relative;min-height:100vh;min-height:100svh;align-items:flex-end;padding:calc(var(--navh) + 32px) var(--gutter) 56px;background:#0B2630 center/cover no-repeat;isolation:isolate}
.static-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,22,28,.72) 0%,rgba(8,22,28,.25) 38%,rgba(8,22,28,.55) 62%,rgba(8,26,34,.94) 100%)}
.static-hero .inner{width:min(var(--maxw),100%);margin:0 auto;text-shadow:var(--tshadow)}
.static-hero .hero-title{font-size:clamp(38px,9vw,64px);max-width:14ch}
.static-hero .hero-sub{font-size:17px}

@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{display:none}
  .static-hero{display:flex}
}

/* touch targets */
@media (pointer:coarse){.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}.nav-links a{min-height:44px;display:inline-flex;align-items:center}}

/* pause everything on hidden tabs */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* loader states and the still-image journey (video failed) */
.loader .chev{display:none}
.loader.done .ring{display:none}
.loader.done .chev{display:block}
.stills{position:absolute;inset:0;pointer-events:none}
.still{position:absolute;inset:0;background:#0B2630 center/cover no-repeat;opacity:0}
.stage:not(.video-failed) .stills{display:none}

/* entrance: approach from depth (band 1, echoes the orbital dive) */
.fx-approach .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:scale(calc(.82 + .18*var(--kc)));transform-origin:left bottom}
.fx-approach .chip{opacity:clamp(0,var(--k,0)*3,1)}
/* entrance: letters snap into place left to right (band 2, echoes the route drawing) */
.fx-snap .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* entrance: letters gather out of the mist (band 4) */
.fx-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.fx-scatter .hero-sub,.fx-snap .hero-sub{opacity:clamp(0,(var(--k,0) - .5)*2.5,1)}

/* reduced motion: final states, no drives */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
}