/* ==========================================================================
   SLEDEXT — sledext.com rebuild, dark theme
   Interim visual system (not NIGHT CHART). All values live in :root so the
   brand system can be swapped in later by replacing tokens only.
   ========================================================================== */

@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/BigShoulders-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* colour — night water */
  --bg: #0b0f12;
  --bg-2: #10161b;
  --bg-3: #172028;
  --ink: #ecebe6;
  --ink-2: #a9afb4;
  --ink-3: #6f787f;
  --line: rgba(236, 235, 230, 0.14);
  --line-strong: rgba(236, 235, 230, 0.32);
  --ice: #bfd9e6;
  --lime: #c5f500;   /* brand lime — the colour logo, indices, progress lines; sparingly */

  /* type */
  --font-display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(84px, 16.5vw, 250px);
  --fs-h1: clamp(52px, 7.5vw, 124px);
  --fs-h2: clamp(42px, 5.6vw, 88px);
  --fs-h3: clamp(30px, 3.4vw, 48px);
  --fs-lead: clamp(19px, 1.6vw, 23px);
  --fs-body: 17px;
  --fs-small: 14px;

  /* layout */
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1600px;
  --header-h: 76px;
  --space-section: clamp(88px, 11vw, 176px);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* the home page is a shell: the document never scrolls, the page scrolls inside .page (the only scroller). Nothing
   here is ever toggled at runtime – the Safari 26 rule.
   Touch: header and menu stay inside the scroller (the header sticky at its top), the stage sits in .stage-track and
   the touch engine holds the page at the top while the stage is engaged.
   Desktop (html.shell, stage.js): the stage sits FIXED over the page while it is engaged – a child of body, outside
   the scroller, so the wheel over it scrolls nothing and no event is ever cancelled – and is moved into .stage-track
   once the page has left it. The header and the menu are moved out of the scroller too (fixed, as on the route
   pages) so that they stay above the stage. */
html.home, html.home body { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-behavior: auto; }
/* the loader (loader.js): over everything from the first paint; fades out when the intro is in or given up */
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--bg); color: var(--ink);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: opacity 0.6s var(--ease), visibility 0s 0.6s;
}
.loader.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__in { display: flex; flex-direction: column; align-items: center; gap: 28px; width: min(560px, calc(100% - 2 * var(--gutter))); }
.loader__logo { height: 44px; width: auto; }
.loader__quote {
  margin: 0; min-height: 4.6em; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 36px); line-height: 1.15;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); opacity: 0;
}
.loader__bar { width: 160px; height: 1px; background: var(--line); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s linear; }
.page {
  position: fixed; inset: 0; z-index: 1;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch;
  outline: none;
}
html.home .header { position: sticky; margin-bottom: calc(-1 * var(--header-h)); }   /* at the top of the scroller, over the content */
.stage-track { position: relative; height: 100vh; height: var(--vh-px, 100vh); }
html.shell .header { position: fixed; margin-bottom: 0; }
html.shell .stage { position: fixed; inset: 0; z-index: 5; height: auto; }
html.shell .stage.is-slotted { position: absolute; inset: 0; z-index: 1; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 4px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

.section { padding-block: var(--space-section); }
.section + .section { padding-top: 0; }

/* Type roles */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}
.body { max-width: 36em; text-wrap: pretty; }
.muted { color: var(--ink-3); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--ice); }
.btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }

/* Link with hairline */
.link {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled, .header.is-stage {
  background: rgba(11, 15, 18, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 0;
  transition: color 0.2s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--ink); }
.nav__link svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  width: 300px;
  padding: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item.is-open .dropdown,
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
/* a country a row: a photo, the name with its regions, an arrow that comes in on hover */
.dropdown a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 10px; color: var(--ink); transition: background 0.2s var(--ease); }
.dropdown a img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: block; }
.dropdown a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dropdown a b { font-weight: 600; font-size: 15px; line-height: 1.2; }
.dropdown a small { color: var(--ink-3); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown a i { display: flex; color: var(--ink-3); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s var(--ease), transform 0.25s var(--ease); }
.dropdown a i svg { width: 16px; height: 16px; }
.dropdown a:hover { background: var(--bg-3); }
.dropdown a:hover i { opacity: 1; transform: none; color: var(--ink); }

.header__cta { display: inline-flex; }

/* burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-right: -10px;
}
.burger span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  position: relative; transition: transform 0.3s var(--ease), background 0.3s;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .burger span::after { top: 0; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
body.menu-open .menu { opacity: 1; visibility: visible; }
/* no overflow toggle on body for the open menu either (same Safari 26 crash class as the stage lock, see .stage):
   the overlay is fixed and swallows touch scrolling itself */
.menu { touch-action: pan-y; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* the phone menu: three lines and the countries under the first, then the CTA and the socials as pills */
.menu__list { list-style: none; }
.menu__list a {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 10vw, 56px);
  line-height: 1;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.menu__list a.is-sub { font-family: var(--font-body); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--ink-2); padding: 9px 0 9px 22px; border-bottom: 0; position: relative; }
.menu__list a.is-sub::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 1px; background: var(--ink-3); }
.menu__list li:has(+ li > a:not(.is-sub)) a.is-sub { padding-bottom: 18px; }
.menu__list li:has(a.is-sub) + li:has(a:not(.is-sub)) { border-top: 1px solid var(--line); }
.menu__list li.menu__cta { margin-top: 28px; }
.menu__list li.menu__cta a { display: inline-flex; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; padding: 0 22px; height: 48px; border: 0; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.menu__foot a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; color: var(--ink-2); }

@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   The stage (stage.js) — the intro's stops, About, "Choose your expedition" and the four countries are screens of
   one engine; the screens are layers inside it and change with transforms/opacity. The block sits in .stage-track
   at the top of the page (touch) or fixed over the page while it is engaged (desktop, html.shell above). Nothing is
   toggled on any scroller: Safari 26 (macOS 26.0) crashes in ScrollableArea::didAddScrollbar →
   ScrollAnimationMomentum::updateScrollExtents when a scroller changes under a live wheel gesture.
   -------------------------------------------------------------------------- */
.stage { position: relative; z-index: 1; height: 100vh; height: var(--vh-px, 100vh); overflow: hidden; background: var(--bg); touch-action: manipulation; }
/* quick taps on the stage's controls (the route arrows first of all) must not become a double-tap zoom on iOS */
.stage button, .stage a, .stage .globe__item { touch-action: manipulation; }
.stage__layer { position: absolute; inset: 0; }
.stage.is-instant .stage__layer, .stage.is-instant .stage__layer > * { transition: none !important; }
/* the intro on top; leaving it takes the page with it – About follows from below on the same curve, so the two move
   as one page – and coming back it descends the same way */
.stage__layer.intro { z-index: 4; background: #000; transition: transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s 0.65s; }
.stage__layer.intro:not(.is-on) { transform: translate3d(0, -100%, 0); visibility: hidden; }
.stage__layer.intro.is-on { transition-delay: 0s; }
/* About: from below the intro; leaving downwards it slides up a touch and fades under the planet, and comes back the same ways */
.stage__layer.about {
  z-index: 3; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 24px) 0 40px;
  opacity: 0; visibility: hidden; transform: translate3d(0, -6%, 0);
  transition: opacity 0.5s var(--ease), transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s 0.65s;
}
.stage[data-state="intro"] .stage__layer.about { opacity: 1; transform: translate3d(0, 100%, 0); }
.stage__layer.about.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Next expeditions: a screen between About and the planet. Hidden it sits a little above (it left upward); while the
   intro or About show it waits a little below and rises in; leaving back up to About it sinks the same way */
.stage__layer.next {
  z-index: 3; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 24px) 0 40px;
  opacity: 0; visibility: hidden; transform: translate3d(0, -6%, 0);
  transition: opacity 0.5s var(--ease), transform 0.65s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s 0.65s;
}
.stage[data-state="intro"] .stage__layer.next, .stage[data-state="about"] .stage__layer.next { transform: translate3d(0, 6%, 0); }
.stage__layer.next.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* the cards take the room under the heading, 560 px at most; on a short window they shrink rather than the screen scrolls */
.stage__layer.next .next__grid { height: clamp(280px, calc(var(--vh-px, 100vh) - var(--header-h) - 250px), 560px); }
.stage__layer.next .ncard { aspect-ratio: auto; height: 100%; }
/* the planet: behind everything; for the "Choose" peek it rises from below the screen and settles, and stays for the
   countries. Leaving upwards it sinks back the same way */
.stage__layer.globe {
  z-index: 1; opacity: 0; visibility: hidden; transform: translate3d(0, 26%, 0) scale(0.92); transform-origin: 50% 90%;
  transition: opacity 0.55s var(--ease), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.6s;
}
.stage__layer.globe.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* "Choose your expedition": the heading over the planet's shoulder, its bottom at 58 % of the screen */
.stage__layer.choose { pointer-events: none; z-index: 2; }
.stage__layer.choose .wrap { position: absolute; left: 0; right: 0; top: 58%; transform: translate3d(0, calc(-100% - 12px), 0); opacity: 0; transition: opacity 0.45s var(--ease), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stage__layer.choose.is-on .wrap { opacity: 1; transform: translate3d(0, -100%, 0); transition-delay: 0.22s; }   /* the heading follows the About screen out, does not overlap it */
.stage[data-state="about"] .stage__layer.choose .wrap, .stage[data-state="intro"] .stage__layer.choose .wrap { transform: translate3d(0, calc(-100% + 24px), 0); }   /* coming from above it rises in, leaving down it sinks */
@media (prefers-reduced-motion: reduce) { .stage__layer, .stage__layer.choose .wrap { transition: none !important; } }
.kicker { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   About — numbers and a short description on the left, the video fan on the right
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  gap: clamp(32px, 6vw, 112px); align-items: center;
}
.about__copy { padding-left: clamp(0px, 3vw, 56px); }                 /* the text stands off the left edge */
.about__lead { margin-top: 18px; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.28; color: var(--ink); max-width: 20em; text-wrap: pretty; }
.numbers__grid { margin-top: clamp(36px, 4.5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: clamp(28px, 3.5vw, 52px) clamp(28px, 4vw, 64px); }
.num { min-width: 0; }
.num__v { display: block; font-size: clamp(48px, 5.2vw, 88px); line-height: 0.9; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num__v em { font-style: normal; color: var(--lime); font-size: 0.42em; margin-left: 0.12em; vertical-align: 0.1em; }
.num__l { display: block; margin-top: 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.num__s { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }

/* the video fan: three equal cards in a row – the clip in the middle plays, the previous and the next sit behind it
   to the left and to the right, the fourth waits behind the middle */
.vfan { position: relative; width: 100%; }
.vfan__stage { position: relative; aspect-ratio: 1 / 0.78; }
.vfan__card {
  position: absolute; left: 20%; top: 1.5%; width: 60%; aspect-ratio: 4 / 5; margin: 0;
  border-radius: 8px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-strong);
  transform-origin: 50% 50%;
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s var(--ease), filter 0.5s var(--ease);
  will-change: transform;
}
.vfan__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vfan__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11, 15, 18, 0.86) 0%, rgba(11, 15, 18, 0.2) 40%, rgba(11, 15, 18, 0) 60%), linear-gradient(to bottom, rgba(11, 15, 18, 0.45) 0%, rgba(11, 15, 18, 0) 28%); }
.vfan__card.is-main { transform: none; z-index: 4; cursor: default; }
.vfan__card.is-left { transform: translate3d(-46%, 0, 0) scale(0.94); z-index: 3; opacity: 0.9; filter: brightness(0.55); cursor: pointer; }
.vfan__card.is-right { transform: translate3d(46%, 0, 0) scale(0.94); z-index: 3; opacity: 0.9; filter: brightness(0.55); cursor: pointer; }
.vfan__card.is-back { transform: translate3d(0, 0, 0) scale(0.86); z-index: 2; opacity: 0; pointer-events: none; }
.vfan__card figcaption { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; transition: opacity 0.4s var(--ease); }
.vfan__card:not(.is-main) figcaption { opacity: 0; }
.vfan__place { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; }
.vfan__country { display: block; margin-top: 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.vfan__idx { position: absolute; left: calc(20% + 18px); top: calc(1.5% + 16px); z-index: 5; font-size: 13px; letter-spacing: 0.1em; color: var(--lime); }
.vfan__sound {
  position: absolute; right: calc(20% + 14px); top: calc(1.5% + 12px); z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  height: 34px; padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(11, 15, 18, 0.35);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.vfan__sound svg { width: 15px; height: 15px; }
.vfan__sound:hover, .vfan__sound[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.vfan__nav { margin-top: 14px; display: flex; align-items: center; gap: 18px; }
.vfan__lines { flex: 1; display: flex; gap: 6px; }
.vfan__line { position: relative; flex: 1; height: 14px; display: block; }
.vfan__line i { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line-strong); }
.vfan__line i::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--p, 0%); background: var(--lime); }
.vfan__line.is-done i::after { width: 100%; }
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__copy { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .vfan__card { transition: none; } }

/* --------------------------------------------------------------------------
   Choose — the heading (positioned by the stage rules above)
   -------------------------------------------------------------------------- */
.choose__h { margin-top: 12px; font-size: clamp(52px, 7vw, 116px); line-height: 0.9; }
.choose__sub { margin-top: 18px; color: var(--ink-2); font-size: var(--fs-lead); max-width: 30em; }

/* --------------------------------------------------------------------------
   Arrows (video fan, route slider)
   -------------------------------------------------------------------------- */
.arrows { display: flex; gap: 8px; }
.arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.arrow:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.features {
  margin-top: clamp(40px, 5vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px) clamp(24px, 3vw, 56px);
}
.feature { padding: 0; }
.feature__icon { width: 28px; height: 28px; color: var(--ice); }
.feature__icon svg { width: 100%; height: 100%; }
.feature__title { margin-top: 26px; font-size: 21px; font-weight: 600; line-height: 1.2; }
.feature__text { margin-top: 10px; color: var(--ink-2); font-size: 16px; max-width: 30em; text-wrap: pretty; }

@media (max-width: 960px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; gap: 24px; }
}

/* --------------------------------------------------------------------------
   Tags (route pages)
   -------------------------------------------------------------------------- */
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Sledext is… — cards stacking on scroll. Each .stack__page is a viewport-high stop; the card inside is
   sticky, so the next page's card slides up over it. stack.js shrinks and lifts the covered cards a touch
   so their top edges peek above the one on top.
   -------------------------------------------------------------------------- */
.stack { --stack-top: calc(var(--header-h) + 22px); --stack-gap: 28px; --vh: var(--vh-px, 100vh); position: relative; padding-top: var(--stack-top); }
/* the stops: one viewport per card, out of flow so the cards can stick inside the whole stack */
.stack__page { position: absolute; left: 0; top: calc(var(--i) * var(--vh)); width: 1px; height: var(--vh); pointer-events: none; }
.scard {
  position: sticky; top: var(--stack-top);
  height: calc(var(--vh) - var(--stack-top) - var(--stack-gap));
  margin: 0 var(--gutter) calc(var(--stack-top) + var(--stack-gap)); max-width: 1600px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px);
  padding: clamp(16px, 2vw, 28px);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  transform-origin: 50% 0;
  z-index: var(--z, 1);                                  /* explicit stacking (stack.js): WebKit paints sticky layers out of DOM order otherwise */
}
.scard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bg); opacity: var(--dim, 0); pointer-events: none; z-index: 2; }   /* the covered card darkens, stays opaque */
.scard:last-child { margin-bottom: var(--stack-gap); }
@media (min-width: 1728px) { .scard { margin-inline: auto; } }
.scard:nth-of-type(even) .scard__media { order: -1; }
.scard__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(8px, 3vw, 56px); min-width: 0; }
.scard__idx { font-size: 12px; letter-spacing: 0.1em; color: var(--lime); }
.scard__title { margin-top: 14px; font-size: clamp(34px, 3.6vw, 60px); line-height: 0.95; }
.scard__body p { margin-top: 22px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.scard__cta { margin-top: 28px; align-self: flex-start; }
.scard__media { position: relative; min-height: 0; border-radius: 8px; overflow: hidden; background: var(--bg-3); }
.scard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .stack { --stack-top: calc(var(--header-h) + 14px); --stack-gap: 22px; }
  .scard { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 14px; border-radius: 10px; }
  .scard:nth-of-type(even) .scard__media { order: 0; }
  .scard__body { padding: 4px 4px 6px; }
  .scard__title { margin-top: 10px; font-size: clamp(28px, 8.5vw, 36px); }
  .scard__body p { margin-top: 12px; font-size: 15px; }
  .scard__cta { margin-top: 18px; }
}

/* --------------------------------------------------------------------------
   Next expeditions — three cards with the nearest departures (a stage screen since site43)
   -------------------------------------------------------------------------- */
.next__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 96px); align-items: end; }
.next__head .h2 { margin-top: 12px; max-width: 8em; }
.next__head p { color: var(--ink-2); max-width: 24em; }
.next__grid { margin-top: clamp(28px, 3.5vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.ncard { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.ncard__media { position: absolute; inset: 0; }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ncard:hover .ncard__media img { transform: scale(1.04); }
.ncard::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11, 15, 18, 0.9) 0%, rgba(11, 15, 18, 0.3) 42%, rgba(11, 15, 18, 0) 65%); }
.ncard__body { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; }
.ncard__idx { font-size: 12px; letter-spacing: 0.1em; color: var(--lime); }
.ncard__title { margin-top: 8px; font-size: clamp(34px, 3vw, 52px); line-height: 0.95; text-transform: uppercase; }
.ncard__body p { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.ncard__arrow { position: absolute; right: 16px; top: 16px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink); background: rgba(11, 15, 18, 0.35); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.ncard__arrow svg { width: 16px; height: 16px; }
.ncard:hover .ncard__arrow { background: var(--ink); color: var(--bg); }
@media (max-width: 900px) {
  .next__head { grid-template-columns: 1fr; gap: 12px; }
  .next__head p { display: none; }                         /* the stop leaves no room to scroll: the heading alone */
}
@media (max-width: 900px) and (orientation: portrait) {
  .stage__layer.next { justify-content: flex-start; padding: calc(var(--header-h) + 10px) 0 calc(16px + env(safe-area-inset-bottom)); }
  .stage__layer.next .next__grid { margin-top: 18px; height: auto; grid-template-columns: 1fr; gap: 10px; }
  /* a strip: the photo at the left, the name beside it, the arrow at the right – three strips fit a phone with room to spare */
  .stage__layer.next .ncard { height: auto; display: grid; grid-template-columns: 152px minmax(0, 1fr) 36px; align-items: center; gap: 14px; padding-right: 14px; border-radius: 16px; }
  .stage__layer.next .ncard__media { position: relative; inset: auto; width: 152px; height: 152px; }
  .stage__layer.next .ncard::after { display: none; }
  .stage__layer.next .ncard__body { position: static; }
  .stage__layer.next .ncard__title { margin-top: 4px; font-size: 28px; }
  .stage__layer.next .ncard__body p { margin-top: 6px; font-size: 13px; }
  .stage__layer.next .ncard__arrow { position: static; width: 36px; height: 36px; }
  .stage__layer.next .ncard__arrow svg { width: 14px; height: 14px; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .stage__layer.next { padding: calc(var(--header-h) + 8px) 0 12px; }
  .stage__layer.next .next__head .h2 { margin-top: 4px; font-size: 28px; }
  .stage__layer.next .next__grid { margin-top: 12px; gap: 10px; height: calc(var(--vh-px, 100vh) - var(--header-h) - 96px); }
  .stage__layer.next .ncard__body { left: 14px; right: 14px; bottom: 12px; }
  .stage__layer.next .ncard__title { font-size: 22px; }
  .stage__layer.next .ncard__body p { display: none; }
  .stage__layer.next .ncard__arrow { width: 30px; height: 30px; right: 10px; top: 10px; }
}

/* --------------------------------------------------------------------------
   Follow the expeditions — socials band before the footer
   -------------------------------------------------------------------------- */
.social { padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); }
.social__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 96px); align-items: end; }
.social__head .h2 { margin-top: 12px; max-width: 8em; }
.social__head p { color: var(--ink-2); max-width: 26em; }
.social__grid { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.social__tile {
  position: relative; display: flex; flex-direction: column; gap: 24px;
  padding: clamp(20px, 2vw, 28px); min-height: 190px; background: var(--bg);
  transition: background 0.3s var(--ease);
}
.social__tile:hover { background: var(--bg-2); }
.social__tile svg { width: 26px; height: 26px; color: var(--ice); }
.social__tile b { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.4vw, 36px); line-height: 0.95; text-transform: uppercase; }
.social__tile span { font-size: 14px; color: var(--ink-3); }
.social__tile i { position: absolute; right: 20px; top: 20px; width: 16px; height: 16px; color: var(--ink-3); transition: color 0.25s var(--ease), transform 0.3s var(--ease); }
.social__tile i svg { width: 16px; height: 16px; color: inherit; }
.social__tile:hover i { color: var(--ink); transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .social__head { grid-template-columns: 1fr; }
  .social__grid { grid-template-columns: 1fr; }
  .social__tile { flex-direction: row; align-items: center; gap: 16px; min-height: 0; padding: 18px 20px; }
  .social__tile svg { width: 22px; height: 22px; }
  .social__tile b { margin-top: 0; font-size: 26px; }
  .social__tile span { margin-left: auto; padding-right: 26px; font-size: 13px; }
  .social__tile i { top: 50%; transform: translateY(-50%); right: 20px; }
  .social__tile:hover i { transform: translateY(-50%); }
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.book__grid { align-items: start; }
.book__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
}
.book__head .h2 { max-width: 9em; }
.book__note { margin-top: 24px; color: var(--ink-2); max-width: 26em; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field label, .field__lab { font-size: 14px; color: var(--ink-2); }
/* the contact channel: three pills, one checked */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.seg label:hover span { border-color: var(--ink); }
.field input, .field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 52px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  padding: 0;
  transition: border-color 0.25s var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); }
.field select { cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a9afb4' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; }
.field select option { background: var(--bg-2); color: var(--ink); }
.field input:invalid:not(:placeholder-shown) { border-bottom-color: #d99b8b; }

.check { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 16px; color: var(--ink-2); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.check__box svg { width: 12px; height: 12px; opacity: 0; color: var(--bg); }
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--ice); outline-offset: 3px; }

.form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__status { font-size: 15px; color: var(--ink-2); min-height: 1.5em; }
.form__status.is-error { color: #d99b8b; }
.form__status.is-ok { color: var(--ice); }

@media (max-width: 960px) {
  .book__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .form { grid-template-columns: 1fr; gap: 24px; }
}

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */
.quote { padding-block: clamp(56px, 7vw, 112px); }
.quote__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  max-width: 22em;
  text-wrap: balance;
}
.quote__by { margin-top: 32px; display: flex; flex-direction: column; gap: 2px; }
.quote__by b { font-weight: 600; }
.quote__by span { color: var(--ink-3); font-size: 15px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 88px) 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: 40px clamp(24px, 3vw, 56px);
}
.footer__brand img { height: 44px; width: auto; }
.footer__brand p { margin-top: 20px; color: var(--ink-3); max-width: 22em; font-size: 15px; }
.footer__col h4 { font-size: 15px; font-weight: 600; margin-bottom: 18px; }
.footer__col li + li { margin-top: 12px; }
.footer__col a { color: var(--ink-2); font-size: 15px; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  font-size: 14px; color: var(--ink-3);
}
.footer__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--ink); }

@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Expedition page (chile / indonesia)
   -------------------------------------------------------------------------- */
.xhero {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: flex-end;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}
.xhero img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7);
}
.xhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--bg) 0%, rgba(11, 15, 18, 0.35) 45%, rgba(11, 15, 18, 0.1) 100%);
}
.xhero__inner { padding-bottom: clamp(40px, 6vw, 88px); }
.xhero__back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 15px; margin-bottom: 28px; }
.xhero__back svg { width: 14px; height: 14px; }
.xhero__title { font-size: clamp(72px, 13vw, 200px); line-height: 0.88; }
.xhero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.xhero__sub { font-size: clamp(20px, 2.2vw, 30px); max-width: 20em; text-wrap: balance; }
.xhero__tags { display: flex; gap: 6px; }

.xbody { padding-block: var(--space-section); }
.xbody__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
}
.xbody__grid .h3 { max-width: 14em; }
.xbody__text p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.xbody__text p + p { margin-top: 1.2em; }
.xbody__text .btn { margin-top: 36px; }
@media (max-width: 800px) { .xbody__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Country pages (site47): the country in a few lines with its facts, the routes as cards, each opening a modal
   -------------------------------------------------------------------------- */
.chero .xhero__inner .kicker { display: block; margin-bottom: 10px; }
.cabout { padding-block: var(--space-section); border-bottom: 1px solid var(--line); }
.cabout__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.cabout__text p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 30em; text-wrap: pretty; }
.cabout__text p + p { margin-top: 1.1em; color: var(--ink-2); }
.cfacts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cfact { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cfact__k { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.cfact__v { font-size: 15px; color: var(--ink-2); }
.croutes { padding-block: var(--space-section); }
.croutes__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 96px); align-items: end; }
.croutes__head .h2 { margin-top: 12px; }
.croutes__head p { color: var(--ink-2); max-width: 24em; }
.rgrid { margin-top: clamp(28px, 3.5vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.rgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rcard { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--bg-2); text-align: left; color: var(--ink); cursor: pointer; }
.rgrid--4 .rcard { aspect-ratio: 3 / 4; }
.rcard__media { position: absolute; inset: 0; }
.rcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.rcard:hover .rcard__media img { transform: scale(1.04); }
.rcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11, 15, 18, 0.92) 0%, rgba(11, 15, 18, 0.35) 42%, rgba(11, 15, 18, 0) 65%); }
.rcard__body { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; }
.rcard__idx { font-size: 12px; letter-spacing: 0.1em; color: var(--lime); }
.rcard__title { margin-top: 8px; font-size: clamp(30px, 2.6vw, 46px); line-height: 0.95; text-transform: uppercase; }
.rcard__body p { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.rcard__arrow { position: absolute; right: 16px; top: 16px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--ink); background: rgba(11, 15, 18, 0.35); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.rcard__arrow svg { width: 16px; height: 16px; }
.rcard:hover .rcard__arrow { background: var(--ink); color: var(--bg); }
.ccta { border-top: 1px solid var(--line); }
/* the modal: a sheet over the page with the photo on top; #hash opens it, Esc / the veil / × close it */
.modal-open { overflow: hidden; }
.rmodal { position: fixed; inset: 0; z-index: 80; opacity: 0; transition: opacity 0.3s var(--ease); }
.rmodal.is-open { opacity: 1; }
.rmodal__bg { position: absolute; inset: 0; background: rgba(8, 9, 10, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rmodal__frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(12px); width: min(760px, 100% - 32px); max-height: calc(100% - 48px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rmodal.is-open .rmodal__frame { transform: translate(-50%, -50%); }
.rmodal__close { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(11, 15, 18, 0.55); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rmodal__close svg { width: 15px; height: 15px; }
.rmodal__close:hover { background: var(--ink); color: var(--bg); }
.rmodal__panel { clear: both; margin-top: -56px; }
.rmodal__media { aspect-ratio: 2 / 1; overflow: hidden; }
.rmodal__media img { width: 100%; height: 100%; object-fit: cover; }
.rmodal__body { padding: 26px 32px 34px; }
.rmodal__idx { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.rmodal__name { margin-top: 10px; font-size: clamp(36px, 4vw, 56px); line-height: 0.95; text-transform: uppercase; }
.rmodal__sub { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.rstats { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rstats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; }
.rstats span { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.rnote { margin-top: 20px; padding: 14px; border: 1px dashed var(--line-strong); text-align: center; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.rmodal__text { margin-top: 20px; }
.rmodal__text p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.rmodal__text p + p { margin-top: 0.9em; }
.rmodal__h { margin-top: 26px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.rprog { list-style: none; margin-top: 10px; }
.rprog li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.rprog li b { font-weight: 600; color: var(--ink); }
.rprog li span { color: var(--ink-2); }
.rinc { list-style: none; margin-top: 10px; columns: 2; column-gap: 24px; }
.rinc li { position: relative; padding-left: 16px; margin-bottom: 6px; font-size: 15px; color: var(--ink-2); break-inside: avoid; }
.rinc li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.rmodal__site { margin-top: 22px; font-size: 14px; color: var(--ink-3); }
.rmodal__site a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rmodal__acts { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.rmodal__acts .btn svg { width: 14px; height: 14px; }
/* the quick request sheet: the short form on the same sheet as the route modal */
.qmodal .rmodal__frame { width: min(520px, 100% - 32px); }
.qmodal__body { clear: both; padding-top: 4px; }
.qmodal__title { margin-top: 10px; font-size: clamp(32px, 3.4vw, 44px); line-height: 0.98; }
.qmodal__note { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.qform { margin-top: 22px; display: grid; gap: 14px; }
.qform .form__actions { margin-top: 6px; }
.qform .btn svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .cabout__grid, .croutes__head { grid-template-columns: 1fr; gap: 20px; }
  .rgrid, .rgrid--2, .rgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rcard, .rgrid--4 .rcard { aspect-ratio: 3 / 4; }
  .rcard__body { left: 14px; right: 14px; bottom: 14px; }
  .rcard__title { font-size: clamp(22px, 5.4vw, 30px); }
  .rcard__body p { font-size: 12px; }
  .rcard__arrow { width: 32px; height: 32px; right: 10px; top: 10px; }
  .rcard__arrow svg { width: 13px; height: 13px; }
  .rmodal__frame { width: 100%; max-height: 100%; top: auto; bottom: 0; left: 0; transform: translateY(24px); border-radius: 22px 22px 0 0; border-width: 1px 0 0; }
  .rmodal.is-open .rmodal__frame { transform: none; }
  .rmodal__body { padding: 20px 20px 32px; }
  .rmodal__name { font-size: 32px; }
  .rstats b { font-size: 26px; }
  .rprog li { grid-template-columns: 1fr; gap: 3px; }
  .rinc { columns: 1; }
  .rmodal__acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Intro — the water screen, then the film stop-to-stop (Chile mechanics); the first layer of the stage
   ========================================================================== */
.intro__stage { position: absolute; inset: 0; overflow: hidden; background: #000; }
.intro__gfx, .intro__filmbox, .intro__film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the film (canvas + the engine's <video> wrappers) is always fully opaque; the water canvas sits above it and fades out,
   so a playing video never lives under an ancestor whose opacity animates */
.intro__gfx { background: #000; }
/* .intro__gfx: the softening is done on the simulation grid (intro.js, FC.blurPx); no CSS filter on a full-screen canvas */
.intro__move { position: absolute; inset: 0; pointer-events: none; }
.intro__title {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gutter) clamp(40px, 8vh, 96px);
}
.intro__title .display {
  font-size: clamp(64px, 12vw, 196px);
  font-weight: 800;
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 8em;
}
.intro__title .display em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.intro__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(20px, 3vh, 36px);
  color: var(--ink-2);
  font-size: 15px;
}
.intro__countries { display: flex; gap: 22px; flex-wrap: wrap; }
.intro__countries span { position: relative; }
.intro__countries span + span::before { content: ""; position: absolute; left: -13px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.intro__scroll { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-3); pointer-events: auto; transition: color 0.2s; }
.intro__scroll:hover { color: var(--ink); }
.only-coarse { display: none; }
@media (hover: none) and (pointer: coarse) { .only-fine { display: none; } .only-coarse { display: inline; } }
.intro__scroll i { display: block; width: 1px; height: 36px; background: var(--line-strong); position: relative; overflow: hidden; }
.intro__scroll i::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--ink); animation: intro-drip 1.8s var(--ease) infinite; }
@keyframes intro-drip { from { top: -100%; } to { top: 100%; } }
.intro:not([data-stop="0"]) .intro__scroll { visibility: hidden; }   /* the hint belongs to the first screen: past it, no target, no animation */
html.no-webfont { --font-display: Impact, "Arial Narrow Bold", "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, "Helvetica Neue", Arial, sans-serif; }

/* words: rise into place on a stop, drift up and dissolve on leaving – one direction only.
   The box carries the spring of a weak gesture (intro.js nudge), the word carries enter/leave. */
.intro__words { position: absolute; inset: 0; }
.intro__wordbox { position: absolute; right: var(--gutter); top: 50%; }   /* sized by the word: no full-screen layers */
.intro__word {
  display: block; position: relative;
  margin-top: -0.45em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 12.5vw, 220px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s linear, transform 0.7s cubic-bezier(0.2, 0.6, 0.25, 1);
}
.intro__word.is-active { opacity: 0.9; transform: translateY(0); }   /* 0.9: a touch under solid, the film shows through */
.intro__word.is-leaving { opacity: 0; transform: translateY(-56px); transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.4, 0.1, 0.3, 1); }

.intro__skip {
  position: absolute; right: var(--gutter); bottom: 28px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(11, 15, 18, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 500; color: var(--ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.intro__skip svg { width: 14px; height: 14px; }
.stage.is-nofilm .intro__skip { display: none; }                 /* the film was given up: nothing to skip */
.intro__skip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .intro__scroll i::after { animation: none; }
  .intro__word, .intro__word.is-leaving { transition: none; }
}
@media (max-width: 720px) {
  .intro__title .display { font-size: clamp(56px, 17vw, 96px); }
  .intro__meta { align-items: flex-start; flex-direction: column; gap: 16px; }
  .intro__word { font-size: clamp(54px, 16vw, 96px); }
  .intro__skip { bottom: 22px; }
}

/* ==========================================================================
   Globe — the planet screen of the stage: the peek under "Choose your expedition", then one state per country
   ========================================================================== */
.globe__stage { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.globe__canvas.is-drag { cursor: grabbing; }
.globe__canvas.is-hit { cursor: pointer; }
.globe__hud { position: absolute; pointer-events: none; }
/* until the stage engages a country only the planet shows (the peek under "Choose your expedition") */
.globe__hud, .globe__labels { transition: opacity 0.5s var(--ease); }
.globe:not(.is-engaged) .globe__hud, .globe:not(.is-engaged) .globe__labels { opacity: 0; }
.globe__head {
  top: calc(var(--header-h) + 8px); left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  font-size: 15px; color: var(--ink-2);
}
.globe__head b { color: var(--ink); font-weight: 600; }
.globe__load {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 13px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
  transition: opacity 0.6s var(--ease);
}
.globe__load.is-off { opacity: 0; }

.globe__list {
  left: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px;
}
.globe__item {
  pointer-events: auto;
  display: grid; grid-template-columns: 36px 1fr; align-items: baseline;
  padding: 6px 0;
  color: var(--ink-3);
  text-align: left;
  transition: color 0.25s var(--ease);
}
.globe__item small { font-size: 13px; letter-spacing: 0.04em; }
.globe__item b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 0.95;
}
.globe__item:hover, .globe__item.is-on { color: var(--ink); }
.globe__item.is-on small { color: var(--ice); }

.globe__lbl {
  position: absolute; left: 0; top: 0;
  pointer-events: auto; cursor: pointer;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap; transform: translate(14px, -50%);
  will-change: transform, opacity; user-select: none;
  transition: color 0.2s var(--ease);
}
.globe__lbl small { color: var(--ink-3); margin-right: 8px; }
.globe__lbl:hover, .globe__lbl.is-on { color: var(--ink); }
.globe__lbl.is-on small { color: var(--ice); }

/* country card – the route slides: the photo over the whole card, the number of the route on top, the tour name,
   the figures and "Open route" at the bottom. The country itself is not in the card: it is on the planet and in the list.
   The card is centred in the room under the header; a slide is 640 px tall or less on a short screen. */
.gcard {
  right: var(--gutter); top: calc(50% + var(--header-h) / 2);
  transform: translate(24px, -50%);
  width: min(440px, calc(100% - 2 * var(--gutter)));
  max-height: calc(var(--vh-px, 100vh) - var(--header-h) - 32px);
  border-radius: 22px; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s 0.35s;
}
.gcard.is-show { opacity: 1; visibility: visible; transform: translate(0, -50%); pointer-events: auto; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); }
.gcard__close {
  position: absolute; z-index: 3; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: rgba(11, 15, 18, 0.45); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.gcard__close svg { width: 14px; height: 14px; }
.gcard__close:hover { background: rgba(11, 15, 18, 0.7); border-color: var(--line-strong); }

.gslider__vp { overflow: hidden; touch-action: pan-y; }
.gslider__track { display: flex; align-items: stretch; transition: transform 0.45s var(--ease); }
.gslide {
  position: relative; flex: 0 0 100%; min-width: 0;
  height: min(640px, calc(var(--vh-px, 100vh) - var(--header-h) - 32px));
  padding: 22px 24px 20px;
  display: flex; flex-direction: column;
}
.gslide > :not(.gslide__media) { position: relative; z-index: 1; }
/* the photo: cover, the crop per route (--pos on desktop, --posm on phones – DEST in globe.js); a dark plate without a photo.
   Two scrims: a light one at the top under the number, a strong one at the bottom under the text */
.gslide__media { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 30% 20%, #1a2732 0%, #0f161c 55%, #0b0f12 100%); }
.gslide__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.gslide__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11, 15, 18, 0.55) 0%, rgba(11, 15, 18, 0) 34%),
    linear-gradient(to top, rgba(11, 15, 18, 0.97) 0%, rgba(11, 15, 18, 0.9) 22%, rgba(11, 15, 18, 0.62) 38%, rgba(11, 15, 18, 0.22) 52%, rgba(11, 15, 18, 0) 62%);
}
.gslide__num { display: flex; align-items: baseline; gap: 6px; margin-bottom: auto; font-family: var(--font-display); font-weight: 700; line-height: 0.82; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.gslide__num b { font-size: 120px; letter-spacing: -0.01em; }
.gslide__num small { font-family: var(--font-body); font-size: 15px; letter-spacing: 0.08em; color: var(--ink); opacity: 0.85; }
.gslide__name { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 0.95; text-transform: uppercase; }
.gslide__sub { margin-top: 6px; color: var(--ink-2); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* every slide is the same height: two lines for the text, one fixed row for the figures or the note */
.gslide p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 36ch; min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gslide__stats { margin-top: 16px; min-height: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.gslide__stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; }
.gslide__stats span { font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.gslide__note { margin-top: 16px; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 12px; border: 1px dashed var(--line-strong); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* "Open route" – the desktop control; the list opens upward as a popover (the card clips its overflow) */
.gmenu { position: relative; margin-top: 18px; }
.gmenu__open { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(11, 15, 18, 0.35); font-weight: 600; font-size: 14px; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); }
.gmenu__open svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.gmenu__open:hover, .gmenu.is-on .gmenu__open { border-color: var(--ink); }
.gmenu.is-on .gmenu__open svg { transform: rotate(180deg); }
.gmenu__dd { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 4; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease), transform 0.25s var(--ease); }
.gmenu.is-on .gmenu__dd { max-height: 190px; opacity: 1; transform: none; }
.gmenu__in { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 6px; width: 280px; }
.gmenu__in a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; font-size: 15px; color: var(--ink); }
.gmenu__in a:hover { background: var(--bg-3); }
.gmenu__in a svg { width: 14px; height: 14px; color: var(--ink-3); }
.gmenu__in a:hover svg { color: var(--ice); }

/* the route arrows: bottom right of the card, over the slides; hidden when the country has one route */
.gnav { position: absolute; z-index: 3; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.gnav .arrow { width: 44px; height: 44px; background: rgba(11, 15, 18, 0.35); }
.gnav .arrow svg { width: 14px; height: 14px; }
.gcard.is-single .gnav { display: none; }


/* the two route links as buttons – only in the phone cards (below); the desktop card has the dropdown */
.gslide__acts { display: none; gap: 8px; margin-top: 12px; }
.gslide__acts a {
  flex: 1 1 0; min-width: 0; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(11, 15, 18, 0.35);
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink);
}
.gslide__acts a svg { width: 13px; height: 13px; color: var(--ink-3); flex: none; }
.gslide__acts a.is-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gslide__acts a.is-primary svg { color: var(--bg); }
/* phones held sideways: the desktop arrangement (list left, card right) on a short screen – the planet is fitted to
   the height and moved left by globe.js, the card is compact: the slide takes the room under the header */
@media (max-width: 900px) and (orientation: landscape) {
  .globe__head { top: calc(var(--header-h) + 4px); font-size: 13px; }
  .globe__head span:last-child { display: none; }
  .globe__list { gap: 0; }
  .globe__item { grid-template-columns: 28px 1fr; padding: 3px 0; }
  .globe__item b { font-size: 24px; }
  .gcard { width: min(340px, 42vw); top: calc(var(--header-h) + 12px); transform: translate(24px, 0); max-height: calc(100% - var(--header-h) - 44px); }
  .gcard.is-show { transform: none; }
  .gcard__close { display: none; }
  .gslide { height: calc(var(--vh-px, 100vh) - var(--header-h) - 44px); padding: 12px 16px 12px; }
  .gslide__num b { font-size: 56px; }
  .gslide__num small { font-size: 12px; }
  .gslide__name { margin-top: 0; font-size: 22px; }
  .gslide__sub { font-size: 13px; }
  .gslide p { display: none; }
  .gslide__stats { margin-top: 8px; min-height: 40px; }
  .gslide__stats b { font-size: 20px; }
  .gslide__stats span { font-size: 10px; }
  .gslide__note { margin-top: 8px; min-height: 40px; font-size: 12px; }
  .gmenu { display: none; }
  .gslide__acts { display: flex; margin-top: 10px; }
  .gslide__acts a { height: 34px; padding: 0 10px; font-size: 12px; }
  .gnav { right: 12px; top: 12px; bottom: auto; gap: 6px; }
  .gnav .arrow { width: 34px; height: 34px; }
  .globe__lbl { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .gcard, .gcard.is-show, .gslider__track { transition: none; }
}

/* Your own route — the band after the last country; free scroll starts here */
.own__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.own__h { margin-top: 12px; font-size: clamp(48px, 6.6vw, 108px); line-height: 0.9; max-width: 8em; }
.own__text { color: var(--ink-2); font-size: var(--fs-lead); max-width: 26em; }
.own__side .btn { margin-top: 28px; }
@media (max-width: 900px) { .own__grid { grid-template-columns: 1fr; } }

/* Why Sledext — the six principles */
.why__head { max-width: 30em; }
.why__head .h2 { margin-top: 12px; }

/* ==========================================================================
   Phones (site22) — portrait layout. Desktop rules above are untouched; everything here is scoped to
   narrow viewports so the desktop build renders exactly as in site21.
   ========================================================================== */
@media (max-width: 720px) {
  :root { --header-h: 64px; --space-section: clamp(72px, 11vw, 176px); }
  .logo img { height: 34px; }
  .burger { margin-right: -12px; }

  /* menu */
  .menu { padding: calc(var(--header-h) + 16px) var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
  .menu__list a { font-size: clamp(38px, 11vw, 56px); padding: 8px 0; }
  .menu__list a.is-sub { font-size: clamp(22px, 6.6vw, 32px); padding-left: 20px; }
  .menu__foot { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; margin-top: 20px; }

  /* intro, first screen: the title sits mid-screen, the water below it is free for the finger,
     the hint is a tappable pill at the bottom (tap = next stop, swipe up = next stop) */
  .intro__title { justify-content: center; padding: calc(var(--header-h) + 8px) var(--gutter) 108px; }
  .intro__title .display { font-size: clamp(56px, 17vw, 96px); max-width: none; }
  .intro__meta { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 22px; }
  .intro__countries { gap: 20px; font-size: 14px; }
  .intro__scroll {
    position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    flex-direction: column; gap: 8px;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
    padding: 8px 14px;
  }
  .intro__scroll i { width: 1px; height: 26px; }
  .intro__scroll i::after { animation-direction: reverse; }           /* the drip rises: swipe up */
  .intro__skip { bottom: calc(30px + env(safe-area-inset-bottom)); right: var(--gutter); }
  .intro__wordbox { right: var(--gutter); left: var(--gutter); top: 42%; }
  .intro__word { font-size: clamp(54px, 17vw, 96px); white-space: normal; }

  .stage__layer.about { justify-content: flex-start; padding: calc(var(--header-h) + 10px) 0 calc(16px + env(safe-area-inset-bottom)); }
  .stage__layer.choose .wrap { top: 60%; }

  /* about: the fan under the numbers, all inside one screen where it fits */
  .about__lead { margin-top: 12px; font-size: 17px; }
  .numbers__grid { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .num__v { font-size: clamp(30px, 9vw, 40px); }
  .num__l { margin-top: 6px; font-size: 10px; }
  .num__s { display: none; }
  .vfan__card { border-radius: 6px; }
  .vfan__card figcaption { left: 14px; right: 14px; bottom: 14px; }
  .vfan__place { font-size: 24px; }
  .vfan__country { font-size: 11px; }
  .vfan__idx { left: calc(20% + 12px); top: calc(1.5% + 10px); font-size: 11px; }
  .vfan__sound { right: calc(20% + 10px); top: calc(1.5% + 8px); height: 30px; padding: 0 10px 0 8px; font-size: 10px; }
  .vfan__sound span { display: none; }
  .vfan__nav { margin-top: 10px; }
  .vfan .arrow { width: 40px; height: 40px; }

  .choose__h { font-size: clamp(46px, 13.5vw, 60px); }
  .choose__sub { margin-top: 12px; font-size: 16px; }

  /* the page after the last country, form, quote */
  .own__h { font-size: clamp(44px, 12.5vw, 56px); }
  .own__text { font-size: 17px; }
  .own__side .btn { margin-top: 20px; }
  .feature__title { font-size: 19px; margin-top: 20px; }
  .feature__text { font-size: 15px; }
  .book__note { margin-top: 16px; }
  .quote__text { font-size: clamp(30px, 8.6vw, 40px); }
  .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* the planet block on portrait phones and tablets: the planet is fitted to the width by globe.js and sits in the
   upper half; the bottom holds one compact card with the country tabs on top of it. Nothing scrolls inside the card. */
@media (max-width: 900px) and (orientation: portrait) {
  .globe__head { top: calc(var(--header-h) + 8px); font-size: 13px; }
  .globe__head span:last-child { display: none; }
  .globe__lbl { font-size: 11px; letter-spacing: 0.06em; }
  .globe__canvas { cursor: default; }

  .gcard {
    left: 0; right: 0; top: auto; bottom: calc(34px + env(safe-area-inset-bottom));
    width: min(100% - 24px, 560px); margin: 0 auto; max-height: none;
    transform: translateY(16px);
  }
  .gcard.is-show { transform: none; }
  .gcard__close { display: none; }                                   /* the phone card is always open */
  /* country tabs moved into the card by globe.js: the first row, over the top of the photo */
  .gcard .globe__list {
    position: absolute; z-index: 3; left: 0; right: 0; top: 0; transform: none;
    display: flex; flex-direction: row; gap: 0; padding: 0 16px;
    overflow-x: auto; scrollbar-width: none; pointer-events: auto;
  }
  .gcard .globe__list::-webkit-scrollbar { display: none; }
  .gcard .globe__item { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; padding: 12px 18px 10px 0; }
  .gcard .globe__item small { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-2); }
  .gcard .globe__item.is-on small { color: var(--ice); }
  .gcard .globe__item b { font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; }
  .gslide { height: 344px; padding: 54px 16px 14px; }               /* 344 + the gap = CARD in globe.js */
  .gslide__media img { object-position: var(--posm, var(--pos, 50% 50%)); }
  .gslide__media::after {
    background:
      linear-gradient(to bottom, rgba(11, 15, 18, 0.84) 0%, rgba(11, 15, 18, 0.5) 16%, rgba(11, 15, 18, 0) 46%),
      linear-gradient(to top, rgba(11, 15, 18, 0.97) 0%, rgba(11, 15, 18, 0.9) 30%, rgba(11, 15, 18, 0.55) 46%, rgba(11, 15, 18, 0) 62%);
  }
  .gslide__num b { font-size: 64px; }
  .gslide__num small { font-size: 12px; }
  .gnav { right: 14px; top: 54px; bottom: auto; }
  .gnav .arrow { width: 40px; height: 40px; }
  .gslide__name { margin-top: 0; font-size: 24px; }
  .gslide__sub { margin-top: 3px; font-size: 13px; }
  .gslide p { display: none; }                                        /* the route page carries the text */
  .gslide__stats { margin-top: 10px; min-height: 40px; gap: 8px; }
  .gslide__stats b { font-size: 20px; }
  .gslide__stats span { font-size: 10px; }
  .gslide__note { margin-top: 10px; min-height: 40px; font-size: 12px; }
  .gmenu { display: none; }                                           /* the dropdown is the desktop control */
  .gslide__acts { display: flex; }
}
@media (max-width: 900px) and (max-height: 720px) {
  .stage__layer.about { padding-top: calc(var(--header-h) + 6px); }
  .about__lead { font-size: 15px; }
  .numbers__grid { margin-top: 14px; gap: 10px 10px; }
  .num__v { font-size: 28px; }
  .vfan__stage { aspect-ratio: 1 / 0.7; }
  .vfan__card { width: 54%; left: 23%; }
  .vfan__idx { left: calc(23% + 12px); }
  .vfan__sound { right: calc(23% + 10px); }
}
@media (max-width: 900px) and (max-height: 620px) {
  .about__lead { font-size: 14px; }
  .num__v { font-size: 24px; }
  .num__l { font-size: 9px; }
  .vfan__stage { aspect-ratio: 1 / 0.6; }
  .vfan__card { width: 46%; left: 27%; }
  .vfan__idx { left: calc(27% + 10px); }
  .vfan__sound { right: calc(27% + 8px); }
  .vfan__nav { margin-top: 6px; }
}
@media (max-width: 900px) and (orientation: portrait) and (max-height: 700px) {
  .stage__layer.next .ncard { grid-template-columns: 112px minmax(0, 1fr) 36px; }
  .stage__layer.next .ncard__media { width: 112px; height: 112px; }
  .stage__layer.next .ncard__title { font-size: 24px; }
  .gcard .globe__item { padding: 9px 16px 8px 0; }
  .gslide { height: 300px; padding-top: 48px; }
  .gslide__num b { font-size: 54px; }
  .gnav { top: 48px; }
  .gnav .arrow { width: 36px; height: 36px; }
  .gslide__stats { margin-top: 8px; }
  .gslide__acts { margin-top: 10px; }
  .gslide__acts a { height: 34px; font-size: 12px; }
}

/* site56 · legal line under both request forms, honeypot field (bots fill it, guests never see it) */
.form__legal { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.form__legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* site57 · country code picker in the WhatsApp / phone field (tel-cc.js): the code in front of the number, one shared underline;
   the list is a fixed panel appended to <body>, above the sheets */
.tel { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-strong); transition: border-color 0.25s var(--ease); }
.tel:focus-within { border-bottom-color: var(--ink); }
.tel:has(input:invalid:not(:placeholder-shown)) { border-bottom-color: #d99b8b; }
.tel input { border-bottom: 0; min-width: 0; flex: 1 1 auto; }
.tel .tel__cc { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px 0 0; margin-right: 14px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 19px; font-weight: 300; cursor: pointer; white-space: nowrap; }
.tel .tel__cc svg { width: 14px; height: 14px; color: var(--ink-2); transition: color 0.2s var(--ease); }
.tel .tel__cc:hover svg, .tel .tel__cc[aria-expanded="true"] svg { color: var(--ink); }
.tel .tel__cc:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 4px; }
.tel .tel__flag { font-size: 20px; line-height: 1; }
.tel .tel__code { font-variant-numeric: tabular-nums; }
.tel.is-off .tel__cc { display: none; }
.telpick { position: fixed; z-index: 90; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(6px); transition: opacity 0.18s var(--ease), transform 0.22s var(--ease); overflow: hidden; }
.telpick[hidden] { display: none; }                          /* closed = out of the layout; the hidden attribute alone loses to display: flex */
.telpick:not(.is-on) { pointer-events: none; }
.telpick.is-on { opacity: 1; transform: none; }
.telpick__search { flex: none; width: 100%; height: 52px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.telpick__search::placeholder { color: var(--ink-3); }
.telpick__list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.telpick__list li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.telpick__list li.is-hi { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.telpick__list li.is-sel { color: var(--ink); }
.telpick__list li.is-sel .telpick__code { color: var(--lime); }
.telpick__flag { flex: none; width: 24px; font-size: 18px; line-height: 1; text-align: center; }
.telpick__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telpick__code { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.telpick__none { padding: 14px 18px; color: var(--ink-3); font-size: 15px; }
@media (max-width: 720px) { .tel .tel__cc { font-size: 17px; padding-right: 10px; margin-right: 10px; } .telpick__list li { padding: 12px 16px; } }
.qform .field { grid-column: 1 / -1; }   /* the sheet form stacks: the number needs the width once the code sits in front of it */