/* Design: Hybrid (Brand: hero, story, routes · Product: quote desk) | Vibe: night flight above the clouds, jet black and charcoal with warm sunset gold, LuxFly-inspired | Layout: centred hero with flying commercial airliner, form + live itinerary rail, aircraft-window route row | Color: Committed dark (jet black / charcoal blue-grey, soft-cloud light sections, gold detail only) */

@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-ext.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  /* Palette */
  --night:oklch(14.5% .009 255);
  --night-2:oklch(18.5% .014 252);
  --charcoal:oklch(26.5% .025 250);
  --charcoal-2:oklch(30.5% .026 250);
  --cloud:oklch(92.6% .009 255);
  --cloud-2:oklch(88.5% .012 255);
  --paper:oklch(97.2% .005 255);
  --field-bg:oklch(99.3% .003 255);
  --ink:oklch(17% .014 255);
  --white:oklch(96.5% .006 255);
  --gold:oklch(79% .075 76);
  --gold-deep:oklch(46% .08 68);
  --error:oklch(50% .17 27);
  --error-light:oklch(74% .13 25);
  --success:oklch(46% .09 160);
  /* Type */
  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(2.7rem,1.1rem + 5.2vw,5.6rem);
  --fs-h2:clamp(2.1rem,1.2rem + 3vw,4rem);
  --fs-h3:clamp(1.3rem,1.12rem + .6vw,1.65rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.75rem;
  /* Space & layout */
  --max:1320px;
  --gutter:clamp(20px,4vw,56px);
  --header-h:72px;
  --space-s:clamp(64px,7vw,96px);
  --space-m:clamp(72px,7.5vw,108px);
  --space-l:clamp(80px,8.5vw,120px);
  --space-xl:clamp(88px,9.5vw,136px);
  /* Shape & depth */
  --r-pill:999px;
  --r-sm:12px;
  --r-field:14px;
  --r-card:24px;
  --r-media:20px;
  --window-r:47% / 34%;
  --shadow-card:0 40px 80px -40px oklch(5% .01 255 / .8);
  --shadow-pop:0 22px 44px -18px oklch(8% .01 255 / .55),0 2px 6px oklch(8% .01 255 / .12);
  /* Motion */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-sine:cubic-bezier(.45,0,.55,1);
  --dur-1:160ms;
  --dur-2:280ms;
  --dur-3:700ms;
}
@media (max-width:899px){:root{--header-h:64px}}

/* Section themes: every component reads these */
:root,.theme-night{--bg:var(--night);--fg:var(--white);--fg-2:oklch(85% .012 250);--fg-muted:oklch(73% .016 250);--line:oklch(30% .018 250);--accent-text:var(--gold);--focus:var(--gold);--surface:var(--night-2)}
.theme-charcoal{--bg:var(--charcoal);--fg:var(--white);--fg-2:oklch(87% .012 250);--fg-muted:oklch(77% .016 250);--line:oklch(38% .022 250);--accent-text:var(--gold);--focus:var(--gold);--surface:var(--charcoal-2)}
.theme-light,.lead-form{--bg:var(--cloud);--fg:var(--ink);--fg-2:oklch(32% .02 252);--fg-muted:oklch(43% .018 252);--line:oklch(81% .012 255);--accent-text:var(--gold-deep);--focus:var(--gold-deep);--surface:var(--cloud-2);color-scheme:light}
.theme-night,.theme-charcoal,.theme-light{background:var(--bg);color:var(--fg)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);background:var(--night)}
html{overscroll-behavior-x:none}
@media (max-width:899px){html{touch-action:pan-y pinch-zoom}}
body{overflow-x:clip;margin:0;background:var(--night);color:var(--white);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
p,li,dd{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:oklch(79% .075 76 / .45);color:var(--ink)}
.container{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}
.skip-link{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--white);color:var(--ink);padding:12px 18px;border-radius:var(--r-pill);text-decoration:none;font-weight:600}
.skip-link:focus{top:12px}
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:8px}

/* ---------- Type roles ---------- */
.display{font-size:var(--fs-display);font-weight:450;line-height:.97;letter-spacing:-.045em;color:var(--fg);text-wrap:balance}
.display .line{display:block}
.display .muted{color:var(--fg-muted)}
.h2{font-size:var(--fs-h2);font-weight:450;line-height:1;letter-spacing:-.04em;color:var(--fg);text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--fg-2);max-width:34em}
.eyebrow,.label{font-size:var(--fs-label);font-stretch:118%;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.eyebrow{color:var(--accent-text);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.label{color:var(--fg-muted)}

/* ---------- Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:var(--r-pill);font-size:.9375rem;font-weight:500;letter-spacing:-.005em;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--ink);color:var(--white)}
.btn--primary:hover{background:var(--charcoal)}
.btn--light{background:var(--white);color:var(--ink)}
.btn--light:hover{background:oklch(100% 0 0)}
.btn--ghost{border-color:oklch(96.5% .006 255 / .35);color:var(--white)}
.btn--ghost:hover{border-color:var(--white)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.875rem}
.btn[disabled]{opacity:.75;cursor:progress}
.i-arrow{width:16px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform var(--dur-2) var(--ease)}
.btn:hover .i-arrow,.text-link:hover .i-arrow,.route-window:hover .i-arrow,.route-window:focus-visible .i-arrow{transform:translateX(4px)}
.text-link,.link-btn{background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;transition:text-decoration-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.link-btn{font-size:inherit;text-decoration-color:color-mix(in oklch,currentColor 45%,transparent)}
.link-btn:hover{text-decoration-color:currentColor}
.text-link{display:inline-flex;align-items:center;gap:12px;font-size:.9375rem;font-weight:500;text-decoration:none;padding-bottom:6px;border-bottom:1px solid currentColor}
.text-link:hover{color:var(--accent-text)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);color:var(--white);transition:background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.site-header.is-scrolled{background:oklch(14.5% .009 255 / .78);box-shadow:0 1px 0 oklch(30% .018 250 / .8);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-mark{width:17px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5}
.brand-mark .horizon{stroke:var(--gold);stroke-linecap:round}
.brand-text{display:grid;line-height:1}
.brand-word{font-size:1.125rem;font-stretch:125%;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.brand-sub{margin-top:5px;font-size:.625rem;font-stretch:118%;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:oklch(73% .016 250)}
.site-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px)}
.site-nav a:not(.btn){font-size:.9375rem;font-weight:500;text-decoration:none;color:oklch(85% .012 250);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding:6px 0;transition:background-size var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.site-nav a:not(.btn):hover{color:var(--white);background-size:100% 1px}
.nav-cta{margin-left:0}
.nav-manage{margin-left:8px}
.site-nav{gap:clamp(16px,2.2vw,32px)}
@media (min-width:900px) and (max-width:1119px){.site-nav a[href="#questions"]{display:none}}
.mobile-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;background:none;border:0;font-size:.75rem;font-stretch:118%;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:inherit}
.menu-icon{position:relative;width:22px;height:12px}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-2) var(--ease),top var(--dur-2) var(--ease)}
.menu-icon::before{top:2px}
.menu-icon::after{top:9px}
.mobile-toggle[aria-expanded="true"] .menu-icon::before{top:5.5px;transform:rotate(45deg)}
.mobile-toggle[aria-expanded="true"] .menu-icon::after{top:5.5px;transform:rotate(-45deg)}

/* ---------- Hero: dusk above the clouds ---------- */
.hero{position:relative;display:flex;flex-direction:column;min-height:max(100svh,720px);overflow:hidden;isolation:isolate}
.hero-sky{position:absolute;inset:0;z-index:-1}
.hero-sky-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(14.5% .009 255 / .94) 0%,oklch(14.5% .009 255 / .78) 28%,oklch(14.5% .009 255 / .34) 58%,oklch(14.5% .009 255 / .12) 80%,oklch(14.5% .009 255 / .9) 100%)}
.hero-inner{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;padding-top:calc(var(--header-h) + clamp(24px,3.6vw,52px))}
.hero-inner>*{animation:rise 1s var(--ease) both}
.hero-inner>:nth-child(2){animation-delay:80ms}
.hero-inner>:nth-child(3){animation-delay:160ms}
.hero-inner>:nth-child(n+4){animation-delay:240ms}
.hero .display{margin:20px 0 22px;max-width:12em}
.hero .lead{max-width:44em;margin-inline:auto;text-wrap:balance}
.hero-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:24px;font-size:var(--fs-small);color:var(--fg-2)}
.hero-proof li{display:flex;align-items:center;gap:10px}
.hero-proof li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.hero-foot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-top:0;padding-bottom:28px}
.fineprint{font-size:.8125rem;line-height:1.5;color:var(--fg-muted);max-width:30em}
.hero-markets{display:grid;gap:4px;justify-items:end;text-align:right;font-size:var(--fs-small);color:var(--fg-2)}

/* Booking pill */
.starter{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;width:min(100%,760px);margin-top:34px;padding:6px;background:var(--paper);color:var(--ink);border-radius:var(--r-pill);box-shadow:0 30px 60px -30px oklch(5% .01 255 / .9);text-align:left;color-scheme:light;--focus:var(--gold-deep)}
.starter-fields{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center}
.starter-field{position:relative;padding:10px 22px 9px;min-width:0;border-radius:var(--r-pill);transition:background-color var(--dur-1) var(--ease)}
.starter-field:focus-within{background:oklch(92.6% .009 255 / .7)}
.starter-field label{display:block;font-size:.6875rem;font-stretch:118%;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:oklch(43% .018 252)}
.starter-field input{width:100%;border:0;background:transparent;padding:3px 0 0;font-size:1.0625rem;font-weight:500;color:var(--ink);outline:0;text-overflow:ellipsis}
.starter-field input::placeholder{color:oklch(52% .014 252);font-weight:400}
.starter .swap{width:38px;height:38px;border-radius:50%;border:1px solid oklch(81% .012 255);background:var(--field-bg);color:var(--ink)}
.starter .starter-submit{min-height:58px;padding:0 28px}

/* A pearl-and-midnight long-haul airliner cruising just above the dusk cloud deck.
   The photo is daylight-lit, so it is toned down, tinted with the sky's colours through a mask of its own
   silhouette, and the lowest cloud band of the sky photo is repeated in front of it so it sits *in* the scene. */
/* Sized from the free space under the form (the lane is a size container): rotated by −8° the aircraft is .405 × its box width tall,
   its tail tip sits .108 × width below the box top. Keep 16px clear of the text and let the belly dip .03 × width into the clouds. */
.hero{--jet-w:clamp(400px,min(62vw,(100cqh - 16px) * 2.667),1000px)}
.jet-lane{position:relative;flex:1;min-height:140px;pointer-events:none;container-type:size}
/* Image box is 3:2; the aircraft fills x 1–98 %, y 11–77 %. Anchor its belly ~6 % of the width below the lane so it skims the cloud tops. */
.jet-stage{position:absolute;left:50%;top:calc(16px - var(--jet-w) * .108);z-index:1;width:var(--jet-w);translate:-50% 0;transform-origin:60% 50%}
.jet-entrance{animation:jetArrive 2.6s cubic-bezier(.16,1,.3,1) .15s both}
.jet-hover{animation:jetHover 11s var(--ease-sine) 2.8s infinite}
.aircraft-attitude{position:relative;aspect-ratio:3/2;rotate:-8deg;transform:translate3d(var(--flight-x,0px),var(--flight-y,0px),0);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.jet{position:absolute;inset:0;display:block;width:100%;height:100%;filter:brightness(.8) contrast(1.06) saturate(.85) drop-shadow(0 0 34px oklch(78% .09 55 / .2))}
/* Dusk light: warm rim from the sunset side, cool shadow side, clipped to the aircraft silhouette. */
.jet-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,oklch(83% .085 58) 0%,oklch(90% .03 70) 34%,oklch(74% .05 300) 66%,oklch(52% .07 268) 100%);mix-blend-mode:multiply;opacity:.62;-webkit-mask:url("/images/airliner-photo-960.webp") center/100% 100% no-repeat;mask:url("/images/airliner-photo-960.webp") center/100% 100% no-repeat}
/* Contrails start just behind each engine and stream back along the fuselage axis (≈19° up-left in the photo).
   They sit before the image in the DOM, so the fuselage and wing cover their roots exactly as on a real aircraft. */
.contrail{position:absolute;right:0;height:1.1%;width:78%;transform-origin:100% 50%;rotate:19deg;border-radius:50%;pointer-events:none;filter:blur(2.2px);-webkit-mask:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent);mask:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent);background:linear-gradient(to left,transparent 0,oklch(93% .03 65 / .55) 6%,oklch(90% .035 60 / .3) 45%,oklch(85% .03 300 / .08) 78%,transparent);animation:contrailForm 3.2s cubic-bezier(.16,1,.3,1) .9s both,contrailBreathe 7s var(--ease-sine) 4s infinite}
.contrail--near{right:59.5%;top:69%}
.contrail--far{right:19%;top:55%;height:.9%;opacity:.7;animation-delay:1.05s,4.6s}
/* A sun glint that travels along the fuselage, clipped to the aircraft's own silhouette. */
.jet-glint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.7;background:linear-gradient(104deg,transparent 42%,oklch(90% .06 70 / .45) 47.5%,oklch(98% .02 80 / .85) 50%,oklch(90% .06 70 / .45) 52.5%,transparent 58%) 0 0/320% 100% no-repeat;-webkit-mask:url("/images/airliner-photo-960.webp") center/100% 100% no-repeat;mask:url("/images/airliner-photo-960.webp") center/100% 100% no-repeat;animation:glint 8s cubic-bezier(.45,0,.2,1) 2.6s infinite}
.nav-light{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;pointer-events:none}
.nav-light::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 10px 4px #fff;animation:strobe 1.6s steps(1) infinite}
.nav-light--port{left:1.6%;top:40.6%;background:#ff4b3e;box-shadow:0 0 8px 3px oklch(62% .22 28 / .55)}
.nav-light--starboard{left:97.3%;top:29.4%;background:#3dff9a;box-shadow:0 0 8px 3px oklch(80% .2 155 / .5)}
.nav-light--starboard::after{animation-delay:.12s}
/* The cloud band in front of the aircraft: the same sky photo, same crop, only its bottom strip visible. */
.hero-cloudfront{position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-mask:linear-gradient(to top,#000 0,#000 6%,transparent 17%);mask:linear-gradient(to top,#000 0,#000 6%,transparent 17%)}
.hero-cloudfront img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero-cloudfront::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(14.5% .009 255 / .94) 0%,oklch(14.5% .009 255 / .78) 28%,oklch(14.5% .009 255 / .34) 58%,oklch(14.5% .009 255 / .12) 80%,oklch(14.5% .009 255 / .9) 100%)}
/* Both sky layers drift together, so the repeated cloud band never separates from the background. */
.hero-sky-img,.hero-cloudfront img{transform-origin:50% 100%;animation:skyDrift 46s var(--ease-sine) infinite alternate}
.flight-cloud{position:absolute;inset:15% -35% 0;pointer-events:none;background:radial-gradient(ellipse at 26% 75%,#d4dbe229 0,transparent 39%),radial-gradient(ellipse at 62% 68%,#dce0dc24 0,transparent 32%);animation:cloudCruise 24s linear infinite;opacity:.55}
.flight-cloud--far{inset:-10% -25% 20%;animation-duration:38s;opacity:.24}
.flight-cloud--near{z-index:2;animation-delay:-12s;mask-image:linear-gradient(transparent 25%,#000 70%,transparent)}
.hero:is(.is-offscreen,.page-hidden) :is(.jet-stage,.jet-entrance,.jet-hover,.flight-cloud,.hero-sky-img,.hero-cloudfront img,.contrail,.jet-glint){animation-play-state:paused}
.hero:is(.is-offscreen,.page-hidden) .nav-light::after{animation-play-state:paused}
/* On large screens the hero is exactly one screen; the aircraft gets the space between the form and the footnotes. */
@media (min-width:900px){
  .hero{height:max(100svh,680px);min-height:0}
  .hero-foot{padding-bottom:22px}
}
/* Short laptop screens: tighten the stack so the aircraft keeps its room. */
@media (min-width:900px) and (max-height:820px){
  .hero .display{font-size:clamp(2.6rem,7.6vh,4.4rem);margin:12px 0 14px}
  .hero .lead{font-size:1.0625rem}
  .starter{margin-top:22px}
  .hero-proof{margin-top:16px}
}
/* Phones and tablets: nothing in the scene moves sideways. The sky only breathes, the aircraft only rises and settles,
   and the scroll-linked climb-out is vertical, so the page never feels like it slides left and right under the thumb. */
@keyframes skyBreathe{from{transform:scale(1)}to{transform:scale(1.03)}}
@keyframes jetHoverY{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes jetArriveY{0%{opacity:0;filter:blur(3px) brightness(.75);transform:translate3d(0,7vh,0) scale(.84)}35%{opacity:1}100%{opacity:1;filter:none;transform:none}}
@keyframes jetDepartY{0%{transform:none;opacity:1}100%{transform:translate3d(0,-14vh,0);opacity:0}}
@keyframes cloudFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-3%,0)}}
@media (max-width:899px){
  .hero-sky-img,.hero-cloudfront img{animation-name:skyBreathe}
  .jet-entrance{animation-name:jetArriveY}
  .jet-hover{animation-name:jetHoverY}
  .flight-cloud{animation-name:cloudFloat}
}
/* Scroll-linked climb-out: the aircraft banks away as the visitor scrolls past the hero. */
@supports (animation-timeline:scroll()){
  .hero{view-timeline-name:--flight-scene;view-timeline-axis:block}
  .jet-stage{animation:jetDepart linear both;animation-timeline:--flight-scene;animation-range:exit 0% exit 85%}
}
@media (max-width:899px){.jet-stage{animation-name:jetDepartY}}

/* ---------- Aircraft window ---------- */
.window{position:relative;display:block;aspect-ratio:5/7;border-radius:var(--window-r);padding:clamp(10px,1.05vw,15px);background:linear-gradient(162deg,oklch(97% .005 255),oklch(88% .01 255) 70%,oklch(82% .012 255));box-shadow:inset 0 1px 1px oklch(100% 0 0 / .9),inset 0 -2px 3px oklch(55% .02 255 / .25),0 0 0 1px oklch(40% .02 250),0 50px 70px -40px oklch(5% .01 255 / .9)}
.window-glass{position:relative;display:block;height:100%;border-radius:var(--window-r);overflow:hidden;background:var(--night-2);isolation:isolate}
.window-glass img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.window-glass::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px oklch(17% .014 255 / .25),inset 0 16px 30px -10px oklch(17% .014 255 / .55),inset 0 -10px 24px -14px oklch(17% .014 255 / .4)}
.window-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,oklch(93% .007 255),oklch(87% .01 255));transform:translateY(-86%);transition:transform 1.5s var(--ease)}
.window-shade::after{content:"";position:absolute;left:38%;right:38%;bottom:7%;height:5px;border-radius:3px;background:oklch(76% .012 255);box-shadow:inset 0 1px 1px oklch(60% .02 255 / .5)}
.reveal-ready .window--route:not(.is-open) .window-shade{transform:translateY(0)}

/* ---- Destination windows: the shade rolls up, the glass fogs and clears, the view settles, a reflection crosses the pane ---- */
.window--route{--wp:clamp(10px,1.05vw,15px);transition:transform .5s var(--ease-out)}
.window--route .window-glass img{scale:1.1;transition:scale 2.6s var(--ease-out),filter 1.7s var(--ease),transform 1.2s var(--ease)}
.reveal-ready .window--route:not(.is-open) .window-glass img{scale:1.28;filter:blur(9px) brightness(.72) saturate(.7)}
.window--route::after{content:"";position:absolute;inset:var(--wp);z-index:3;border-radius:var(--window-r);pointer-events:none;mix-blend-mode:screen;opacity:0;background:linear-gradient(112deg,transparent 38%,oklch(97% .02 80 / .5) 49%,oklch(99% .01 80 / .65) 50.5%,oklch(97% .02 80 / .5) 52%,transparent 63%) 130% 0/280% 100% no-repeat}
.window--route.is-open::after{animation:paneGlint 1.9s cubic-bezier(.45,0,.2,1) 1.35s 1 both}
.window-row li:nth-child(2) .window--route.is-open::after{animation-delay:1.5s}
.window-row li:nth-child(3) .window--route.is-open::after{animation-delay:1.65s}
.window-row li:nth-child(4) .window--route.is-open::after{animation-delay:1.8s}
.window-row li:nth-child(2) .window-glass img{transition-delay:.1s}
.window-row li:nth-child(3) .window-glass img{transition-delay:.2s}
.window-row li:nth-child(4) .window-glass img{transition-delay:.3s}
.route-window:active .window--route{transform:scale(.965)}
@keyframes paneGlint{0%{opacity:0;background-position:130% 0}12%{opacity:1}100%{opacity:0;background-position:-30% 0}}
@keyframes paneParallax{from{translate:0 -3.5%}to{translate:0 3.5%}}
/* Scroll-linked drift: the view inside each window moves against the scroll (vertical only). */
/* Scroll-linked blinds: the shade and the fog follow the scroll position of each window, in both directions.
   Entering from the bottom while scrolling down: closed -> open. Leaving through the top: open -> closed. Scrolling back up reverses it. */
@keyframes paneShade{0%{transform:translateY(0)}30%{transform:translateY(-86%)}68%{transform:translateY(-86%)}95%,100%{transform:translateY(0)}}
@keyframes paneFog{0%{scale:1.28;filter:blur(9px) brightness(.72) saturate(.7)}30%{scale:1.1;filter:none}68%{scale:1.1;filter:none}100%{scale:1.22;filter:blur(7px) brightness(.78) saturate(.75)}}
@supports (animation-timeline:view()){
  /* The glass is overflow:hidden (a scroll container that never scrolls), so the timeline is declared on the window frame
     itself, which is tracked against the page scroll, and the shade and photo read it by name. */
  .window--route{view-timeline:--pane block}
  .window--route .window-shade{animation:paneShade linear both;animation-timeline:--pane;animation-range:entry 0% exit 100%}
  .window--route .window-glass img{animation:paneParallax linear both,paneFog linear both;animation-timeline:--pane,--pane;animation-range:entry 0% exit 100%,entry 0% exit 100%}
}

/* ---------- Quote desk ---------- */
.desk{position:relative;padding:var(--space-m) 0 var(--space-l)}
.desk-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.desk-head .h2{max-width:13em}
.desk-head p{color:var(--fg-muted);font-size:var(--fs-lead);line-height:1.55;max-width:26em}
.desk-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,4fr);gap:clamp(24px,3vw,48px);align-items:start}
.lead-form{position:relative;min-width:0;background:var(--paper);color:var(--fg);border-radius:var(--r-card);padding:clamp(22px,3.4vw,48px);box-shadow:var(--shadow-card);scroll-margin-top:calc(var(--header-h) + 16px)}
.form-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.form-title{font-size:1.625rem;font-weight:500;letter-spacing:-.03em;color:var(--fg)}
.step-count{font-size:.875rem;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.step-count b{font-size:1.125rem;font-weight:600;color:var(--fg)}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 30px}
.progress-step button{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:14px 0 0;background:none;border:0;text-align:left;font-size:.75rem;font-stretch:118%;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)}
.progress-step button::before,.progress-step button::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px;background:var(--line)}
.progress-step button::after{background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.progress-step.is-current button,.progress-step.is-done button{color:var(--fg)}
.progress-step.is-current button::after,.progress-step.is-done button::after{transform:scaleX(1)}
.progress-step.is-done button{cursor:pointer}
.progress-step.is-done button:hover{color:var(--accent-text)}
.progress-step button:disabled{cursor:default}
.progress-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:.6875rem;letter-spacing:0}
.progress-step.is-current .progress-num{background:var(--ink);border-color:var(--ink);color:var(--white)}
.form-recap{margin:-8px 0 24px;padding:16px 18px;background:var(--cloud);border-radius:var(--r-sm);font-size:var(--fs-small)}
.form-recap summary{cursor:pointer;font-weight:600;min-height:44px}
.form-recap-text{display:block;color:var(--fg-2);font-weight:400;white-space:normal;overflow-wrap:anywhere;margin-top:4px}
.review-details{display:grid;gap:10px;margin:16px 0}
.review-details>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
.review-details dt{color:var(--fg-muted)}
.review-details dd{margin:0;overflow-wrap:anywhere}
.airline-field{margin-top:22px}
.refund-reminder{font-size:.875rem;color:var(--fg-2);margin-top:16px;line-height:1.5}
.fare-story{padding:var(--space-m) 0}
.fare-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.story-signature{margin-top:24px;color:var(--accent-text);font-weight:600}
.story-copy p{max-width:65ch;margin-bottom:20px}
.company-identity{font-size:.875rem;margin-top:16px;max-width:36ch}
.privacy-choice{position:fixed;bottom:20px;left:20px;z-index:100;max-width:540px;padding:24px;background:var(--paper);color:var(--ink);border:1px solid var(--cloud-2);border-radius:var(--r-sm);box-shadow:var(--shadow-pop)}
.privacy-choice p{margin-bottom:16px;font-size:.9375rem;line-height:1.5}
.privacy-choice strong{display:block;margin-bottom:6px;font-size:1.1rem}
.privacy-choice>div{display:flex;gap:12px;flex-wrap:wrap}
.privacy-choice .btn--ghost{color:var(--ink);border-color:var(--ink)}
@media(max-width:899px){.fare-story-grid{grid-template-columns:1fr}.fare-story{padding:64px 0}.privacy-choice{inset:auto 12px 12px;max-width:none}.privacy-choice>div .btn{flex:1}.review-details>div{grid-template-columns:95px minmax(0,1fr)}}
.form-recap .link-btn{flex:none;font-size:.875rem;font-weight:600}
.form-notice{font-size:var(--fs-small);color:var(--success);font-weight:500}
.form-notice:not(:empty){display:flex;align-items:center;gap:10px;margin:-6px 0 20px;animation:fadeIn var(--dur-2) var(--ease) both}
.form-notice:not(:empty)::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.form-step.active{animation:stepIn .45s var(--ease) both}
.step-title{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.03em;color:var(--fg);margin-bottom:22px}
.step-title:focus{outline:0}

/* Fields */
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field>label,.segmented legend,.cabin-options legend{font-size:.875rem;font-weight:600;color:var(--fg);padding:0}
.lead-form input:not([type=radio]):not([type=checkbox]),.lead-form select,.lead-form textarea{width:100%;min-height:56px;padding:0 18px;border:1px solid oklch(78% .012 255);border-radius:var(--r-field);background:var(--field-bg);font-size:1.0625rem;color:var(--ink);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.lead-form textarea{min-height:100px;padding:14px 18px;resize:vertical;line-height:1.5}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:oklch(55% .012 252)}
.lead-form input:hover:not(:disabled),.lead-form select:hover,.lead-form textarea:hover{border-color:oklch(58% .014 252)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px oklch(79% .075 76 / .35)}
.lead-form [aria-invalid="true"]{border-color:var(--error)!important;box-shadow:0 0 0 4px oklch(50% .17 27 / .12)}
.lead-form input:disabled{background:var(--cloud);border-color:var(--line);color:var(--fg-muted);cursor:not-allowed}
.lead-form select{appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23161b22' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px}
.lead-form input[type=date]{font-variant-numeric:tabular-nums}
.lead-form input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.field-hint{font-size:.8125rem;color:var(--fg-muted);line-height:1.45}
.field-error{display:none;font-size:.875rem;line-height:1.45;color:var(--error);font-weight:500}
.field-error:not(:empty){display:flex;gap:8px;animation:fadeIn var(--dur-2) var(--ease) both}
.field-error:not(:empty)::before{content:"!";display:inline-grid;place-items:center;flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--error);color:var(--white);font-size:.6875rem;font-weight:700}
.route-row{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:10px;align-items:start}
.route-row .swap{margin-top:33px;width:46px;height:56px;border-radius:var(--r-field)}
.swap{display:grid;place-items:center;padding:0;background:var(--field-bg);border:1px solid oklch(78% .012 255);color:var(--ink);transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.swap:hover{border-color:var(--ink)}
.swap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .5s var(--ease)}
.swap.is-swapped svg{transform:rotate(180deg)}
.date-row,.pref-row,.contact-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.date-row,.pref-row{margin-top:22px}
.contact-row{margin-top:18px}
.notes-field{margin-top:20px}
.notes-field:not([hidden]){animation:fadeIn var(--dur-2) var(--ease) both}

/* Segmented trip type */
.segmented{border:0;padding:0;margin:22px 0 0}
.segmented legend{margin-bottom:8px}
.segmented-options{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid oklch(78% .012 255);border-radius:var(--r-pill);padding:4px;gap:4px;background:var(--field-bg)}
.segmented label{position:relative}
.segmented input,.cabin-option input{position:absolute;opacity:0;width:1px;height:1px}
.segmented span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r-pill);font-size:.9375rem;font-weight:500;color:var(--fg-2);cursor:pointer;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.segmented span:hover{color:var(--fg);background:var(--cloud)}
.segmented input:checked+span{background:var(--ink);color:var(--white)}
.segmented input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}

/* Cabin choice */
.cabin-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border:0;padding:0;margin:0}
.cabin-options legend{margin-bottom:8px}
.cabin-card{position:relative;display:grid;gap:8px;align-content:start;min-height:138px;height:100%;padding:20px 54px 20px 20px;border:1px solid oklch(78% .012 255);border-radius:18px;background:var(--field-bg);cursor:pointer;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.cabin-card:hover{border-color:oklch(58% .014 252)}
.cabin-name{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.cabin-desc{font-size:var(--fs-small);line-height:1.5;color:var(--fg-muted)}
.cabin-check{position:absolute;top:18px;right:18px;width:22px;height:22px;border-radius:50%;border:1px solid oklch(78% .012 255);transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.cabin-check::after{content:"";position:absolute;left:7px;top:3.5px;width:5px;height:10px;border:solid var(--white);border-width:0 1.75px 1.75px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease)}
.cabin-option input:checked+.cabin-card{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cabin-option input:checked+.cabin-card .cabin-check{background:var(--ink);border-color:var(--ink)}
.cabin-option input:checked+.cabin-card .cabin-check::after{opacity:1;transform:rotate(45deg) scale(1)}
.cabin-option input:focus-visible+.cabin-card{outline:2px solid var(--focus);outline-offset:3px}

/* Consent */
.consent{display:flex;align-items:flex-start;gap:12px;margin-top:22px}
.consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.consent label{font-size:var(--fs-small);line-height:1.5;color:var(--fg-2);cursor:pointer}
.consent+.field-error{margin-top:8px}
.consent-note{margin:6px 0 0 34px;font-size:.875rem;color:var(--fg-muted)}

/* Actions, errors, success */
.form-error{font-size:var(--fs-small);font-weight:500;color:var(--error)}
.form-error:not(:empty){margin-top:20px}
.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:28px}
.form-actions .back{display:inline-flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;padding:0 4px;background:none;border:0;font-size:.9375rem;font-weight:500;color:var(--fg-2)}
.form-actions .back svg{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform var(--dur-2) var(--ease)}
.form-actions .back:hover{color:var(--fg)}
.form-actions .back:hover svg{transform:translateX(-3px)}
.submit .spinner{width:16px;height:16px;border-radius:50%;border:1.5px solid oklch(96.5% .006 255 / .35);border-top-color:var(--white);animation:spin .8s linear infinite}
.form-note{margin-top:18px;text-align:right;font-size:.8125rem;color:var(--fg-muted)}
.form-success{padding:clamp(24px,5vw,56px) 0 clamp(12px,2vw,24px);text-align:center;display:grid;justify-items:center;gap:12px}
.form-success:focus{outline:0}
.form-success:not([hidden]){animation:stepIn .6s var(--ease) both}
.success-mark{width:56px;height:56px;margin-bottom:8px;fill:none;stroke:var(--success);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.success-mark circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .9s var(--ease) .1s forwards}
.success-mark path{stroke-dasharray:36;stroke-dashoffset:36;animation:draw .5s var(--ease) .7s forwards}
.success-title{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);font-weight:450;letter-spacing:-.04em;color:var(--fg)}
.form-success>p:not(.label){max-width:30em;color:var(--fg-2)}
.success-ref{font-size:var(--fs-small);color:var(--fg-muted)}
.success-ref b{font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--fg)}
.form-success .link-btn{margin-top:8px;font-weight:600}
.lead-form.is-sent .form-head .step-count{visibility:hidden}

/* Airport suggestions */
.airport-control{position:relative}
.airport-menu{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:max(100%,330px);max-width:calc(100vw - 2*var(--gutter));max-height:340px;overflow:auto;padding:6px;margin:0;background:var(--field-bg);border:1px solid oklch(84% .01 255);border-radius:18px;box-shadow:var(--shadow-pop);color:var(--ink);opacity:1;transform:none;transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
@starting-style{.airport-menu{opacity:0;transform:translateY(-4px)}}
.starter .airport-menu{left:-22px;top:calc(100% + 16px)}
.airport-option{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:2px 10px;padding:10px 12px;border-radius:12px;cursor:pointer}
.airport-option.is-active,.airport-option:hover{background:var(--cloud)}
.airport-code{grid-row:span 2;font-size:1rem;font-stretch:112%;font-weight:650;letter-spacing:.04em;color:var(--ink)}
.airport-name{font-size:.9375rem;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.airport-country{font-size:.8125rem;color:oklch(43% .018 252)}
.airport-option mark{background:none;color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}

/* Live itinerary rail */
.desk-rail{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:clamp(20px,2.4vw,32px)}
.itinerary{position:relative;padding:24px 24px 22px;border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(170deg,var(--charcoal),var(--night-2))}
.itin-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.itin-status{font-size:.6875rem;font-stretch:118%;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid oklch(79% .075 76 / .45);border-radius:20px;padding:4px 10px}
.itin-route{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(64px,1.1fr) minmax(0,1fr);align-items:end;gap:8px;margin:22px 0 18px;padding-bottom:20px;border-bottom:1px dashed var(--line)}
.itin-route::before,.itin-route::after{content:"";position:absolute;bottom:-9px;width:17px;height:17px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.itin-route::before{left:-34px;clip-path:inset(0 0 0 50%)}
.itin-route::after{right:-34px;clip-path:inset(0 50% 0 0)}
.itin-point{display:grid;gap:4px;min-width:0}
.itin-point--to{text-align:right}
.itin-code{font-size:clamp(1.75rem,1.3rem + 1vw,2.375rem);font-stretch:112%;font-weight:600;letter-spacing:.02em;line-height:1;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itin-code.is-long{font-size:1.25rem;font-weight:500;line-height:1.5rem;padding-top:.6rem}
.itin-place{font-size:.8125rem;color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itin-arc{width:100%;height:auto;margin-bottom:22px;overflow:visible;fill:none}
.itin-arc .arc-base{stroke:oklch(73% .016 250 / .4);stroke-width:1.25;stroke-dasharray:2 4}
.itin-arc .arc-live{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.itin-arc circle{fill:var(--night-2);stroke:oklch(73% .016 250 / .6);stroke-width:1.25;transition:fill var(--dur-2) var(--ease),stroke var(--dur-2) var(--ease)}
.itinerary.has-route .arc-live{stroke-dashoffset:0}
.itinerary.has-route .itin-arc circle{fill:var(--gold);stroke:var(--gold)}
.itinerary .is-placeholder{color:oklch(73% .016 250 / .62)!important}
.itin-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.itin-details div{min-width:0}
.itin-details dt{font-size:.6875rem;font-stretch:118%;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.itin-details dd{margin-top:4px;padding:1px 4px;margin-left:-4px;border-radius:4px;font-size:var(--fs-small);font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
.is-updated{animation:flash 1.1s var(--ease-out)}
.itin-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.5;color:var(--fg-muted)}
.next-steps .label{color:var(--gold)}
.next-steps ol{margin-top:16px;counter-reset:step;display:grid;gap:18px}
.next-steps li{counter-increment:step;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;font-size:var(--fs-small);line-height:1.5}
.next-steps li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;font-size:.75rem;font-stretch:118%;font-weight:600;letter-spacing:.08em;color:var(--gold);padding-top:2px}
.next-steps b{font-weight:600;color:var(--fg)}
.next-steps span{color:var(--fg-muted)}

/* ---------- How it works ---------- */
.how{padding:var(--space-xl) 0 var(--space-l)}
/* Same light surface as the story above: one shared gap with a hairline instead of two stacked section paddings. */
.fare-story:has(+.how){padding-bottom:clamp(48px,6vw,80px)}
.fare-story+.how{padding-top:0}
.fare-story+.how .how-grid{padding-top:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6.4fr);gap:clamp(48px,7vw,128px);align-items:start}
.how-intro{position:sticky;top:calc(var(--header-h) + 40px)}
.how-intro .h2{margin:22px 0}
.saving{margin-top:clamp(36px,4vw,52px);padding:26px 26px 22px;background:var(--paper);border-radius:var(--r-card);display:grid;gap:18px}
.saving-row{display:grid;gap:8px}
.saving-label{font-size:.8125rem;font-weight:600;color:var(--fg-2)}
.saving-track{position:relative;display:block;height:12px}
.saving-bar{position:absolute;inset:0 auto 0 0;border-radius:6px;transform-origin:left;transition:transform 1.2s var(--ease)}
.saving-bar--full{right:0;background:oklch(80% .012 255)}
.saving-bar--you{width:80%;background:linear-gradient(90deg,var(--ink) 0 87.5%,transparent 87.5%),repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 5px)}
.saving-gap{position:absolute;left:70%;right:0;top:20px;height:10px;border:1px solid var(--gold-deep);border-top:0;transition:opacity .6s var(--ease) 1s}
.saving-gap span{position:absolute;right:0;top:14px;font-size:.75rem;font-stretch:118%;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
.saving figcaption{margin-top:30px;font-size:.8125rem;line-height:1.5;color:var(--fg-muted)}
.reveal-ready .saving:not(.is-in) .saving-bar{transform:scaleX(0)}
.reveal-ready .saving:not(.is-in) .saving-gap{opacity:0}
.saving-row+.saving-row .saving-bar{transition-delay:.15s}
.quote-contents{border-top:1px solid var(--line)}
.quote-contents>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px 32px;padding:28px 0 30px;border-bottom:1px solid var(--line)}
.quote-contents dt{display:flex;align-items:baseline;gap:18px;font-size:1.25rem;font-weight:500;letter-spacing:-.025em;color:var(--fg)}
.qc-num{font-size:.75rem;font-stretch:118%;font-weight:600;letter-spacing:.1em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.quote-contents dd{color:var(--fg-2)}

/* ---------- Routes (window row) ---------- */
.routes{padding:var(--space-l) 0 var(--space-m);overflow:clip}
.routes-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end}
.routes-head .h2{margin-top:22px}
.routes-head p{color:var(--fg-muted);font-size:var(--fs-lead);line-height:1.55;max-width:30em}
.window-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(48px,6vw,80px)}
.route-window{display:grid;gap:24px;text-decoration:none;color:inherit;border-radius:var(--r-media)}
.route-window:focus-visible{outline-offset:10px}
.route-window:hover .window-glass img,.route-window:focus-visible .window-glass img{transform:scale(1.045)}
.window-row li:nth-child(2) .window-shade{transition-delay:.1s}
.window-row li:nth-child(3) .window-shade{transition-delay:.2s}
.window-row li:nth-child(4) .window-shade{transition-delay:.3s}
.route-meta{display:grid;gap:6px;padding-inline:4px}
.route-codes{display:flex;align-items:center;gap:12px;font-size:1rem;font-stretch:118%;font-weight:600;letter-spacing:.12em;color:var(--gold)}
.route-codes svg{width:40px;height:8px;fill:var(--gold);stroke:var(--gold);stroke-width:1;stroke-dasharray:2 3;transition:width .5s var(--ease)}
.route-codes svg circle{stroke-dasharray:none}
.route-window:hover .route-codes svg{width:56px}
.route-name{margin-top:4px;font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);font-weight:500;letter-spacing:-.03em;color:var(--fg)}
.route-time{font-size:var(--fs-small);color:var(--fg-muted)}
.route-cta{display:inline-flex;align-items:center;gap:12px;margin-top:10px;font-size:.875rem;font-weight:500;color:var(--fg)}
.routes-note{margin-top:clamp(40px,5vw,64px);font-size:.8125rem;color:var(--fg-muted)}

/* ---------- Cabins ---------- */
.cabins{padding:var(--space-m) 0}
.cabins-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.cabins-head p{color:var(--fg-muted);font-size:var(--fs-lead);line-height:1.55;max-width:30em}
.cabin-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.cabin-feature img{width:100%;border-radius:var(--r-media);object-fit:cover;background:var(--night-2)}
.cabin-feature--business img{aspect-ratio:3/2}
.cabin-feature--first{margin-top:clamp(0px,4vw,56px)}
.cabin-feature--first img{aspect-ratio:3/2;object-position:center}
.cabin-copy{display:grid;gap:14px;justify-items:start;padding-top:28px;max-width:34em}
.cabin-copy h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);font-weight:450;letter-spacing:-.04em;color:var(--fg)}
.cabin-copy p{color:var(--fg-2)}
.cabin-points{display:grid;gap:8px;margin:4px 0 10px;font-size:var(--fs-small);color:var(--fg-2)}
.cabin-points li{display:grid;grid-template-columns:18px 1fr;gap:6px}
.cabin-points li::before{content:"";width:12px;height:1px;margin-top:.8em;background:var(--gold)}

/* ---------- FAQ ---------- */
.faq{padding:var(--space-l) 0 var(--space-xl)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,112px);align-items:start}
.faq-head{position:sticky;top:calc(var(--header-h) + 40px)}
.faq-head p{margin-top:22px;color:var(--fg-2)}
.faq-head a{text-underline-offset:.25em;text-decoration-thickness:1px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{position:relative;display:block;list-style:none;cursor:pointer;padding:24px 56px 24px 0;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:500;letter-spacing:-.02em;color:var(--fg);transition:color var(--dur-2) var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--accent-text)}
.faq-list summary::before,.faq-list summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:1.5px;background:currentColor;transition:transform var(--dur-2) var(--ease)}
.faq-list summary::after{transform:rotate(90deg)}
.faq-list details[open] summary::after{transform:rotate(0)}
.faq-answer{padding:0 56px 26px 0;color:var(--fg-2);max-width:62ch}
.faq-list details[open] .faq-answer{animation:answerIn .4s var(--ease) both}

/* ---------- Closing & footer ---------- */
.closing{padding:clamp(56px,7vw,96px) 0;position:relative;overflow:hidden}
.closing-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28rem);gap:clamp(24px,5vw,80px);align-items:center}
.display--closing{font-size:clamp(2.7rem,1.3rem + 5vw,6rem)}
.closing-copy{display:grid;gap:22px;justify-items:start}
.closing-copy p{font-size:var(--fs-lead);line-height:1.55;color:var(--fg-2)}
.closing-actions{display:flex;flex-wrap:wrap;gap:12px}
.faq-answer a{color:inherit;font-weight:500;text-underline-offset:.25em}
.site-footer{padding:clamp(56px,6vw,88px) 0 32px;color:var(--fg-muted)}
.site-footer .brand{color:var(--fg)}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:40px}
.footer-brand p{margin-top:20px;max-width:24em;font-size:var(--fs-small)}
.footer-col{display:grid;align-content:start;justify-items:start;gap:10px;font-size:var(--fs-small)}
.footer-col .label{margin-bottom:6px}
.footer-col a{text-decoration:none;padding:3px 0;color:var(--fg-2)}
.footer-col a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:.25em}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid var(--line);font-size:.8125rem}
.footer-legal{display:flex;gap:20px}
.footer-legal button{background:none;border:0;padding:4px 0;color:inherit;font-size:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.footer-legal button:hover{color:var(--fg);text-decoration-color:currentColor}

/* ---------- Policy dialog ---------- */
.policy-dialog{width:min(600px,100% - 32px);max-height:min(80vh,720px);border:0;padding:0;border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-pop);opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete;--focus:var(--gold-deep)}
.policy-dialog:not([open]){opacity:0;transform:translateY(8px)}
@starting-style{.policy-dialog[open]{opacity:0;transform:translateY(8px)}}
.policy-dialog::backdrop{background:oklch(10% .01 255 / .65)}
.policy-inner{padding:clamp(24px,4vw,40px);display:grid;gap:18px;justify-items:start}
.policy-inner h2{font-size:1.75rem;font-weight:450;letter-spacing:-.04em}
.policy-content{display:grid;gap:12px;color:oklch(32% .02 252);font-size:var(--fs-small);line-height:1.65}
.close-dialog{margin-top:6px}

/* ---------- Mobile booking bar ---------- */
.mobile-booking{display:none}

/* ---------- Scroll reveal (only once app.js is running) ---------- */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}
.reveal-ready .quote-contents>div:nth-child(2){transition-delay:60ms}
.reveal-ready .quote-contents>div:nth-child(3){transition-delay:120ms}
.reveal-ready .quote-contents>div:nth-child(4){transition-delay:180ms}
.reveal-ready .quote-contents>div:nth-child(5){transition-delay:240ms}
.reveal-ready .quote-contents>div:nth-child(6){transition-delay:300ms}

/* ---------- Keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes answerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes flash{from{background:oklch(79% .075 76 / .3)}to{background:transparent}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
/* Arrives from the distance through the haze, banked, then rolls level as it settles into the frame. */
@keyframes jetArrive{0%{opacity:0;filter:blur(3px) brightness(.7);transform:translate(-40vw,13vh) rotate(8deg) scale(.58)}30%{opacity:1;filter:blur(.6px) brightness(.9)}68%{filter:none;transform:translate(1.2vw,-.6vh) rotate(-1.4deg) scale(1.01)}100%{opacity:1;filter:none;transform:none}}
@keyframes contrailForm{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes contrailBreathe{0%,100%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(.96) scaleY(1.35)}}
@keyframes glint{0%{background-position:100% 0}38%,100%{background-position:0 0}}
@keyframes jetHover{0%,100%{transform:translate3d(0,0,0) rotate(0)}30%{transform:translate3d(8px,-12px,0) rotate(-.9deg)}65%{transform:translate3d(-5px,6px,0) rotate(.6deg)}}
@keyframes skyDrift{from{transform:scale(1) translateX(0)}to{transform:scale(1.045) translateX(-1.2%)}}
@keyframes jetDepart{0%{transform:none;opacity:1}100%{transform:translate(34vw,-22vh) rotate(-8deg) scale(.82);opacity:0}}
@keyframes cloudCruise{from{transform:translate3d(18%,0,0)}to{transform:translate3d(-18%,4%,0)}}
@keyframes glowPulse{from{opacity:.7;transform:scale(.9)}to{opacity:1;transform:scale(1.06)}}
@keyframes strobe{0%{opacity:0}4%{opacity:1}9%{opacity:0}100%{opacity:0}}

/* ---------- Responsive ---------- */
@media (max-width:1099px){
  .desk-grid{grid-template-columns:minmax(0,1fr)}
  .desk-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .how-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .how-intro{position:static;max-width:720px}
  .window-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
}
@media (max-width:899px){
  .site-nav{position:fixed;inset:var(--header-h) 0 auto;display:grid;gap:0;padding:8px var(--gutter) 28px;background:var(--night);box-shadow:0 1px 0 var(--line),0 24px 40px -24px oklch(5% .01 255 / .8);opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
  .site-nav.open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
  .site-nav a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line);font-size:1.375rem;font-weight:450;letter-spacing:-.02em;color:var(--white);background:none}
  .nav-cta{margin:12px 0 0;min-height:52px}
  .nav-manage{margin:24px 0 0;min-height:52px}
  .nav-cta.btn--primary{background:var(--white);color:var(--ink)}
  .mobile-toggle{display:inline-flex}
  .site-header:has(.site-nav.open){background:var(--night);box-shadow:0 1px 0 var(--line)}
  .desk-head,.cabins-head,.faq-grid,.closing-inner,.routes-head{grid-template-columns:minmax(0,1fr)}
  .faq-head{position:static}
  .desk-rail{grid-template-columns:minmax(0,1fr)}
  .desk-rail .itinerary{display:none}
  .window-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .route-window{gap:16px}
  .route-name{font-size:1.0625rem}
  .route-time{font-size:.8125rem}
  .cabin-pair{grid-template-columns:minmax(0,1fr);gap:56px}
  .cabin-feature--first{margin-top:0}
  .cabin-feature--first img{aspect-ratio:3/2}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .mobile-booking{position:fixed;inset:auto 0 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:oklch(18.5% .014 252 / .96);color:var(--white);box-shadow:0 -1px 0 var(--line);transition:transform var(--dur-2) var(--ease),visibility 0s linear 0s}
  .mobile-booking.is-hidden{transform:translateY(110%);visibility:hidden;transition:transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
  .mobile-booking p{display:grid;gap:2px;font-size:.8125rem;line-height:1.3;min-width:0}
  .mobile-booking strong{font-weight:600}
  .mobile-booking span{color:oklch(73% .016 250)}
  .hero{min-height:0}
  .hero{--jet-w:min(96vw,720px)}
  .jet-lane{flex:none;min-height:0;height:calc(var(--jet-w) * .5 + 40px);margin-top:8px}
  .jet-stage{left:50%;top:auto;bottom:calc(var(--jet-w) * -.1)}
  .hero-cloudfront{-webkit-mask:linear-gradient(to top,#000 0,#000 14%,transparent 30%);mask:linear-gradient(to top,#000 0,#000 14%,transparent 30%)}
  .hero-foot{padding-top:8px}
    .hero-foot{margin-top:0;flex-direction:column;align-items:center;text-align:center;gap:14px}
  .hero-markets{justify-items:center;text-align:center}
}
@media (max-width:640px){
  .fineprint-more{display:none}
  :root{--space-m:64px;--space-l:72px;--space-xl:80px}
  .story-copy p{margin-bottom:16px}
  .fare-story .h2{font-size:2rem}
  .desk-head{gap:20px;margin-bottom:32px}
  .next-steps{font-size:.9375rem}
  .hero-inner{padding-top:calc(var(--header-h) + 28px)}
  .hero .display{margin:16px 0 18px}
  .starter{grid-template-columns:minmax(0,1fr);border-radius:26px;padding:8px;margin-top:26px}
  .starter-fields{grid-template-columns:minmax(0,1fr);position:relative}
  .starter-field{padding:12px 64px 12px 18px;border-radius:18px}
  .starter .swap+.starter-field::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:oklch(84% .01 255)}
  .starter .swap{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(90deg);z-index:2}
  .starter .starter-submit{min-height:54px;margin-top:4px}
  .starter .airport-menu{left:-9px;width:calc(100% + 74px)}
  .hero-proof{flex-direction:column;align-items:center;gap:8px}
  .hero .eyebrow{text-wrap:balance;justify-content:center}
  .hero .eyebrow::before{display:none}
  .lead-form{padding:24px 18px;margin-inline:calc(-1*var(--gutter) + 8px);border-radius:20px}
  .route-row{grid-template-columns:minmax(0,1fr);gap:0}
  .route-row .swap{justify-self:end;margin:-6px 0;width:44px;height:44px;border-radius:50%;position:relative;z-index:2}
  .route-row .swap svg{transform:rotate(90deg)}
  .route-row .swap.is-swapped svg{transform:rotate(270deg)}
  .date-row,.pref-row,.contact-row,.cabin-options{grid-template-columns:minmax(0,1fr)}
  .date-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cabin-card{min-height:0}
  .form-actions .btn{flex:1}
  .form-note{text-align:left}
  .progress-step button{font-size:.6875rem;letter-spacing:.08em}
  .quote-contents>div{grid-template-columns:minmax(0,1fr);padding:22px 0}
  .quote-contents dt{font-size:1.125rem}
  .saving{padding:22px 18px 18px}
  .faq-list summary{padding-right:44px}
  .faq-answer{padding-right:0}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .footer-legal{flex-wrap:wrap}
}
@media (max-width:380px){
  .date-row{grid-template-columns:minmax(0,1fr)}
  .brand-sub{letter-spacing:.24em}
}

/* Native date inputs have an intrinsic minimum width on mobile browsers; without this they push out of their grid column and past the card edge. */
.lead-form input[type=date],.lead-form input[type=datetime-local]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;display:block}
.lead-form input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.2em}
.date-row>.field,.pref-row>.field,.contact-row>.field,.route-row>.field{min-width:0}
/* Phones: dates get a full-width row each, so any regional format plus the calendar icon fits with room to spare. */
@media (max-width:560px){
  .date-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .lead-form .date-row input[type=date]{min-height:52px;padding:0 14px;font-size:1rem}
  .lead-form input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto;padding:6px}
  .date-row .field-hint{margin-top:-2px}
}
/* ---------- Touch screens: every control gets a comfortable (44px) hit area without changing the layout ---------- */
@media (pointer:coarse){
  .brand{min-height:44px}
  .text-link,.link-btn,.footer-col a,.footer-legal button,.faq-head a,.hero-markets a{position:relative}
  .text-link::before,.link-btn::before,.footer-col a::before,.footer-legal button::before,.faq-head a::before{content:"";position:absolute;inset:-11px -4px}
  .footer-col{gap:14px}
  .footer-legal{gap:12px 22px}
  .starter-field label{font-size:.75rem}
  .progress-num{width:22px;height:22px;font-size:.75rem}
}
@media (max-width:640px){
  .starter .swap{width:44px;height:44px;right:8px}
  .brand-sub{font-size:.6875rem}
}

/* ---------- Reduced motion: keep state feedback, drop travel ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:150ms!important;transition-delay:0s!important}
  .jet-stage,.jet-entrance,.jet-hover,.flight-cloud,.hero-sky-img,.hero-cloudfront img,.contrail,.jet-glint{animation:none!important}
  /* Blinking nav lights do not move anything, so they stay on (slow, low-contrast) when motion is reduced. */
  .nav-light::after{animation:strobe 2.4s steps(1) infinite!important}
  .jet-glint{display:none}
  .aircraft-attitude{transform:none!important;transition:none!important}
    .site-nav,.mobile-booking{transition:none!important}
  .reveal-ready [data-reveal]{transform:none}
  .reveal-ready .window--route:not(.is-open) .window-shade{transform:translateY(-86%)}
  .reveal-ready .saving:not(.is-in) .saving-bar{transform:none}
  .reveal-ready .saving:not(.is-in) .saving-gap{opacity:1}
  .window-glass img,.route-window:hover .window-glass img{transform:none}
  .reveal-ready .window--route:not(.is-open) .window-glass img{scale:1.1;filter:none}
  .window--route::after{display:none}
  .window--route .window-glass img{animation:none!important;translate:none}
  .window--route .window-shade{animation:none!important}
  .route-window:active .window--route{transform:none}
  .submit .spinner{animation:spin 1.6s linear infinite!important}
}