@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/BricolageGrotesque-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/BricolageGrotesque-800.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/DMSans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/DMSans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/DMSans-700.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/SpaceMono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/SpaceMono-700.woff2') format('woff2')}
:root{
  --captain:#3d5ac9;--captainh:#2f49a8;--coral:#39cde0;--corals:#93e6f0;--amber:#e9b44c;
  --ink:#131e33;--mut:#6a7285;--paper:#f7f2e9;--card:#ffffff;--subtle:#efe8da;--line:#e7dfd0;
  --night:#0b1424;--panel:#101d33;--nline:#1d2c49;--ntext:#e9eef8;--nmut:#8fa1c2;
  --cyan:#39cde0;--cyans:#93e6f0;
  --display:'Bricolage Grotesque','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--mono:'Space Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--paper)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---- load + scroll reveals ---- */
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---- nav ---- */
header{position:absolute;top:0;left:0;right:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:3.5px;color:var(--ntext);text-transform:uppercase}
/* The wordmark must be ONE flex item — otherwise the container's gap lands
   between "Jumbo" and "radar" and splits the lockup. */
.brand .wm{display:inline-block;white-space:nowrap}
.brand img{width:34px;height:34px}
.brand b{color:var(--cyan);font-weight:700;letter-spacing:1px;margin-right:-1px}
.nav-links{display:flex;gap:30px;align-items:center;font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;color:var(--nmut)}
.nav-links a:hover{color:var(--cyan)}
.btn{display:inline-block;background:var(--coral);color:#fff;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:1px;padding:12px 22px;border-radius:8px;border:0;cursor:pointer;transition:transform .18s var(--ease),background .18s}
.btn:hover{background:#c94a26;transform:translateY(-2px)}

/* ---- hero: the night deck ---- */
.hero{position:relative;overflow:hidden;color:var(--ntext);
  background:radial-gradient(1100px 600px at 78% 30%,#16264a 0%,#101d33 45%,#0c1526 100%);
  padding:150px 0 0;min-height:760px}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 12% 22%,rgba(233,238,248,.5) 50%,transparent 51%),
  radial-gradient(1px 1px at 34% 68%,rgba(233,238,248,.35) 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 58% 12%,rgba(233,238,248,.45) 50%,transparent 51%),
  radial-gradient(1px 1px at 83% 78%,rgba(233,238,248,.3) 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 44% 40%,rgba(233,238,248,.35) 50%,transparent 51%),
  radial-gradient(1px 1px at 71% 55%,rgba(233,238,248,.3) 50%,transparent 51%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;position:relative;z-index:2}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--cyan);border:1px solid rgba(57,205,224,.35);background:rgba(57,205,224,.08);padding:7px 14px;border-radius:999px;margin-bottom:26px}
.kicker .pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}
h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,5.6vw,76px);line-height:1.02;letter-spacing:-.02em;color:var(--paper)}
h1 .sig{color:var(--cyan)}
.hero p.sub{color:var(--nmut);font-size:18px;margin:22px 0 0;max-width:520px}
.reticle i{position:absolute;width:22px;height:22px;border:2px solid rgba(57,205,224,.35);z-index:1}
.reticle i:nth-child(1){top:96px;left:24px;border-right:0;border-bottom:0}
.reticle i:nth-child(2){top:96px;right:24px;border-left:0;border-bottom:0}
.reticle i:nth-child(3){bottom:78px;left:24px;border-right:0;border-top:0}
.reticle i:nth-child(4){bottom:78px;right:24px;border-left:0;border-top:0}
.runway{position:relative;z-index:3;height:26px;margin-top:56px;
  background-image:radial-gradient(circle 3px at 50% 50%,var(--amber) 90%,transparent 100%);
  background-size:64px 26px;background-repeat:repeat-x;background-position:center;
  -webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);opacity:.55}

/* ---- boarding-pass search card ---- */
#search{scroll-margin-top:90px}
.pass{margin-top:52px;background:var(--paper);color:var(--ink);border-radius:14px;position:relative;
  box-shadow:0 30px 70px rgba(2,8,24,.55);overflow:hidden}
.pass-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 26px;background:var(--panel);color:var(--nmut);font-family:var(--mono);font-size:11px;letter-spacing:2.5px}
.pass-head b{color:var(--cyan);font-weight:700}
/* ---- trip type ----
   One-way is the default because every fare on this site is a one-way price.
   Choosing RETURN changes what the calendar under DEPART is quoting, so the
   control lives in the head where it reads as scoping the whole card. */
.trip{display:flex;gap:5px;flex:0 0 auto}
.trip button{padding:6px 13px;border:1px solid var(--nline);background:transparent;border-radius:7px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.4px;color:var(--nmut);
  transition:background .16s,color .16s,border-color .16s}
.trip button:hover:not(.on){color:var(--cyan);border-color:var(--cyan)}
.trip button.on{background:var(--cyan);border-color:var(--cyan);color:var(--night)}
.fld.ret.off input{opacity:.5}
.pass form{display:grid;grid-template-columns:1fr 1fr 130px 130px 158px auto;gap:0;padding:20px 26px 24px;position:relative}
.pass .fld{padding:0 22px;border-left:1px dashed #cfc6b2;min-width:0}
/* The three compact fields carry fixed-width values ("23 AUG 2026",
   "4 · BUSINESS"). At the 17px body size they clip inside their columns,
   so they step down and give up some side padding. */
.pass .fld.dep,.pass .fld.ret,.pass .fld.pax{padding:0 16px}
.pass .fld.dep input,.pass .fld.ret input,.pass .fld.pax input{font-size:14px}
.pass .fld:first-child{border-left:0;padding-left:0}
.pass label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--mut);margin-bottom:6px}
.pass input{width:100%;min-width:0;border:0;border-bottom:2px solid var(--line);background:transparent;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink);padding:6px 0;text-transform:uppercase}
.pass input:focus{outline:0;border-bottom-color:var(--captain)}
.pass .btn{align-self:end;height:50px;padding:0 34px;white-space:nowrap;margin-left:22px}
/* ---- swap origin/destination ----
   Sits ON the divider between FROM and TO (absolute inside .fld.to, whose left
   edge IS that line), so the control reads as belonging to both fields rather
   than to either one. */
.pass .fld{position:relative}
.pass-swap{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:38px;height:38px;padding:0;border-radius:50%;border:2px solid var(--ink);background:var(--paper);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .34s var(--ease)}
.pass-swap:hover{background:var(--captain);border-color:var(--captain)}
.pass-swap:hover svg{stroke:#fff}
.pass-swap:focus-visible{outline:2px solid var(--captain);outline-offset:2px}
.pass-swap svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s}
.pass-perf{display:none}
.pass-perf::before,.pass-perf::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--night)}
.pass-perf::before{left:-31px}.pass-perf::after{right:-31px}
.pass-foot{padding:10px 22px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;color:var(--mut)}

/* ---- place autocomplete ----
   The FROM/TO fields used to require a raw IATA code typed from memory. These
   render a city/airport picker instead. The panel is appended to <body> and
   positioned fixed, because .pass has overflow:hidden for its rounded corners
   and perforation circles — a dropdown inside the card would be clipped. */
.pass input{text-transform:none}
.pass input.iata{text-transform:uppercase}
.ac-panel{position:fixed;z-index:400;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 54px rgba(19,30,51,.20);overflow:hidden;max-height:330px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ac-item{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--subtle)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.sel{background:var(--subtle)}
.ac-item.air{padding-left:30px}
.ac-code{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:1px;color:var(--captain);
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:4px 7px;min-width:44px;text-align:center;flex:0 0 auto}
.ac-text{min-width:0;flex:1}
.ac-name{display:block;font-weight:700;font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-sub{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;color:var(--mut);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-empty{padding:14px;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--mut)}
@media (max-width:700px){ .ac-panel{max-height:52vh} }

/* ---- price calendar ----
   A single fixed date hides the number that actually decides what a trip costs:
   the spread inside the month. HKG->TYO in September runs $139 to $262 on the
   same route depending only on the day you leave. The DEPART field opens a month
   grid with a price under every day, fed by /api/calendar.
   Green/amber/red here are a DATA scale (cheap -> expensive), not brand colour,
   so they sit outside the palette on purpose. Panel lives on <body> for the same
   reason the autocomplete panel does: .pass clips its children. */
.pass input[readonly]{cursor:pointer}
.cal-hint{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1px;color:#0e7a51;margin-left:8px}
.cal-panel{position:fixed;z-index:401;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 54px rgba(19,30,51,.22);overflow:hidden}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--subtle)}
.cal-title{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--ink)}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);border-radius:8px;cursor:pointer;
  font-size:16px;line-height:1;color:var(--captain);transition:background .15s}
.cal-nav button:hover:not(:disabled){background:var(--subtle)}
.cal-nav button:disabled{opacity:.28;cursor:default}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:12px 14px 0;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;color:var(--mut)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:6px 14px 12px}
.cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;
  border:1px solid var(--line);border-radius:8px;background:transparent;padding:4px 2px;cursor:pointer;
  font-family:var(--sans);transition:transform .12s var(--ease),border-color .15s}
.cal-day:hover:not(:disabled){transform:translateY(-1px);border-color:var(--captain)}
.cal-day:focus-visible{outline:2px solid var(--captain);outline-offset:1px}
.cal-day:disabled{opacity:.26;cursor:default}
.cal-day.blank{border:0;background:none;cursor:default}
.cal-num{font-size:13px;font-weight:700;line-height:1;color:var(--ink)}
.cal-px{font-family:var(--mono);font-size:9.5px;font-weight:700;line-height:1}
.cal-day.lo{background:rgba(18,138,94,.10);border-color:rgba(18,138,94,.34)}
.cal-day.lo .cal-px{color:#0e7a51}
.cal-day.mid{background:rgba(233,180,76,.14);border-color:rgba(233,180,76,.45)}
.cal-day.mid .cal-px{color:#9c6f14}
.cal-day.hi{background:rgba(224,85,46,.09);border-color:rgba(224,85,46,.32)}
/* Explicit red, NOT var(--coral): in this brand --coral and --cyan resolve to
   the same accent token, so a "too expensive" day would print in signal cyan. */
.cal-day.hi .cal-px{color:#c9451f}
.cal-day.best{border-width:2px;border-color:#0e7a51;background:rgba(18,138,94,.18)}
.cal-day.best .cal-num,.cal-day.best .cal-px{color:#0b6644}
.cal-day.sel,.cal-day.sel.lo,.cal-day.sel.mid,.cal-day.sel.hi,.cal-day.sel.best{background:var(--captain);border-color:var(--captain)}
.cal-day.sel .cal-num,.cal-day.sel .cal-px{color:#fff}
.cal-day.load,.cal-mo.load{animation:calpulse 1.1s ease-in-out infinite}
@keyframes calpulse{50%{opacity:.4}}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--subtle);
  font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--mut)}
.cal-leg{display:flex;gap:13px}
.cal-leg span{display:flex;align-items:center;gap:5px}
.cal-leg i{width:9px;height:9px;border-radius:50%;display:block}
.cal-note{padding:12px 16px;border-top:1px solid var(--subtle);
  font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--mut)}
/* ---- mode switch + cheapest-month view ----
   For the traveller whose dates are open, the question isn't "which day in
   September" but "which month at all". One call to /api/months answers it for
   the year; picking a month drops back into that month's day grid with the
   cheapest day already selected, so the choice is still shown, not assumed. */
.cal-modes{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:11px 14px 2px}
.cal-modes button{padding:8px 4px;border:1px solid var(--line);background:var(--paper);border-radius:8px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1.3px;color:var(--mut);
  transition:background .15s,color .15s,border-color .15s}
.cal-modes button:hover:not(.on){border-color:var(--captain);color:var(--captain)}
.cal-modes button.on{background:var(--captain);border-color:var(--captain);color:#fff}
.cal-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 14px}
.cal-mo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;
  border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;padding:8px 4px;
  font-family:var(--sans);transition:transform .12s var(--ease),border-color .15s}
.cal-mo:hover:not(:disabled){transform:translateY(-1px);border-color:var(--captain)}
.cal-mo:focus-visible{outline:2px solid var(--captain);outline-offset:1px}
.cal-mo:disabled{opacity:.32;cursor:default}
.fld input.need{box-shadow:0 2px 0 0 #e5484d;transition:box-shadow .2s}
.cal-mo-n{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:1.6px;color:var(--ink);line-height:1}
.cal-mo-y{font-family:var(--mono);font-size:8.5px;letter-spacing:1.2px;color:var(--mut);line-height:1}
.cal-mo-p{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);line-height:1;margin-top:2px}
.cal-mo.best{border-width:2px;border-color:#0e7a51;background:rgba(18,138,94,.14)}
.cal-mo.best .cal-mo-n,.cal-mo.best .cal-mo-p{color:#0b6644}

/* ---- travellers & cabin class ----
   Same panel grammar as the calendar. No baggage block: the White Label deep
   link has no baggage segment, so a bag checkbox would change nothing about the
   search it opens. */
.pax-panel{position:fixed;z-index:401;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 54px rgba(19,30,51,.22);overflow:hidden}
.pax-sec{padding:14px 16px;border-bottom:1px solid var(--subtle)}
.pax-sec:last-of-type{border-bottom:0}
.pax-lab{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;color:var(--mut);margin-bottom:8px}
.pax-sel{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink);cursor:pointer}
.pax-sel:focus{outline:0;border-color:var(--captain)}
.pax-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.pax-row+.pax-row{border-top:1px solid var(--subtle)}
.pax-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.pax-sub{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;color:var(--mut);margin-top:2px;font-weight:400}
.pax-step{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.pax-step button{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);border-radius:8px;cursor:pointer;
  font-size:16px;line-height:1;color:var(--captain);transition:background .15s,border-color .15s}
.pax-step button:hover:not(:disabled){background:var(--subtle);border-color:var(--captain)}
.pax-step button:disabled{opacity:.28;cursor:default}
.pax-n{min-width:18px;text-align:center;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink)}
.pax-apply{width:calc(100% - 32px);margin:0 16px 16px;height:42px;border:0;border-radius:9px;background:var(--captain);
  color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.6px;cursor:pointer;
  transition:background .16s}
.pax-apply:hover{background:var(--captainh)}
.pax-cap{padding:0 16px 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;color:var(--mut)}
@media (max-width:520px){
  .cal-day{min-height:42px}
  .cal-grid,.cal-dow{padding-left:10px;padding-right:10px}
  .cal-foot{font-size:9px;letter-spacing:1px}
}

/* ---- THE SCOPE (signature) ---- */
.scope{position:relative;aspect-ratio:1;max-width:560px;margin:0 auto;z-index:1}
.scope-face{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(57,205,224,.07),rgba(16,29,51,.9) 70%);
  border:1px solid rgba(57,205,224,.3);
  box-shadow:0 0 90px rgba(57,205,224,.12) inset,0 0 60px rgba(57,205,224,.06)}
.deg{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--nmut);opacity:.8}
.deg:nth-of-type(1){top:-6px;left:50%;transform:translate(-50%,-100%)}
.deg:nth-of-type(2){right:-6px;top:50%;transform:translate(100%,-50%)}
.deg:nth-of-type(3){bottom:-6px;left:50%;transform:translate(-50%,100%)}
.deg:nth-of-type(4){left:-6px;top:50%;transform:translate(-100%,-50%)}
.rings{position:absolute;inset:0}
.rings i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(57,205,224,.18);border-radius:50%}
.rings i:nth-child(1){width:33%;height:33%}.rings i:nth-child(2){width:66%;height:66%}.rings i:nth-child(3){width:94%;height:94%}
.cross{position:absolute;inset:5%}
.cross::before,.cross::after{content:"";position:absolute;background:rgba(57,205,224,.14)}
.cross::before{left:50%;top:0;bottom:0;width:1px}
.cross::after{top:50%;left:0;right:0;height:1px}
.sweep{position:absolute;inset:0;border-radius:50%;overflow:hidden;animation:spin 6s linear infinite}
.sweep::before{content:"";position:absolute;left:50%;top:50%;width:50%;height:50%;transform-origin:0 0;
  background:conic-gradient(from -40deg at 0 0,rgba(57,205,224,.35),transparent 40deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.blip{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;z-index:2}
.blip-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:blip 2.6s ease-in-out infinite}
.blip:nth-child(odd) .blip-dot{animation-delay:1.1s}
@keyframes blip{50%{opacity:.35}}
.blip-tag{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--cyans);background:rgba(11,20,36,.75);border:1px solid rgba(57,205,224,.35);padding:2px 7px;border-radius:6px}
.blip-route{position:absolute;left:14px;top:-22px;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--nmut);white-space:nowrap;opacity:0;transition:.2s}
.blip:hover .blip-route{opacity:1}
.scope-cap{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--nmut);margin-top:18px}

/* ---- ticker ---- */
.ticker{position:relative;z-index:3;background:var(--night);border-top:1px solid var(--nline);border-bottom:1px solid var(--nline);overflow:hidden;padding:13px 0;margin-top:70px}
.ticker-track{display:inline-flex;white-space:nowrap;animation:marq 36s linear infinite;font-family:var(--mono);font-size:13px;letter-spacing:1px;color:var(--nmut)}
.ticker-track span{padding-right:8px}
.ticker-track b{color:var(--cyan)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- daylight sections ---- */
section{padding:84px 0}
.sec-kick{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--captain);margin-bottom:10px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.015em}
.sec-sub{color:var(--mut);margin:10px 0 40px;max-width:560px}
.ghost{position:relative}
.ghost::before{content:attr(data-ghost);position:absolute;top:-38px;left:-8px;font-family:var(--display);font-weight:800;font-size:clamp(80px,12vw,170px);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(61,90,201,.12);pointer-events:none;user-select:none}

/* departure-board deal rows */
.board{border-top:1px solid var(--line)}
.drow{display:grid;grid-template-columns:1fr auto;gap:6px 26px;align-items:center;padding:20px 10px;border-bottom:1px solid var(--line);transition:background .15s}
.drow:hover{background:var(--card)}
.drow-route{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.drow-city{font-weight:700;font-size:17px}
.drow-city em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--mut);margin-left:4px}
.drow-line{flex:1;min-width:30px;border-top:2px dotted #cfc6b2}
.drow-arrow{color:var(--coral);font-weight:700}
.drow-meta{grid-column:1;font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;color:var(--mut)}
.drow-right{grid-row:1/3;grid-column:2;display:flex;align-items:center;gap:18px}
.drow-price{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--cyans);
  background:var(--panel);border:1px solid var(--nline);border-radius:8px;
  padding:10px 14px;min-width:96px;text-align:center;
  box-shadow:0 2px 0 rgba(11,20,36,.9),inset 0 1px 0 rgba(233,238,248,.08)}
.drow-cta{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:1px;color:var(--coral);white-space:nowrap}
.board-note{margin-top:20px;font-size:13.5px;color:var(--mut)}

/* stamps */
.dests{background:var(--subtle)}
.stamp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.stamp{background:var(--card);border:2px dashed #cfc4a8;border-radius:8px;padding:26px 18px;text-align:center;position:relative;transition:transform .2s var(--ease),box-shadow .2s;box-shadow:0 4px 14px rgba(19,30,51,.06)}
.stamp:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 16px 34px rgba(19,30,51,.13)}
.stamp-flag{font-size:36px}
.stamp-name{font-weight:700;margin-top:8px}
.stamp-code{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--mut);margin-top:2px}
.stamp-price{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--coral);margin-top:10px}

/* how */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.how{padding:32px 28px;border-left:1px solid var(--line)}
.how:first-child{border-left:0}
.how .n{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:2px;color:var(--coral)}
.how h3{font-family:var(--display);font-weight:800;font-size:21px;margin:12px 0 8px}
.how p{color:var(--mut);font-size:15px}

/* partners + footer */
.partners{background:var(--panel);color:var(--nmut);text-align:center;padding:34px 0;font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px}
.partners b{color:var(--cyans);font-weight:700}
footer{background:var(--night);color:var(--nmut);padding:64px 0 56px;border-top:1px solid var(--nline)}
.fcols{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.fcols h4{font-family:var(--mono);font-size:11px;letter-spacing:2.5px;color:var(--ntext);margin-bottom:12px}
.fcols p,.fcols a{font-size:14px;line-height:2}
.fcols a:hover{color:var(--cyan)}
.disc{margin-top:36px;font-size:12.5px;color:#5f6f92;border-top:1px solid var(--nline);padding-top:22px;line-height:1.75}

/* ---- everywhere board ----
   "Where can I go from here" — countries cheapest-first, then the cities inside
   one. Both levels come from a single /api/everywhere response, so drilling in
   costs nothing. Each card carries the departure date its price was found on,
   and that date is what its link opens. */
/* The site header is absolute over the hero's dark ground. An inner page has
   no hero, so it carries its own dark band — otherwise the reversed wordmark
   sits invisible on paper and overlaps the first heading. */
body.page header{position:static;background:var(--night)}   /* static: it takes its own space, no body offset */
.ew{padding-top:46px}
.ew-bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:24px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.ew-fld{min-width:0;flex:1 1 230px;position:relative}
.ew-fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--mut);margin-bottom:6px}
.ew-fld input{width:100%;border:0;border-bottom:2px solid var(--line);background:transparent;
  font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink);padding:6px 0}
.ew-fld input:focus{outline:0;border-bottom-color:var(--captain)}
.ew-crumb{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:28px;
  font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:var(--mut)}
.ew-crumb button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 13px;cursor:pointer;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--captain);transition:background .15s}
.ew-crumb button:hover{background:var(--subtle)}
.ew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:13px;margin-top:20px}
.ew-card{display:flex;flex-direction:column;gap:6px;padding:17px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);cursor:pointer;text-align:left;text-decoration:none;color:inherit;
  transition:transform .16s var(--ease),box-shadow .16s,border-color .16s}
.ew-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(19,30,51,.12);border-color:var(--captain)}
.ew-flag{font-size:23px;line-height:1}
.ew-name{font-size:17px;font-weight:700;color:var(--ink);line-height:1.25}
.ew-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;color:var(--mut)}
.ew-price{margin-top:4px;font-family:var(--mono);font-size:19px;font-weight:700;color:var(--captain)}
.ew-price span{display:block;font-size:9px;letter-spacing:1.4px;color:var(--mut);font-weight:400;margin-bottom:3px}
.ew-note{margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;color:var(--mut);line-height:1.9}
.ew-skel{height:120px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  animation:calpulse 1.1s ease-in-out infinite}
.ac-item.any .ac-code{color:var(--coral);border-color:var(--coral)}
/* At the foot of the list it is an action, not a match, so it gets a rule
   above it — unless it is the only row, where a rule would be noise. */
.ac-item.any:not(:only-child){border-top:1px solid var(--line)}
.ac-item.none{cursor:default;opacity:.75}
.ac-item.none .ac-code{display:none}

@media(max-width:1180px){
  .pass form{grid-template-columns:1fr 1fr}
  .pass .fld{border-left:0;padding:10px 0}
  .pass .btn{grid-column:1/-1;margin-top:8px}
  /* Keep a gutter and a line for the swap control once the dividers go. */
  .pass .fld.to{border-left:1px dashed #cfc6b2;padding-left:27px}
  .pass .fld.from{padding-right:27px}
}
@media(max-width:1020px){.hero-grid{grid-template-columns:1fr}.scope{max-width:420px;margin-top:44px}}
@media(max-width:760px){
  .nav-links a:not(.btn){display:none}
  .pass form{grid-template-columns:1fr 1fr}
  .pass .fld{border-left:0;padding:10px 0}
  .pass .fld.to{border-left:1px dashed #cfc6b2;padding-left:25px}
  .pass .fld.from{padding-right:25px}
  /* The trip toggle needs the head's full width on a phone. */
  .pass-head .ph{display:none}
  .pass-swap{width:34px;height:34px}
  .pass-swap svg{width:15px;height:15px}
  .pass .btn{grid-column:1/-1;margin-top:8px}
  .drow{grid-template-columns:1fr}
  .drow-right{grid-row:auto;grid-column:1;justify-content:space-between;margin-top:8px}
  .how-grid{grid-template-columns:1fr}
  .how{border-left:0;border-top:1px solid var(--line)}
  .how:first-child{border-top:0}
  section{padding:60px 0}
}
@media(prefers-reduced-motion:reduce){
  .pass-swap{transition:background .18s,border-color .18s}
  .ln>span{animation:none;transform:none}
  .rv{opacity:1;transform:none;transition:none}
  .sweep,.blip-dot,.kicker .pulse,.ticker-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---- Part of Jumbo ----
   The three sites are one group, so each footer lists all three and marks the
   one you are standing on rather than linking it to itself. The cyan dot is
   the "you are here" pip; the others are ordinary links out. */
.jgroup{display:grid;gap:0;margin-top:-4px}
.jgroup a,.jgroup span{display:flex;align-items:center;gap:9px;font-size:14px;line-height:2}
.jgroup i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:1.3px;color:#5f6f92;text-transform:uppercase}
.jgroup a:hover{color:var(--cyan)}
.jgroup .here{color:var(--ntext);font-weight:700}
.jgroup .here::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 3px rgba(57,205,224,.18)}
.jgroup a::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;border:1px solid #3a4a6b}

/* ---- legal pages (terms, privacy, cookies) ----
   Long-form documents on the paper ground, with the section index parked in
   the margin. Same header/footer shell as everywhere else so a legal link
   doesn't feel like leaving the site. */
.lgl-head{background:var(--night);color:var(--ntext);padding:46px 0 52px;border-bottom:1px solid var(--nline);position:relative;overflow:hidden}
.lgl-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--cyan) 0 3px,transparent 3px 26px);opacity:.5}
.lgl-head .sec-kick{color:var(--cyan)}
.lgl-head h1{font-family:var(--display);font-weight:800;font-size:clamp(33px,4.4vw,52px);line-height:1.04;
  letter-spacing:-.02em;color:var(--paper);margin-top:12px}
.lgl-head p{color:var(--nmut);max-width:64ch;margin-top:14px;font-size:17px}
.lgl-stamp{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;
  color:var(--nmut);border:1px dashed var(--nline);border-radius:8px;padding:8px 13px}
.lgl{padding:52px 0 84px}
.lgl-grid{display:grid;grid-template-columns:236px 1fr;gap:56px;align-items:start}
.lgl-toc-in{position:sticky;top:22px}
.lgl-toc h4{font-family:var(--mono);font-size:10px;letter-spacing:2.2px;color:var(--mut);margin-bottom:10px}
.lgl-toc a{display:block;font-size:13px;line-height:1.45;padding:8px 0;color:var(--mut);border-bottom:1px solid var(--line)}
.lgl-toc a:last-child{border-bottom:0}
.lgl-toc a:hover{color:var(--captain)}
.lgl-body{max-width:74ch}
.lgl-body h3{font-family:var(--display);font-weight:800;font-size:22px;margin:40px 0 4px;scroll-margin-top:24px}
.lgl-body h3:first-child{margin-top:0}
.lgl-body h3 em{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--cyan);
  display:block;margin-bottom:7px}
.lgl-body p{color:var(--mut);font-size:15.5px;margin-top:11px}
.lgl-body ul{margin:13px 0 0;padding-left:0;list-style:none}
.lgl-body li{color:var(--mut);font-size:15.5px;padding:8px 0 8px 20px;position:relative;border-bottom:1px solid var(--subtle)}
.lgl-body li:last-child{border-bottom:0}
.lgl-body li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.lgl-body a{color:var(--captain);text-decoration:underline;text-underline-offset:2px}
.lgl-body strong{color:var(--ink)}
.lgl-note{margin-top:16px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--coral);
  border-radius:10px;padding:17px 19px;font-size:14.5px;color:var(--mut)}
.lgl-cross{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.lgl-cross a{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--captain);border:1px solid var(--line);border-radius:8px;padding:10px 15px;text-decoration:none;background:var(--card)}
.lgl-cross a:hover{background:var(--subtle)}
.lgl-cross a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media(max-width:900px){
  .lgl-grid{grid-template-columns:1fr;gap:24px}
  .lgl-toc-in{position:static}
  .lgl-toc a{display:inline-block;border-bottom:0;padding:6px 12px 6px 0}
}

/* ---- contact form ----
   ct- prefixed throughout. This stylesheet is shared by every page, and a
   generic class name here inherits whatever component already owns it. */
.ct-form{margin-top:18px}
.ct-row{margin-bottom:17px}
.ct-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.ct-row label span{text-transform:none;letter-spacing:0;font-family:var(--sans);opacity:.7}
.ct-row input,.ct-row select,.ct-row textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.ct-row textarea{resize:vertical;min-height:120px}
.ct-row input:focus,.ct-row select:focus,.ct-row textarea:focus{outline:2px solid var(--captain);
  outline-offset:1px;border-color:var(--captain)}
/* Off-screen, not display:none — a bot reading the DOM sees a normal field. */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-send{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:0;border-radius:10px;padding:14px 22px;cursor:pointer}
.ct-send:hover{background:var(--captain)}
.ct-note{margin-top:13px;font-size:13.5px;color:var(--mut);line-height:1.55}

/* ---- 404 ---- */
.nf{padding:72px 0 90px}
.nf-code{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--coral)}
.nf h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,54px);color:var(--ink);
  line-height:1.05;margin-top:12px;letter-spacing:-.02em}
.nf p{color:var(--mut);font-size:17px;margin-top:14px;max-width:56ch}
.nf-links{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}