/* ==========================================================================
   HCGL Online — "Trade Desk" light theme
   Concept: infrastructure-marketing rigour (Stripe/Cloudflare) + travel warmth.

   Deliberate anti-patterns — do not reintroduce:
     · no gradient glow blobs        · glass only on the login card, over the map
     · no gradient-filled headlines  · no centred pill eyebrows
     · no symmetric 3-up icon-tile grid as the default section shape

   Ported component styles are marked [KOKONUT] / [BKLIT] with the source file.
   ========================================================================== */

/* ============================================================ 1. TOKENS === */
:root{
  /* base is pure white — all colour comes from the gradient washes below,
     so no surface ever reads as beige or dull */
  --paper:#FFFFFF;
  --paper-2:#F8F9FB;
  --paper-3:#EFF1F4;
  --white:#FFFFFF;

  /* ink ramp */
  --ink:#14171D;
  --ink-2:#2B313C;
  --body:#4A525F;
  --muted:#6E7784;
  --faint:#98A1AE;

  /* brand */
  --gold:#E8B10C;          /* fills only — never text on paper */
  --gold-soft:#FBF3D6;
  --amber:#8A6410;         /* text-safe gold, 5.4:1 on paper */
  --slate:#2F5D62;         /* cool counterweight for diagrams */
  --slate-soft:#E7EFEF;

  /* Travel accent set. Gold alone read as monotone across 16 sections, so
     sections and cards rotate through these. Each has a tint for fills and a
     dark variant that passes contrast as text on paper. */
  --coral:#C75B39;   --coral-soft:#FBEAE3;   --coral-ink:#9B4227;
  --teal:#2F7D7B;    --teal-soft:#E2F1F0;    --teal-ink:#1F5D5B;
  --sky:#2E6FB7;     --sky-soft:#E5EEF9;     --sky-ink:#22568F;
  --olive:#6E7A34;   --olive-soft:#EFF2E1;   --olive-ink:#545D26;

  --rule:#E7E9EE;
  --rule-2:#D5D9E0;

  --ff-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --ff:'Inter Tight', system-ui, -apple-system, sans-serif;
  --ff-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap:1240px;
  --gut:clamp(20px, 4.5vw, 56px);
  --r:14px; --r-lg:20px; --r-xl:28px;

  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-spring:cubic-bezier(.16,1,.3,1);

  --sh-1:0 1px 2px rgba(20,23,29,.05), 0 2px 8px rgba(20,23,29,.04);
  --sh-2:0 2px 4px rgba(20,23,29,.04), 0 12px 28px -8px rgba(20,23,29,.10);
  --sh-3:0 4px 8px rgba(20,23,29,.05), 0 28px 60px -18px rgba(20,23,29,.18);

  --header-h:74px;

  /* Vibrant washes. Travel's honest version of a gradient canvas is dawn and
     dusk light — peach, rose, lavender, lagoon. Kept low-saturation so display
     type still hits AA on top of them. */
  --g-dawn:linear-gradient(135deg,#FFFBF4 0%,#FFEDF2 28%,#F1E9FF 60%,#E9F6F8 100%);
  --g-dusk:linear-gradient(160deg,#FFF8F2 0%,#FDEBEF 34%,#F1EBFC 70%,#EAF4F4 100%);
  --g-lagoon:linear-gradient(140deg,#EEF8F7 0%,#EFF4FD 48%,#F8EFFC 100%);
  --g-sand:linear-gradient(135deg,#FFFCF6 0%,#FEF5EC 46%,#F9F2FD 100%);
  --g-lightblue:linear-gradient(135deg, #f4faff 0%, #f4faff 46%, #eae8fd 100%);
  --g-mint:linear-gradient(145deg,#FBFEFC 0%,#F3FAF6 50%,#F7FCF9 100%);
}

/* ============================================================= 2. RESET === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 14px)}
@media (prefers-reduced-motion:reduce){
  /* Global motion damping — but the hero video, keyburst slides and the
     route-field SVG (drift / glints / orbiting icons) are exempted so the
     hero stays live regardless of the OS "reduce motion" setting. */
  *:not(.rf__g):not(.rf__glint):not(.rf__ring):not(.rf__bloom):not(.rf__icon):not(.hero__kb-s):not(.hero__vid),
  *::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv05";
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote,pre{margin:0}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:3px}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(76px,8.5vw,132px);position:relative}
.section--tight{padding-block:clamp(52px,6vw,88px)}

/* grid items default to min-width:auto — images blow tracks open otherwise */
[class$="grid"] > *,[class*="grid "] > *,[class$="row"] > *{min-width:0}

.skip{position:fixed;top:-60px;left:16px;z-index:2000;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:8px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}

/* ============================================================== 3. TYPE === */
/* Fraunces variable axes: SOFT (softness) and WONK (alternate glyphs).
   A touch of wonk on display sizes is what stops it reading as stock Georgia. */
.d1,.d2,.d3{
  font-family:var(--ff-display);font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  letter-spacing:-.022em;line-height:1.04;color:var(--ink);
  text-wrap:balance;overflow-wrap:break-word;min-width:0
}
.d1{font-size:clamp(38px,5.6vw,74px);line-height:1.02;letter-spacing:-.03em}
.d2{font-size:clamp(29px,3.7vw,50px)}
.d3{font-size:clamp(21px,2vw,27px);line-height:1.18;letter-spacing:-.015em}
/* Accent words carry the burst palette. color: is the fallback, so if
   background-clip:text is unsupported the word is still legible amber. */
.d1 i,.d2 i{font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1;color:var(--amber)}
/* H1 accent uses brand gold. Note: #E8B10C on white is ~2.0:1, below the
   4.5:1 WCAG AA minimum for body text. Acceptable here only because this
   is very large display type (AA large-text threshold is 3:1 — still short,
   so treat it as a deliberate brand exception, not a compliant value). */
.d1 i{color:var(--gold)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  /* H1 accent stays a solid, contrast-testable amber. Only section headings
     carry the gradient. */
  .d2 i{background:linear-gradient(100deg,#E09A08 0%,#D9673E 38%,#B4478A 70%,#6E5AC6 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    padding-right:.08em;margin-right:-.08em}
  .flowband .d2 i{background:linear-gradient(100deg,#FFC94A 0%,#FF9A6B 46%,#E58FC6 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

.lede{font-size:clamp(16.5px,1.25vw,19.5px);line-height:1.62;color:var(--body);max-width:58ch}
.lede strong{color:var(--ink);font-weight:600}
.small{font-size:14.2px;color:var(--muted);line-height:1.6}

/* Section index — a number, a rule, a label. Doubles as wayfinding. */
.idx{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font-size:13.6px;font-weight:700;letter-spacing:.08em;line-height:1.2;
  text-transform:uppercase;color:var(--amber)}
.idx b{font-family:var(--ff-mono);font-size:13.6px;font-weight:700;color:var(--amber);letter-spacing:0}
section:nth-of-type(4n+2) .idx b{color:var(--teal-ink)}
section:nth-of-type(4n+3) .idx b{color:var(--coral-ink)}
section:nth-of-type(4n) .idx b{color:var(--sky-ink)}
.idx i{flex:none;width:36px;height:2px;background:var(--gold);font-style:normal}

/* asymmetric section head — copy left, lede offset right. Never centred. */
.head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);
  align-items:end;margin-bottom:clamp(38px,4.5vw,64px)}
.head--solo{grid-template-columns:minmax(0,8fr);margin-bottom:clamp(32px,4vw,54px)}
.head__aside{padding-bottom:6px}

.rule{height:1px;background:var(--rule);border:0;margin:0}

.ic{width:19px;height:19px;flex:none}
.ic--s{width:15px;height:15px}

/* ============================================================= 4. ATOMS === */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--rule-2);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  font-size:14.8px;font-weight:600;letter-spacing:-.005em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--e-out),color .3s,border-color .3s,box-shadow .35s,transform .18s;
}
.btn .ic{transition:transform .4s var(--e-spring)}
.btn:hover .ic{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn--ink{--bg:var(--ink);--fg:var(--white);--bd:var(--ink);box-shadow:var(--sh-1)}
.btn--ink:hover{--bg:#000;box-shadow:var(--sh-2)}
.btn--gold{--bg:var(--gold);--fg:var(--ink);--bd:transparent;font-weight:700;box-shadow:0 1px 2px rgba(20,23,29,.06),0 10px 24px -12px rgba(232,177,12,.7)}
.btn--gold:hover{--bg:#F2BD1C;box-shadow:0 2px 4px rgba(20,23,29,.07),0 16px 34px -12px rgba(232,177,12,.85)}
.btn--plain{--bg:var(--white);--bd:var(--rule-2);box-shadow:var(--sh-1)}
.btn--plain:hover{--bd:var(--ink);box-shadow:var(--sh-2)}
.btn--lg{padding:15px 30px;font-size:15.6px}
.btn--sm{padding:9px 16px;font-size:13.8px}
.btn--block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

.alink{display:inline-flex;align-items:center;gap:7px;font-size:14.6px;font-weight:600;color:var(--amber);
  padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .4s var(--e-spring)}
.alink:hover{background-size:100% 1px}
.alink .ic{transition:transform .4s var(--e-spring)}
.alink:hover .ic{transform:translateX(3px)}

.tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--gold-soft);color:var(--amber);border:1px solid #F0E2B4}
.tag--slate{background:var(--slate-soft);color:var(--slate);border-color:#CFE0E0}

.ticks li{position:relative;padding-left:23px;font-size:14.6px;color:var(--body);margin-top:9px}
.ticks li::before{content:'';position:absolute;left:0;top:.52em;width:10px;height:5.5px;
  border-left:1.9px solid var(--amber);border-bottom:1.9px solid var(--amber);transform:rotate(-45deg)}

/* fields */
.f{margin-bottom:13px;min-width:0}
.f > label{display:block;font-size:12.6px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.f__box{display:flex;align-items:center;gap:10px;height:47px;padding:0 13px;
  background:var(--white);border:1px solid var(--rule-2);border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(20,23,29,.04);
  transition:border-color .25s,box-shadow .25s}
.f__box > .ic{color:var(--faint);transition:color .25s}
.f__box input,.f__box select,.f__box textarea{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;font-size:15px;color:var(--ink)}
.f__box textarea{height:auto;padding:11px 0;resize:vertical;line-height:1.55;font-family:inherit}
.f__box select{appearance:none;cursor:pointer}
.f__box input::placeholder,.f__box textarea::placeholder{color:var(--faint)}
.f__box:focus-within{border-color:var(--slate);box-shadow:0 0 0 3px rgba(47,93,98,.14)}
.f__box:focus-within > .ic{color:var(--slate)}
.f__box--area{height:auto;align-items:flex-start;padding:2px 13px}
.f.err .f__box{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.f__eye{color:var(--faint);display:grid;place-items:center;padding:4px}
.f__eye:hover{color:var(--slate)}

.chk{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--body);cursor:pointer;user-select:none}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk i{width:16px;height:16px;border-radius:4px;border:1px solid var(--rule-2);background:var(--white);flex:none;display:grid;place-items:center;transition:all .22s}
.chk i::after{content:'';width:7px;height:3.5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) scale(0);transition:transform .22s cubic-bezier(.34,1.5,.64,1);margin-top:-2px}
.chk input:checked + i{background:var(--gold);border-color:var(--gold)}
.chk input:checked + i::after{transform:rotate(-45deg) scale(1)}

/* ============================================== 5. MOTION PRIMITIVES ===== */
/* Motion.dev drives these. The hidden "from" state is gated behind .fx-on,
   which fx.js adds only once Motion has actually loaded — so a blocked CDN,
   disabled JS or a crawler always gets fully visible content. Never move
   these rules outside the .fx-on scope. */
html.fx-on [data-fx]{opacity:0}
html.fx-on [data-fx="up"]{transform:translateY(26px)}
html.fx-on [data-fx="rise"]{transform:translateY(40px) scale(.985)}

/* masked line reveal for display type — same gating */
.split .ln{display:block;overflow:hidden}
html.fx-on .split .ln > span{display:block;transform:translateY(105%)}

/* ============================================================ 6. HEADER === */
.hdr{position:fixed;inset:0 0 auto;z-index:800;transition:transform .5s var(--e-spring)}
/* position:relative + z-index lifts the whole bar above the ::before frost.
   Without it the absolutely-positioned pseudo-element paints over any header
   child that is NOT itself positioned — which is why the logo link was dead
   while .mnav (position:relative) still took clicks. */
.hdr__in{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:22px;height:var(--header-h)}
/* decoration only: never let the frost intercept a click */
.hdr::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none;
  border-bottom:1px solid transparent;opacity:0;transition:opacity .35s,border-color .35s}
.hdr.stuck::before{opacity:1;border-bottom-color:var(--rule)}

/* text wordmark — placeholder until the new mark lands */
.wm{display:inline-flex;flex-direction:column;line-height:1;font-family:var(--ff-display)}
.wm>img{display: block;width:auto; height: 44px;}
/* ── Logo sizing ───────────────────────────────────────────────────────────
   The mark is a 1923px master, so it MUST be constrained or it renders at
   natural size. Height-only keeps the aspect ratio; the fixed header height
   is the constraint that matters, not width. */
.hdr .wm > img{display:block;height:42px;width:auto;object-fit:contain}
.hdr .wm{flex:none}
@media (max-width:900px){ .hdr .wm > img{height:34px} }
@media (max-width:420px){ .hdr .wm > img{height:30px} }
.wm__r{font-size:25px;font-weight:600;letter-spacing:-.03em;font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--ink)}
.wm__r b{color:var(--gold);font-weight:600}
.wm__s{margin-top:5px;font-family:var(--ff);font-size:8.5px;font-weight:600;letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;color:var(--faint)}

/* [KOKONUT] ported from components/kokonutui/morphic-navbar.tsx
   The device: the active item detaches — gains margin + full radius — while
   its neighbours square off toward it. Reads as one solid bar that morphs. */
.mnav{position:relative;display:flex;align-items:center;background:var(--ink);border-radius:12px;padding:3px}
.mnav a,.mnav button{
  display:flex;align-items:center;gap:6px;padding:8px 15px;
  font-size:13.7px;font-weight:500;color:rgba(255,255,255,.62);
  border-radius:0;transition:all .34s var(--e-out);
}
.mnav > *:first-child{border-radius:9px 0 0 9px}
.mnav > *:last-child{border-radius:0 9px 9px 0}
.mnav a:hover,.mnav button:hover{color:#fff}
.mnav .on{margin:0 5px;border-radius:9px;background:var(--white);color:var(--ink);font-weight:600}
.mnav .on + *{border-radius:9px 0 0 9px}
.mnav .pre{border-radius:0 9px 9px 0}

.hdr__cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--rule-2);background:var(--white);position:relative}
.burger span{position:absolute;left:12px;width:18px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .4s var(--e-spring),width .3s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px;width:12px}
body.nav-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg);width:18px}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:790;background:var(--paper);
  transform:translateY(-100%);transition:transform .6s var(--e-spring);
  padding:calc(var(--header-h) + 18px) var(--gut) 36px;overflow-y:auto;display:flex;align-items:flex-start}
body.nav-open{overflow:hidden}
body.nav-open .sheet{transform:none}
.sheet__in{width:100%;max-width:520px;margin-inline:auto}
.sheet li{border-bottom:1px solid var(--rule)}
.sheet li a{display:flex;align-items:baseline;gap:14px;padding:17px 2px;
  font-family:var(--ff-display);font-weight:600;font-size:clamp(25px,7vw,34px);letter-spacing:-.028em;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--e-out),transform .5s var(--e-spring),color .25s}
.sheet li a em{font-family:var(--ff-mono);font-style:normal;font-size:11.5px;font-weight:600;color:var(--amber)}
.sheet li a:hover{color:var(--amber)}
body.nav-open .sheet li a{opacity:1;transform:none}
.sheet li:nth-child(1) a{transition-delay:.13s}.sheet li:nth-child(2) a{transition-delay:.18s}
.sheet li:nth-child(3) a{transition-delay:.23s}.sheet li:nth-child(4) a{transition-delay:.28s}
.sheet li:nth-child(5) a{transition-delay:.33s}.sheet li:nth-child(6) a{transition-delay:.38s}
.sheet li:nth-child(7) a{transition-delay:.43s}
.sheet__f{margin-top:30px;display:grid;gap:11px}

/* ── Services dropdown ─────────────────────────────────────────────────── */
.mnav__drop{position:relative;display:flex}
.mnav__b{display:flex;align-items:center;gap:6px;padding:8px 15px;border-radius:9px 0 0 9px;
  font-size:13.7px;font-weight:500;color:rgba(255,255,255,.62);transition:color .3s,background .3s}
.mnav__b:hover,.has-drop.open .mnav__b{color:#fff}
.mnav__b .ic{transition:transform .3s}
.has-drop.open .mnav__b .ic{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 14px);left:-6px;width:352px;padding:9px;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--e-out),transform .3s var(--e-spring),visibility .3s}
.has-drop.open .drop{opacity:1;visibility:visible;transform:none}
.drop::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.drop__i{display:flex;gap:13px;align-items:flex-start;padding:12px;border-radius:12px;transition:background .28s}
.drop__i:hover{background:var(--paper-2)}
.drop__ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center}
.drop__ic--gold{background:var(--gold-soft);color:var(--amber)}
.drop__ic--teal{background:var(--teal-soft);color:var(--teal-ink)}
.drop__ic--coral{background:var(--coral-soft);color:var(--coral-ink)}
.drop__ic--sky{background:var(--sky-soft);color:var(--sky-ink)}
.drop__i strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.drop__i small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}

/* ── About: vision / mission / values + a photograph to break the grid ─── */
.vmv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vmv > *{min-width:0}
.vmv__c{padding:clamp(24px,2.6vw,32px);border-radius:var(--r-lg);border:1px solid var(--rule);
  background:var(--white);transition:transform .4s var(--e-out),box-shadow .4s}
.vmv__c:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.vmv__ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--amber);margin-bottom:18px}
.vmv__c:nth-child(2) .vmv__ic{background:var(--teal-soft);color:var(--teal-ink)}
.vmv__c:nth-child(3) .vmv__ic{background:var(--coral-soft);color:var(--coral-ink)}
.vmv__c h3{font-family:var(--ff-display);font-size:18px;font-weight:600;letter-spacing:-.018em;
  font-variation-settings:"SOFT" 10,"WONK" 0}
.vmv__c p{margin-top:9px;font-size:14.2px;color:var(--body);line-height:1.62}
.vmv__img{grid-column:span 3;position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:21/6;box-shadow:var(--sh-2)}
.vmv__img img{width:100%;height:100%;object-fit:cover}
.vmv__img figcaption{position:absolute;left:clamp(20px,3vw,34px);bottom:clamp(18px,2.4vw,28px);
  padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.93);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:var(--sh-2)}
.vmv__img figcaption b{display:block;font-family:var(--ff-display);font-size:22px;font-weight:600;
  letter-spacing:-.02em;font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--ink)}
.vmv__img figcaption span{display:block;font-size:12.4px;color:var(--muted);margin-top:2px}

/* ═══════════════════════════ VIBRANT CANVAS ═══════════════════════════════
   Soft drifting radial clouds. Four large, low-opacity, heavily blurred blobs
   on very long offset loops read as one living gradient rather than four
   moving circles. GPU-cheap: transform only, no filter animation. */
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-3}
.mesh i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.62;
  will-change:transform}
.mesh i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-14vw;background:#FFD9A8;animation:drift1 26s ease-in-out infinite}
.mesh i:nth-child(2){width:40vw;height:40vw;right:-6vw;top:-10vw;background:#FFC8D6;animation:drift2 32s ease-in-out infinite}
.mesh i:nth-child(3){width:44vw;height:44vw;right:8vw;bottom:-18vw;background:#DCC9FA;animation:drift3 29s ease-in-out infinite}
.mesh i:nth-child(4){width:38vw;height:38vw;left:14vw;bottom:-16vw;background:#B9E6E4;animation:drift4 35s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vw,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-5vw,6vw,0) scale(1)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,-5vw,0) scale(1.1)}}
@keyframes drift4{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(8vw,-4vw,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.mesh i{animation:none}}

/* section-level washes, so the page is never a flat sheet twice in a row */
.wash{background:var(--g-dawn)}
.wash--dusk{background:var(--g-dusk)}
.wash--lagoon{background:var(--g-lagoon)}
.wash--sand{background:var(--g-sand)}
.wash--lightblue{background: var(--g-lightblue)}
.wash--mint{background:var(--g-mint)}
.wash,.wash--dusk,.wash--lagoon,.wash--sand,.wash--mint{border-block:1px solid rgba(255,255,255,.9)}

/* ============================================================== 7. HERO === */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(44px,6vw,86px));
  padding-bottom:clamp(52px,6vw,92px);overflow:hidden;isolation:isolate;background:var(--g-dawn)}

/* Photographic hero. The image occupies the right flank and dissolves into
   paper across the middle, so the headline always sits on flat colour and
   keeps its contrast while the travel imagery still carries the section. */
.hero__bg{display:none;position:absolute;top:0;right:0;bottom:0;left:38%;z-index:-2;overflow:hidden;
  border-radius:0 0 0 clamp(28px,5vw,72px)}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.hero__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,247,250,.74) 22%,rgba(243,237,255,.28) 50%,rgba(233,246,248,.05) 78%,transparent 100%)}
/* [KOKONUT] background-paths.tsx — bezier route arcs, drawn by Anime.js.
   Masked away from the left column so airport codes never collide with the
   headline; the arcs still sweep behind it, just without their labels. */
.hero__paths canvas{display:block;width:100%;height:100%}
.hero__paths{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:1;
  -webkit-mask-image:linear-gradient(100deg,transparent 36%,rgba(0,0,0,.45) 48%,#000 62%);
  mask-image:linear-gradient(100deg,transparent 36%,rgba(0,0,0,.45) 48%,#000 62%)}
.hero__paths svg{display:block;width:100%;height:100%}

/* Traffic is CSS stroke-dashoffset on duplicate lane paths — animated by the
   browser with no JS per frame. pathLength="1000" normalises every lane so one
   keyframe drives all twenty regardless of real length. */

/* ~4,800 land cells as ONE path of zero-length subpaths; round caps make them
   dots. One element, one paint. */
.land{fill:none;stroke:rgba(20,23,29,.17);stroke-width:3.4;stroke-linecap:round}
.lane{fill:none;stroke:rgba(20,23,29,.15);stroke-width:1.4}
.lane--hot{stroke:rgba(232,177,12,.5);stroke-width:2.4}
.comet{fill:none;stroke:rgba(47,125,123,.85);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:16 1000;animation-name:comet;animation-timing-function:linear;
  animation-iteration-count:infinite}
.comet--hot{stroke:rgba(232,177,12,1);stroke-width:3.8}
@keyframes comet{from{stroke-dashoffset:0}to{stroke-dashoffset:-1016}}
.city{fill:rgba(232,177,12,.95)}
.halo{fill:none;stroke:rgba(232,177,12,.28);stroke-width:1.4}
.pulse{fill:none;stroke:rgba(47,125,123,.75);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation-name:arrive;animation-timing-function:linear;animation-iteration-count:infinite}
.pulse--hot{stroke:rgba(232,177,12,.85)}
@keyframes arrive{
  0%,86%{opacity:0;transform:scale(.35)}
  91%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(2.3)}
}

.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,392px);gap:clamp(34px,5vw,76px);align-items:start}
.hero__title{margin-bottom:22px;max-width:19ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__meta{display:flex;flex-wrap:wrap;gap:0;margin-top:38px;border-top:1px solid var(--rule)}
.hero__meta li{flex:1 1 auto;min-width:132px;padding:16px 20px 0 0}
.hero__meta b{display:block;font-family:var(--ff-display);font-size:clamp(21px,2.1vw,27px);font-weight:600;
  font-variation-settings:"SOFT" 10,"WONK" 0;letter-spacing:-.02em;color:var(--ink)}
.hero__meta span{display:block;font-size:12.6px;color:var(--muted);margin-top:2px}

/* login card — white, real shadow, no glass */
/* Frosted so the route map reads through the card — the one place on this page
   where translucency earns itself, because there is now something behind it
   worth seeing. Opaque white fallback first, so browsers without
   backdrop-filter still get a legible card rather than a transparent one. */
.login{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-xl);
  padding:24px;box-shadow:var(--sh-3);position:relative}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .login{
    background:rgba(255,255,255,.6);
    /*-webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);*/
    border-color:rgba(255,255,255,.85);
    box-shadow:0 4px 10px rgba(20,23,29,.05), 0 30px 64px -20px rgba(20,23,29,.22),
               inset 0 1px 0 rgba(255,255,255,.6);
  }
  /* inputs need to stay solid or the placeholder text muddies against the map */
  .login .f__box{background:rgba(255,255,255,.9)}
}
.login__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.login__top h2,.login__top .login__title{font-family:var(--ff-display);font-size:19px;font-weight:600;letter-spacing:-.02em;font-variation-settings:"SOFT" 10,"WONK" 0}
.login__seg{display:flex;background:var(--paper-2);border-radius:999px;padding:3px;position:relative;margin-bottom:18px}
.login__seg button{flex:1;position:relative;z-index:1;padding:9px 12px;border-radius:999px;
  font-size:13.4px;font-weight:600;color:var(--muted);transition:color .3s}
.login__seg button.on{color:var(--ink)}
.login__seg .pill{position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:999px;
  background:var(--white);box-shadow:var(--sh-1);transition:transform .45s var(--e-spring),width .45s var(--e-spring)}
.login form{display:none}
.login form.on{display:block}
.login__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px}
.login__note{margin-top:13px;text-align:center;font-size:12.4px;color:var(--muted)}
.login__note a{color:var(--amber);font-weight:600}
.login__note a:hover{text-decoration:underline}
.login.nudge{animation:nudge .8s var(--e-spring)}
@keyframes nudge{0%,100%{box-shadow:var(--sh-3)}45%{box-shadow:0 0 0 4px rgba(232,177,12,.3),var(--sh-3)}}

/* sign-in */
.login__forgot{color:var(--amber);font-weight:600}
.login__forgot:hover{text-decoration:underline}

/* ========================================================= 8. SUPPLIERS === */
.sup{padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--rule);background:var(--white)}
.sup__t{font-size:12.4px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:28px}
.mq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__t{display:flex;width:max-content}
.mq__t.run{animation:mq var(--dur,44s) linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq__r{display:flex;align-items:center;gap:clamp(38px,5.5vw,76px);padding-inline:clamp(19px,2.7vw,38px)}
/* dark supplier logos sit naturally on paper — no invert hack needed */
/* Supplier marks stay in full colour — greyscale made the row read as dead
   weight. Slight opacity keeps them from competing with the headline. */
.mq__r img{height:30px;width:auto;max-width:150px;object-fit:contain;flex:none;
  opacity:.9;transition:opacity .3s,transform .35s var(--e-out)}
.mq__r img:hover{opacity:1;transform:scale(1.06)}

/* ============================================================= 9. STATS === */
.stats{background:var(--white);border-block:1px solid var(--rule);position:relative;overflow:hidden}
.statrow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,42px)}
.stat{padding:22px 20px 22px 0;border-top:3px solid var(--gold);position:relative}
.stat::before{content:'';position:absolute;inset:0 8px auto 0;height:0;background:var(--gold-soft);
  border-radius:0 0 10px 10px;transition:height .45s var(--e-out);z-index:-1}
.stat:hover::before{height:100%}
.stat:nth-child(2){border-top-color:var(--teal)}
.stat:nth-child(2)::before{background:var(--teal-soft)}
.stat:nth-child(3){border-top-color:var(--coral)}
.stat:nth-child(3)::before{background:var(--coral-soft)}
.stat:nth-child(4){border-top-color:var(--sky)}
.stat:nth-child(4)::before{background:var(--sky-soft)}
.stat h3{margin-top:12px;font-size:14.6px;font-weight:600;color:var(--ink)}
.stat p{margin-top:5px;font-size:13.4px;color:var(--muted);line-height:1.55}

/* [BKLIT] chart-stat-flow.tsx — NumberFlow rolling digits, ported to vanilla.
   Each digit is a column that translates; the value rolls rather than counts. */
.flow{display:inline-flex;align-items:baseline;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(33px,3.6vw,47px);line-height:1;letter-spacing:-.032em;
  font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--ink);font-variant-numeric:tabular-nums}
.flow__d{display:inline-block;overflow:hidden;height:1.06em;line-height:1.06}
.flow__d u{display:block;text-decoration:none;transition:transform 1.15s var(--e-spring)}
.flow__d u span{display:block;height:1.06em;line-height:1.06}
.flow__x{display:inline-block}

/* ================================================= 10. SANKEY DIAGRAM ==== */
/* [BKLIT] charts/sankey — flow between nodes. This is the page centrepiece:
   suppliers → HCGL → what your desk sells. Dark band so it reads as a device. */
.flowband{background:var(--ink);color:#E8EBF0;padding-block:clamp(64px,7.5vw,110px);position:relative;overflow:hidden}
.flowband .d2,.flowband .d3{color:var(--white)}
.flowband .d2 i{color:var(--gold)}
.flowband .idx{color:#E8D48A}
.flowband .idx b{color:var(--gold)}
.flowband .idx i{background:var(--gold)}
.flowband .lede{color:rgba(232,235,240,.72)}
.sankey{margin-top:clamp(30px,4vw,52px);position:relative}
.sankey svg{width:100%;height:auto;overflow:visible}
.sankey .lnk{stroke:none;transition:opacity .3s}
.sankey .nlabel{font-family:var(--ff);font-size:12.6px;font-weight:500;fill:rgba(232,235,240,.9)}
.sankey .nlabel--mid{font-size:11.4px;font-weight:600;fill:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.sankey .nval{font-family:var(--ff-mono);font-size:10.4px;fill:rgba(232,235,240,.42)}
.sankey.dim .lnk{opacity:.14}
.sankey.dim .lnk.lit{opacity:1}
.sankey__legend{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.sankey__legend li{display:flex;align-items:center;gap:9px;font-size:12.8px;color:rgba(232,235,240,.7)}
.sankey__legend i{width:22px;height:3px;border-radius:2px;flex:none}

/* ========================================================== 11. SERVICES == */
/* [KOKONUT] smooth-tab.tsx — animated tab rail + waveform behind the panel */

.tabs button{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  border:1px solid var(--rule-2);background:var(--white);
  font-size:14.2px;font-weight:600;color:var(--body);
  transition:color .3s,background .3s,border-color .3s,box-shadow .3s}
.tabs button .ic{color:var(--faint);transition:color .3s}
.tabs button:hover{border-color:var(--ink)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:var(--sh-2)}
.tabs button:nth-child(2).on{background:var(--teal);border-color:var(--teal)}
.tabs button:nth-child(3).on{background:var(--coral);border-color:var(--coral)}
.tabs button:nth-child(4).on{background:var(--sky);border-color:var(--sky)}
.tabs button:nth-child(n+2).on .ic{color:#fff}
.tabs button.on .ic{color:var(--gold)}

/* All four products are open at once — alternating rows so the eye zig-zags
   down the section instead of reading four identical blocks. */
.panels{display:grid;gap:clamp(46px,5.5vw,92px)}
.panel{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);
  gap:clamp(28px,4vw,60px);align-items:center}
.panel > *{min-width:0}
.panel:nth-child(even) > .panel__copy{order:2}
.panel:nth-child(even){grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr)}
.panel + .panel{padding-top:clamp(46px,5.5vw,92px);border-top:1px solid var(--rule)}
.panel__copy h3{margin-bottom:14px}

/* row label: number, icon, product name */
.plabel{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-size:11.6px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plabel .ic{color:var(--accent,var(--amber))}
.plabel__n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--accent-soft,var(--gold-soft));color:var(--accent-ink,var(--amber));
  font-family:var(--ff-mono);font-size:11px;letter-spacing:0}
.panel:nth-child(1){--accent:var(--gold);--accent-soft:var(--gold-soft);--accent-ink:var(--amber)}
.panel:nth-child(2){--accent:var(--teal);--accent-soft:var(--teal-soft);--accent-ink:var(--teal-ink)}
.panel:nth-child(3){--accent:var(--coral);--accent-soft:var(--coral-soft);--accent-ink:var(--coral-ink)}
.panel:nth-child(4){--accent:var(--sky);--accent-soft:var(--sky-soft);--accent-ink:var(--sky-ink)}
.panel .alink{color:var(--accent-ink,var(--amber))}
.panel__wave{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;opacity:.5}
.panel__wave path{fill:none;stroke:var(--rule-2);stroke-width:1}

/* real artefact: multi-supplier rate comparison (Stripe "show the product") */
.rates{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.rates__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.rates__h strong{font-size:13.6px;font-weight:600}
.rates__h span{font-family:var(--ff-mono);font-size:11px;color:var(--muted)}
.rates table{width:100%;border-collapse:collapse}
.rates th{text-align:left;font-size:10.8px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:11px 18px;border-bottom:1px solid var(--rule)}
.rates td{padding:13px 18px;border-bottom:1px solid var(--paper-3);font-size:14px;color:var(--body);vertical-align:middle}
.rates tr:last-child td{border-bottom:0}
.rates tbody tr{transition:background .25s}
.rates tbody tr:hover{background:var(--paper)}
.rates tbody tr.best{background:var(--gold-soft)}
.rates tbody tr.best td{color:var(--ink)}
.rates .sup-n{font-weight:600;color:var(--ink)}
.rates .price{font-family:var(--ff-mono);font-size:14.6px;font-weight:600;color:var(--ink);white-space:nowrap}
.rates .pill{display:inline-block;padding:3px 8px;border-radius:5px;font-size:10.8px;font-weight:600;background:var(--slate-soft);color:var(--slate)}
.rates .pill--f{background:#E4F2E8;color:#1F6B3A}
.rates__f{padding:12px 18px;background:var(--paper-2);border-top:1px solid var(--rule);font-size:12.2px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* Gated net rates. Masking the figure is honest (rates really are behind the
   login) and it turns the artefact into a reason to sign in. */
.mask{display:inline-block;font-family:var(--ff-mono);font-size:15px;letter-spacing:.14em;
  color:var(--faint);background:var(--paper-3);border-radius:6px;padding:3px 10px;
  vertical-align:middle}
.mask--lg{font-size:18px;padding:5px 13px}
.rates tbody tr.best .mask{background:#F6E9BE;color:var(--amber)}

.artcard{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.artcard__img{aspect-ratio:16/9;overflow:hidden}
.artcard__img img{width:100%;height:100%;object-fit:cover}
.artcard__b{padding:20px}
.artcard__b h4{font-size:16px;font-weight:600;letter-spacing:-.01em}
.artcard__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.artcard__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-3)}
.artcard__row .price{font-family:var(--ff-mono);font-size:17px;font-weight:600;color:var(--ink)}
.artcard__row small{display:block;font-size:11.4px;color:var(--muted);font-family:var(--ff)}

/* ============================================================ 12. WHY ===== */
/* [KOKONUT] spotlight-cards.tsx — cursor-tracked radial highlight */
/* Cards rotate through the accent set and carry a large ghost numeral, so six
   of them in a row no longer read as one repeated white rectangle. */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sp{position:relative;padding:clamp(26px,2.8vw,36px);border-radius:var(--r-lg);
  border:1px solid var(--rule);background:var(--white);overflow:hidden;isolation:isolate;
  transition:transform .4s var(--e-out),box-shadow .4s,border-color .4s}
.sp:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.sp::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--tint-hot),transparent 64%)}
.sp:hover::before{opacity:1}
/* ghost numeral, bled off the corner */
.sp::after{content:attr(data-n);position:absolute;right:-6px;bottom:-30px;z-index:-1;
  font-family:var(--ff-display);font-weight:600;font-size:132px;line-height:1;
  font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--tint-num);pointer-events:none}
.sp__n{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;background:var(--tint-chip);
  font-family:var(--ff-mono);font-size:11px;font-weight:600;color:var(--tint-ink)}
.sp h3{margin-top:18px;font-size:16.8px;font-weight:600;letter-spacing:-.014em}
.sp p{margin-top:9px;font-size:14.2px;color:var(--body);line-height:1.6}

.sp:nth-child(6n+1){--tint-chip:var(--gold-soft);--tint-ink:var(--amber);--tint-num:rgba(232,177,12,.14);--tint-hot:rgba(232,177,12,.15);border-color:#EFE3BE}
.sp:nth-child(6n+2){--tint-chip:var(--teal-soft);--tint-ink:var(--teal-ink);--tint-num:rgba(47,125,123,.12);--tint-hot:rgba(47,125,123,.12);border-color:#D3E7E6}
.sp:nth-child(6n+3){--tint-chip:var(--coral-soft);--tint-ink:var(--coral-ink);--tint-num:rgba(199,91,57,.12);--tint-hot:rgba(199,91,57,.12);border-color:#F2DCD3}
.sp:nth-child(6n+4){--tint-chip:var(--sky-soft);--tint-ink:var(--sky-ink);--tint-num:rgba(46,111,183,.12);--tint-hot:rgba(46,111,183,.12);border-color:#D7E4F4}
.sp:nth-child(6n+5){--tint-chip:var(--olive-soft);--tint-ink:var(--olive-ink);--tint-num:rgba(110,122,52,.13);--tint-hot:rgba(110,122,52,.13);border-color:#E3E8CF}
.sp:nth-child(6n+6){--tint-chip:#EDE9F6;--tint-ink:#5B4890;--tint-num:rgba(91,72,144,.12);--tint-hot:rgba(91,72,144,.12);border-color:#DFD8EF}

/* ======================================================= 13. SEGMENTS ==== */
/* editorial definition list, not cards */
.seg{border-top:1px solid var(--ink)}
.seg > li{border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:64px 44px minmax(0,4fr) minmax(0,6fr);gap:clamp(12px,2vw,28px);
  padding:18px 0;align-items:center;transition:background .3s,padding-left .35s var(--e-out)}
.seg__t{width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--paper-3);flex:none}
.seg__t img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-spring)}
.seg > li:hover .seg__t img{transform:scale(1.09)}
.seg > li:hover{background:var(--white);padding-left:12px}
.seg b{font-family:var(--ff-mono);font-size:11.5px;font-weight:600;color:var(--amber)}
.seg h3{font-family:var(--ff-display);font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.018em;font-variation-settings:"SOFT" 10,"WONK" 0}
.seg p{font-size:14.4px;color:var(--body)}

/* ==================================================== 14. DESTINATIONS === */
.dslide{overflow:hidden}
.dtrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));padding-bottom:22px;cursor:grab}
.dtrack::-webkit-scrollbar{display:none}
.dtrack.grab{cursor:grabbing;scroll-snap-type:none}
.dc{position:relative;flex:none;width:clamp(244px,23vw,312px);aspect-ratio:3/4;border-radius:var(--r-lg);
  overflow:hidden;scroll-snap-align:start;background:var(--paper-3);box-shadow:var(--sh-2)}
.dc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-spring),filter .5s;filter:saturate(1.06)}
.dc:hover img{transform:scale(1.06)}
.dc::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(14,17,22,.88) 0%,rgba(14,17,22,.34) 30%,rgba(14,17,22,.02) 58%,transparent 72%)}
.dc__b{position:absolute;inset:auto 0 0;padding:20px;z-index:2;color:#fff}
.dc__k{font-family:var(--ff-mono);font-size:10.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.dc__b h3{font-family:var(--ff-display);font-size:23px;font-weight:600;letter-spacing:-.024em;font-variation-settings:"SOFT" 10,"WONK" 1}
.dc__b p{font-size:12.6px;color:rgba(255,255,255,.78);margin-top:6px}
.dbar{height:2px;background:var(--rule);border-radius:2px;overflow:hidden;margin-top:4px}
.dbar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transition:transform .25s var(--e-out)}

/* ======================================================== 15. COVERAGE === */
/* [BKLIT] ring-chart.tsx — animated arcs */
.cov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
.ring{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;box-shadow:var(--sh-1);
  transition:box-shadow .35s,transform .35s var(--e-out)}
.ring:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.ring svg{width:76px;height:76px;flex:none;transform:rotate(-90deg)}
.ring .trk{fill:none;stroke:var(--paper-3);stroke-width:8}
.ring .arc{fill:none;stroke:var(--gold);stroke-width:8;stroke-linecap:round}
.ring:nth-child(6n+2) .arc{stroke:var(--teal)}
.ring:nth-child(6n+3) .arc{stroke:var(--coral)}
.ring:nth-child(6n+4) .arc{stroke:var(--sky)}
.ring:nth-child(6n+5) .arc{stroke:var(--olive)}
.ring:nth-child(6n) .arc{stroke:#5B4890}
.ring h3{font-size:15.4px;font-weight:600}
.ring b{display:block;font-family:var(--ff-mono);font-size:12.4px;color:var(--muted);font-weight:500;margin-top:4px}
.ring p{font-size:12.8px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ========================================================== 16. GROUND === */
.wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;
  padding-inline:var(--gut);max-width:1560px;margin-inline:auto}
.wall figure{position:relative;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--paper-3)}
.wall figure:nth-child(4n+1){aspect-ratio:4/3}
.wall img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-spring)}
.wall figure:hover img{transform:scale(1.06)}
.wall figcaption{position:absolute;inset:auto 0 0;padding:11px 13px;font-size:11.4px;font-weight:500;color:#fff;
  background:linear-gradient(to top,rgba(14,17,22,.88),transparent);
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--e-out)}
.wall figure:hover figcaption{opacity:1;transform:none}

/* ========================================================= 17. STORIES === */
.vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.vid{cursor:pointer}
.vid__m{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;margin-bottom:14px;background:var(--paper-3);box-shadow:var(--sh-1)}
.vid__m img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-spring)}
.vid:hover .vid__m img{transform:scale(1.05)}
.vid__p{position:absolute;left:50%;top:50%;translate:-50% -50%;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--white);color:var(--ink);box-shadow:var(--sh-2);
  transition:transform .4s cubic-bezier(.34,1.5,.64,1),background .3s,color .3s}
.vid__p .ic{margin-left:2px}
.vid:hover .vid__p{transform:translate(-50%,-50%) scale(1.09);background:var(--gold)}
.vid h3{font-size:15.4px;font-weight:600;letter-spacing:-.012em;line-height:1.34}
.vid p{font-size:12.4px;color:var(--muted);margin-top:5px}

/* ========================================================= 18. REVIEWS === */
.score{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,52px);align-items:center;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);box-shadow:var(--sh-1);margin-bottom:clamp(34px,4vw,54px)}
.score__l{text-align:center;padding-right:clamp(20px,3vw,42px);border-right:1px solid var(--rule)}
.score__l b{display:block;font-family:var(--ff-display);font-size:clamp(36px,4vw,52px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variation-settings:"SOFT" 0,"WONK" 0}
.score__l span{display:block;font-size:11.8px;color:var(--muted);margin-top:7px}
.stars{display:flex;gap:3px;color:var(--gold);justify-content:center;margin-top:9px}
.score__r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.score__r b{display:block;font-family:var(--ff-display);font-size:clamp(19px,1.9vw,24px);font-weight:600;letter-spacing:-.02em;font-variation-settings:"SOFT" 0,"WONK" 0}
.score__r span{display:block;font-size:12.4px;color:var(--muted);margin-top:3px;line-height:1.45}

.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.q{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.q blockquote{font-family:var(--ff-display);font-size:16.6px;font-weight:400;line-height:1.5;letter-spacing:-.012em;
  font-variation-settings:"SOFT" 30,"WONK" 0;color:var(--ink-2);flex:1}
.q figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--paper-3)}
.q figcaption b{display:block;font-family:var(--ff);font-size:13.8px;font-weight:600}
.q figcaption span{display:block;font-size:12.4px;color:var(--muted);margin-top:2px}
.note{margin-top:22px;font-size:11.8px;color:var(--faint);font-style:italic}
.note--wall{margin-top:18px;text-align:center}

/* Evidence block with no rating column — metrics run the full width. */
.score--solo{grid-template-columns:minmax(0,1fr)}
.score--solo .score__r{grid-template-columns:repeat(4,minmax(0,1fr))}

/* A partner film that does not exist yet says so, rather than carrying an
   invented quote as its headline. */
.vid--soon{cursor:default}
.vid--soon .vid__m img{filter:saturate(.72) brightness(.94)}
.vid--soon .vid__p{background:rgba(255,255,255,.9);color:var(--muted)}
.vid--soon:hover .vid__p{transform:translate(-50%,-50%) scale(1);background:rgba(255,255,255,.96)}
.vid__soon{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:999px;
  background:rgba(20,23,29,.72);color:#fff;font-size:10.6px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(4px)}

/* ========================================================== 19. OFFICES == */
.offs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.off{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(22px,2.5vw,30px);
  box-shadow:var(--sh-1);transition:box-shadow .35s,transform .35s var(--e-out)}
.off:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.off h3{display:flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--ff-display);font-size:18px;font-weight:600;letter-spacing:-.02em;font-variation-settings:"SOFT" 10,"WONK" 0}
.off h3 .ic{color:var(--amber)}
.off address{margin-top:11px;font-style:normal;font-size:14px;color:var(--body);line-height:1.68}
.off .alink{margin-top:15px}
.off--facts{display:flex;flex-direction:column;justify-content:space-between;gap:20px;background:var(--paper-2)}

/* ============================================================ 20. STEPS == */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.steps li{position:relative;background:var(--paper);padding:clamp(24px,2.6vw,36px) clamp(18px,2vw,28px);transition:background .35s}
.steps li:hover{background:var(--white)}
.steps li::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--gold);transition:width .55s var(--e-spring)}
.steps li:hover::before{width:100%}
.steps b{font-family:var(--ff-mono);font-size:11.5px;font-weight:600;color:var(--amber);letter-spacing:.1em;display:block;margin-bottom:16px}
.steps h3{font-size:16.4px;font-weight:600;letter-spacing:-.014em}
.steps p{margin-top:8px;font-size:13.8px;color:var(--body);line-height:1.6}

/* ========================================================= 21. PLATFORM == */
.tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-bottom:clamp(52px,6vw,86px)}
.tech li{background:var(--white);padding:clamp(22px,2.4vw,30px)}
.tech li > .ic{color:var(--amber);width:22px;height:22px}
.tech h3{margin-top:15px;font-size:15.4px;font-weight:600}
.tech p{margin-top:7px;font-size:13.6px;color:var(--body);line-height:1.58}

.api{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,4.5vw,70px);align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips li{padding:7px 13px;border-radius:7px;border:1px solid var(--rule-2);background:var(--white);font-size:12.4px;font-weight:500;color:var(--body)}
.code{border-radius:var(--r-lg);overflow:hidden;background:var(--ink);box-shadow:var(--sh-3)}
.code__b{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.code__b i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.code__b i:nth-child(2){background:var(--gold)}
.code__b span{margin-left:9px;font-family:var(--ff-mono);font-size:11.2px;color:rgba(232,235,240,.5)}
.code pre{margin:0;padding:20px;overflow-x:auto;font-family:var(--ff-mono);font-size:12.4px;line-height:1.85;color:#B9C3D2}
.code .k{color:var(--gold)}
.code .s{color:#8BD5A8}
.code .c{color:#E0A94A;font-style:italic}
.code__f{padding:12px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:12.2px;color:rgba(232,235,240,.55);display:flex;align-items:center;gap:8px}
.code__f .ic{color:var(--gold)}

/* ============================================================= 22. GSA === */
.gsa{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr);gap:clamp(26px,4vw,58px);align-items:center;
  padding:clamp(28px,3.6vw,52px);border-radius:var(--r-xl);
  background:var(--white);border:1px solid var(--rule);box-shadow:var(--sh-2);position:relative;overflow:hidden}
.gsa::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--gold)}
.gsa > div:first-child > p{margin-top:14px;font-size:15.4px;color:var(--body);max-width:56ch}
.gsa__cta{padding:clamp(20px,2.4vw,26px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--rule);display:grid;gap:11px}
.gsa__cta p{font-size:13.6px;color:var(--body)}

/* ============================================================= 23. FAQ === */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,78px);align-items:start}
.faq__h{position:sticky;top:calc(var(--header-h) + 36px)}
.faq__h p{margin-top:16px;font-size:14.4px;color:var(--body);max-width:38ch}
.faq__h a{color:var(--amber);font-weight:600}
.acc > div{border-bottom:1px solid var(--rule)}
.acc > div:first-child{border-top:1px solid var(--rule)}
.acc h3{margin:0;font:inherit}
.acc button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;text-align:left;
  font-family:var(--ff-display);font-size:clamp(16px,1.35vw,18.6px);font-weight:600;letter-spacing:-.016em;
  font-variation-settings:"SOFT" 10,"WONK" 0;transition:color .28s}
.acc button:hover{color:var(--amber)}
.acc button .ic{flex:none;color:var(--amber);transition:transform .45s var(--e-spring)}
.acc .open button{color:var(--amber)}
.acc .open button .ic{transform:rotate(135deg)}
.acc__a{display:none;padding:0 2px 24px}
.acc__a p{font-size:14.8px;color:var(--body);line-height:1.72;max-width:64ch}

/* ============================================================ 24. CTA ==== */
.cta{padding-block:clamp(56px,6.5vw,100px)}
.ctabox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(30px,4vw,60px);align-items:start;
  padding:clamp(28px,3.6vw,54px);border-radius:var(--r-xl);background:var(--white);border:1px solid var(--rule);box-shadow:var(--sh-3)}
.ctabox > *{min-width:0}
.ctabox__c > p{margin-top:15px;font-size:15.4px;color:var(--body);max-width:46ch}
.ctabox__pts{margin-top:24px;display:grid;gap:10px}
.ctabox__pts li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--body)}
.ctabox__pts .ic{color:var(--amber)}
.direct{display:grid;gap:9px;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}
.direct a{display:inline-flex;align-items:center;gap:9px;font-size:13.8px;color:var(--body);transition:color .25s;word-break:break-word}
.direct a:hover{color:var(--amber)}
.direct .ic{color:var(--amber);flex:none}
.ctaform{min-width:0;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--rule)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px}
.msg{margin-top:11px;font-size:13px;min-height:19px;text-align:center}
.msg[data-s="ok"]{color:#1F6B3A}
.msg[data-s="err"]{color:#C0392B}

/* ========================================================== 25. FOOTER === */
.ft{background:var(--ink);color:rgba(232,235,240,.72);padding-block:clamp(46px,5vw,70px) 26px}
.ft .wm__r{color:var(--white)}
.ft .wm__r>img{display: block;width:auto; height: 44px;}
.ft .wm__s{color:rgba(255,255,255,.45)}
.ft__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:clamp(30px,4.5vw,66px);padding-bottom:clamp(34px,4vw,50px)}
.ft__top p{margin-top:18px;font-size:13.8px;line-height:1.7;max-width:40ch}
.ft__soc{display:flex;gap:9px;margin-top:20px}
.ft__soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;
  transition:background .3s,color .3s,border-color .3s,transform .3s cubic-bezier(.34,1.5,.64,1)}
.ft__soc a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-3px)}
.ft__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ft__cols h3{font-size:12.4px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:15px}
.ft__cols li{margin-bottom:9px}
.ft__cols a{font-size:13.6px;transition:color .26s,padding-left .26s}
.ft__cols a:hover{color:var(--gold);padding-left:3px}
.ft__off{display:grid;grid-template-columns:1fr 1fr;gap:13px 30px;padding:20px 0;border-top:1px solid rgba(255,255,255,.11);font-size:12.8px;line-height:1.6}
.ft__off b{display:block;font-family:var(--ff-mono);font-size:10.6px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.ft__b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;padding-top:20px;border-top:1px solid rgba(255,255,255,.11);font-size:12.4px;color:rgba(232,235,240,.5)}

.top{position:fixed;right:20px;bottom:20px;z-index:700;width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--white);display:grid;place-items:center;box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,visibility .35s,transform .35s var(--e-spring)}
.top.on{opacity:1;visibility:visible;transform:none}

/* video modal */
.vm{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:var(--gut);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.vm.on{opacity:1;visibility:visible}
.vm__bg{position:absolute;inset:0;background:rgba(14,17,22,.8);backdrop-filter:blur(6px)}
.vm__box{position:relative;width:min(940px,100%);aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);box-shadow:var(--sh-3);transform:scale(.96);transition:transform .45s var(--e-spring)}
.vm.on .vm__box{transform:none}
.vm__slot,.vm__slot iframe,.vm__slot video{width:100%;height:100%;border:0;display:block}
.vm__x{position:absolute;top:9px;right:11px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;display:grid;place-items:center;transition:background .3s,color .3s}
.vm__x:hover{background:var(--gold);color:var(--ink)}
.vm__soon{height:100%;display:grid;place-content:center;text-align:center;gap:7px;padding:24px;color:#E8EBF0}
.vm__soon b{font-family:var(--ff-display);font-size:19px;font-weight:600}
.vm__soon span{font-size:13px;color:rgba(232,235,240,.6)}
.vm__soon code{font-family:var(--ff-mono);color:var(--gold);font-size:12.4px}

/* ============================================================ 26. MEDIA === */
@media (max-width:1180px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
  .statrow,.score__r{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why,.tech,.cov,.quotes,.offs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .off--facts{grid-column:span 2}
}
@media (max-width:1090px){
  .mnav{display:none}
  .burger{display:block}
  .faq{grid-template-columns:1fr}
  .faq__h{position:static}
  .vmv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vmv__img{grid-column:span 2;aspect-ratio:16/7}
  .ft__top{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--header-h:66px}
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__title{max-width:none}
  .login{max-width:520px}
  .head,.api,.gsa,.ctabox,.score{grid-template-columns:1fr}
  .panel,.panel:nth-child(even){grid-template-columns:1fr}
  .panel:nth-child(even) > .panel__copy{order:0}
  .head{align-items:start;gap:18px}
  .head__aside{padding-bottom:0}
  .score__l{padding-right:0;padding-bottom:20px;border-right:0;border-bottom:1px solid var(--rule)}
  .seg > li{grid-template-columns:52px 34px minmax(0,1fr);row-gap:6px;align-items:center}
  .seg__t{width:52px;height:52px}
  .seg h3{grid-column:3}
  .seg p{grid-column:3}
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft__cols{grid-template-columns:1fr 1fr}
  .ft__off{grid-template-columns:1fr}
}
@media (max-width:640px){
  .statrow,.why,.tech,.cov,.quotes,.offs,.steps,.score__r,.score--solo .score__r{grid-template-columns:1fr}
  .vmv{grid-template-columns:1fr}
  .vmv__img{grid-column:span 1;aspect-ratio:4/3}
  .off--facts{grid-column:span 1}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .vids{grid-template-columns:1fr 1fr;gap:12px}
  .two{grid-template-columns:1fr}
  .dc{width:min(74vw,290px)}
  .hero__meta li{min-width:50%;padding-right:14px}
  .ft__b{flex-direction:column}
  .rates td,.rates th{padding-inline:13px}
  .rates .hide-s{display:none}
  /* Partner lives in the sheet; keeping it here pins the burger to the edge. */
  .hdr__cta .btn--ink{display:none}
}
@media (max-width:520px){
  /* only at the very narrow end does Agent login yield to the burger */
  .hdr__cta .btn--plain{display:none}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}
@media (max-width:420px){
  .ft__cols{grid-template-columns:1fr}
  .wm__r{font-size:22px}
}


/* Supplier wall, now sitting under the stat numbers rather than in its own
   band — the numbers prompt "from whom?" and this answers it in place. Also
   lifts the logos, which are the fastest credibility signal on the page, well
   above where they used to sit. */
.supply{margin-top:clamp(38px,4.5vw,64px);padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--rule)}
.supply__t{text-align:center;font-size:12.4px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:26px}
.supply .mq{margin-inline:calc(var(--gut) * -1)}


/* ==================================================== 30. MULTI-PAGE ===== */
/* Everything below exists only because the single page became twelve pages:
   interior-page heroes, breadcrumbs, legal prose, and the closing CTA band. */

/* --- interior page hero -------------------------------------------------- */
/* Shorter than the home hero and single-column: an interior page should get
   the reader to the content, not re-perform the pitch. The mesh is dialled
   back so twelve pages in a row never feel like twelve competing openings. */
.phero{position:relative;overflow:hidden;isolation:isolate;background:var(--g-dawn);
  padding-top:calc(var(--header-h) + clamp(26px,3.2vw,44px));
  padding-bottom:clamp(34px,4vw,56px)}
.phero .mesh i{opacity:.34;filter:blur(84px)}
.phero .container{max-width:calc(var(--wrap) * .8)}
.phero .d1{max-width:17ch}
.phero .lede{max-width:60ch;margin-top:18px}
.phero .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,34px)}
@media (max-width:720px){.phero .d1{max-width:none}}

/* --- breadcrumbs --------------------------------------------------------- */
/* Mirrors the BreadcrumbList JSON-LD on every interior page. Sits on the
   hero wash rather than on paper, so it reads as part of the masthead. */
.crumbs{margin-bottom:clamp(16px,1.8vw,24px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:12.4px;letter-spacing:.01em;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:9px}
.crumbs li + li::before{content:'';width:4px;height:4px;border-radius:50%;
  background:var(--rule-2);flex:none}
.crumbs a{color:var(--muted);transition:color .3s}
.crumbs a:hover{color:var(--amber)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* --- long-form prose (privacy, terms) ----------------------------------- */
/* A measure of ~68ch and generous leading: these pages are read, not scanned.
   Left-aligned to the grid, not centred, so they match the rest of the site. */
.prose{max-width:70ch}
.prose h2{margin-top:clamp(40px,4vw,60px);font-family:var(--ff-display);
  font-size:clamp(21px,2.1vw,27px);font-weight:600;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40,"WONK" 0}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:28px;font-size:16.4px;font-weight:600;letter-spacing:-.012em}
.prose p,.prose li{font-size:15.2px;line-height:1.78;color:var(--body)}
.prose p{margin-top:14px}
.prose ul,.prose ol{margin-top:14px;padding-left:22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:8px;padding-left:4px}
.prose li::marker{color:var(--amber)}
.prose a{color:var(--amber);font-weight:500;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.prose strong{color:var(--ink);font-weight:600}
.prose__meta{margin-bottom:clamp(30px,3.4vw,44px);padding-bottom:20px;
  border-bottom:1px solid var(--rule);font-size:13.2px;color:var(--muted)}
.prose__meta b{color:var(--ink);font-weight:600}

/* --- closing CTA band ---------------------------------------------------- */
.ctaband{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,3.4vw,54px);align-items:center}
.ctaband .d2{max-width:22ch}
.ctaband > div > p{margin-top:12px;font-size:14.8px;color:var(--body);max-width:48ch}
.ctaband__btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:880px){
  .ctaband{grid-template-columns:minmax(0,1fr)}
  .ctaband .d2{max-width:none}
}

/* --- vertical variant of the numbered steps ----------------------------- */
/* The four-across grid needs the full page width; inside the narrow FAQ
   column it has to stack instead. Same marks, different axis. */
.steps--stack{grid-template-columns:minmax(0,1fr);gap:1px}
.steps--stack li{padding:clamp(18px,2vw,24px) 0 clamp(18px,2vw,24px) 0;
  background:transparent;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:18px;align-items:baseline}
.steps--stack li:hover{background:transparent}
.steps--stack li::before{display:none}
.steps--stack b{margin-bottom:0}
.steps--stack h3{grid-column:2}
.steps--stack p{grid-column:2}

/* --- "also available" strip -------------------------------------------- */
/* Secondary products get one line each rather than a card, so they read as
   an appendix to the three core products instead of competing with them. */
.alsogrid{margin-top:clamp(38px,4vw,58px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--rule)}
.alsogrid__label{font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.alsogrid__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.also{display:flex;align-items:flex-start;gap:13px;min-width:0}
.also > .ic{color:var(--amber);margin-top:2px}
.also strong{display:block;font-size:14.6px;font-weight:600;letter-spacing:-.012em}
.also span{display:block;margin-top:3px;font-size:13.2px;color:var(--muted);line-height:1.5}
@media (max-width:900px){.alsogrid__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.alsogrid__row{grid-template-columns:minmax(0,1fr)}}

/* --- the product chip now holds an icon, not a numeral ------------------ */
.sp__n{width:34px;height:34px;border-radius:9px}
.sp__n .ic{width:17px;height:17px}

/* --- Services is the active nav item on the three product pages --------- */
.mnav.open-parent .mnav__b{margin-left:2px;border-radius:9px;
  background:var(--white);color:var(--ink);font-weight:600}
.mnav.open-parent .mnav__b + .drop{margin-left:2px}
.mnav.open-parent .mnav__drop + a{border-radius:9px 0 0 9px}


/* --- line-icon ledger: the "why" list, deliberately NOT a card deck ------ */
/* It sits one screen below the .sp product cards, so it must not read as a
   second deck: no border box, no shadow. The distinguishing marks are an
   OUTLINED icon medallion (the cards use filled tinted squares), a hairline
   row rule with a short accent tick that is visible at rest, and a soft wash
   that only arrives on hover. */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0}
.ledger li{position:relative;isolation:isolate;display:grid;
  grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,1.7vw,22px);
  align-items:start;min-width:0;border-top:1px solid var(--rule);
  padding:clamp(24px,2.6vw,34px) 0 clamp(26px,2.8vw,36px)}

/* The vertical rule between the columns turns two loose lists into one table.
   Because consecutive right-hand rows stack, their left borders join into a
   single continuous line down the middle of the section. */
@media (min-width:821px){
  .ledger li:nth-child(odd){padding-right:clamp(26px,3.2vw,54px)}
  .ledger li:nth-child(even){padding-left:clamp(26px,3.2vw,54px);
    border-left:1px solid var(--rule)}
}

/* accent tick: short at rest so a row never looks empty, full width on hover */
.ledger li::before{content:'';position:absolute;top:-1px;left:0;height:2px;
  width:var(--tickw,26px);background:var(--led);transition:width .55s var(--e-spring)}
.ledger li:hover::before{width:100%}

/* the wash, behind the content */
.ledger li::after{content:'';position:absolute;z-index:-1;
  inset:0;opacity:0;transition:opacity .45s;
  background:linear-gradient(180deg,var(--led-soft),transparent 78%);
  border-radius:0 0 var(--r-md,14px) var(--r-md,14px)}
.ledger li:hover::after{opacity:1}

.ledger__ic{width:46px;height:46px;flex:none;border-radius:50%;display:grid;
  place-items:center;color:var(--led);border:1px solid var(--led-line);
  background:transparent;
  transition:background .42s,border-color .42s,transform .5s var(--e-spring)}
.ledger__ic .ic{width:21px;height:21px}
.ledger li:hover .ledger__ic{background:var(--led-soft);border-color:transparent;
  transform:translateY(-3px)}

.ledger h3{font-size:17.6px;font-weight:600;letter-spacing:-.017em;line-height:1.3;
  padding-top:11px}
.ledger p{margin-top:9px;font-size:14.5px;line-height:1.65;color:var(--body);max-width:44ch}

.ledger li:nth-child(6n+1){--led:var(--amber);--led-soft:var(--gold-soft);--led-line:#EFE3BE}
.ledger li:nth-child(6n+2){--led:var(--teal-ink);--led-soft:var(--teal-soft);--led-line:#D3E7E6}
.ledger li:nth-child(6n+3){--led:var(--coral-ink);--led-soft:var(--coral-soft);--led-line:#F2DCD3}
.ledger li:nth-child(6n+4){--led:var(--sky-ink);--led-soft:var(--sky-soft);--led-line:#D7E4F4}
.ledger li:nth-child(6n+5){--led:var(--olive-ink);--led-soft:var(--olive-soft);--led-line:#E3E8CF}
.ledger li:nth-child(6n+6){--led:#5B4890;--led-soft:#EDE9F6;--led-line:#DFD8EF}

@media (max-width:820px){
  .ledger{grid-template-columns:minmax(0,1fr)}
  .ledger__ic{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .ledger li::before,.ledger li::after,.ledger__ic{transition:none}
}


/* ==================================================== 31. SCROLL SCENES === */
/* Nodes below are injected by assets/js/scenes.js, never by the markup, so
   every page gets them without a per-page edit. Each is inert until GSAP
   loads, and absent entirely under prefers-reduced-motion. */

/* reading progress, pinned under the header */
.sprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;pointer-events:none}
.sprog i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--coral-ink) 55%,var(--sky-ink))}

/* the rule that draws across the four-step process grid */
.steps{position:relative}
.steps__line{position:absolute;top:-1px;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;background:var(--gold);
  pointer-events:none;z-index:1}

/* Lenis needs the page itself to stop smooth-scrolling, or the two fight.
   scroll-behavior was already removed sitewide; this makes it explicit and
   survives anyone re-adding it. */
html.lenis-on{scroll-behavior:auto!important}
html.lenis-on,html.lenis-on body{height:auto}

/* destination photos drift inside their frame, so the frame must clip */
.dc{overflow:hidden}

/* hairline above each legal-page section heading (injected by scenes.js) */
.prose__rule{display:block;height:1px;width:56px;margin-top:clamp(40px,4vw,60px);
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.prose__rule + h2{margin-top:18px}


/* --- the live search panel: .rates in a "resolving" state ---------------- */
/* Reuses the whole .rates component. The only additions are the two states
   scenes.js drives: neutral while the search resolves, then .is-won once the
   direct-contract row has landed. With no GSAP (or reduced motion) the panel
   simply renders in its finished state, which is why nothing here hides a row. */
.rates--live tbody tr.best{background:transparent}
.rates--live tbody tr.best .mask{background:var(--paper-3);color:var(--faint)}
.rates--live tbody tr.best td{color:var(--body)}
.rates--live.is-won tbody tr.best{background:var(--gold-soft)}
.rates--live.is-won tbody tr.best td{color:var(--ink)}
.rates--live.is-won tbody tr.best .mask{background:#F6E9BE;color:var(--amber)}
.rates--live tbody tr.best,.rates--live tbody tr.best td,
.rates--live tbody tr.best .mask{transition:background .5s var(--e-out),color .5s}

/* the status word in the panel header pulses only while querying */
.rates--live .rates__h span{position:relative;padding-left:14px}
.rates--live .rates__h span::before{content:'';position:absolute;left:0;top:50%;
  width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--amber);
  animation:livedot 1.1s ease-in-out infinite}
.rates--live.is-won .rates__h span::before{background:#1F6B3A;animation:none}
@keyframes livedot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .rates--live .rates__h span::before{animation:none;opacity:1}
}
.rates--live .rates__f span{transition:color .4s}


/* ==================================================== 32. MEGA-MENU ====== */
/* Eight service pages will not fit the old single-column dropdown, so it
   becomes two labelled columns: what you sell, and how you connect it. The
   labels do real work — an agent looking for the API should not have to read
   past five inventory lines to find it. */
.drop--mega{
  width:min(680px,calc(100vw - 40px));
  display:grid;grid-template-columns:1.05fr .95fr;gap:6px;
  left:-14px;padding:14px
}
.drop__col + .drop__col{
  padding-left:14px;border-left:1px solid var(--rule)
}
.drop__h{
  margin:4px 0 8px 12px;font-size:10.6px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)
}
.drop--mega .drop__i{padding:10px 12px}
.drop--mega .drop__ic{width:34px;height:34px;border-radius:10px}
.drop--mega .drop__ic .ic{width:17px;height:17px}
.drop--mega .drop__i strong{font-size:13.4px}
.drop--mega .drop__i small{font-size:11.6px}
.drop__ic--teal{background:var(--teal-soft);color:var(--teal-ink)}

/* One column below the point where two would each be too narrow to read. */
@media (max-width:760px){
  .drop--mega{grid-template-columns:minmax(0,1fr)}
  .drop__col + .drop__col{padding-left:0;border-left:0;
    padding-top:10px;margin-top:6px;border-top:1px solid var(--rule)}
}

/* two-column tick list, for the "included as standard" blocks */
.ticks.two-col{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,52px)
}
.ticks.two-col li{margin-top:11px}
@media (max-width:680px){.ticks.two-col{grid-template-columns:minmax(0,1fr)}}


/* =============================================== 33. HOME: NEW SECTIONS == */

/* six services in a 3x2 grid rather than 3x1 ------------------------------ */
.svc6{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp__go{margin-top:14px}
@media (max-width:1000px){.svc6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc6{grid-template-columns:minmax(0,1fr)}}

/* .api is the shared two-column band; --flip puts the visual on the left */
.api--flip{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media (max-width:900px){
  .api--flip{grid-template-columns:minmax(0,1fr)}
  .api--flip > *:first-child{order:2}
}

/* --- API hub diagram ----------------------------------------------------- */
/* Not decoration: "one integration, six product lines" is a structural claim,
   and a hub with six spokes states it faster than the paragraph beside it. */
.hub{position:relative;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:clamp(24px,3vw,36px);
  text-align:center}
.hub__core{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 22px;border-radius:14px;background:var(--ink);color:#fff;
  box-shadow:0 10px 26px -12px rgba(20,23,29,.5)}
.hub__core .ic{width:24px;height:24px;color:var(--gold)}
.hub__core span{font-family:var(--ff-mono);font-size:11.4px;letter-spacing:.06em}
.hub__ring{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;margin-top:22px;position:relative}
.hub__ring::before{content:'';position:absolute;top:-12px;left:16%;right:16%;
  height:1px;background:var(--rule-2)}
.hub__ring li{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;border:1px solid var(--rule);border-radius:10px;
  background:var(--paper);font-size:12.6px;font-weight:500;color:var(--ink);
  transition:border-color .3s,background .3s}
.hub__ring li:hover{border-color:#EFE3BE;background:var(--gold-soft)}
.hub__ring .ic{color:var(--amber);flex:none}
.hub__note{margin-top:18px;font-family:var(--ff-mono);font-size:11.4px;
  color:var(--muted)}
@media (max-width:520px){.hub__ring{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- white-label browser frame ------------------------------------------- */
/* The URL bar carries the whole argument, so it gets real emphasis. */
.wl{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden}
.wl__bar{display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:var(--paper-2);border-bottom:1px solid var(--rule)}
.wl__dots{display:flex;gap:5px}
.wl__dots i{width:9px;height:9px;border-radius:50%;background:var(--rule-2)}
.wl__url{display:flex;align-items:center;gap:7px;flex:1;padding:6px 11px;
  border-radius:7px;background:var(--white);border:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:11.8px;color:var(--muted)}
.wl__url b{color:var(--ink);font-weight:600}
.wl__url .ic{color:#1F6B3A;width:13px;height:13px}
.wl__body{padding:clamp(18px,2.2vw,26px)}
.wl__brand{display:flex;justify-content:center;margin-bottom:16px}
.wl__brand span{padding:9px 20px;border:1px dashed var(--rule-2);border-radius:8px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--faint)}
.wl__search{display:grid;grid-template-columns:1.3fr 1fr .8fr auto;gap:7px;
  padding:9px;border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.wl__f{padding:9px 11px;border-radius:8px;background:var(--white);
  border:1px solid var(--rule);font-size:11.8px;color:var(--muted)}
.wl__go{display:flex;align-items:center;padding:9px 15px;border-radius:8px;
  background:var(--gold);color:var(--ink);font-size:11.8px;font-weight:600}
.wl__res{margin-top:14px;display:grid;gap:8px}
.wl__res li{display:grid;grid-template-columns:44px 1fr auto;gap:11px;
  align-items:center;padding:9px;border:1px solid var(--rule);border-radius:10px}
.wl__ph{height:34px;border-radius:7px;background:var(--paper-3)}
.wl__meta{display:grid;gap:6px}
.wl__meta i{display:block;height:7px;border-radius:4px;background:var(--paper-3)}
.wl__meta i:first-child{width:62%}
.wl__meta i:last-child{width:38%}
.wl__price{font-family:var(--ff-mono);font-size:11.4px;font-weight:600;color:var(--amber)}
.wl__foot{margin-top:14px;text-align:center;font-size:11.6px;color:var(--faint)}
@media (max-width:520px){
  .wl__search{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wl__go{justify-content:center}
}

/* --- AI itinerary mock --------------------------------------------------- */
.itin{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:clamp(20px,2.4vw,28px)}
.itin__brief{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;
  border-radius:12px;background:var(--gold-soft);border:1px solid #EFE3BE;
  font-size:13.6px;line-height:1.5;color:var(--amber)}
.itin__brief .ic{flex:none;margin-top:2px}
.itin__days{margin-top:16px;display:grid;gap:1px;background:var(--rule)}
.itin__days li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  align-items:baseline;padding:13px 4px;background:var(--white)}
.itin__days b{font-family:var(--ff-mono);font-size:11.4px;font-weight:600;
  color:var(--amber);letter-spacing:.06em}
.itin__days span{font-size:13.6px;color:var(--body)}
.itin__foot{margin-top:16px;display:flex;align-items:center;gap:9px;
  font-size:12.4px;color:var(--muted)}
.itin__foot .pill{display:inline-block;padding:3px 9px;border-radius:5px;
  font-size:10.8px;font-weight:600;background:#E4F2E8;color:#1F6B3A}

/* --- client reviews ------------------------------------------------------ */
/* .rev--empty is the "no real data yet" state. It is styled so the section
   can be reviewed for layout, and marked so nobody mistakes it for live
   content or ships it by accident. Remove the class when real data lands. */
.rev{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,3.4vw,54px);align-items:start}
.rev__score{position:relative;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);
  border:1px solid var(--rule);background:var(--white);text-align:center}
.rev__n{display:block;font-family:var(--ff-display);font-weight:650;
  font-size:clamp(46px,5vw,64px);line-height:1;letter-spacing:-.03em;
  font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--ink)}
.rev__stars{display:flex;justify-content:center;gap:4px;margin-top:12px}
.rev__stars .ic{width:18px;height:18px;color:var(--gold)}
.rev__of{display:block;margin-top:12px;font-size:13px;color:var(--muted)}
.rev__of b{color:var(--ink);font-weight:600}
.rev__src{display:inline-block;margin-top:14px;padding:6px 12px;border-radius:7px;
  border:1px dashed var(--rule-2);font-family:var(--ff-mono);font-size:11px;
  color:var(--faint)}
.rev__cards{display:grid;gap:12px}
.rev__card{position:relative;padding:clamp(20px,2.2vw,26px);border-radius:var(--r-lg);
  border:1px solid var(--rule);background:var(--white)}
.rev__card blockquote{font-size:15px;line-height:1.62;color:var(--body)}
.rev__card figcaption{margin-top:14px;font-size:13px}
.rev__card figcaption b{display:block;color:var(--ink);font-weight:600}
.rev__card figcaption span{color:var(--muted)}

/* the "not real yet" markers */
.rev__wait{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:6px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;background:#FDECEC;color:#A32020;
  border:1px solid #F3D2D2}
.rev:not(.rev--empty) .rev__wait,
.rev:not(.rev--empty) .rev__src{display:none}
/* Gold stars with no score beside them still read as a rating. In the empty
   state they go grey, so the block cannot imply a figure it does not have. */
.rev--empty .rev__stars .ic{color:var(--rule-2)}
.rev--empty .rev__card blockquote,
.rev--empty .rev__card figcaption{opacity:.5}

@media (max-width:820px){.rev{grid-template-columns:minmax(0,1fr)}}


/* ============================================ 34. PRODUCT SECTIONS ====== */
/* Five devices, one per product line. They share only the small head block —
   everything below it is deliberately different, because six sections built
   from one template is what made the page read as machine-made. */

.prod__head{margin-bottom:clamp(30px,3.6vw,52px);max-width:62ch}
.prod__head--split{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,48px);align-items:end;max-width:none}
.prod__fig{margin-top:16px;font-size:14.6px;color:var(--muted)}
.prod__fig b{font-family:var(--ff-mono);font-size:15.4px;color:var(--ink);font-weight:600}
@media (max-width:800px){
  .prod__head--split{grid-template-columns:minmax(0,1fr)}
  .prod__head--split .prod__fig{margin-top:10px}
}
.prod__go{margin-top:clamp(22px,2.6vw,32px)}

/* --- 01 hotels: photograph carrying the rate artefact ------------------- */
.hstack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(22px,3vw,46px);align-items:center}
.hstack__img{position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-3);aspect-ratio:4/5;min-width:0}
.hstack__img img{width:100%;height:100%;object-fit:cover;display:block}
.hstack__img figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:22px 20px 16px;font-size:12.4px;color:#fff;
  background:linear-gradient(transparent,rgba(20,23,29,.72))}
.hstack__panel{min-width:0}
@media (max-width:900px){
  .hstack{grid-template-columns:minmax(0,1fr)}
  .hstack__img{aspect-ratio:16/10}
}

/* --- 02 sightseeing: the image rail ------------------------------------- */
/* Full-bleed and horizontally scrollable, with snap points. The rail breaks
   the container on purpose — it is the only section that touches both edges,
   which is most of why this page no longer looks uniform. */
.erail{margin-top:clamp(8px,1.4vw,18px);overflow-x:auto;overflow-y:hidden;
  /* `proximity`, not `mandatory`. With mandatory the browser snaps on LOAD:
     the first card's snap-align:start pulls it flush to the scrollport, which
     scrolled the rail by exactly the track's inline padding and left the card
     bleeding off the left edge looking like a layout bug. Proximity keeps the
     snap feel while leaving the initial position alone. */
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  /* The track is inset so the first card lines up with the text grid. That
     inset must also be told to the SNAP engine, or the nearest snap point is
     the card's own start edge and the rail scrolls itself by the inset on
     load, leaving the first card bleeding off the left edge. */
  scroll-padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
  padding:6px 0 clamp(18px,2vw,26px);scrollbar-width:thin}
.erail__t{display:flex;gap:clamp(12px,1.6vw,20px);
  padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.ecard{position:relative;flex:0 0 auto;width:clamp(216px,22vw,278px);
  scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-3);box-shadow:var(--sh-1);
  transition:transform .45s var(--e-out),box-shadow .45s}
.ecard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.ecard__k{display:block;padding:14px 15px 16px;background:var(--white);
  font-size:13.6px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.ecard:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.erail::-webkit-scrollbar{height:7px}
.erail::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:4px}

/* --- 03 transfers: the vehicle class row -------------------------------- */
.vclass{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden}
.vclass li{background:var(--white);padding:clamp(16px,1.9vw,22px);
  transition:background .3s}
.vclass li:hover{background:var(--gold-soft)}
.vclass__n{display:block;font-size:14.4px;font-weight:600;color:var(--ink);
  letter-spacing:-.014em}
/* seat pips: capacity shown, not described */
.vclass__p{display:flex;align-items:center;gap:4px;margin:12px 0 10px;min-height:12px}
.vclass__p i{width:7px;height:7px;border-radius:2px;background:var(--amber);
  opacity:.85}
.vclass__p b{font-family:var(--ff-mono);font-size:11.4px;font-weight:600;
  color:var(--amber);margin-left:3px}
.vclass__c{display:block;font-size:12.4px;color:var(--muted)}
@media (max-width:900px){.vclass{grid-template-columns:repeat(2,minmax(0,1fr))}}

.guar{margin-top:clamp(24px,2.8vw,36px);padding:clamp(20px,2.4vw,30px);
  border-radius:var(--r-lg);background:var(--ink);color:#fff}
.guar__t{font-family:var(--ff-display);font-size:17px;font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 0;margin-bottom:16px}
.guar ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,28px)}
.guar li{display:flex;gap:10px;align-items:flex-start;font-size:13.8px;
  line-height:1.55;color:rgba(255,255,255,.82)}
.guar .ic{flex:none;margin-top:2px;color:var(--gold)}
.guar .prod__go{margin-top:22px}
.guar .alink{color:var(--gold)}
@media (max-width:760px){.guar ul{grid-template-columns:minmax(0,1fr)}}

/* --- 04 rail: the journey line ------------------------------------------ */
.jrny{padding:clamp(22px,2.8vw,34px) clamp(18px,2.4vw,30px);
  border-radius:var(--r-lg);background:var(--white);border:1px solid var(--rule);
  box-shadow:var(--sh-1)}
.jrny__line{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  position:relative}
.jrny__line::before{content:'';position:absolute;top:5px;left:6%;right:6%;
  height:2px;background:linear-gradient(90deg,var(--gold),var(--teal-ink))}
.jrny__line li{position:relative;padding-top:22px;text-align:center;min-width:0}
.jrny__dot{position:absolute;top:0;left:50%;margin-left:-6px;width:12px;height:12px;
  border-radius:50%;background:var(--white);border:2.5px solid var(--amber)}
.jrny__dot--end{background:var(--amber)}
.jrny__line b{display:block;font-size:14.6px;font-weight:600;color:var(--ink)}
.jrny__line span{display:block;margin-top:3px;font-size:11.8px;color:var(--muted)}
.jrny__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--body)}
@media (max-width:680px){
  .jrny__line{grid-auto-flow:row;grid-auto-columns:auto;gap:18px}
  .jrny__line::before{top:6px;bottom:6px;left:6px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,var(--gold),var(--teal-ink))}
  .jrny__line li{padding-top:0;padding-left:26px;text-align:left}
  .jrny__dot{top:2px;left:0;margin-left:0}
}

.two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(18px,2.2vw,26px)}
.modec{padding:clamp(20px,2.3vw,28px);border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--rule)}
.modec__ic{display:inline-grid;place-items:center;width:40px;height:40px;
  border-radius:11px;background:var(--teal-soft);color:var(--teal-ink)}
.modec h3{margin-top:14px;font-size:16.6px;font-weight:600;letter-spacing:-.016em}
.modec p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--body)}
@media (max-width:680px){.two-up{grid-template-columns:minmax(0,1fr)}}

/* --- 05 meals: editorial photograph + reservation slip ------------------ */
.dine{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,58px);align-items:center}
.dine__img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);
  aspect-ratio:5/6;min-width:0}
.dine__img img{width:100%;height:100%;object-fit:cover;display:block}
.dine__c{min-width:0}
.slip{margin-top:24px;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--white);overflow:hidden}
.slip__h{display:flex;align-items:center;gap:9px;padding:13px 17px;
  background:var(--gold-soft);border-bottom:1px solid #EFE3BE;
  font-size:13.2px;font-weight:600;color:var(--amber)}
.slip dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.slip dl > div{padding:14px 17px;border-bottom:1px solid var(--paper-3)}
.slip dl > div:nth-child(odd){border-right:1px solid var(--paper-3)}
.slip dt{font-size:10.8px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.slip dd{margin-top:5px;font-size:13.8px;color:var(--ink)}
.slip__f{padding:12px 17px;font-size:12.2px;color:var(--muted);
  background:var(--paper-2)}
@media (max-width:900px){
  .dine{grid-template-columns:minmax(0,1fr)}
  .dine__img{aspect-ratio:16/10;order:2}
  .slip dl{grid-template-columns:minmax(0,1fr)}
  .slip dl > div:nth-child(odd){border-right:0}
}

/* ------------------------------------------- testimonials carousel ------ */
/* RezLive's "Words of Praise" pattern: a horizontal rail of named agents with
   their country, arrow-driven. .tst--empty is the no-real-content state and
   marks every slot so it cannot ship by accident. */
.tst__nav{display:flex;gap:8px}
.tst__b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);background:var(--white);color:var(--ink);
  cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.tst__b:hover{background:var(--gold-soft);border-color:#EFE3BE}
.tst__b:active{transform:scale(.94)}
.tst__b .ic{width:16px;height:16px}
.tst__b[data-tst="prev"] .ic{transform:rotate(90deg)}
.tst__b[data-tst="next"] .ic{transform:rotate(-90deg)}

.tst{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scroll-padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
  scroll-behavior:smooth;padding:6px 0 clamp(16px,2vw,24px);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tst::-webkit-scrollbar{display:none}
.tst__t{display:flex;gap:clamp(12px,1.6vw,20px);
  padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.tcard{position:relative;flex:0 0 auto;width:clamp(268px,26vw,342px);
  scroll-snap-align:start;padding:clamp(20px,2.3vw,28px);
  border-radius:var(--r-lg);border:1px solid var(--rule);background:var(--white);
  display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.tcard blockquote{font-size:14.8px;line-height:1.64;color:var(--body)}
.tcard figure{display:flex;align-items:center;gap:12px}
.tcard__ph{flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--paper-3);border:1px dashed var(--rule-2)}
.tcard figcaption b{display:block;font-size:13.8px;font-weight:600;color:var(--ink)}
.tcard figcaption span{display:block;font-size:12.2px;color:var(--muted)}
.tcard figcaption em{display:block;font-style:normal;font-family:var(--ff-mono);
  font-size:11px;letter-spacing:.06em;color:var(--amber);margin-top:2px}
.tcard__wait{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:6px;
  font-family:var(--ff-mono);font-size:9.6px;letter-spacing:.05em;
  text-transform:uppercase;background:#FDECEC;color:#A32020;border:1px solid #F3D2D2}
.tst:not(.tst--empty) .tcard__wait{display:none}
.tst--empty .tcard blockquote,.tst--empty .tcard figcaption{opacity:.55}