/* =========================================================
   Tripping Cube — styles (mobile first)
   ========================================================= */

:root {
  --ivory: #F7F2ED;
  --white: #FFFFFF;
  --ink: #171414;
  --ink-2: #5F5A55;
  --mist: #D8E5EA;
  --teal: #0E5F63;
  --ocean: #174B68;
  --sand: #D7A35F;
  --clay: #C46F3D;
  --line: rgba(23, 20, 20, .12);
  --line-light: rgba(255, 255, 255, .22);

  --font: "Instrument Sans", "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --gutter: 20px;
  --max: 1360px;
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 68px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--mist); color: var(--ink); }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Type ---------- */
.h2 {
  font-size: 2.25rem;
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 600;
  max-width: 16ch;
}
.h2--light { color: var(--white); }
.h3 { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.015em; font-weight: 600; }
.lede { color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 46ch; margin-top: 16px; }
.lede--light { color: rgba(255,255,255,.78); }
.section-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 18px;
}
.section-label span { font-variant-numeric: tabular-nums; color: var(--ink); }
.section-label::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.section-label--light { color: rgba(255,255,255,.7); }
.section-label--light span { color: var(--white); }

/* word mask splitter */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .w > i { display: inline-block; font-style: normal; transform: translateY(110%); will-change: transform; }
[data-split].is-static .w > i { transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .5s var(--ease), background .3s, color .3s, border-color .3s;
  border: 1px solid transparent;
}
.btn .arr { font-style: normal; transition: transform .45s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--ink { background: var(--ink); color: var(--ivory); }
.btn--ink:hover { background: #2a2626; }
.btn--ivory { background: var(--ivory); color: var(--ink); }
.btn--ivory:hover { background: var(--white); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { border-color: var(--line-light); color: var(--white); background: rgba(255,255,255,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost-light:hover { background: rgba(255,255,255,.16); }
.btn--small { height: 40px; padding: 0 16px; font-size: .85rem; }
.btn--block { width: 100%; }

.icon-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink); background: transparent;
  transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease);
}
.icon-btn:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.icon-btn:disabled { opacity: .3; pointer-events: none; }
.icon-btn--glass { border-color: rgba(255,255,255,.35); color: var(--white); background: rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.icon-btn--glass:hover { background: rgba(255,255,255,.9); color: var(--ink); border-color: transparent; }
.icon-btn--wa { display: none; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000; background: var(--ivory); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark { font-weight: 600; letter-spacing: -.02em; font-size: 1.3rem; }
.loader__line { width: 140px; height: 1px; background: var(--line); overflow: hidden; }
.loader__line span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .4s var(--ease); }
.loader__hint { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  color: var(--white);
  transition: color .4s, background .5s, border-color .5s;
  border-bottom: 1px solid transparent;
  opacity: 0; transform: translateY(-8px);
}
.header.is-ready { opacity: 1; transform: none; transition: opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s, color .4s, background .5s, border-color .5s; }
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(23,20,20,.28), rgba(23,20,20,0));
  transition: opacity .5s;
}
.header.is-scrolled { color: var(--ink); background: rgba(247,242,237,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.header.is-scrolled::before { opacity: 0; }
.header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); max-width: var(--max); margin: 0 auto; }
.brand { font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; white-space: nowrap; display: inline-flex; align-items: center; }

/* ---------- Logo ----------
   The mark is painted with the current text colour, so it follows the header from white over the hero to
   ink once scrolled, and stays white in the dark footer. Height is set; the aspect ratio does the rest. */
.logo {
  display: block; background-color: currentColor;
  -webkit-mask: var(--logo-src) no-repeat center / contain;
          mask: var(--logo-src) no-repeat center / contain;
}
.logo--long { --logo-src: url("../assets/brand/tc-logo.svg?v=3"); aspect-ratio: 682 / 144; }
.logo--icon { --logo-src: url("../assets/brand/tc-icon.svg"); aspect-ratio: 176 / 210; }
.brand .logo { height: 26px; }
.footer__brand .brand .logo { height: 40px; margin-bottom: 16px; }
.loader__mark .logo { height: 32px; }
/* Without mask support the mark cannot paint, so the wordmark shows as text instead. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .logo { display: none; }
  .brand .sr-only, .footer__brand .sr-only, .loader__mark .sr-only {
    position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; margin: 0; overflow: visible;
  }
}
.nav { display: none; }
.header__actions { display: flex; align-items: center; gap: 10px; }
.header .btn--ink { display: none; }
.header.is-scrolled .btn--ink { background: var(--ink); color: var(--ivory); }
.burger { width: 44px; height: 44px; display: grid; place-items: center; gap: 0; border-radius: 50%; position: relative; }
.burger span { position: absolute; width: 20px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), width .3s; }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); width: 14px; margin-left: 6px; }
.burger.is-open span:first-child { transform: rotate(45deg); }
.burger.is-open span:last-child { transform: rotate(-45deg); width: 20px; margin-left: 0; }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--ivory);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;   /* seven items can outgrow a short phone */
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__inner { min-height: 100%; display: flex; flex-direction: column; padding: calc(var(--header-h) + 24px) var(--gutter) 28px; }
.menu__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 20px; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.55rem, 4.3vh, 2.1rem); font-weight: 600; letter-spacing: -.02em; padding: clamp(8px, 1.4vh, 12px) 0; border-bottom: 1px solid rgba(255,255,255,.1); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .25s } .menu.is-open .menu__links a:nth-child(2) { transition-delay: .32s }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .39s } .menu.is-open .menu__links a:nth-child(4) { transition-delay: .46s }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: .53s } .menu.is-open .menu__links a:nth-child(6) { transition-delay: .6s }
.menu.is-open .menu__links a:nth-child(7) { transition-delay: .67s }
.menu__links a.nav__hl { color: var(--clay); }
.menu__links a span { font-size: .75rem; font-weight: 500; opacity: .5; letter-spacing: .1em; }
.menu__foot { margin-top: auto; display: grid; gap: 10px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 620px; overflow: hidden;
  background: var(--ink); color: var(--white);
}
.hero {
  /* Plane placement, shared by the plane and its shadow */
  --plane-w: min(50vw, 220px); --plane-x: 50%; --plane-y: 9%;
}
/* The stage is pinned to the screen and clipped to its section, so the page slides over a steady backdrop.
   The browser does this itself while scrolling, in step with the scroll, with no script chasing it (a script
   lags a frame behind on phones, which made the photo judder and showed a dark strip above it). */
.hero, .final { clip-path: inset(0); }
.hero__stage { position: fixed; left: 0; right: 0; top: 0; height: 100vh; }
/* With the browser bars hidden the screen is taller, so the stage matches that height where it is supported */
@supports (height: 100lvh) { .hero__stage { height: 100lvh; } }
.hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.hero__slide img { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; user-select: none; }
.hero__grade {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    linear-gradient(to bottom, rgba(23,20,20,.42) 0%, rgba(23,20,20,.08) 26%, rgba(23,20,20,.1) 48%, rgba(23,20,20,.78) 100%);
}

/* Clouds sit on the edges only; the middle and the text stay clear */
.clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; will-change: transform; opacity: .8; }
.cloud--1 { width: 80vw; top: -9%; left: -44%; opacity: .75; }
.cloud--2 { width: 76vw; top: -7%; right: -42%; opacity: .6; }
.cloud--3 { width: 70vw; top: 26%; right: -56%; opacity: .5; }
.cloud--4 { width: 70vw; top: 18%; left: -58%; opacity: .45; }

.plane-wrap {
  position: absolute; left: var(--plane-x); top: var(--plane-y); width: var(--plane-w);
  transform: translate(-50%, 0); pointer-events: none; will-change: transform; z-index: 2;
}
.plane { display: block; width: 100%; height: auto; will-change: transform; animation: airframe 2.6s ease-in-out infinite; }
/* Faint airframe shake: under a pixel, so it reads as "in flight", not as a glitch */
@keyframes airframe { 0%, 100% { translate: 0 0; } 25% { translate: .5px -.4px; } 50% { translate: -.4px .5px; } 75% { translate: .4px .3px; } }
/* Shadow falls on the ground: offset down-right, smaller (the plane is high up), soft */
.plane-shadow {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--plane-x) + var(--plane-w) * .14); top: calc(var(--plane-y) + var(--plane-w) * .5);
  width: calc(var(--plane-w) * .6); transform: translateX(-50%);
}
/* Opacity sits on the image: the intro fades the wrapper in, so wrapper opacity would be overridden */
.plane-shadow img { display: block; width: 100%; height: auto; filter: brightness(0) blur(5px); opacity: .14; will-change: transform; }

.hero__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) 112px;
  display: flex; flex-direction: column; gap: 16px;
}
.hero__status { display: flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.hero__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 4px rgba(215,163,95,.25); }
.hero__status b { font-weight: 600; color: var(--white); }
.hero__index { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8; }
.hero__title {
  font-size: 2.6rem; line-height: 1.02; letter-spacing: -.03em; font-weight: 600;
  max-width: 11ch;
}
.hero__sub { font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.82); max-width: 40ch; }
.hero__ctas { display: flex; flex-direction: column; gap: 10px; }
.hero__ctas .btn { width: 100%; }

.hero__controls { position: absolute; right: var(--gutter); bottom: 44px; display: flex; align-items: center; gap: 10px; }
.hero__progress { width: 56px; height: 1px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.hero__progress span { position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(0); }

.scroll-cue { position: absolute; left: var(--gutter); bottom: 44px; display: flex; align-items: center; gap: 10px; color: var(--white); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue__ring { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; }
.scroll-cue__ring svg { animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-3px); opacity: .6 } 50% { transform: translateY(3px); opacity: 1 } }
.hero__side { display: none; }

/* ---------- Search ---------- */
.search { position: relative; z-index: 5; margin-top: -28px; padding: 0 var(--gutter); }
.search__panel {
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg); padding: 18px; max-width: var(--max); margin: 0 auto;
  box-shadow: 0 20px 60px -30px rgba(23,20,20,.35);
  border: 1px solid rgba(23,20,20,.06);
}
.search__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px -4px 14px; padding: 4px; }
.search__tabs::-webkit-scrollbar { display: none; }
.search__tabs button { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; color: var(--ink-2); border: 1px solid transparent; transition: .3s; }
.search__tabs button.is-active { color: var(--ink); border-color: var(--line); background: var(--ivory); }
.search__fields { display: grid; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--ivory); border: 1px solid transparent; transition: border-color .3s, background .3s; }
.field:focus-within { border-color: var(--ink); background: var(--white); }
.field__label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select { border: 0; background: transparent; padding: 0; height: 26px; outline: none; width: 100%; font-weight: 500; appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23171414' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; padding-right: 20px; }
.field input::placeholder { color: rgba(95,90,85,.55); font-weight: 400; }
.field--line { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; }
.field--line:focus-within { background: transparent; border-bottom-color: var(--ink); }
.search__cta { height: 56px; }
.search__note { margin-top: 10px; font-size: .82rem; color: var(--teal); min-height: 1.2em; }

/* ---------- Rails / cards ---------- */
.rail { padding: 88px 0 40px; overflow: hidden; }
.rail__head { padding-bottom: 28px; }
.rail__viewport { position: relative; }
.rail__track { display: flex; gap: 14px; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__nav { display: flex; gap: 10px; margin-top: 22px; }
.rail__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rail__count b { color: var(--ink); font-variant-numeric: tabular-nums; }

.card {
  position: relative; flex: 0 0 78vw; max-width: 340px; scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden; background: var(--ink); color: var(--white);
  aspect-ratio: 3 / 4; transform-style: preserve-3d; isolation: isolate;
}
.card__media { position: absolute; inset: 0; overflow: hidden; }
.card__media img { width: 100%; height: 116%; object-fit: cover; will-change: transform; transition: transform .8s var(--ease); opacity: 0; }
.card__media img.is-loaded { opacity: 1; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__grade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,20,.82) 0%, rgba(23,20,20,.1) 55%, rgba(23,20,20,.15) 100%); }
.card__top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; }
.chip-region { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); }
.card__save { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; color: var(--white); transition: .3s; }
.card__save.is-saved, .card__save:hover { background: var(--white); color: var(--ink); }
.card__body { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.card__index { font-size: .7rem; letter-spacing: .12em; opacity: .7; font-variant-numeric: tabular-nums; }
/* "Fixed departures" beside the place, so the offer tag at the top stays one short line */
.card__fixed { font-style: normal; }
.card__fixed::before { content: '·'; margin: 0 .5em; }
.card__name { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.card__mood { font-size: .86rem; line-height: 1.45; color: rgba(255,255,255,.82); max-width: 30ch; }
.card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); font-size: .78rem; }
.card__meta a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.card__meta a .arr { font-style: normal; transition: transform .4s var(--ease); }
.card:hover .card__meta a .arr { transform: translateX(4px); }

/* ---------- International ---------- */
.intl { position: relative; padding: 88px 0 90px; color: var(--white); background: var(--ocean); overflow: hidden; }
.intl__bg { position: absolute; inset: 0; }
.intl__bg img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; opacity: 0; transition: opacity 1.2s; will-change: transform; }
.intl__bg img.is-loaded { opacity: .55; }
.intl__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(23,75,104,.35), rgba(23,20,20,.75)); }
.intl__head { position: relative; padding-bottom: 28px; }
.intl__nav { display: flex; gap: 10px; margin-top: 22px; }
.intl__scroller { position: relative; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.intl__scroller::-webkit-scrollbar { display: none; }
.intl__track { display: flex; gap: 14px; padding: 0 var(--gutter); }
.intl .card { flex-basis: 74vw; }

/* ---------- Departures ---------- */
.departures { padding: 96px 0; }
.departures__head { display: grid; gap: 8px; margin-bottom: 36px; }
.departures__list { border-top: 1px solid var(--line); }
.dep {
  display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--line);
  align-items: start; position: relative; transition: background .3s;
}
.dep__date { grid-row: span 3; display: flex; flex-direction: column; line-height: 1; }
.dep__date b { font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; }
.dep__date span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.dep__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.dep__meta { font-size: .82rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dep__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.dep__price { font-weight: 600; }
.dep__price small { font-weight: 400; color: var(--ink-2); font-size: .75rem; margin-left: 4px; }
.dep__status { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.dep__status--hot { color: var(--clay); border-color: rgba(196,111,61,.4); }
.dep__status--wait { color: var(--ink-2); background: rgba(23,20,20,.05); }
.dep__actions { grid-column: 2; display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.departures__foot { margin-top: 28px; }

/* ---------- Custom ---------- */
.custom { padding: 96px 0; background: var(--white); }
.custom__grid { display: grid; gap: 40px; }
.custom__points { margin-top: 28px; display: grid; gap: 14px; }
.custom__points li { padding-left: 18px; position: relative; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.custom__points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--ink); }
.custom__points b { color: var(--ink); font-weight: 600; }

.brief { background: var(--ivory); border-radius: var(--radius-lg); padding: 22px; display: grid; gap: 18px; position: relative; }
.brief__label, .field--line .field__label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.brief__step { display: grid; gap: 10px; }
.brief__row { display: grid; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: .86rem; font-weight: 500; background: var(--white); transition: .3s; }
.chip.is-active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1rem; line-height: 1; }
.stepper input { width: 44px; text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.range { display: flex; align-items: center; gap: 14px; }
.range input { flex: 1; accent-color: var(--ink); }
.range output { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }
.brief__fine { font-size: .76rem; color: var(--ink-2); text-align: center; }
.brief__done { padding: 14px 16px; border-radius: 14px; background: var(--mist); color: var(--ocean); font-size: .92rem; }

/* ---------- Corporate ---------- */
.corp { background: var(--ink); color: var(--white); }
.corp__pin { position: relative; min-height: 100svh; overflow: hidden; }
.corp__media { position: absolute; inset: 0; }
.corp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); }
.corp__media img.is-active { opacity: 1; transform: scale(1); }
.corp__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,20,.92) 10%, rgba(23,20,20,.45) 60%, rgba(23,20,20,.3)); }
.corp__body { position: relative; padding-top: 88px; padding-bottom: 60px; display: grid; gap: 34px; }
.corp__cta { margin-top: 26px; }
.corp__list { display: grid; }
.corp__item { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16); display: grid; grid-template-columns: 34px 1fr; gap: 6px 10px; transition: opacity .5s; cursor: pointer; }
.corp__item span { font-size: .72rem; letter-spacing: .1em; opacity: .6; padding-top: 6px; font-variant-numeric: tabular-nums; }
.corp__item h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.corp__item p { grid-column: 2; font-size: .9rem; color: rgba(255,255,255,.72); line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .5s, margin .4s; }
.corp__item.is-active p { max-height: 120px; opacity: 1; margin-top: 6px; }
.corp__item:not(.is-active) { opacity: .55; }
.corp__item:hover { opacity: 1; }
.corp__form-wrap { padding-top: 72px; padding-bottom: 96px; display: grid; gap: 30px; }
.corp__form-head .lede { color: rgba(255,255,255,.7); }
.corp-form { display: grid; gap: 14px; }
.corp-form .field--line { border-bottom-color: rgba(255,255,255,.22); }
.corp-form .field--line:focus-within { border-bottom-color: var(--white); }
.corp-form .field__label { color: rgba(255,255,255,.6); }
.corp-form input, .corp-form select { color: var(--white); }
.corp-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.corp-form select option { color: var(--ink); }
.corp-form__cta { margin-top: 8px; background: var(--ivory); color: var(--ink); }
.corp-form__cta:hover { background: var(--white); }
.corp-form .brief__done { background: rgba(216,229,234,.14); color: var(--white); }

/* ---------- Proof ---------- */
.proof { padding: 96px 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 40px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat b { display: block; font-size: 2.2rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: .78rem; color: var(--ink-2); margin-top: 6px; }
.quotes { display: grid; gap: 14px; margin-top: 40px; }
.quote { background: var(--white); border-radius: var(--radius); padding: 24px; display: grid; gap: 18px; border: 1px solid rgba(23,20,20,.05); }
.quote p { font-size: 1.15rem; line-height: 1.35; letter-spacing: -.01em; font-weight: 500; }
.quote p::before { content: "“"; color: var(--sand); margin-right: 2px; }
.quote footer { font-size: .8rem; color: var(--ink-2); display: grid; gap: 2px; }
.quote footer b { color: var(--ink); font-weight: 600; }
.logos { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .8rem; color: var(--ink-2); }
.logos span { white-space: nowrap; }

/* ---------- Stories ---------- */
.stories { padding: 0 0 96px; }
.stories__head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; margin-bottom: 30px; }
.stories__grid { display: grid; gap: 22px; }
.story { display: grid; gap: 12px; }
.story__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--mist); }
.story__media img { width: 100%; height: 116%; object-fit: cover; opacity: 0; transition: opacity .8s, transform .8s var(--ease); will-change: transform; }
.story__media img.is-loaded { opacity: 1; }
.story:hover .story__media img { transform: scale(1.03); }
.story__tag { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 10px; }
.story__tag i { font-style: normal; opacity: .6; }
.story h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }

/* ---------- Final CTA ---------- */
.final {
  /* On phones and tablets the heading sits low, under the plane; on desktop the plane moves aside instead */
  position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--white); background: var(--ocean); padding: 100px 0;
  /* Plane placement, read by .plane-wrap and .plane-shadow, exactly as in the hero */
  /* Right of centre, clear of the heading on the left, and low enough to clear the menu bar */
  --plane-w: min(62vw, 280px); --plane-x: 64%; --plane-y: 11%;
}
/* The corporate page still uses a plain background image here rather than the home page's held-still stage */
.final__bg { position: absolute; inset: 0; overflow: hidden; }
.final__bg img { position: absolute; left: 0; top: -15%; width: 100%; height: 135%; object-fit: cover; opacity: 0; transition: opacity 1.2s; will-change: transform; }
.final__bg img.is-loaded { opacity: 1; }
.final__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(23,20,20,.5), rgba(23,20,20,.62)); }
.final__stage { overflow: hidden; }
/* On phones and tablets the closing section is shorter than the screen, so a backdrop pinned to the screen
   could leave the plane above the section, out of sight. There it travels with the section instead. */
@media (max-width: 1079px) {
  .final__stage { position: absolute; top: 0; height: 100%; }
}
.final__grade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(23,20,20,.52) 0%, rgba(23,20,20,.34) 34%, rgba(23,20,20,.62) 100%); }
.final .plane-wrap, .final .plane-shadow { z-index: 1; }
.final__content { position: relative; display: grid; gap: 28px; }
.final__title { font-size: 2.5rem; line-height: 1.02; letter-spacing: -.03em; font-weight: 600; max-width: 14ch; }
.final__ctas { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.78); padding: 60px 0 28px; font-size: .9rem; }
.footer__grid { display: grid; gap: 34px; }
.footer__brand .brand { color: var(--white); margin-bottom: 12px; }
.footer__brand p { max-width: 36ch; color: rgba(255,255,255,.6); line-height: 1.55; }
.footer__col { display: grid; gap: 8px; justify-items: start; }
.footer__col h4 { color: var(--white); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; font-weight: 500; }
.footer__col a { color: rgba(255,255,255,.7); transition: color .3s; }
.footer__col a:hover { color: var(--white); }
.footer__jobs { color: inherit; transition: color .3s; }
.footer__jobs:hover { color: var(--white); }
.footer__jobs i { font-style: normal; }
.footer__bar { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; font-size: .76rem; color: rgba(255,255,255,.5); }

.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: var(--white); display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transform: translateY(90px); transition: transform .6s var(--ease);
}
.wa-float.is-visible { transform: none; }

/* ---------- Reveal helpers ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- Card link + price ---------- */
.card__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.card__link:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
.card__top { z-index: 3; }
.card__top .chip-region { pointer-events: none; }
.card__meta b { font-weight: 600; }
.card__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.card__cta .arr { font-style: normal; transition: transform .4s var(--ease); }
.card:hover .card__cta .arr { transform: translateX(4px); }
.hero__status { cursor: pointer; }

.form-error, .enq__error { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(196,111,61,.12); color: #8a4420; font-size: .86rem; }
.form-error a, .enq__error a { text-decoration: underline; font-weight: 600; }
.corp-form .form-error { grid-column: 1 / -1; background: rgba(196,111,61,.2); color: #ffd9c2; }
.enq__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn.is-loading { opacity: .6; pointer-events: none; }
.btn.is-loading .arr { animation: nudge .8s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Overlays ---------- */
html.has-overlay, html.has-overlay body { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 200; }
.overlay[hidden] { display: none; }
.overlay__backdrop { position: absolute; inset: 0; background: rgba(23,20,20,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .5s var(--ease); }
.overlay.is-open .overlay__backdrop { opacity: 1; }
.overlay__close { position: absolute; top: 14px; right: 14px; z-index: 5; }
.overlay__close--ink { position: static; width: 40px; height: 40px; }

/* Package */
.pkg { background: var(--white); border-radius: var(--radius); border: 1px solid rgba(23,20,20,.06); overflow: hidden; }
.pkg__head { width: 100%; display: grid; grid-template-columns: 76px 1fr 20px; gap: 14px; align-items: center; padding: 12px; text-align: left; }
.pkg__thumb { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--mist); }
.pkg__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pkg__info { display: grid; gap: 4px; min-width: 0; }
.pkg__meta { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pkg__meta em { font-style: normal; color: var(--clay); }
.pkg__title { font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.pkg__price { font-size: .84rem; color: var(--ink-2); }
.pkg__price b { color: var(--ink); font-weight: 600; }
.pkg__chev { width: 10px; height: 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .4s var(--ease); justify-self: center; }
.pkg__head[aria-expanded="true"] .pkg__chev { transform: rotate(-135deg); }
.pkg__body { padding: 4px 16px 18px; display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.pkg__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.pkg__tiers div { background: var(--ivory); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.pkg__tiers span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pkg__tiers b { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pkg__tiers-empty { font-weight: 600; }
.pkg__note { font-size: .78rem; color: var(--ink-2); margin-top: -6px; }
.pkg__overview { color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.pkg__section h4 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; margin-bottom: 8px; }
.itin { display: grid; counter-reset: none; position: relative; }
.itin > li { position: relative; padding-left: 22px; }
.itin > li::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: -2px; width: 1px; background: var(--line); }
.itin > li:last-child::before { display: none; }
.itin > li::after { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); }
.itin details { border-bottom: 1px solid var(--line); }
.itin > li:last-child details { border-bottom: 0; }
.itin summary { list-style: none; cursor: pointer; display: grid; gap: 2px; padding: 9px 0; font-size: .92rem; }
.itin summary::-webkit-details-marker { display: none; }
.itin__day { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.itin__title { font-weight: 600; line-height: 1.3; }
.itin details[open] summary .itin__title { color: var(--teal); }
.itin ul { padding: 0 0 12px 12px; display: grid; gap: 6px; }
.itin ul li { font-size: .86rem; color: var(--ink-2); line-height: 1.5; position: relative; }
.itin ul li::before { content: ""; position: absolute; left: -12px; top: .65em; width: 5px; height: 1px; background: var(--ink-2); }
.pkg__lists { display: grid; gap: 8px; }
.pkg__lists details { background: var(--ivory); border-radius: 12px; padding: 0 14px; }
.pkg__lists summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 600; font-size: .9rem; display: flex; justify-content: space-between; }
.pkg__lists summary::-webkit-details-marker { display: none; }
.pkg__lists summary i { font-style: normal; font-weight: 500; color: var(--ink-2); font-size: .8rem; }
.ticks, .crosses { display: grid; gap: 6px; padding-bottom: 14px; }
.ticks li, .crosses li { font-size: .85rem; color: var(--ink-2); padding-left: 20px; position: relative; line-height: 1.45; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 600; }
.crosses li::before { content: "–"; position: absolute; left: 2px; color: var(--clay); font-weight: 600; }
.pkg__actions { display: grid; gap: 8px; }

/* Enquiry modal */
.enq__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 94svh;
  background: var(--white); border-radius: 24px 24px 0 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 14px 18px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .55s var(--ease);
}
.enq.is-open .enq__panel { transform: none; }
.enq { z-index: 210; }
.enq__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.enq__progress { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.enq__progress span { height: 3px; border-radius: 3px; background: var(--line); transition: background .4s; }
.enq__progress span.is-on { background: var(--ink); }
.enq__head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 18px; }
.enq__thumb { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--mist); }
.enq__thumb[hidden] { display: none; }
.enq__thumb img { width: 100%; height: 100%; object-fit: cover; }
.enq__label { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.enq__title { font-size: 1.3rem; line-height: 1.15; letter-spacing: -.015em; font-weight: 600; margin-top: 2px; }
.enq__sub { color: var(--ink-2); font-size: .85rem; margin-top: 2px; }
.enq__form, .enq__step { display: grid; gap: 16px; }
.enq__step[hidden] { display: none; }
.enq__row { display: grid; gap: 16px; }
.enq__row > [hidden] { display: none; }
.enq__group { display: grid; gap: 10px; }
.enq .chips { gap: 6px; }
.enq .chip { padding: 8px 12px; font-size: .84rem; background: var(--ivory); border-color: transparent; }
.enq .chip.is-active { background: var(--ink); color: var(--ivory); }
.enq__counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.counter { background: var(--ivory); border-radius: 14px; padding: 10px 4px; display: grid; gap: 8px; justify-items: center; min-width: 0; }
.counter .stepper { gap: 2px; }
.counter .stepper button { width: 28px; height: 28px; border-radius: 50%; background: var(--white); border-color: transparent; font-size: 1.05rem; flex: 0 0 auto; }
.counter .stepper input { width: 28px; padding: 0; border: 0; background: transparent; font-weight: 600; font-size: 1.05rem; }
.enq textarea { border: 0; background: transparent; resize: vertical; outline: none; padding: 4px 0; width: 100%; min-height: 64px; }
.enq__estimate { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--mist); color: var(--ocean); }
.enq__estimate[hidden] { display: none; }
.enq__estimate span { font-size: .8rem; }
.enq__estimate b { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.enq__estimate small { font-weight: 400; font-size: .72rem; }
.enq__nav { margin-top: 4px; }
.enq__nav--split { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.enq__success { display: grid; gap: 14px; justify-items: start; padding: 10px 0 6px; }
.enq__success[hidden] { display: none; }
.enq__success p { color: var(--ink-2); }
.enq__success .enq__nav--split { width: 100%; grid-template-columns: 1fr auto; }
.enq__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--mist); color: var(--teal); display: grid; place-items: center; }


/* ---------- Shared: marquee, reviews rail, footer contact ---------- */
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::after { right: 0; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { height: 64px; width: auto; border-radius: 12px; background: #fff; padding: 8px 14px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
.corp__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.corp__ctas .corp__cta { margin-top: 0; }
.corp__clients { position: relative; padding: 28px 0 40px; }
.corp__clients .marquee__track img { height: 56px; }
.quotes-rail { margin-top: 40px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.quotes-rail::-webkit-scrollbar { display: none; }
.quotes-rail__track { display: flex; gap: 14px; padding: 0 var(--gutter); width: max-content; }
.quotes-rail .quote { width: min(82vw, 380px); scroll-snap-align: start; align-content: space-between; }
.quote__stars { color: var(--sand); letter-spacing: 2px; font-size: .9rem; }
.quote p::before { content: none; }
.footer__contact { font-style: normal; display: grid; gap: 4px; margin-top: 18px; color: rgba(255,255,255,.7); }
.footer__contact a:hover { color: var(--white); }
.footer__col a { font-size: .88rem; }
@media (min-width: 1080px) {
  .quotes-rail__track { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-right: var(--gutter); }
  .quotes-rail .quote { width: 400px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  #footerDomestic, #footerInternational { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  #footerDomestic h4, #footerInternational h4 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; } }

/* =========================================================
   Tablet
   ========================================================= */
@media (min-width: 720px) {
  :root { --gutter: 32px; --header-h: 76px; }
  .brand .logo { height: 30px; }
  .h2 { font-size: 3rem; }
  .lede { font-size: 1.08rem; }
  .hero__title { font-size: 4rem; max-width: 12ch; }
  .hero__ctas { flex-direction: row; }
  .hero__ctas .btn { width: auto; }
  .hero__content { padding-bottom: 130px; gap: 22px; }
  .search { margin-top: -80px; }
  .search__panel { padding: 22px; }
  .search__fields { grid-template-columns: 1fr 1fr; }
  .search__cta { grid-column: span 2; }
  .card { flex-basis: 360px; max-width: none; }
  .intl .card { flex-basis: 360px; }
  .departures__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; }
  .dep { grid-template-columns: 90px 1fr auto; gap: 12px 24px; align-items: center; padding: 24px 0; }
  .dep__date { grid-row: span 2; }
  .dep__date b { font-size: 2.3rem; }
  .dep__row { margin: 0; justify-content: flex-start; gap: 18px; }
  .dep__actions { grid-column: 2 / span 2; margin-top: 0; }
  .brief { padding: 30px; }
  .brief__row { grid-template-columns: 1fr 1fr; gap: 20px; }
  .corp__body { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; padding-top: 120px; }
  .corp__item h3 { font-size: 1.6rem; }
  .corp-form { grid-template-columns: 1fr 1fr; gap: 14px 28px; }
  .corp-form__cta, .corp-form .brief__done { grid-column: span 2; justify-self: start; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); }
  .stories__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .stories__grid { grid-template-columns: 1fr 1fr; }
  .final__title { font-size: 3.6rem; }
  .final { --plane-w: min(44vw, 380px); --plane-x: 72%; --plane-y: 9%; }
  .final__ctas { flex-direction: row; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__bar { flex-direction: row; justify-content: space-between; }
  .pkg__head { grid-template-columns: 96px 1fr 20px; padding: 14px; }
  .pkg__thumb { width: 96px; height: 76px; }
  .pkg__body { padding: 18px 20px 20px; }
  .pkg__lists { grid-template-columns: 1fr 1fr; align-items: start; }
  .itin summary { grid-template-columns: 56px 1fr; gap: 6px; align-items: baseline; }
  .itin ul { padding-left: 62px; }
  .counter .stepper button { width: 32px; height: 32px; }
  .counter .stepper input { width: 36px; }
  .pkg__actions { grid-template-columns: 1fr auto; }
  .enq__panel { left: 50%; right: auto; bottom: auto; top: 50%; width: 600px; max-height: 90vh; border-radius: 26px; padding: 22px 30px 30px;
    transform: translate(-50%, -46%); opacity: 0; transition: transform .55s var(--ease), opacity .4s; }
  .enq.is-open .enq__panel { transform: translate(-50%, -50%); opacity: 1; }
  .enq__row { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Desktop
   ========================================================= */
@media (min-width: 1080px) {
  :root { --gutter: 48px; --header-h: 84px; }
  .h2 { font-size: 3.75rem; }
  .nav { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); font-size: .9rem; font-weight: 500; white-space: nowrap; }
  .nav a { position: relative; opacity: .85; transition: opacity .3s; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: currentColor; transition: right .45s var(--ease); }
  .nav a:hover { opacity: 1; }
  .nav a:hover::after { right: 0; }
  /* Corporate: set apart as an outlined pill, which reads on both the see-through and the solid header */
  .nav a.nav__hl { opacity: 1; padding: 7px 15px; margin: -8px 0; border: 1px solid currentColor; border-radius: 999px; transition: opacity .3s, background .3s; }
  .nav a.nav__hl::after { display: none; }
  .nav a.nav__hl:hover { background: rgba(127,127,127,.14); }
  .header .btn--ink { display: inline-flex; background: rgba(255,255,255,.12); color: var(--white); border-color: rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .header .btn--ink:hover { background: var(--white); color: var(--ink); }
  .icon-btn--wa { display: inline-flex; width: 40px; height: 40px; border-color: rgba(255,255,255,.3); color: var(--white); }
  .header.is-scrolled .icon-btn--wa { border-color: var(--line); color: var(--ink); }
  .header.is-scrolled .icon-btn--wa:hover { background: var(--ink); color: var(--ivory); }
  .burger { display: none; }
  .wa-float { display: none; }

  .hero { min-height: 700px; }
  .hero__content { padding-bottom: 150px; max-width: var(--max); margin: 0 auto; }
  .hero__title { font-size: 5.6rem; max-width: 13ch; }
  .hero__sub { font-size: 1.1rem; max-width: 48ch; }
  .hero__status { font-size: .82rem; }
  .hero__index { margin-left: 24px; }
  .hero__controls { right: var(--gutter); bottom: 56px; }
  .scroll-cue { left: var(--gutter); bottom: 56px; }
  .hero__side { display: block; position: absolute; right: var(--gutter); top: 50%; transform: rotate(90deg) translateX(-50%); transform-origin: right top; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; }

  .search { margin-top: -92px; }
  .search__panel { padding: 24px 26px; border-radius: 30px; }
  .search__fields { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 12px; align-items: stretch; }
  .search__cta { grid-column: auto; height: auto; padding: 0 26px; }

  /* Domestic rail: scrolls sideways on its own, like International, so the page always scrolls freely */
  .rail { padding: 130px 0 70px; }
  .rail__head { padding-top: 0; padding-bottom: 40px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
  .rail__head .lede { justify-self: end; margin-top: 0; }
  .rail__nav { grid-column: 2; justify-self: end; margin-top: 0; }
  .rail__track { gap: 22px; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .card { flex-basis: 420px; aspect-ratio: 3/4; max-height: 58vh; }
  .card__name { font-size: 2.1rem; }
  .rail__foot { margin-top: 36px; }

  .intl { padding: 130px 0 150px; }
  .intl__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; padding-bottom: 40px; }
  .intl__head .lede { margin-top: 0; }
  .intl__nav { grid-column: 2; justify-self: end; margin-top: 0; }
  .intl__track { gap: 22px; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .intl .card { flex-basis: 400px; }

  .departures, .custom, .proof { padding: 140px 0; }
  .dep { grid-template-columns: 110px 1.5fr 1fr auto; gap: 8px 32px; padding: 28px 0; }
  .dep__date { grid-row: auto; }
  .dep__actions { grid-column: auto; margin-top: 0; flex-wrap: nowrap; }
  .dep:hover { background: linear-gradient(to right, rgba(23,20,20,.03), transparent); }
  .dep__title { font-size: 1.35rem; }
  .custom__grid { grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
  .brief { padding: 38px; position: sticky; top: 110px; }
  .corp__body { padding-top: 160px; padding-bottom: 90px; gap: 90px; grid-template-columns: 1.15fr 1fr; }
  .corp__item { padding: 22px 0; }
  .corp__item h3 { font-size: 2rem; }
  .corp__form-wrap { padding-top: 110px; padding-bottom: 140px; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
  .stat b { font-size: 3rem; }
  .stories { padding-bottom: 140px; }
  .stories__grid { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .stories .story:nth-child(1) { grid-column: span 2; }
  .stories .story:nth-child(1) .story__media { aspect-ratio: 16/10; }
  .final { min-height: 92vh; align-items: center; }
  .final__title { font-size: 5rem; max-width: 12ch; }
  /* The plane's left edge never comes further left than 60% of the width, where the heading ends */
  .final { --plane-w: min(52svh, 42vw, 620px); --plane-x: max(74%, calc(60% + var(--plane-w) / 2)); --plane-y: 4%; }
  .footer { padding-top: 90px; }
}

@media (min-width: 1440px) {
  .hero__title { font-size: 6.4rem; }
  .card { flex-basis: 460px; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .enq__panel { transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .cloud, .plane, .plane-wrap { will-change: auto; }
  .plane { animation: none; }
  .scroll-cue__ring svg { animation: none; }
  [data-split] .w > i { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .header { opacity: 1; transform: none; }
}

/* =========================================================
   Hero placement by screen size
   ========================================================= */
@media (min-width: 720px) {
  .hero { --plane-w: min(32vw, 300px); --plane-x: 74%; --plane-y: 9%; }
  .cloud--1 { width: 58vw; top: -14%; left: -30%; }
  .cloud--2 { width: 52vw; top: -10%; right: -28%; }
  .cloud--3 { width: 50vw; top: 34%; right: -36%; }
  .cloud--4 { display: none; }
}
@media (min-width: 1080px) {

  .cloud--1 { width: 36vw; top: -22%; left: -16%; }
  .cloud--2 { width: 40vw; top: -12%; right: -16%; }
  .cloud--3 { width: 36vw; top: 42%; right: -22%; }
  .cloud--4 { display: block; width: 30vw; top: auto; bottom: -16%; left: auto; right: -12%; opacity: .35; }
}

/* =========================================================
   Header: hides while scrolling down, returns when scrolling up or at the top
   ========================================================= */
.header.is-ready { transition: opacity 1s var(--ease) .2s, transform .45s var(--ease), color .4s, background .5s, border-color .5s; }
.header.is-ready.is-hidden { transform: translateY(-110%); }
body.header-hidden .sfilters { top: 0; }
body.header-hidden .pbody__aside { top: 24px; }


/* Shorter laptop screens: smaller headline so the hero text never crowds the header */
@media (min-width: 1080px) and (max-height: 860px) {
  .hero__title { font-size: 4.4rem; }
  .hero__content { padding-bottom: 128px; gap: 18px; }
  .hero { --plane-y: 10%; }
}

/* Landscape screens from 900px: big plane on the right, sized from the screen height.
   It may run off the right edge; the headline is kept to the left 54% so they never meet. */
@media (min-width: 900px) and (orientation: landscape) {
  .hero { --plane-w: min(76svh, 58vw, 880px); --plane-x: 88%; --plane-y: 9%; }
  .hero__title { max-width: min(13ch, 54vw); }
  .hero__sub { max-width: min(48ch, 52vw); }
  .hero__side { display: none; }
}
@media (min-width: 900px) and (orientation: landscape) and (max-height: 860px) {
  .hero { --plane-y: 10%; }
}

/* =========================================================
   Clouds drift across the hero in lanes along the top, like real clouds passing.
   Lanes stay above the headline; front clouds pass over the plane. JS moves them sideways.
   ========================================================= */
.hero .cloud { left: 0; right: auto; bottom: auto; display: block; }
.hero .cloud--1 { top: -13%; width: 88vw; opacity: .7; }
.hero .cloud--2 { top: -6%;  width: 70vw; opacity: .45; }
.hero .cloud--3 { top: -9%;  width: 76vw; opacity: .5; }
.hero .cloud--4 { top: 1%;   width: 58vw; opacity: .32; }
@media (min-width: 720px) {
  .hero .cloud--1 { top: -15%; width: 58vw; }
  .hero .cloud--2 { top: -4%;  width: 44vw; }
  .hero .cloud--3 { top: -10%; width: 50vw; }
  .hero .cloud--4 { top: 3%;   width: 36vw; }
}
@media (min-width: 1080px) {
  .hero .cloud--1 { top: -16%; width: 46vw; }
  .hero .cloud--2 { top: -3%;  width: 32vw; }
  .hero .cloud--3 { top: -10%; width: 38vw; }
  .hero .cloud--4 { top: 4%;   width: 26vw; }
}
/* Wide landscape screens: with the big plane on the right the headline keeps to the left half, so hold it at
   5.6rem (not the 6.4rem used before) and it sits in three lines instead of four */
@media (min-width: 1440px) and (orientation: landscape) { .hero__title { font-size: 5.6rem; } }

/* =========================================================
   Clouds v3: six clouds spread down the whole hero at different heights, drifting both ways.
   Each cloud is three overlapping puffs whose density rises and falls on its own timing,
   so the cloud slowly changes shape inside as it drifts. Lower clouds are thinner, so text stays readable.
   ========================================================= */
.hero .cloud { position: absolute; left: 0; right: auto; bottom: auto; display: block; aspect-ratio: 800 / 360; will-change: transform; pointer-events: none; }
.hero .puff { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: opacity; }
.hero .puff--a { animation: puffA 11s ease-in-out infinite alternate; }
.hero .puff--b { translate: -16% -9%; scale: .8; animation: puffB 14s ease-in-out infinite alternate; }
.hero .puff--c { translate: 17% 7%; scale: .72; animation: puffC 9s ease-in-out infinite alternate; }
@keyframes puffA { 0% { opacity: .95; } 55% { opacity: .62; } 100% { opacity: .85; } }
@keyframes puffB { 0% { opacity: .2; scale: .78; } 100% { opacity: .85; scale: .84; } }
@keyframes puffC { 0% { opacity: .8; } 50% { opacity: .28; } 100% { opacity: .6; } }
/* different rhythm per cloud so no two breathe together */
.hero .cloud--2 .puff { animation-duration: 13s, 13s; } .hero .cloud--2 .puff--b { animation-delay: -5s; }
.hero .cloud--3 .puff--a { animation-duration: 15s; animation-delay: -7s; } .hero .cloud--3 .puff--c { animation-delay: -3s; }
.hero .cloud--4 .puff--b { animation-duration: 10s; animation-delay: -2s; } .hero .cloud--4 .puff--c { animation-duration: 12s; }
.hero .cloud--5 .puff--a { animation-delay: -4s; } .hero .cloud--5 .puff--b { animation-duration: 17s; animation-delay: -9s; }
.hero .cloud--6 .puff--a { animation-duration: 12s; animation-delay: -6s; } .hero .cloud--6 .puff--c { animation-duration: 11s; animation-delay: -8s; }

/* Phones */
.hero .cloud--1 { top: 3%;  width: 72vw; opacity: .62; }
.hero .cloud--2 { top: 29%; width: 60vw; opacity: .34; }
.hero .cloud--3 { top: 57%; width: 64vw; opacity: .26; }
.hero .cloud--4 { top: -6%; width: 86vw; opacity: .55; }
.hero .cloud--5 { top: 43%; width: 76vw; opacity: .24; }
.hero .cloud--6 { top: 72%; width: 90vw; opacity: .3; }
@media (min-width: 720px) {
  .hero .cloud--1 { top: 5%;  width: 46vw; }
  .hero .cloud--2 { top: 30%; width: 38vw; }
  .hero .cloud--3 { top: 56%; width: 42vw; }
  .hero .cloud--4 { top: -7%; width: 56vw; }
  .hero .cloud--5 { top: 43%; width: 48vw; }
  .hero .cloud--6 { top: 71%; width: 58vw; }
}
@media (min-width: 1080px) {
  .hero .cloud--1 { top: 6%;  width: 30vw; opacity: .6; }
  .hero .cloud--2 { top: 31%; width: 24vw; opacity: .36; }
  .hero .cloud--3 { top: 57%; width: 28vw; opacity: .28; }
  .hero .cloud--4 { top: -8%; width: 38vw; opacity: .55; }
  .hero .cloud--5 { top: 43%; width: 32vw; opacity: .25; }
  .hero .cloud--6 { top: 71%; width: 40vw; opacity: .3; }
}
/* Headline and subtitle keep their contrast when a cloud drifts behind them */
.hero__title { text-shadow: 0 2px 28px rgba(23,20,20,.28); }
.hero__sub { text-shadow: 0 1px 16px rgba(23,20,20,.4); }
@media (prefers-reduced-motion: reduce) { .hero .puff { animation: none; } }

/* ---------- Phone OTP ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.otp { grid-column: 1 / -1; display: grid; gap: 14px; padding: 6px 0 4px; animation: otpIn .5s var(--ease) both; }
@keyframes otpIn { from { opacity: 0; transform: translateY(10px); } }
.otp__eyebrow { margin: 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.otp__lead { margin: 0; font-size: 1rem; line-height: 1.5; }
.otp__lead b { font-weight: 600; white-space: nowrap; }
.otp__code { position: relative; display: block; max-width: 360px; }
.otp__code input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; /* 16px stops iOS zooming */
  border: 0; background: transparent; color: transparent; caret-color: transparent; z-index: 1;
}
.otp__boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp__boxes i {
  font-style: normal; display: grid; place-items: center; aspect-ratio: 5 / 6; border-radius: 12px;
  border: 1px solid rgba(128,122,116,.38); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.otp__boxes i.is-on { border-color: currentColor; box-shadow: 0 0 0 3px rgba(128,122,116,.16); }
.otp.is-busy .otp__boxes { opacity: .55; }
.otp.is-done .otp__boxes i { border-color: #3f8f5b; background: rgba(63,143,91,.1); }
.otp__msg { margin: 0; min-height: 1.3em; font-size: .86rem; opacity: .8; }
.otp__msg.is-err { color: #b4532a; opacity: 1; }
.otp__msg.is-ok { color: #3f8f5b; opacity: 1; }
.corp-form .otp__msg.is-err { color: #ffb38c; }
.corp-form .otp__msg.is-ok { color: #9be0b1; }
.otp__actions { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.otp__link { font-size: .86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; color: inherit; background: none; border: 0; cursor: pointer; }
.otp__link[disabled] { opacity: .5; text-decoration: none; cursor: default; }
.enq__form .otp__eyebrow { display: none; }

/* ---------- Loader: travel icons that draw in and hand over to the next ---------- */
.loader__icons { position: relative; width: 104px; height: 104px; margin-bottom: 6px; display: grid; place-items: center; }
.loader__orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: loaderSpin 6s linear infinite; }
.loader__orbit circle { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.loader__orbit .loader__dot { fill: var(--ink); stroke: none; }
.loader__stage { position: relative; width: 46px; height: 46px; }
.loader__icon {
  --slot: .6s; --n: 8;
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
  animation: loaderIcon calc(var(--slot) * var(--n)) var(--ease) infinite both;
  animation-delay: calc(var(--slot) * var(--i));
}
.loader__icon > * {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: loaderDraw calc(var(--slot) * var(--n)) cubic-bezier(.4, 0, .2, 1) infinite both;
  animation-delay: calc(var(--slot) * var(--i));
}
/* One cycle is 8 icons × 0.6s, so each icon owns 12.5% of it (plus a little overlap for the hand-over). */
@keyframes loaderIcon {
  0%   { opacity: 0; transform: translateY(12px) scale(.82) rotate(-6deg); }
  3.5% { opacity: 1; transform: none; }
  11%  { opacity: 1; transform: none; }
  15%  { opacity: 0; transform: translateY(-12px) scale(1.06) rotate(4deg); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.06); }
}
@keyframes loaderDraw {
  0%   { stroke-dashoffset: 1; }
  9%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loader__orbit, .loader__icon, .loader__icon > * { animation: none; }
  .loader__icon > * { stroke-dashoffset: 0; }
  .loader__icon:first-child { opacity: 1; }
}

/* Travellers dropdown in the home page search */
.field--party { position: relative; }
.field--party.is-open { border-color: var(--ink); background: var(--white); }
.party__toggle { height: 26px; width: 100%; text-align: left; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23171414' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center; }
.field--party.is-open .party__toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 15l6-6 6 6' fill='none' stroke='%23171414' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.party__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.party { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 100%; min-width: 280px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 6px 16px 16px; box-shadow: 0 30px 70px -30px rgba(23,20,20,.45); display: grid; }
.party[hidden] { display: none; }
.party__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.party__row b { display: block; font-weight: 600; font-size: .95rem; }
.party__row small { display: block; font-size: .76rem; color: var(--ink-2); margin-top: 2px; }
.party .stepper { gap: 6px; }
.party .stepper button { width: 34px; height: 34px; border-radius: 50%; background: var(--ivory); border-color: transparent; font-size: 1.1rem; transition: background .2s; }
.party .stepper button:hover:not(:disabled) { background: var(--line); }
.party .stepper button:disabled { opacity: .35; cursor: default; }
.party .stepper output { min-width: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.party__done { margin-top: 14px; height: 44px; width: 100%; }
@media (max-width: 719px) {
  /* On phones the dropdown spans the whole search panel, not just its half-width field */
  .search__fields { position: relative; }
  .field--party { position: static; }
  .party { left: 0; right: 0; width: auto; min-width: 0; top: auto; margin-top: 8px; }
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer__legal a { color: inherit; transition: color .3s; }
.footer__legal a:hover { color: var(--white); }

/* ---------- Campaign banners, under the home page search ----------
   One banner and the edge of the next on phones, two on tablets, three on desktop; the creatives are
   1080 × 700 with their text in the picture, so the shape is fixed and nothing is cropped. */
.camps { padding: 32px 0 0; }
.camps[hidden] { display: none; }
.camps__track {
  --per: 1.12; --gap: 12px;
  position: relative;   /* banners are measured from the row's own start, for the arrows and dots */
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
}
.camps__track::-webkit-scrollbar { display: none; }
.camps__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 22px; }
.camp { position: relative; display: block; scroll-snap-align: start; border-radius: 20px; overflow: hidden; aspect-ratio: 1080 / 700; background: var(--line); isolation: isolate; }
.camp img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.camp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(23,20,20,.06); pointer-events: none; }
.camp:hover img { transform: scale(1.025); }
.camp:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.camps__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.camps__nav[hidden] { display: none; }
.camps__dots { display: flex; gap: 6px; flex-wrap: wrap; }
.camps__dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: var(--line); border: 0; transition: width .4s var(--ease), background .3s; }
.camps__dots button[aria-current="true"] { width: 26px; background: var(--ink); }
.camps__arrows { display: none; gap: 8px; }
@media (min-width: 720px) {
  .camps { padding-top: 40px; }
  .camps__track { --per: 2; --gap: 16px; }
  .camps__arrows { display: flex; }
}
@media (min-width: 1080px) {
  .camps { padding-top: 48px; }
  .camps__track { --per: 3; --gap: 20px; margin: 0; padding: 0; scroll-padding: 0; }
  .camp { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .camp img { transition: none; } .camp:hover img { transform: none; } }
.corp__item:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 4px; opacity: 1; }