:root{
  --sky-900:#0B2A4A; --sky-700:#134A86; --sky-600:#1E6FC7; --sky-400:#5BA3E6;
  --sky-200:#BFE0F8; --sky-100:#E4F1FB; --haze:#F4F9FD; --paper:#FFFFFF;
  --ink:#0B2A4A; --muted:#4C6480; --line:#CFE1F0;
  --font:"Archivo",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --wrap:72rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--haze); color:var(--ink); font:400 1rem/1.6 var(--font); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
img{max-width:100%; display:block}
a{color:var(--sky-600)}
h1,h2,h3{margin:0; line-height:1.05; letter-spacing:-.02em; font-stretch:112%; font-weight:600; text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.75rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:1.25rem; font-stretch:100%}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--muted); max-width:36rem; line-height:1.5}
s{color:var(--muted); font-weight:400; margin-right:.35em}

/* header ---------------------------------------------------------------- */
.top{position:absolute; inset:0 0 auto 0; z-index:5; padding:1.25rem 0}
.top .wrap{display:flex; align-items:center; gap:2rem}
.brand{display:inline-flex; align-items:center; gap:.7rem; color:inherit; text-decoration:none; font-stretch:118%; font-weight:700; font-size:1.2rem; letter-spacing:-.01em}
.brand .mark{width:40px; height:40px; border-radius:9px; box-shadow:0 1px 2px rgba(11,42,74,.15)}
.brand .tick{font-stretch:100%; font-weight:500; color:var(--muted); font-size:.85rem; margin-left:.2rem}
nav{margin-left:auto; display:flex; gap:.25rem; background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); border-radius:8px; padding:.25rem}
nav a{color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:500; padding:.45rem .85rem; border-radius:5px}
nav a:hover{background:rgba(255,255,255,.9)}
nav a[aria-current]{background:var(--sky-900); color:#fff}
@media (max-width:640px){
  .top .wrap{flex-wrap:wrap; gap:.75rem}
  nav{margin-left:0; width:100%; justify-content:space-between}
  nav a{padding:.4rem .5rem; font-size:.875rem}
}

/* hero ------------------------------------------------------------------ */
.hero{position:relative; min-height:min(92vh,880px); display:grid; align-items:end; color:var(--ink); isolation:isolate; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:#8CC4F4 url("img/cumulus.jpg") center 30%/cover no-repeat; filter:brightness(1.22) saturate(1.05)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(140,196,244,.5) 0%, rgba(160,208,248,.2) 35%, rgba(244,249,253,0) 60%, rgba(244,249,253,.9) 100%)}
.hero-inner{padding:9rem 0 4rem; max-width:46rem}
.hero .lede{color:var(--sky-900); opacity:.85; margin-top:1.25rem}
.hero-cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.75rem}
.hero-strip{background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--ink); font-size:.9rem; border-top:1px solid rgba(255,255,255,.7)}
.hero-strip .wrap{display:flex; gap:.4rem 2.5rem; flex-wrap:wrap; padding-top:.9rem; padding-bottom:.9rem}
.hero-strip span b{font-weight:600; font-stretch:105%}
.hero-strip .dot{display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:#1DB77A; margin-right:.4rem; vertical-align:middle}

/* photo hero for inner pages */
.hero-sm{position:relative; color:var(--ink); isolation:isolate; overflow:hidden}
.hero-sm::before{content:""; position:absolute; inset:0; z-index:-2; background:#8CC4F4 url("img/clouds.jpg") center 55%/cover no-repeat; filter:brightness(1.15) saturate(1.05)}
.hero-sm::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(140,196,244,.55), rgba(200,228,250,.3) 60%, rgba(244,249,253,.95))}
.hero-sm .hero-inner{padding:8.5rem 0 3.5rem}
.hero-sm .lede{color:var(--sky-900); opacity:.85}

/* buttons --------------------------------------------------------------- */
.btn{display:inline-block; padding:.8rem 1.3rem; border-radius:6px; background:var(--sky-900); color:#fff; text-decoration:none; font-weight:500; font-size:1rem; border:1px solid transparent}
.btn:hover{background:var(--sky-700)}
.btn-light{background:rgba(255,255,255,.92); color:var(--sky-900)}
.btn-light:hover{background:#fff}
.btn-ghost{background:rgba(255,255,255,.35); border-color:var(--sky-900); color:var(--sky-900)}
.btn-ghost:hover{background:rgba(255,255,255,.7)}
.btn-wide{display:block; text-align:center}

/* sections -------------------------------------------------------------- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; flex-wrap:wrap}
.section-head p{margin:0; color:var(--muted); max-width:34rem}
.section-head a{white-space:nowrap}
.section.alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section.navy{background:var(--sky-900); color:#fff}
.section.navy .lede, .section.navy p{color:rgba(255,255,255,.8)}
.section.navy a{color:#fff}
.section.navy h2{color:#fff}

/* departures board ------------------------------------------------------ */
.board{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:8.5rem 1.6fr 1.3fr auto; gap:1.5rem; align-items:center;
  padding:1.1rem 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none}
.row:hover{background:var(--paper); box-shadow:0 0 0 1rem var(--paper)}
.row b{display:block; font-weight:600; font-stretch:105%}
.row span, .row small{display:block; color:var(--muted); font-size:.875rem}
.row-route b{font-size:1.125rem; display:flex; align-items:center; gap:.4rem}
.row-price{text-align:right}
.row-price b{font-size:1.125rem}
.row-price small{font-size:.75rem}
.board-key{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.25rem; color:var(--muted); font-size:.875rem}
@media (max-width:760px){
  .row{grid-template-columns:1fr auto; gap:.35rem 1rem}
  .row-when{order:1} .row-price{order:2} .row-route{order:3; grid-column:1/-1} .row-ac{order:4; grid-column:1/-1}
  .row:hover{box-shadow:none}
}

/* how it works ---------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; counter-reset:step}
.steps > div{border-top:2px solid var(--sky-900); padding-top:1rem}
.steps h3{margin-bottom:.5rem}
.steps h3::before{counter-increment:step; content:counter(step) ". "; color:var(--sky-600)}
.steps p{color:var(--muted); margin:0}
@media (max-width:760px){.steps{grid-template-columns:1fr; gap:1.5rem}}

/* fleet ----------------------------------------------------------------- */
.fleet-teaser{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.fleet-teaser a{display:block; color:inherit; text-decoration:none}
.fleet-teaser img{aspect-ratio:3/2; object-fit:cover; border-radius:6px; background:var(--sky-100)}
.fleet-teaser b{display:block; margin-top:.75rem; font-weight:600; font-stretch:105%}
.fleet-teaser span{color:var(--muted); font-size:.9rem}
@media (max-width:760px){.fleet-teaser{grid-template-columns:1fr}}

.jet{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; padding:clamp(2rem,5vw,4rem) 0; border-bottom:1px solid var(--line)}
.jet:last-child{border-bottom:0}
.jet img{aspect-ratio:16/10; object-fit:cover; border-radius:8px; background:var(--sky-100)}
.jet-flip img{order:2}
.jet-class{color:var(--sky-600); font-weight:500; margin-bottom:.5rem}
.jet h2{margin-bottom:.75rem}
.jet-text > p{color:var(--muted)}
.specs{display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1.5rem; margin:1.25rem 0 0}
.specs div{border-top:1px solid var(--line); padding-top:.5rem}
.specs dt{font-size:.8rem; color:var(--muted)}
.specs dd{margin:0; font-weight:600; font-stretch:105%}
.specs dd span{display:block; font-weight:400; font-size:.85rem; color:var(--muted)}
@media (max-width:760px){.jet{grid-template-columns:1fr} .jet-flip img{order:0}}

/* flight page ----------------------------------------------------------- */
.crumb{color:var(--muted); font-size:.9rem; margin-bottom:1rem}
.crumb a{color:inherit}
.flight-head{padding:8rem 0 2.5rem}
.flight-head .to{font-stretch:100%; font-weight:300; color:var(--muted); font-size:.55em; vertical-align:middle; margin:0 .15em}
.flight-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:start}
.flight-photo{margin:0}
.flight-photo img{aspect-ratio:16/10; object-fit:cover; border-radius:8px; background:var(--sky-100)}
.flight-photo figcaption{color:var(--muted); font-size:.875rem; margin-top:.6rem}
.quote{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:1.75rem; position:sticky; top:1.5rem}
.quote-type{color:var(--sky-600); font-weight:500; margin-bottom:.25rem}
.quote-price{font-size:2.5rem; font-weight:600; font-stretch:108%; letter-spacing:-.02em; line-height:1.1; margin:0}
.quote-eth{color:var(--muted); font-size:1.1rem; margin:.15rem 0 1rem}
.quote-note{color:var(--muted); font-size:.9rem}
.quote-fine{color:var(--muted); font-size:.8rem; margin:.9rem 0 0; line-height:1.5}
.flight-details{display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--line)}
.flight-details dl{margin:0}
.flight-details dl div{padding:.9rem 0; border-bottom:1px solid var(--line)}
.flight-details dt{font-size:.8rem; color:var(--muted)}
.flight-details dd{margin:0; font-weight:500}
.prose h2{font-size:1.35rem; margin:0 0 .6rem}
.prose h2 + p{margin-bottom:1.5rem}
.prose p{color:var(--muted)}
@media (max-width:860px){.flight-grid,.flight-details{grid-template-columns:1fr} .quote{position:static}}

/* token page ------------------------------------------------------------ */
.two{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
.two p{color:var(--muted)}
.navy .two p{color:rgba(255,255,255,.8)}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.facts{margin:0; display:grid; gap:.75rem}
.facts div{display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:.85rem 0; border-top:1px solid rgba(255,255,255,.18)}
.facts dt{color:rgba(255,255,255,.65)}
.facts dd{margin:0; font-weight:500}
.facts code{font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:rgba(255,255,255,.1); padding:.15em .4em; border-radius:4px}
.tiers{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.tiers li{display:grid; grid-template-columns:1fr auto; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line)}
.tiers b{display:block; font-weight:600; font-stretch:105%}
.tiers span{color:var(--muted); font-size:.9rem}
.tiers em{font-style:normal; font-weight:600; color:var(--sky-600); white-space:nowrap}
.notice{background:var(--sky-100); border-left:3px solid var(--sky-400); padding:1rem 1.25rem; border-radius:0 6px 6px 0; font-size:.9rem; color:var(--muted); max-width:44rem}

/* contact --------------------------------------------------------------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.contact-grid > div{border-top:2px solid var(--sky-900); padding-top:1rem}
.contact-grid h3{margin-bottom:.4rem}
.contact-grid a.big{font-size:1.25rem; font-weight:500; text-decoration:none; color:var(--sky-900); font-stretch:105%}
.contact-grid a.big:hover{color:var(--sky-600)}
.contact-grid p{color:var(--muted); margin:.4rem 0 0; font-size:.95rem}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* footer ---------------------------------------------------------------- */
footer{background:var(--sky-100); border-top:1px solid var(--line); padding:3.5rem 0 3rem; font-size:.9rem; color:var(--muted)}
.foot{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; align-items:start}
.foot .brand{color:var(--ink); margin-bottom:.75rem}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin:.25rem 0}
.foot a{color:var(--ink); text-decoration:none}
.foot a:hover{color:var(--sky-600)}
.foot h3{font-size:.95rem; margin-bottom:.5rem}
.legal{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.8rem; line-height:1.55; max-width:64rem}
@media (max-width:760px){.foot{grid-template-columns:1fr; gap:1.5rem}}

a:focus-visible,.btn:focus-visible,.row:focus-visible{outline:2px solid var(--sky-600); outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}