/* ============================================================
   WanderMe — Design System
   Sunset coral × deep ocean × near-black × warm sand.
   ============================================================ */

:root {
  --coral: #ff5a36;
  --coral-hot: #ff7a50;
  --coral-deep: #e8431f;
  --ocean: #0e6f6e;
  --ocean-deep: #0a3a3f;
  --ink: #101314;
  --ink-soft: #1b2022;
  --sand: #faf5ee;
  --sand-dim: #f1e9dd;
  --amber: #ffb347;
  /* The Custom & Private tier's accent. Deliberately not coral: it is what
     separates the bespoke product from the group-trip pages. Was hardcoded
     as #e8c07d in custom.html's own <style> block. */
  --gold: #e8c07d;
  --gold-deep: #d4a85c;
  --white: #fffdf9;
  --txt: #23282a;
  --txt-dim: #5d6669;
  --txt-on-dark: #f4efe7;
  --txt-on-dark-dim: rgba(244, 239, 231, 0.86);   /* was .72: passed AA but read gray, not white */

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-accent: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-lg: 0 24px 60px -18px rgba(16, 19, 20, 0.35);
  --shadow-md: 0 12px 32px -12px rgba(16, 19, 20, 0.25);
  --radius: 18px;
  --radius-sm: 12px;
  --nav-h: 72px;
  --pad-x: clamp(20px, 5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  color: var(--txt);
  background: var(--sand);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: clip;
}
/* clip (not hidden) contains horizontal overflow WITHOUT creating a scroll
   container, so it never breaks position:sticky (pinned scroll, route tracker).
   overflow-x:hidden on html/body would make them scroll containers and kill sticky. */
html { overflow-x: clip; max-width: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
::selection { background: var(--coral); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: 0.01em;
  color: inherit;
}
.h-hero { font-size: clamp(3rem, 9.5vw, 7.5rem); line-height: 0.9; }
.h-xl { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h-lg { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.h-md { font-size: clamp(1.4rem, 2.6vw, 2rem); }
/* Accent words now stay in the heading's own display font (no cursive / no font
   swap). Only the coral colour (via .txt-coral) sets them apart. Neutralised here
   in one place so every heading across the site updates at once. */
.accent-script {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--coral);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--coral); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--txt-dim); max-width: 60ch; }
.on-dark .lead { color: var(--txt-on-dark-dim); }
.on-ocean .lead { color: var(--txt-on-dark-dim); }

/* ---------- Sections & layout ---------- */
.section { padding: clamp(36px, 4.2vw, 64px) var(--pad-x); }
.section-tight { padding: clamp(36px, 4.5vw, 72px) var(--pad-x); }
.wrap { max-width: 1280px; margin: 0 auto; }
.wrap-narrow { max-width: 880px; margin: 0 auto; }
.on-dark { background: var(--ink); color: var(--txt-on-dark); }
.on-ocean { background: var(--ocean-deep); color: var(--txt-on-dark); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 46px); }
.section-head > * + * { margin-top: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, background 0.25s ease, color 0.25s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 10px 28px -10px rgba(255, 90, 54, 0.6); }
.btn-primary:hover { background: var(--coral-deep); box-shadow: 0 16px 36px -10px rgba(255, 90, 54, 0.7); }
.btn-ghost { border: 2px solid currentColor; color: inherit; padding: 14px 30px; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-light { background: var(--sand); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-ocean { background: var(--ocean); color: #fff; }
.btn-ocean:hover { background: var(--ocean-deep); }
.btn-sm { padding: 10px 22px; font-size: 0.85rem; }
.btn .arr { transition: transform 0.3s var(--ease-out); display: inline-block; }
.btn:hover .arr { transform: translateX(5px); }

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 var(--pad-x);
  color: #fff;
  transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.site-nav.scrolled {
  background: rgba(16, 19, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.5);
}
/* Light-canvas pages (portal): the nav rests on sand, not a dark hero photo,
   so the resting state needs ink text or the links vanish. Scrolling restores
   the site-wide dark glass bar, which brings the white text back with it. */
.site-nav.on-light:not(.scrolled) { color: var(--ink); }
.site-nav.on-light:not(.scrolled) .locale-btn { border-color: rgba(16, 19, 20, 0.22); }
.nav-inner { width: 100%; max-width: 1380px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font-family: var(--font-display); font-size: 1.65rem; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; display: inline-flex; align-items: center; gap: 10px; }
.logo span { color: var(--coral); margin-left: -10px; }
.logo-mark { width: 34px; height: auto; flex-shrink: 0; overflow: visible; transition: transform 0.4s var(--ease-spring); }
.logo:hover .logo-mark { transform: translateY(-2px); }
/* The W's final stroke + arrow swing to a steeper angle on hover,
   pivoting from the valley joint so the W stays connected. */
.logo-fly { transform-origin: 49px 48px; transform-box: view-box; transition: transform 0.45s var(--ease-spring); }
.logo:hover .logo-fly, .logo:focus-visible .logo-fly { transform: rotate(-12deg); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.nav-links a.btn { white-space: nowrap; }
.nav-links a:not(.btn) {
  font-weight: 600; font-size: 0.92rem; position: relative; padding: 6px 0; opacity: 0.92;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--coral); transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:not(.btn):hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; flex-direction: column; gap: 6px; padding: 10px; z-index: 110; color: inherit; }
.nav-toggle span { width: 26px; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; }

/* ---------- Locale switcher (language + currency) ---------- */
.locale-switch { position: relative; }
.locale-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 0.88rem; color: inherit;
  border: 1.5px solid rgba(255, 255, 255, 0.24); border-radius: 999px;
  padding: 7px 14px; line-height: 1; white-space: nowrap;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.locale-btn:hover { border-color: var(--coral); }
.locale-btn .chev { font-size: 0.62rem; opacity: 0.7; transition: transform 0.25s ease; }
.locale-switch.open .locale-btn .chev { transform: rotate(180deg); }
.locale-menu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 200;
  min-width: 240px; background: var(--ink); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6);
  padding: 16px; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.locale-switch.open .locale-menu { opacity: 1; transform: none; pointer-events: auto; }
.locale-menu h6 { font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-on-dark-dim); margin: 4px 2px 10px; }
.lm-group + .lm-group { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 14px; }
.locale-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.locale-opt {
  font: inherit; font-size: 0.84rem; color: #fff; background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.locale-opt:hover { background: rgba(255, 255, 255, 0.14); }
.locale-opt[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }
.locale-opt.soon { opacity: 0.38; cursor: not-allowed; }
.locale-opt.soon:hover { background: rgba(255, 255, 255, 0.06); opacity: 0.55; }

/* Floating tooltip (attached to <body> so nothing can clip it or stack over it). */
.wm-tip {
  position: fixed; z-index: 4000; background: var(--coral); color: #fff;
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none; text-align: center;
  padding: 7px 11px; border-radius: 9px; max-width: 220px;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.wm-tip.show { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1200px) {
  .locale-menu {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    min-width: 0; background: transparent; border: none; box-shadow: none;
    padding: 0; margin-top: 16px; display: none; text-align: center;
  }
  .locale-switch.open .locale-menu { display: block; }
  .locale-menu h6 { font-size: 0.8rem; }
  .locale-opts { justify-content: center; }
  .locale-opt { font-size: 1rem; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  /* backdrop-filter turns the header into the containing block for the fixed
     menu, which collapses the full-screen overlay to the header's height (so
     the dark background only covers a thin strip). Drop the blur on mobile so
     the menu's inset:0 resolves against the viewport and covers the page. */
  .site-nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links {
    position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
    background: var(--ink); z-index: 105;
    flex-direction: column; justify-content: center; gap: 30px;
    font-size: 1.3rem;
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; }
  /* The overlay is solid ink on every page, so its links must stay white even
     when an on-light nav has switched the header's inherited color to ink.
     Same for the hamburger-turned-X (it floats above the overlay) and the
     locale pill's border, which on-light darkened for the sand background. */
  .site-nav.on-light .nav-links { color: #fff; }
  .site-nav.on-light .nav-toggle.open { color: #fff; }
  .site-nav.on-light .nav-links .locale-btn { border-color: rgba(255, 255, 255, 0.24); }
  .nav-links a:not(.btn) { font-size: 1.5rem; font-family: var(--font-display); text-transform: uppercase; }
  body.nav-open { overflow: hidden; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
}
/* Homepage only: the photo has its own clipper (.hero-clip), so the hero itself
   stops clipping and the search dropdowns can extend past its edge. Other pages
   keep the plain overflow clip. */
.home-compact .hero { overflow: visible; }
.hero-clip { position: absolute; inset: 0; overflow: hidden; z-index: -2; border-radius: inherit; }
.hero-media { position: absolute; inset: -12% 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media.kenburns img { animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.12) translateY(-2%); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 15, 16, 0.92) 0%, rgba(13, 15, 16, 0.35) 45%, rgba(13, 15, 16, 0.25) 100%);
}
.hero-content { width: 100%; max-width: 1280px; margin: 0 auto; padding: calc(var(--nav-h) + 48px) var(--pad-x) clamp(64px, 9vh, 110px); }
.hero-sub { font-size: clamp(1.05rem, 1.8vw, 1.35rem); max-width: 46ch; margin: 24px 0 36px; color: var(--txt-on-dark-dim); }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-short { min-height: 72svh; }
/* Scroll cue: flush to the right edge, at the foot of the hero.

   It used to be lifted 104px to clear the help bubble (fixed at right:20px /
   bottom:20px, 58px round — see js/main.js), which left it hovering partway up
   the side of the photo, attached to nothing. Now the homepage hero stops at
   86svh, so its bottom-right corner already sits clear of the bubble on any
   screen taller than ~560px, and the cue can sit in the corner where it reads
   as a cue. Bigger type and a thicker, longer line so it still shows against a
   bright photo. */
.scroll-hint {
  position: absolute; bottom: 26px; right: 24px;
  font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase;
  writing-mode: vertical-rl; color: rgba(255, 255, 255, 0.82);
  display: flex; align-items: center; gap: 14px;
  text-shadow: 0 1px 14px rgba(13, 15, 16, 0.55);
}
.scroll-hint::after { content: ""; width: 2px; height: 64px; border-radius: 2px; background: currentColor; animation: drip 1.8s ease-in-out infinite; }
/* Phone, and any viewport too short to hold the hero: the cue landed on both
   the trust list and the bubble, and a hero that plainly runs off the bottom
   of the screen does not need telling. */
@media (max-width: 760px), (max-height: 620px) { .scroll-hint { display: none; } }

/* The compact hero above is gated to min-width: 761px, so without this a phone
   falls back to the shared 100svh and the section below never shows. */
@media (max-width: 760px) {
  .custom-page .hero, .sustain-page .hero, .about-page .hero { min-height: 76svh; }
}
@keyframes drip { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Sustainability trail (Home): self-drawing path + traveling guide dot */
.trail-track { position: relative; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#trailGhost {
  stroke: rgba(255, 255, 255, 0.22); stroke-width: 2px;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 0.6 6;
}
#trailPath {
  stroke: #7ddfa8; stroke-width: 3.5px;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(125, 223, 168, 0.55));
}
.trail-guide {
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: 20px; height: 20px; margin: -10px;
  border-radius: 50%; background: var(--coral);
  border: 3px solid var(--sand);
  box-shadow: 0 0 0 6px rgba(255, 90, 54, 0.3);
}
.trail-guide::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255, 90, 54, 0.5);
  animation: guidePulse 1.8s ease-out infinite;
}
@keyframes guidePulse {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(1.5); opacity: 0; }
}
/* The gap was clamp(64px, 14vh, 140px): with four stops that is up to 420px of
   empty space plus 96px of padding before a single card is drawn, so the section
   ran well over a thousand pixels and the trail read as an endless scroll rather
   than a guided one. The path still needs room to draw itself between stops —
   that is the whole effect — so this trims it rather than closing it up. */
.trail-stops { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(22px, 4.2vh, 48px); padding: 20px 0; }
.trail-stop {
  width: min(460px, 100%);
  background: rgba(10, 20, 22, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  opacity: 0.4; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out), border-color 0.5s ease, box-shadow 0.5s ease;
}
.trail-stop.lit {
  opacity: 1; transform: none;
  border-color: rgba(125, 223, 168, 0.55);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.6);
}
.trail-stop:nth-child(even) { margin-left: auto; }
.trail-num { font-family: var(--font-display); font-size: 1.6rem; color: #7ddfa8; line-height: 1; margin-bottom: 10px; }
.trail-stop h3 { margin-bottom: 8px; }
.trail-stop p { color: var(--txt-on-dark-dim); font-size: 0.97rem; }
@media (prefers-reduced-motion: reduce) {
  .trail-stop { opacity: 1; transform: none; }
  .trail-guide { display: none; }
  .trail-guide::after { animation: none; }
}

/* Animated headline lines */
/* Headroom so tall caps/descenders aren't clipped by the reveal mask;
   the negative margin cancels it so line spacing stays tight. */
.line-reveal { display: block; overflow: hidden; padding: 0.14em 0; margin: -0.14em 0; }
.line-reveal > span { display: block; transform: translateY(115%); transition: transform 0.9s var(--ease-out); }
.lines-in .line-reveal > span { transform: translateY(0); }
.lines-in .line-reveal:nth-child(2) > span { transition-delay: 0.12s; }
.lines-in .line-reveal:nth-child(3) > span { transition-delay: 0.24s; }
.fade-up-late { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease 0.45s, transform 0.8s var(--ease-out) 0.45s; }
.lines-in ~ .fade-up-late, .lines-in .fade-up-late, .hero-content.lines-in .fade-up-late { opacity: 1; transform: none; }

/* ---------- Scroll reveals ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.85s ease, transform 0.85s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity 0.85s ease, transform 0.85s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(44px); transition: opacity 0.85s ease, transform 0.85s var(--ease-out); }
.reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.93); transition: opacity 0.85s ease, transform 0.85s var(--ease-out); }
.reveal-scale.in { opacity: 1; transform: none; }

/* ---------- Trip cards ---------- */
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 2.5vw, 30px); }
.trip-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--ink); color: #fff;
  aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; isolation: isolate;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s ease;
  text-align: left; width: 100%;
}
.trip-card:hover, .trip-card:focus-visible { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.trip-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.trip-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 0.8s var(--ease-out);
}
.trip-card:hover img { transform: scale(1.08); }
.trip-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10, 12, 13, 0.92) 0%, rgba(10, 12, 13, 0.28) 55%, rgba(10, 12, 13, 0.12) 100%);
  transition: background 0.4s ease;
}
.tc-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(16, 19, 20, 0.55); backdrop-filter: blur(6px); color: #fff;
}
.badge.hot { background: var(--coral); }
.badge.teal { background: var(--ocean); }
.tc-rating { font-size: 0.8rem; font-weight: 700; background: rgba(16,19,20,0.55); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 999px; color: var(--amber); white-space: nowrap; }
.tc-body { padding: 20px; position: relative; }
.tc-meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 6px; }
.tc-name { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin-bottom: 8px; }
.tc-price { font-size: 0.95rem; color: var(--txt-on-dark-dim); }
.tc-price strong { color: #fff; font-size: 1.15rem; }
.tc-more {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.5s var(--ease-out), opacity 0.4s ease, margin 0.4s ease;
  font-size: 0.9rem; color: rgba(255,255,255,0.85);
}
.trip-card:hover .tc-more, .trip-card:focus-visible .tc-more { max-height: 120px; opacity: 1; margin-top: 10px; }
.tc-fit { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.fit-chip { font-size: 0.68rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Horizontal scroller ---------- */
.hscroll-outer { position: relative; }
.hscroll {
  display: flex; gap: clamp(16px, 2vw, 26px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px var(--pad-x) 28px;
  scrollbar-width: none; cursor: grab;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.dragging { cursor: grabbing; scroll-snap-type: none; }
.hscroll > * { flex: 0 0 clamp(270px, 30vw, 380px); scroll-snap-align: start; }
/* Let the rail be grabbed and dragged without the browser ghost-dragging cards/images */
.hscroll, .hscroll a, .hscroll img { -webkit-user-drag: none; user-select: none; }
.hscroll-nav { display: flex; gap: 10px; }
/* On touch/mobile the carousel is swipeable, so the arrow buttons are redundant. */
@media (max-width: 880px) { .hscroll-nav { display: none; } }
.hs-btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid currentColor; color: inherit;
  display: grid; place-items: center; font-size: 1.2rem;
  transition: background 0.25s ease, transform 0.3s var(--ease-spring);
}
.hs-btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; transform: scale(1.08); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; display: flex; user-select: none; }
.marquee-track { display: flex; gap: 18px; flex-shrink: 0; padding-right: 18px; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee.rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee-img {
  width: clamp(200px, 23vw, 320px); aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); flex-shrink: 0;
  transition: transform 0.45s var(--ease-spring), filter 0.4s ease;
}
.marquee-img:hover { transform: scale(1.05) rotate(-1.2deg); filter: brightness(1.08); }

/* ---------- Stats / counters ---------- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(24px, 4vw, 56px); text-align: center; }
.stat-num { font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1; color: var(--coral); }
.stat-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 10px; color: var(--txt-on-dark-dim); }

/* ---------- Persona cards ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.persona-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 5; display: flex; align-items: flex-end;
  color: #fff; isolation: isolate;
  transition: transform 0.5s var(--ease-spring);
}
.persona-card:hover { transform: translateY(-10px) rotate(-0.6deg); }
.persona-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s var(--ease-out); }
.persona-card:hover img { transform: scale(1.09); }
.persona-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,12,13,0.9), rgba(10,12,13,0.05) 60%); }
.persona-body { padding: clamp(20px, 3vw, 34px); width: 100%; }
.persona-body h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.persona-body p { margin: 10px 0 16px; color: rgba(255,255,255,0.85); max-width: 34ch; }
.persona-go {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem;
  color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em;
}
.persona-go .arr { transition: transform 0.3s var(--ease-out); }
.persona-card:hover .persona-go .arr { transform: translateX(6px); }

/* ---------- Wander Verified ---------- */
.badge.verified { background: var(--amber); color: #16130c; }
.verified-callout {
  background: rgba(255, 179, 71, 0.13);
  border: 1.5px solid rgba(255, 179, 71, 0.55);
  border-radius: var(--radius-sm);
  padding: 18px 22px; margin-top: 20px;
}
.verified-callout .verified-head {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9a6b13; margin-bottom: 8px;
}
.verified-callout .quote-text { margin: 0; }
.verified-callout .verified-by { font-size: 0.8rem; font-weight: 700; color: var(--txt-dim); margin-top: 10px; }

/* ---------- Consent checkbox ---------- */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--txt-dim); font-weight: 400; cursor: pointer; }
.consent input { width: 18px; height: 18px; accent-color: var(--coral); margin-top: 2px; flex-shrink: 0; }
.consent a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.consent input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- Sustainability ribbon (Trips page) ---------- */
.sus-ribbon {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--ocean-deep), var(--ocean));
  color: var(--txt-on-dark); border-radius: var(--radius);
  padding: 18px 24px; margin-bottom: 28px;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}
.sus-ribbon:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -14px rgba(10, 58, 63, 0.6); }
.sus-ribbon strong { color: #7ddfa8; }
.sus-ribbon-mark {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12); color: #7ddfa8;
  display: grid; place-items: center; font-size: 1.1rem;
  animation: ribbonTick 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
/* Snappy 90-degree tick each second, with a tiny overshoot, then a hold. */
@keyframes ribbonTick {
  0%, 16%  { transform: rotate(0deg); }
  25%, 41% { transform: rotate(90deg); }
  50%, 66% { transform: rotate(180deg); }
  75%, 91% { transform: rotate(270deg); }
  100%     { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .sus-ribbon-mark { animation: none; } }
.sus-ribbon > span:nth-child(2) { flex: 1; min-width: 220px; font-size: 0.95rem; }
.sus-ribbon-link { font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7ddfa8; white-space: nowrap; }
.sus-ribbon .arr { display: inline-block; transition: transform 0.3s var(--ease-out); }
.sus-ribbon:hover .arr { transform: translateX(5px); }

/* ---------- Filters (Trips page) ---------- */
.filter-bar { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.search-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.search-input {
  flex: 1; min-width: 240px;
  padding: 16px 22px; border-radius: 999px; border: 2px solid var(--sand-dim);
  background: #fff; font-size: 1rem; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.search-input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.15); }
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-group-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-dim); margin-right: 6px; min-width: 86px; }
.chip {
  padding: 9px 18px; border-radius: 999px; border: 2px solid var(--sand-dim);
  background: #fff; font-weight: 600; font-size: 0.86rem; color: var(--txt);
  transition: all 0.25s var(--ease-out);
}
.chip:hover { border-color: var(--coral); color: var(--coral-deep); transform: translateY(-2px); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.results-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.result-count { font-weight: 700; }
.result-count .accent-script { color: var(--coral); font-size: 1.2em; }
.clear-filters { font-weight: 700; color: var(--coral-deep); text-decoration: underline; text-underline-offset: 3px; }
.clear-filters:hover { color: var(--coral); }
.empty-state { text-align: center; padding: 90px 20px; }
.empty-state .h-md { margin: 14px 0 10px; }
.trip-grid .trip-card { animation: cardIn 0.55s var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 12, 13, 0.75); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--sand); border-radius: var(--radius); width: min(880px, 100%);
  max-height: 90svh; overflow-y: auto; position: relative;
  transform: translateY(40px) scale(0.97); transition: transform 0.4s var(--ease-out);
}
.modal-overlay.open .modal { transform: none; }
.modal-hero { position: relative; aspect-ratio: 21 / 9; min-height: 220px; }
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,13,0.75), transparent 60%); }
.modal-hero-text { position: absolute; bottom: 20px; left: 28px; right: 28px; color: #fff; z-index: 2; }
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(16,19,20,0.6); color: #fff; font-size: 1.3rem;
  backdrop-filter: blur(6px); display: grid; place-items: center;
  transition: background 0.25s ease, transform 0.3s var(--ease-spring);
}
.modal-close:hover { background: var(--coral); transform: rotate(90deg); }
.modal-body { padding: clamp(24px, 4vw, 44px); }
.modal-body h4 { font-family: var(--font-body); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ocean); margin: 26px 0 10px; }
.modal-highlights li { display: flex; gap: 12px; padding: 7px 0; }
.modal-highlights li::before { content: "→"; color: var(--coral); font-weight: 800; flex-shrink: 0; }
.modal-meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.meta-pill { background: #fff; border: 1.5px solid var(--sand-dim); padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; }
.operator-credit { font-size: 0.82rem; color: var(--txt-dim); display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.operator-credit::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ocean); color: #fff; font-size: 0.7rem; flex-shrink: 0; }
.modal-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; align-items: center; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 700; font-size: 0.9rem; }
.field .hint { font-size: 0.8rem; color: var(--txt-dim); font-weight: 400; }
.input, .select, .textarea {
  padding: 15px 18px; border-radius: var(--radius-sm);
  border: 2px solid var(--sand-dim); background: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease; width: 100%;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(255,90,54,0.14); }
.field.error .input, .field.error .textarea, .field.error .select { border-color: #d23b2a; }
.field-error { color: #d23b2a; font-size: 0.82rem; font-weight: 600; display: none; }
.field.error .field-error { display: block; }
.textarea { min-height: 130px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-grid .span2 { grid-column: span 2; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span2 { grid-column: span 1; } }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card span {
  display: block; text-align: center; padding: 16px 12px; border-radius: var(--radius-sm);
  border: 2px solid var(--sand-dim); background: #fff; font-weight: 700; font-size: 0.9rem;
  cursor: pointer; transition: all 0.25s var(--ease-out);
}
.radio-card input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.radio-card input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.radio-card span:hover { border-color: var(--coral); }
.form-success { text-align: center; padding: clamp(40px, 7vw, 80px) 24px; display: none; }
.form-success.show { display: block; animation: cardIn 0.6s var(--ease-out) both; }
.success-burst {
  width: 86px; height: 86px; margin: 0 auto 24px; border-radius: 50%;
  background: var(--coral); color: #fff; font-size: 2.4rem;
  display: grid; place-items: center;
  animation: burst 0.7s var(--ease-spring) both;
}
@keyframes burst { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }

/* ---------- Accordion (itinerary / FAQ) ---------- */
.acc-item { border-bottom: 1px solid rgba(125, 125, 125, 0.22); }
.acc-btn {
  width: 100%; display: flex; align-items: center; gap: 18px;
  padding: 22px 4px; text-align: left; color: inherit;
  transition: color 0.25s ease;
}
.acc-btn:hover { color: var(--coral-deep); }
.on-dark .acc-btn:hover, .on-ocean .acc-btn:hover { color: var(--coral-hot); }
.acc-day {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--coral);
  min-width: 64px; flex-shrink: 0;
}
.acc-title { font-weight: 700; font-size: 1.05rem; flex: 1; }
.acc-meals { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ocean); white-space: nowrap; }
.on-dark .acc-meals { color: var(--amber); }
.acc-icon { font-size: 1.3rem; transition: transform 0.35s var(--ease-out); flex-shrink: 0; }
.acc-item.open .acc-icon { transform: rotate(45deg); color: var(--coral); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease-out); }
.acc-panel-inner { padding: 0 4px 24px 82px; color: var(--txt-dim); max-width: 70ch; }
.on-dark .acc-panel-inner { color: var(--txt-on-dark-dim); }
@media (max-width: 640px) { .acc-panel-inner { padding-left: 4px; } .acc-meals { display: none; } }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.quote-card {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.4s var(--ease-spring), border-color 0.3s ease;
}
.quote-card:hover { transform: translateY(-6px); border-color: rgba(255, 179, 71, 0.5); }
.light .quote-card { background: #fff; border-color: var(--sand-dim); box-shadow: var(--shadow-md); }
.quote-stars { color: var(--amber); letter-spacing: 3px; font-size: 1.05rem; }
.quote-text { font-family: var(--font-body); font-style: normal; font-size: 1.08rem; line-height: 1.55; }
.quote-who { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--coral); margin-top: auto; }

/* Placeholder review cards — shown where real reviews aren't in yet */
.quote-card.is-placeholder {
  background: transparent; border: 1.5px dashed currentColor; box-shadow: none;
  opacity: 0.5; justify-content: center; gap: 8px; text-align: left;
}
.quote-card.is-placeholder:hover { transform: none; border-color: currentColor; }
.light .quote-card.is-placeholder { background: transparent; box-shadow: none; }
.quote-card.is-placeholder .ph-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; }
.quote-card.is-placeholder .ph-sub { font-size: 0.92rem; line-height: 1.5; }
.quote-card.is-placeholder a { color: inherit; text-decoration: underline; }

/* ---------- Sticky CTA bar (trip detail) ---------- */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(16, 19, 20, 0.95); backdrop-filter: blur(14px);
  color: #fff; padding: 14px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(110%); transition: transform 0.45s var(--ease-out);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sticky-cta.show { transform: none; }
.sticky-cta .price-line { font-size: 0.9rem; color: var(--txt-on-dark-dim); }
.sticky-cta .price-line strong { color: #fff; font-size: 1.2rem; }
@media (max-width: 560px) { .sticky-cta .price-line span.hide-sm { display: none; } }

/* ---------- Snapshot stats (trip detail) ---------- */
.snapshot-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; border-radius: var(--radius); overflow: hidden; }
.snap-cell { background: var(--ink-soft); padding: 26px 20px; text-align: center; transition: background 0.3s ease; }
.snap-cell:hover { background: #242b2e; }
.snap-icon { color: var(--coral); display: block; margin-bottom: 10px; line-height: 0; }
.snap-icon svg { width: 26px; height: 26px; }
.snap-val { font-weight: 800; font-size: 1.02rem; overflow-wrap: break-word; }
.snap-key { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-on-dark-dim); margin-top: 4px; }

/* ---------- Dates table ---------- */
.dates-table { width: 100%; border-collapse: collapse; }
.dates-table th { text-align: left; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-dim); padding: 12px 14px; border-bottom: 2px solid var(--sand-dim); }
.dates-table td { padding: 18px 14px; border-bottom: 1px solid var(--sand-dim); vertical-align: middle; }
.dates-table tr { transition: background 0.2s ease; }
.dates-table tbody tr:hover { background: #fff; }
.dates-table tr.selected { background: #fff; box-shadow: inset 4px 0 0 var(--coral); }
.was-price { text-decoration: line-through; color: var(--txt-dim); font-size: 0.88rem; margin-right: 8px; }
.now-price { font-weight: 800; font-size: 1.08rem; }
.save-tag { display: inline-block; background: rgba(14, 111, 110, 0.12); color: var(--ocean); font-size: 0.74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-left: 8px; }
.dep-status { font-size: 0.76rem; font-weight: 700; color: var(--ocean); text-transform: uppercase; letter-spacing: 0.06em; }
.dep-status::before { content: "●"; margin-right: 6px; color: #2fae6e; }
@media (max-width: 720px) {
  .dates-table thead { display: none; }
  .dates-table tr { display: block; padding: 14px 0; }
  .dates-table td { display: block; border: none; padding: 4px 14px; }
}

/* ---------- Pinned scroll storytelling ---------- */
.pin-section { position: relative; }
.pin-sticky { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.pin-steps { position: relative; z-index: 2; }
.pin-step { min-height: 90svh; display: flex; align-items: center; }
.pin-step-card {
  background: rgba(16, 19, 20, 0.82); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px); max-width: 560px; color: var(--txt-on-dark);
}
.pin-step-num { font-family: var(--font-display); font-size: 3rem; color: var(--coral); line-height: 1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--txt-on-dark); padding: clamp(36px, 4.5vw, 52px) var(--pad-x) 26px; }
.footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: clamp(24px, 3vw, 40px); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--txt-on-dark-dim); margin-bottom: 12px; font-weight: 800; }
.footer-grid ul li { margin-bottom: 8px; }
.footer-grid a { opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; }
.footer-grid a:hover { opacity: 1; color: var(--coral-hot); }
.footer-blurb { color: var(--txt-on-dark-dim); margin-top: 10px; max-width: 32ch; font-size: 0.95rem; }
.newsletter { display: flex; gap: 0; margin-top: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); }
.newsletter input { flex: 1; background: transparent; border: none; padding: 11px 18px; color: #fff; min-width: 0; }
.newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter input:focus { outline: none; }
.newsletter button { background: var(--coral); color: #fff; font-weight: 700; padding: 0 22px; transition: background 0.25s ease; }
.newsletter button:hover { background: var(--coral-deep); }
.newsletter-msg { font-size: 0.85rem; color: var(--amber); margin-top: 10px; min-height: 1.2em; }
.footer-bottom { max-width: 1280px; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; color: var(--txt-on-dark-dim); }
.fora-line { flex-basis: 100%; font-size: 0.74rem; opacity: 0.75; order: 3; }

/* ---------- PWA app shell (only visible when installed / standalone) ---------- */
/* Native app mode: strip the marketing chrome and give a real app frame. */
.pwa .site-nav { display: none !important; }
.pwa .hero, .pwa .hero-short, .pwa .trust-strip { display: none !important; }
/* Explore filter bar floats up 46px to overlap the catalog hero. App mode hides
   that hero, so the same pull would slide the bar under #appbar and clip the search
   field — reset it once the thing it was overlapping is gone. */
.pwa .cat-compact .filter-bar { margin-top: 0; }
.pwa #appbar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 4px) 16px 9px;
  background: #101314; border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: transform .25s ease;
}
.pwa #appbar.bar-hidden { transform: translateY(-100%); }
.pwa #appbar .wm { display: flex; align-items: center; gap: 0; font-family: 'Anton', var(--font-display), sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; font-size: 1.4rem; color: #fff; }
.pwa #appbar .wm span { color: var(--coral); }
.pwa #appbar .wm svg { width: 30px; height: 24px; margin-right: 9px; }
.pwa #appbar #appback { position: absolute; left: 6px; bottom: 4px; height: 40px; width: 48px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 0; }
.pwa html, .pwa body { overscroll-behavior-y: none; }
.pwa body.kb-open .app-tabbar { display: none; }   /* hide bottom bar while typing */
.pwa #main, .pwa .portal-main { padding-top: 8px !important; }
.pwa .footer, .pwa footer { display: none !important; }
.pwa .wm-help, .pwa #wmHelp { display: none !important; }   /* floating bubble off in app */
.app-tabbar { display: none; }
.pwa body, body.pwa { min-height: 100svh; padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
/* Hide scrollbars everywhere (app + web) */
::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent; }
html, body { -ms-overflow-style: none; scrollbar-width: none; }
/* App layout: tighter native gutters + less dead vertical space, use the full screen */
.pwa { --pad-x: 16px; --nav-h: 0px; }
.pwa .section, .pwa .section-tight { padding-top: 16px !important; padding-bottom: 22px !important; }
.pwa .portal-main { padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 28px !important; }
.pwa .login-card { border-radius: 16px; }
/* My Trips: drop the boxed card, use the full screen width */
.pwa .dash { max-width: none; margin: 0; background: transparent; border: 0; border-radius: 0; padding: 0; }
.pwa .app-tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
  background: rgba(16,19,20,0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 6px 6px max(6px, calc(env(safe-area-inset-bottom) - 10px));
}
.app-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--txt-on-dark-dim); text-decoration: none; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 0;
}
.app-tabbar a.active { color: var(--coral); }
.app-tabbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- App motion (app/PWA mode only — web untouched) ---------- */
/* Every page fades+rises in so switching tabs feels like a native transition,
   not a page reload. */
@keyframes wmPageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pwa body { animation: wmPageIn .32s cubic-bezier(.22,1,.36,1); }
/* Tab bar: springy active icon + a coral indicator dash, press feedback on touch */
.app-tabbar a { position: relative; transition: color .25s ease, transform .25s var(--ease-spring); }
.app-tabbar a:active { transform: scale(.88); }
.app-tabbar a svg { transition: transform .35s var(--ease-spring); }
.app-tabbar a.active svg { transform: translateY(-1.5px) scale(1.16); }
.app-tabbar a.active::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 999px; background: var(--coral); }
/* Touch feedback: cards and buttons compress slightly under the finger */
.pwa .btn:active, .pwa .cat-card:active, .pwa .hm-q:active, .pwa .hm-tcard:active,
.pwa .hm-trip-cta a:active, .pwa .dash-tab:active, .pwa .verified-item:active { transform: scale(.965); transition: transform .12s ease; }
@media (prefers-reduced-motion: reduce) {
  .pwa body { animation: none; }
  .app-tabbar a.active svg, .app-tabbar a:active { transform: none; }
}
.socials { display: flex; gap: 14px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: grid; place-items: center; font-size: 0.82rem; font-weight: 700; transition: all 0.3s var(--ease-spring); }
.socials a:hover { background: var(--coral); border-color: var(--coral); transform: translateY(-3px); }

/* Footer social links (in the brand column, higher up + more visible) */
.footer-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 9px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.22);
  font-weight: 700; font-size: 0.9rem; opacity: 1;
  transition: background 0.3s var(--ease-spring), border-color 0.3s ease, transform 0.3s var(--ease-spring);
}
.footer-social a:hover { background: var(--coral); border-color: var(--coral); color: #fff; transform: translateY(-2px); }
.footer-social .fs-ic {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 0.72rem; letter-spacing: 0;
  background: rgba(255,255,255,0.12);
}
.footer-social a:hover .fs-ic { background: rgba(255,255,255,0.22); }

/* ---------- Wander Score ---------- */
.badge.wander { background: linear-gradient(135deg, var(--ocean), #2fae6e); }
.score-row { display: grid; grid-template-columns: minmax(86px, 110px) 1fr 40px; gap: 12px; align-items: center; padding: 7px 0; }
.score-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.score-bar { height: 8px; border-radius: 999px; background: rgba(125, 125, 125, 0.22); overflow: hidden; display: block; }
.score-fill { height: 100%; width: 0; border-radius: 999px; display: block; background: linear-gradient(90deg, var(--ocean), #2fae6e); transition: width 1.2s var(--ease-out); }
.score-val { font-weight: 800; font-size: 0.92rem; text-align: right; font-variant-numeric: tabular-nums; }
.wander-ring { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.wander-ring svg { width: 100%; height: 100%; }
.ring-track { stroke: rgba(125, 125, 125, 0.22); }
.ring-fg { stroke: #2fae6e; transition: stroke-dashoffset 1.5s var(--ease-out); }
.wander-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.wander-ring-num { font-family: var(--font-display); font-size: 2.3rem; line-height: 1; }
.wander-ring-sub { font-size: 0.85rem; font-weight: 700; opacity: 0.6; align-self: center; margin-top: 12px; }
.wander-panel { display: flex; gap: clamp(20px, 3vw, 40px); align-items: center; flex-wrap: wrap; min-width: 0; }
.wander-panel .score-rows { flex: 1; min-width: min(260px, 100%); }
.wander-panel .wander-ring { margin-inline: auto; }
.wander-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #2fae6e; }
@media (prefers-reduced-motion: reduce) {
  .score-fill { transition: none; }
  .ring-fg { transition: none; }
}

/* ---------- Misc bands ---------- */
.band-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.band-split > * { min-width: 0; }
@media (max-width: 820px) { .band-split { grid-template-columns: 1fr; } }
.img-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform 1s var(--ease-out); }
.img-frame:hover img { transform: scale(1.05); }
.img-frame.wide img { aspect-ratio: 16/10; }
.tick-list li { display: flex; gap: 14px; padding: 10px 0; align-items: flex-start; }
/* Inline elements inside a flex li split into separate columns; keep content as one unit */
.tick-list li > span { flex: 1; min-width: 0; display: block; }
.tick-list li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ocean); color: #fff; font-size: 0.78rem; flex-shrink: 0; margin-top: 2px; }
.cross-list li::before { content: "✕"; background: #c0c5c2; }
.logo-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 52px); align-items: center; justify-content: center; opacity: 0.75; }
.logo-pill { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-on-dark-dim); border: 1.5px solid rgba(255,255,255,0.2); padding: 10px 24px; border-radius: 999px; transition: all 0.3s ease; }
.logo-pill:hover { color: #fff; border-color: var(--coral); }
.big-link {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1.06; padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.3s ease, padding-left 0.4s var(--ease-out);
}
.big-link:hover { color: var(--coral-hot); padding-left: 24px; }
.eyebrow-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- Utility ---------- */
.txt-coral { color: var(--coral); }
.txt-amber { color: var(--amber); }
.txt-ocean { color: var(--ocean); }
.center { text-align: center; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
/* Ink, not white: white on brand coral measures 3.10:1 and this is the keyboard
   bypass link, the one control on the page that exists solely for accessibility.
   Ink on the same coral is 6.01:1 and keeps the brand background. */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--coral); color: var(--ink); padding: 12px 20px; z-index: 999; border-radius: 0 0 12px 0; font-weight: 700; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .fade-up-late { opacity: 1 !important; transform: none !important; }
  .line-reveal > span { transform: none !important; }
  .marquee-track { animation: none !important; }
  .hero-media.kenburns img { animation: none !important; }
}

/* Trademark superscript on the WanderMe wordmark */
.brand-tm{align-self:flex-start;margin-left:-5px;font-size:.34em;font-weight:700;letter-spacing:0;line-height:1.15;text-transform:none;opacity:.8}

/* Footer "Where we go" coverage-map link */
.footer-wego{display:inline-flex;align-items:center;gap:10px;margin:12px 0 4px;padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:var(--txt-on-dark);font-weight:700;font-size:.9rem;text-decoration:none;transition:border-color .2s ease,background .2s ease}
.footer-wego:hover{border-color:var(--coral);background:rgba(255,90,54,.08)}
.footer-wego svg{width:30px;height:30px;flex-shrink:0;stroke:var(--coral);fill:none;stroke-width:1.5}
.footer-wego .arr{color:var(--coral)}

.tm-notice{font-size:.78rem;opacity:.6;margin-bottom:6px}

/* ---------- Accessibility contrast fixes (targeted, additive) ---------- */
/* Brand coral #ff5a36 is only 2.9:1 on sand/white — fine as a button background
   with its own rules, but below WCAG AA for text. Opt-in darker coral for text
   sitting on light backgrounds (5.0:1 on sand, 5.4:1 on white). */
:root { --coral-aa: #c5330f; }
.txt-coral-aa { color: var(--coral-aa); }
/* Kickers wear the true brand coral. This knowingly sits below the 4.5:1 small-text
   contrast guideline (2.86:1 on sand at 12.5px): Tyler's standing call is that the
   signature orange is the brand everywhere, and kickers are short, bold, uppercase,
   letter-spaced labels always paired with a large readable heading below them. */
.kicker.txt-coral-aa { color: var(--coral); }
.kicker.txt-coral-aa::before { background: var(--coral); }

/* Large headings get the brighter, more on-brand coral. WCAG's small-text bar
   (4.5:1) is what forces #c5330f, but "large text" (24px+, or 18.66px+ bold)
   only needs 3:1, and every heading below clears 24px at its smallest clamp:
   .h-xl is 38.4px+, .h-md is 22.4px+ in bold Anton. --coral-deep #e8431f hits
   3.69:1 on sand, so it passes as large text while reading far closer to the
   brand orange than #c5330f did. Small text (.kicker at 12.5px) is deliberately
   NOT included here: it still needs the darker value.
   Covers the class sitting on the heading itself and on a nested accent word. */
/* ---------- Saved trips: card hearts + nav avatar ---------- */
/* Heart sits top-right of the card image (badges own the top-left; score and
   days own the bottom corners). It's a real button inside the card's link, so
   the JS eats its clicks before the link can navigate. */
.cat-heart {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,253,249,.92);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
.cat-heart:hover { transform: scale(1.1); }
.cat-heart svg {
  width: 18px; height: 18px; fill: none;
  stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: fill .18s ease, stroke .18s ease, transform .18s ease;
}
.cat-heart:active svg { transform: scale(.82); }
.cat-heart.saved svg { fill: var(--coral); stroke: var(--coral); }

/* Signed-in presence in the nav: the Log in link becomes a coral circle with the
   traveller's first initial, still linking to their portal. Swapped by js/main.js
   from the stored session, so it works on every page without loading the SDK. */
.nav-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-weight: 800; font-size: .95rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0;
}
a:hover .nav-avatar { background: var(--coral-deep); }
/* The nav's hover/active underline is drawn for text links; under a circle it just
   looks like a broken dash, so the swapped link suppresses it and centres the
   circle on the nav row instead. main.js adds this class during the swap. */
.nav-links a.nav-avatar-link::after { display: none !important; }
.nav-links a.nav-avatar-link { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
/* The avatar's version of the nav underline: a coral halo that blooms on
   hover and stays lit on the portal page itself. */
.nav-links a.nav-avatar-link .nav-avatar { transition: box-shadow .25s ease, transform .25s var(--ease-spring); }
.nav-links a.nav-avatar-link:hover .nav-avatar,
.nav-links a.nav-avatar-link:focus-visible .nav-avatar,
.nav-links a.nav-avatar-link.active .nav-avatar { box-shadow: 0 0 0 3px rgba(255, 90, 54, .35); transform: translateY(-1px); }

/* Small status toast, used when an optimistic action (like a heart) has to be
   rolled back: the UI already moved on, so the failure needs its own voice. */
.wm-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px);
  z-index: 600; max-width: min(92vw, 420px);
  background: var(--ink); color: #fff;
  font-size: .88rem; font-weight: 600; line-height: 1.4; text-align: center;
  padding: 12px 18px; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.wm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Sign-in popup for saving trips: same passwordless login as the portal, shown in
   place so hearting a trip never navigates away from the page. */
.wm-auth-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(8,10,11,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.wm-auth-card {
  position: relative; width: 100%; max-width: 400px;
  background: var(--white); border-radius: var(--radius);
  padding: 28px 26px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.wm-auth-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.45rem; letter-spacing: .01em; }
.wm-auth-sub { color: var(--txt-dim); font-size: .92rem; line-height: 1.5; margin: 8px 0 16px; }
.wm-auth-sent { font-size: .9rem; color: var(--txt-dim); margin-bottom: 10px; }
.wm-auth-card input {
  width: 100%; box-sizing: border-box; font: inherit; font-weight: 600;
  padding: 12px 14px; border: 1.5px solid var(--sand-dim); border-radius: 12px;
  margin-bottom: 10px; background: #fff; color: var(--ink);
}
.wm-auth-card input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral); }
.wm-auth-go {
  width: 100%; font: inherit; font-weight: 800; color: #fff;
  background: var(--coral); border: 0; border-radius: 999px;
  padding: 12px 18px; cursor: pointer;
}
.wm-auth-go:hover { background: var(--coral-deep); }
.wm-auth-resend {
  display: block; margin: 12px auto 0; background: none; border: 0;
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--ocean);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.wm-auth-x {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px;
  background: none; border: 0; font-size: 1.05rem; color: var(--txt-dim); cursor: pointer;
}
.wm-auth-err { color: var(--coral-aa); font-size: .86rem; font-weight: 700; margin-top: 10px; min-height: 1.2em; }
/* With no error to show, this reserved a whole blank line under the button. It
   only needs to hold space when it actually says something. */
.wm-auth-err:empty { min-height: 0; margin-top: 0; }

/* ---------- Per-image loading shimmer ---------- */
/* Trip photos come from the operators through an image CDN, so a card or trip page
   can finish rendering while its photo is still in flight. Rather than an empty
   rectangle, the image's own wrapper shimmers until the photo arrives, then the
   photo fades in over it. Deliberately painted as the WRAPPER's background (not an
   overlay) so it sits behind the photo and can never cover the badges, score or
   day-count that also live inside these wrappers. Wired up in js/main.js. */
/* Identical recipe to the trip-card skeletons (.skel in catalog.html): a solid
   warm base with a slow, soft sheen sweeping across. One loading language
   everywhere — a loading photo looks like a loading card, not a different effect. */
@keyframes wmShimmer { to { transform: translateX(100%); } }
.wm-img-loading { position: relative; overflow: hidden; background: #E4DECF; }
.wm-img-loading::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  animation: wmShimmer 1.6s ease-in-out infinite;
}
img.wm-img-fade { opacity: 0; transition: opacity .35s ease; }
img.wm-img-fade.wm-loaded { opacity: 1; }
/* Reduced motion: keep the placeholder tint, drop the sweep and the fade. */
@media (prefers-reduced-motion: reduce) {
  .wm-img-loading::after { animation: none; opacity: 0; }
  img.wm-img-fade { transition: none; opacity: 1; }
}

/* Big display headings use the TRUE brand coral, so an accent word on cream
   ("You do the LIVING.") matches the hero's "YOUR PEOPLE." exactly. These are
   enormous (.h-xl is 38-74px, .h-hero up to 120px), where colour reads as brand
   rather than as body copy. #ff5a36 measures 2.86:1 on sand against a 3:1
   large-text guideline: a hair under, and a deliberate brand call on giant type. */
.h-hero.txt-coral-aa, .h-xl.txt-coral-aa, .h-lg.txt-coral-aa,
.h-hero .txt-coral-aa, .h-xl .txt-coral-aa, .h-lg .txt-coral-aa {
  color: var(--coral);
}
/* The 01/02/03 sub-headings use the SAME brand coral as the big accents — a
   one-notch-darker version here kept reading as an inconsistency next to
   "LIVING.", and on short bold Anton headings (22-32px) the 2.86:1 measure vs
   the 3:1 large-text guideline is a marginal, deliberate brand call.
   The .kicker stays darker on purpose: at 12.5px it needs 4.5:1, and brand coral
   gives 2.86:1 there, which is a genuine readability problem rather than a
   rounding one. Small print is the one place the brand colour gives way. */
.h-md.txt-coral-aa, .h-md .txt-coral-aa { color: var(--coral); }
/* Coral attribution line inside quote cards on deep-ocean sections was 4.0:1;
   the lighter brand coral reaches 4.8:1 there. */
.on-ocean .quote-who { color: var(--coral-hot); }

/* ---------- Parallax media utility (additive, opt-in) ---------- */
/* An img carrying data-parallax inside an overflow-hidden .img-frame drifts a
   few px on scroll; oversize it slightly so the drift never exposes the frame
   edges. transition:none keeps the scroll drift crisp (the inline transform
   from the parallax loop supersedes the hover zoom on these images). */
.img-frame img[data-parallax] { scale: 1.18; transition: none; }


/* ---------- Catalog trip cards (SHARED: Explore, About verified, portal Saved).
   catalog.html carries an identical local copy; keep the two in sync. ---------- */
.cat-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--sand-dim); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); transition:transform .35s var(--ease-spring), box-shadow .35s ease; color:inherit; text-decoration:none; }
.cat-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.cat-img { position:relative; aspect-ratio:4/3; overflow:hidden; }
.cat-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-spring); }
.cat-card:hover .cat-img img { transform:scale(1.06); }
.cat-sale { position:absolute; top:12px; left:12px; background:var(--coral); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.cat-feat { position:absolute; top:12px; left:12px; background:var(--amber); color:var(--ink); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:999px; }
.cat-code-inline { color:var(--txt-dim); font-weight:700; letter-spacing:.06em; }
.cat-score { position:absolute; bottom:12px; left:12px; background:rgba(13,15,16,.8); color:#7ddfa8; font-size:.72rem; font-weight:800; letter-spacing:.04em; padding:5px 10px; border-radius:999px; }
.cat-tl { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; z-index:1; }
.cat-tl > span { position:static; top:auto; left:auto; }
/* Same amber as .badge.verified. Wander Verified is one thing and should look
   like one thing: this was ocean teal on catalogue cards, green on the trip
   and sustainability pages, and amber on About. Note the green #2fae6e used
   elsewhere is the Wander SCORE colour and is deliberately left alone. */
.cat-verified { background:var(--amber); color:#16130c; font-size:.66rem; font-weight:800; letter-spacing:.04em; padding:5px 10px; border-radius:999px; }
.cat-days { position:absolute; bottom:12px; right:12px; background:rgba(13,15,16,.8); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.03em; padding:5px 10px; border-radius:999px; }
.cat-body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cat-meta { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }
.cat-name { font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:1.12rem; font-weight:800; line-height:1.25; color:var(--ink); }
.cat-foot { margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:8px; }
.cat-price { font-weight:800; font-size:1.05rem; color:var(--ink); }
.cat-price .was { color:var(--txt-dim); font-weight:600; font-size:.85rem; text-decoration:line-through; margin-right:6px; }
.cat-price .now { color:var(--coral); }
.cat-go { font-size:.8rem; font-weight:700; color:var(--ocean); white-space:nowrap; }
.cat-next { font-size:.76rem; font-weight:700; color:var(--ocean); margin-top:2px; }
.cat-next.soon { color:var(--coral); }


/* ---------- Date-range calendar (SHARED: Explore filters, portal Saved).
   catalog.html carries an identical local copy; keep the two in sync. ---------- */
.filter-toggle { font:inherit; font-weight:700; font-size:.86rem; padding:8px 14px; border-radius:999px; border:1.5px solid var(--sand-dim); background:#fff; color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.filter-toggle::after { content:"\25be"; font-size:.7rem; color:var(--txt-dim); }
.filter-toggle.active { border-color:var(--ink); background:var(--sand); }
.cal { max-width:300px; border:1px solid var(--sand-dim); border-radius:var(--radius-sm); padding:12px 14px; background:#fff; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-sel { font:inherit; font-weight:700; font-size:.82rem; padding:4px 6px; border:1px solid var(--sand-dim); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; }
.cal-nav { display:flex; gap:6px; }
.cal-nav button { width:28px; height:28px; border-radius:8px; border:1px solid var(--sand-dim); background:#fff; cursor:pointer; font-size:1rem; line-height:1; color:var(--ink); }
.cal-nav button:disabled { opacity:.3; cursor:default; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow { font-size:.58rem; font-weight:800; text-transform:uppercase; color:var(--txt-dim); text-align:center; padding:3px 0; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--txt-dim); border-radius:8px; }
.cal-day.empty { visibility:hidden; }
.cal-day.pick { color:var(--ink); cursor:pointer; }
.cal-day.pick:hover { box-shadow:inset 0 0 0 2px var(--coral); }
/* Range selection. `in` are the days between the two ends, painted as the cursor
   moves so the span being chosen is obvious; the ends are solid coral and only
   rounded on their outer side, so the whole thing reads as one continuous band. */
.cal-day.in { background:rgba(255,90,54,.16); border-radius:0; color:var(--ink); }
.cal-day.edge { background:var(--coral); color:#fff; }
.cal-day.edge-start { border-radius:8px 0 0 8px; }
.cal-day.edge-end { border-radius:0 8px 8px 0; }
.cal-done {
  font:600 .78rem/1 inherit; color:#fff; background:var(--coral); border:0;
  border-radius:999px; padding:6px 12px; cursor:pointer;
}
.cal-done:hover { filter:brightness(1.06); }
.cal-cap { font-size:.82rem; font-weight:700; margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cal-clear { font-size:.78rem; font-weight:700; color:var(--ocean); background:none; border:none; cursor:pointer; }


/* ---------- Photos / Maps toggle (SHARED: Explore, portal Saved). ---------- */
.view-toggle { display:inline-flex; border:1.5px solid var(--sand-dim); border-radius:999px; overflow:hidden; }
.view-toggle button { font:inherit; font-weight:700; font-size:.84rem; padding:9px 15px; border:none; background:#fff; color:var(--txt-dim); cursor:pointer; }
.view-toggle button.active { background:var(--ink); color:#fff; }
.map-view .cat-img img { object-fit:contain; background:#fff; }


/* Anchor targets (about.html#faq etc.) land below the fixed nav, not under it. */
:target { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ---------- Trip cards outside the catalog ----------
   .cat-card lives in this file already, but the grid that lays the cards out was
   only ever defined inside catalog.html. Trip pages and the destinations pages
   need it too, so it lives here now and every surface uses the same component. */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(18px, 2.5vw, 28px); }

/* Related trips, at the foot of a trip page.
   Column counts are fixed per breakpoint, and the number of visible cards is
   matched to them, so the block always ends on a complete row. An auto-filled
   grid would leave four cards then a stray two on a wide screen, which reads like
   an accident. The counts are chosen to land each card at roughly 280 to 300px,
   the same size a card is on the Explore page, so this section does not appear
   blown up next to the rest of the site. All six are always in the markup:
   the ones not shown at a given width are still links for search engines. */
/* The booking section above already ends with a full .section pad, so this one
   contributes no top padding of its own: three paddings in a row (section bottom,
   section top, block margin) left a canyon between the two. The hairline rule and
   a single modest pad do the separating instead. */
.rel-section { padding-top: 0; }
.rel-trips { margin: 0; padding: clamp(26px, 3vw, 38px) 0 0; border-top: 1px solid var(--sand-dim); }
.rel-trips .rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.rel-trips .rel-head h2 { margin: 0; }
.rel-trips .rel-all { font-weight: 600; color: var(--coral); text-decoration: none; white-space: nowrap; }
.rel-trips .rel-all:hover { text-decoration: underline; }

/* Wide: four across, one clean row (~289px per card, as on Explore). */
.rel-trips .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rel-trips .cat-card:nth-child(n + 5) { display: none; }

/* Laptop: three across, two rows of three. */
@media (max-width: 1179px) {
  .rel-trips .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rel-trips .cat-card:nth-child(n + 5) { display: block; }
}
/* Tablet: two across, two rows of two. */
@media (max-width: 879px) {
  .rel-trips .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-trips .cat-card:nth-child(n + 5) { display: none; }
}
/* Phone: single column, three is plenty before the footer. */
@media (max-width: 619px) {
  .rel-trips .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .rel-trips .cat-card:nth-child(n + 4) { display: none; }
}

/* ---------- Country filter (Explore) ----------
   One button in the drawer opens this panel, the same shape as the date pickers,
   so 131 countries cost no more room than a single control. Search at the top,
   the ones we run most trips to first, then the rest alphabetically. "Only"
   narrows to a single country in one move (it appears on hover on a mouse, and
   is always visible on touch, where there is no hover to reveal it). */
.ctry-panel {
  position:absolute; z-index:40; top:calc(100% + 8px); left:0; width:min(340px, 86vw);
  background:#fff; border:1px solid var(--sand-dim); border-radius:14px;
  box-shadow:0 18px 44px rgba(16,19,20,.16); padding:10px;
}
.ctry-search {
  width:100%; padding:9px 12px; border:1px solid var(--sand-dim); border-radius:10px;
  font:inherit; font-size:.9rem; margin:0 0 8px;
}
.ctry-search:focus { outline:none; border-color:var(--coral); }
.ctry-list { max-height:290px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px; }
.ctry-group { font:700 .68rem/1 inherit; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-dim); margin:10px 4px 6px; }
.ctry-row {
  display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px;
  border:0; background:none; border-radius:9px; cursor:pointer; text-align:left; font:inherit;
}
.ctry-row:hover { background:var(--sand); }
.ctry-box {
  width:16px; height:16px; flex:0 0 16px; border:1.5px solid var(--sand-dim);
  border-radius:5px; display:grid; place-items:center; color:#fff; font-size:11px; line-height:1;
}
.ctry-row.on .ctry-box { background:var(--coral); border-color:var(--coral); }
.ctry-name { flex:1; font-size:.9rem; color:var(--ink); }
.ctry-count { font-size:.78rem; color:var(--txt-dim); }
.ctry-only, .ctry-hide {
  font:700 .72rem/1 inherit; background:none; border:0; cursor:pointer;
  padding:4px 6px; border-radius:6px; opacity:0; transition:opacity .12s ease; white-space:nowrap;
}
.ctry-only { color:var(--coral); }
.ctry-hide { color:var(--txt-dim); }
.ctry-row:hover .ctry-only, .ctry-row:focus-within .ctry-only,
.ctry-row:hover .ctry-hide, .ctry-row:focus-within .ctry-hide { opacity:1; }
.ctry-only:hover { background:rgba(255,90,54,.12); }
.ctry-hide:hover { background:var(--sand-dim); color:var(--ink); }
/* touch has no hover to reveal them, so they stay visible */
@media (hover:none) { .ctry-only, .ctry-hide { opacity:1; } }

/* Hidden country: struck through and faded, with a minus in the box, so at a
   glance it is obviously excluded rather than merely unselected. Its own action
   stays legible so it can be undone. */
.ctry-row.off .ctry-name { text-decoration:line-through; color:var(--txt-dim); }
.ctry-row.off .ctry-box { background:var(--txt-dim); border-color:var(--txt-dim); color:#fff; }
.ctry-row.off .ctry-hide { opacity:1; color:var(--ink); font-weight:800; }
.ctry-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--sand-dim); }
.ctry-none { padding:14px 8px; color:var(--txt-dim); font-size:.88rem; }
.ctry-picked { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ctry-tag {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background:rgba(255,90,54,.12); color:var(--ink); font-size:.82rem; font-weight:600;
}
.ctry-tag button { border:0; background:none; cursor:pointer; color:var(--coral); font-size:.9rem; line-height:1; padding:0; }
/* A hidden country reads as a struck-through grey chip, never coral: coral means
   "show me this", and these mean the opposite. */
.ctry-tag.hid { background:var(--sand-dim); color:var(--txt-dim); text-decoration:line-through; }
.ctry-tag.hid button { color:var(--txt-dim); text-decoration:none; }
.ctry-clear-all {
  font:700 .78rem/1 inherit; color:var(--coral); background:none; border:0; cursor:pointer;
  padding:5px 8px; border-radius:999px; align-self:center;
}
.ctry-clear-all:hover { background:rgba(255,90,54,.12); }

/* The Saved trips chip when there is nothing to show yet (signed out, or signed
   in with no hearts). Muted rather than disabled: it still responds, explaining
   itself and offering sign-in, so it never looks broken. */
.chip[data-locked] { opacity:.65; }
.chip[data-locked]:hover { opacity:1; border-color:var(--coral); }

/* The consent line at the foot of the sign-in popup. Sits in the space below the
   button, small and quiet: it is a legal notice, not a sales message. */
.wm-auth-legal {
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--txt-dim);
  text-align: center;
}
.wm-auth-legal a { color: var(--txt-dim); text-decoration: underline; }
.wm-auth-legal a:hover { color: var(--coral); }

/* On a phone the country panel sits inside the filter drawer, which is itself a
   scrolling column. A fixed 340px panel overflowed the drawer's width and got
   clipped, so give it the full width available and a little more height. */
@media (max-width: 520px) {
  .ctry-panel { width: 100%; left: 0; right: 0; }
  .ctry-list { max-height: 46vh; }
}

/* ============================================================
   NEW UX EXPERIMENTS (sandbox 2026-08-23)
   Hero search, quick chips, trust strip, sale ribbon,
   deals rail badge, destination tiles.
   ============================================================ */

/* ---- Quick chips under the search ---- */
.hero-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; max-width: 780px; }
.hq-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-on-dark-dim); margin-right: 2px; }
.hero-quick a, .hero-quick button {
  font-size: .8rem; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; font-family: inherit;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.hero-quick a:hover, .hero-quick a:focus-visible,
.hero-quick button:hover, .hero-quick button:focus-visible { transform: translateY(-2px); border-color: var(--coral); background: rgba(255, 90, 54, .2); }
.hero-quick a.hq-custom { border-style: dashed; border-color: rgba(255, 214, 130, .55); color: var(--amber); }
.hero-quick a.hq-custom:hover { border-color: var(--amber); background: rgba(255, 214, 130, .12); }
.hero-browse { margin-top: 10px; }
.hero-quick a.hq-all { background: var(--coral); border-color: var(--coral); font-weight: 800; }
.hero-quick a.hq-all:hover { background: #ff6c4b; border-color: #ff6c4b; }
.hero-quick a.hq-all .arr { margin-left: 4px; }

/* ---- Trust strip ---- */
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.hero-trust li { font-size: .84rem; font-weight: 600; color: var(--txt-on-dark-dim); display: flex; align-items: center; gap: 7px; }
.hero-trust li::before { content: "✓"; color: #2FAE6E; font-weight: 800; }

/* ---- Sale ribbon (in-flow at the top of the hero copy) ---- */
.sale-ribbon {
  display: flex; width: fit-content; align-items: center; gap: 2px;
  max-width: 100%;
  background: var(--coral); color: #fff; border-radius: 999px;
  padding: 7px 8px; margin-bottom: 26px;
  box-shadow: 0 14px 34px -12px rgba(255, 90, 54, .55);
}
.sale-ribbon a {
  display: flex; align-items: center; gap: 9px; min-width: 0; color: #fff; text-decoration: none;
  font-size: .86rem; font-weight: 700; padding: 0 6px;
}
.sale-ribbon a .arr { transition: transform .18s ease; }
.sale-ribbon a:hover .arr { transform: translateX(3px); }
#saleRibbonTxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-tag {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .24); padding: 3px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.sale-ribbon button {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sale-ribbon button:hover { background: rgba(255, 255, 255, .32); }
@media (max-width: 560px) {
  .sale-ribbon { margin-bottom: 20px; padding: 6px 7px; }
  .sale-ribbon a { font-size: .78rem; gap: 7px; }
  .sr-tag { font-size: .6rem; padding: 3px 7px; }
}

/* ---- Deals rail ---- */
/* Sale = coral, everywhere. This badge was the one green holdout, which read
   as a "good/eco" signal rather than a discount and clashed with the coral
   sale ribbon, the catalog's .cat-sale flag and the coral sale price. */
.badge.deal { background: var(--coral); color: #fff; }

/* ---- Destination tiles ---- */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 10px; }
.dest-tile {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 3; text-decoration: none;
  transform: translateZ(0); box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(0, 0, 0, .35));
  transition: transform .25s ease, box-shadow .25s ease;
}
.dest-tile:hover, .dest-tile:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lg, 0 22px 50px -18px rgba(0, 0, 0, .45)); }
.dest-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dest-tile:hover img { transform: scale(1.06); }
.dest-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 19, 20, 0) 42%, rgba(16, 19, 20, .88) 100%);
}
.dt-body { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.dt-body strong { font-family: var(--font-display, 'Anton', sans-serif); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; color: #fff; text-transform: uppercase; }
.dt-go { font-size: .76rem; font-weight: 700; color: var(--amber); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.dest-tile:hover .dt-go, .dest-tile:focus-visible .dt-go { opacity: 1; transform: none; }
@media (max-width: 1000px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dest-grid { gap: 12px; } .dt-body strong { font-size: 1.1rem; } }

/* [hidden] must always win, even where a display rule is set above. */
.sale-ribbon[hidden], #dealsSec[hidden], #destSec[hidden] { display: none !important; }


/* ============================================================
   Centered hero rework (2026-08-23 v3): one compact block, search
   as a true pill with the button INSIDE, everything intentional.
   ============================================================ */
/* .hero bottom-anchors its content (align-items: flex-end), which is right for
   the left-aligned heroes on the inner pages but left the centered homepage
   hero pinned to the floor with a dead zone above it. Centre it in the hero
   instead; the heavier top padding offsets the overlaid nav so the block lands
   optically centred in the space below the header, not just geometrically. */
.home-compact .hero, .custom-page .hero, .sustain-page .hero, .about-page .hero { align-items: center; }
/* Centred heroes put their CTAs in a flex row, which text-align cannot move. */
.hero-centered .hero-ctas { justify-content: center; }
/* ---- Split hero -------------------------------------------------------
   Headline holding the left, supporting copy and buttons against it on the
   right, so a hero reads as one dense block instead of five things stacked
   down the middle of the screen. Collapses to a single column where two would
   be too narrow to read. Used by the Custom and Sustainability heroes. ---- */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: clamp(28px, 4vw, 68px);
  max-width: 1180px; margin: 0 auto; text-align: left;
  padding: calc(var(--nav-h) + 14px) var(--pad-x) 30px;
}
.hero-split .kicker { justify-content: flex-start; }
/* about-hero.jpg is portrait (1500x2000) in a landscape hero, so object-fit:
   cover discards ~58% of the frame from the centre and keeps the emptiest part
   of it. Bias the crop down to hold the coastline where the hero is wide; on a
   phone the box is already tall and the default centre crop is right. */
@media (min-width: 761px) {
  .about-page .hero-media img { object-position: 50% 68%; }
}
/* "Adventure that doesn't" needs 533px and the default column gives 512, so the
   headline broke with "doesn't" stranded on its own line. Widen the left column
   for this page rather than shrink the type; the right column still clears the
   42ch sub-copy and both buttons.
   Gated to the two-column range on purpose: unscoped, this selector outweighs
   the single-column rule in the max-width block below (0,2,0 beats 0,1,0) and
   the hero stays in two columns on a phone, which squeezed "How we score" onto
   three lines. */
@media (min-width: 901px) {
  .sustain-page .hero-split { grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr); }
}
.hero-split .h-hero { margin-top: 14px; font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.hero-split .hero-sub { margin: 0 0 22px; max-width: 42ch; font-size: clamp(1rem, 1.25vw, 1.12rem); }
.hero-split .hero-ctas { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 18px; text-align: center;
                padding: calc(var(--nav-h) + 18px) var(--pad-x) 28px; }
  .hero-split .kicker { justify-content: center; }
  .hero-split .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-split .hero-ctas { justify-content: center; }
}

.hero-centered { text-align: center; max-width: 1080px; margin: 0 auto; padding: calc(var(--nav-h) + 60px) var(--pad-x) 76px; }
.hero-centered .kicker { display: flex; justify-content: center; }
.hero-centered .sale-ribbon { margin: 0 auto 26px; }
.hero-centered .h-hero { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }
.hero-centered .hero-sub { margin: 20px auto 30px; max-width: 58ch; }
.hero-centered .hero-quick { justify-content: center; margin-top: 20px; max-width: none; }
.hero-centered .hero-browse { margin-top: 10px; }
.hero-centered .hero-trust { justify-content: center; margin-top: 26px; gap: 8px 26px; }
@media (max-width: 760px) {
  /* Phone: the block already fills the hero, so trade the desktop breathing
     room for room the trust list actually needs. The kicker rule is dropped
     because the label wraps to two lines here and the dash ends up floating
     off to the left of them. */
  .hero-centered { padding: calc(var(--nav-h) + 20px) var(--pad-x) 72px; }
  .hero-centered .kicker::before { display: none; }
}

/* ============================================================
   White hero search bar (2026-08-24): TourRadar-clear. One tall
   white pill, icons instead of labels, button inside.
   ============================================================ */
.hero-search {
  display: flex; align-items: stretch;
  max-width: 860px; margin: 0 auto; padding: 8px;
  background: #fff; border-radius: 999px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55);
}
.hs-field { display: flex; align-items: center; gap: 11px; padding: 0 18px; position: relative; min-width: 0; }
.hs-ic { flex: 0 0 auto; width: 20px; height: 20px; color: #8a8f94; }
.hs-ic svg { width: 100%; height: 100%; display: block; }
.hs-dest { flex: 1 1 auto; }
.hs-month { flex: 0 0 auto; min-width: 186px; border-left: 1.5px solid #e9e4da; }
.hs-field input, .hs-month-btn {
  background: transparent; border: none; outline: none; font: inherit;
  font-size: 1.02rem; font-weight: 600; color: var(--ink); width: 100%; min-width: 0; padding: 15px 0;
}
.hs-field input::placeholder { color: #9aa0a6; font-weight: 500; }
.hs-month-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; text-align: left; white-space: nowrap; }
.hs-chev { font-size: .68rem; color: #9aa0a6; }
.hs-go { flex: 0 0 auto; border-radius: 999px; padding-inline: 30px; }
/* Travellers segment. Sized to its own content so it takes as little as possible
   from the destination field, which is the one that actually needs room. */
.hs-pax { flex: 0 0 auto; border-left: 1.5px solid #e9e4da; }
.hs-pax-btn {
  display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left;
  background: transparent; border: none; outline: none; font: inherit;
  font-size: 1.02rem; font-weight: 600; color: var(--ink); padding: 15px 0; white-space: nowrap;
}
.hs-pax-menu { left: auto; right: 0; width: 200px; }
.hs-suggest {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 60; width: min(430px, 92vw);
  background: #fff; border: 1px solid var(--sand-dim); border-radius: 16px;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .35);
  max-height: 330px; overflow-y: auto; overscroll-behavior: contain; text-align: left;
  scrollbar-width: thin;
}
.hs-suggest::-webkit-scrollbar { width: 8px; }
.hs-suggest::-webkit-scrollbar-thumb { background: #d9d3c7; border-radius: 99px; }
.hs-opt {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 12px 18px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: .94rem; font-weight: 600; color: var(--ink); text-align: left;
}
.hs-opt + .hs-opt { border-top: 1px solid #f1ede4; }
.hs-opt:hover, .hs-opt:focus-visible, .hs-opt.sel { background: var(--sand); }
.hs-opt span { font-size: .74rem; font-weight: 700; color: var(--coral); opacity: 0; transition: opacity .15s ease; }
.hs-opt:hover span, .hs-opt.sel span { opacity: 1; }
.hs-month-menu { left: auto; right: 0; width: 250px; }
@media (max-width: 720px) {
  .hero-search { flex-wrap: wrap; border-radius: 26px; }
  /* Source order is where / when / who, which is the order these read in on a
     wide pill. A phone wants the narrow Who segment tucked up beside the wide
     destination field instead, so the second row keeps room for the month,
     filters and Search. `order` does that regrouping without moving anything in
     the markup, so the reading order stays right for a screen reader. */
  /* The basis here decides where the row breaks, so it is picked deliberately.
     Flexbox breaks lines using each item's basis, before any growing happens.
     At `auto` the input measures ~280px, so destination + travellers overflowed
     337px and travellers dropped to its own row (three rows again). At 0 every
     item fitted on one line and the destination field collapsed to 50px. 180px
     is the middle: destination + travellers is 260 and fits, adding the month
     would be 424 and does not — so the break lands exactly after travellers,
     and destination then grows into whatever is left of row one. */
  .hs-dest { flex: 1 1 180px; min-width: 0; order: 1; border-bottom: 1.5px solid #e9e4da; }
  .hs-pax  { flex: 0 0 auto; order: 2; border-bottom: 1.5px solid #e9e4da; }
  .hs-month { flex: 1 1 auto; min-width: 0; order: 3; border-left: none; }
  .hs-adv { order: 4; }
  .hs-go { flex: 0 0 auto; order: 5; }
  .hs-suggest { width: 100%; }
  .hs-month-menu { left: 0; right: 0; width: auto; }
  .hs-pax-menu { left: auto; right: 0; width: 180px; }
  .hs-pax { padding: 0 14px; }
  .hs-pax-btn { gap: 6px; }
}
/* Narrow phones (360px and under). Row two carries the month, Advanced and
   Search, and at full size those three total more than the row can hold, so
   Search dropped to a third row and the pill grew by 50px. Trimming the padding
   — and the arrow, which is decoration next to the word Search — brings the row
   back inside its width. The month keeps an auto basis on purpose: at basis 0 it
   would measure as nothing and jump up to join row one. */
@media (max-width: 380px) {
  .hs-go { padding-inline: 13px; font-size: .93rem; }
  .hs-go .arr { display: none; }
  .hs-adv { padding: 0 8px; }
  .hs-pax { padding: 0 10px; }
  .hs-pax-btn { gap: 4px; }
  .hs-field { padding: 0 12px; }
}

/* ---- Quick-browse pills above the deals rail ---- */
.deals-browse { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; }
.db-pill {
  font-size: .84rem; font-weight: 700; color: var(--ink); text-decoration: none;
  padding: 9px 17px; border-radius: 999px; background: #fff; border: 1.5px solid var(--sand-dim);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.db-pill:hover, .db-pill:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-1px); }
.db-pill.db-all { background: var(--ink); border-color: var(--ink); color: #fff; }
.db-pill.db-all:hover { background: var(--coral); border-color: var(--coral); }

/* ============================================================
   Desktop density pass (homepage only, body.home-compact):
   smaller headlines, tighter sections, smaller rail cards.
   ============================================================ */
/* Second density pass. The first one trimmed type and rails; the page still read
   as endless because the repeating costs were structural — a full section pad top
   and bottom on every band, and two band-split photos locked to a 4/5 portrait,
   which at half of a 1280px wrap is roughly 750px of image each. Trimming the
   repeating costs beats shortening any one section, because they compound: there
   are nine of these bands between the hero and the footer. */
.home-compact .section, .custom-page .section, .sustain-page .section, .about-page .section { padding: clamp(22px, 2.6vw, 38px) var(--pad-x); }
.home-compact .h-xl, .custom-page .h-xl, .sustain-page .h-xl, .about-page .h-xl { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.home-compact .band-split, .custom-page .band-split, .sustain-page .band-split, .about-page .band-split { gap: clamp(24px, 3.4vw, 54px); }
/* Height, not aspect-ratio: pairing aspect-ratio with a max-height shrinks the
   WIDTH to preserve the ratio, which would leave a half-width column with a
   letterboxed photo floating in it. .wide frames keep their own 16/10. */
.home-compact .band-split .img-frame:not(.wide) img { aspect-ratio: auto; height: clamp(240px, 28vw, 400px); }
.home-compact .lead, .custom-page .lead, .sustain-page .lead, .about-page .lead { font-size: clamp(.98rem, 1.2vw, 1.08rem); }
.home-compact .section-head, .custom-page .section-head, .sustain-page .section-head, .about-page .section-head { margin-bottom: clamp(12px, 1.6vw, 20px); }
.home-compact .section-head > * + *, .custom-page .section-head > * + *, .sustain-page .section-head > * + *, .about-page .section-head > * + * { margin-top: 12px; }
.home-compact .hscroll > * { flex-basis: clamp(220px, 18.5vw, 285px); }
.home-compact .tc-body { padding: 16px; }
.home-compact .tc-name { font-size: 1.15rem; line-height: 1.1; }
.home-compact .tc-price { font-size: .88rem; }
.home-compact .tc-price strong { font-size: 1.02rem; }
.home-compact .badge { font-size: .64rem; padding: 5px 10px; }
.home-compact .db-pill { font-size: .8rem; padding: 8px 15px; }
.home-compact .deals-browse { margin-bottom: 16px; }
/* The card, not the image, sets the height. This rule used to target the img,
   which is position:absolute with inset:0 and height:100% — aspect-ratio cannot
   apply to that, so the rule did nothing and the cards kept the base 4/5
   portrait: 511px tall at a 1440 viewport, and taller still on a wide screen
   because the ratio scales with the column width. A min-height with a clamp caps
   them instead, so three cards read as a row rather than filling the screen. */
.home-compact .persona-card { aspect-ratio: auto; min-height: clamp(290px, 24vw, 400px); }

/* The deals rail ends on a centred "See all deals" button, and its section pad
   plus the next section's stacked to about 100px of empty cream before the next
   headline. Shorter here only; every other section keeps its normal rhythm. */
.home-compact #dealsSec { padding-bottom: clamp(14px, 1.6vw, 22px); }
/* ...and the section that follows it. Trimming only the rail's own bottom pad
   moved the gap by 4px, because most of it was the NEXT section's top pad. This
   pair is the only place two full section pads meet with just a centred button
   between them, so it is the only place that needs the adjacent-sibling trim. */
.home-compact #dealsSec + .section { padding-top: clamp(18px, 2.2vw, 30px); }
.home-compact .quote-card { padding: 22px 24px; }
.home-compact .hero-centered .h-hero, .custom-page .hero-centered .h-hero { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.home-compact .hero-sub, .custom-page .hero-sub { font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* ---- Hero height (homepage, desktop) ----
   The hero was a full 100svh, so the block sat centred in the whole screen with
   about 170px of empty photo above it and 180px below, and the next section
   began exactly at the fold: on a 1440x900 laptop nothing underneath the hero
   was visible on load. Trimming the hero and the block's own padding lifts the
   sections below it, so the deals headline and its arrows clear the fold and
   the page reads as something you are meant to scroll.

   Phones are deliberately excluded. The two blocks further down this file tune
   this same hero for short screens, and they are single-class selectors: an
   unscoped .home-compact rule here would outrank them and quietly undo that
   work. Everything below stays inside min-width: 761px for that reason.

   These are the "option B" numbers. To go tighter (option C) swap in:
     min-height 78svh | padding calc(var(--nav-h) + 14px) / 28px
     sale-ribbon 14px | hero-sub 14px auto 20px | hero-trust 14px
   That buys roughly another 72px of the next section above the fold, at the
   cost of cropping the hero photo's horizon. */
@media (min-width: 761px) {
  .home-compact .hero { min-height: 86svh; }
  /* The Custom hero holds a kicker, three headline lines, one sub-copy line
     and two buttons — about 390px of ink. At 86svh it sat in an 817px box,
     so more than half of it was empty and the page below never hinted at
     itself. Sized to the content instead. */
  /* 62svh keeps it compact on a tall screen; the 540px floor stops a short
     laptop (1280x700 gives a 434px hero) squeezing the block until there is
     no room left under it for the route. */
  .custom-page .hero, .sustain-page .hero, .about-page .hero { min-height: max(62svh, 540px); }
  .home-compact .hero-centered { padding-top: calc(var(--nav-h) + 26px); padding-bottom: 40px; }
  .custom-page .hero-centered { padding-top: calc(var(--nav-h) + 18px); padding-bottom: 30px; }
  .custom-page .hero-centered .hero-sub { margin: 14px auto 22px; }
  .custom-page .hero-centered .h-hero { font-size: clamp(2.1rem, 4vw, 3.35rem); }
  .home-compact .hero-centered .sale-ribbon { margin-bottom: 18px; }
  .home-compact .hero-centered .hero-sub { margin: 16px auto 24px; }
  .home-compact .hero-centered .hero-trust { margin-top: 18px; }
}

/* ---- Advanced search control inside the pill ---- */
.hs-adv {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: .86rem; font-weight: 700; color: #6b7075;
  padding: 0 18px; border-left: 1.5px solid #e9e4da; white-space: nowrap;
}
.hs-adv:hover { color: var(--ink); }
.hs-adv svg { width: 17px; height: 17px; }
/* ---- Phone: the search pill and the trust line ----
   Three phone-only corrections.

   1. Search was flex: 1 1 auto, so on the wrapped second row it split the space
      evenly with the month field and ended up the largest element in the hero.
      It is sized to its own label now, which also gives the month field room.

   2. Advanced used to be display:none below 720px. That quietly removed budget,
      duration, style and operator filtering for phone visitors, who are most of
      them — and all the button does is open the catalogue with its filter
      drawer showing, which works just as well on a phone. It is back, compact,
      sitting between the month field and Search.

   3. The three trust lines wrapped onto three rows and took roughly a third of
      the hero. They share one line now and cycle, four seconds each. It is a
      CSS animation rather than JS so it costs nothing, and under reduced motion
      the cycling stops and all three simply stack the way they used to. */
@media (max-width: 720px) {
  .hs-go { flex: 0 0 auto; padding-inline: 20px; }
  /* Icon only here. With its label the button needed ~108px and the row could
     not hold month + Advanced + Search in 337px, so Search wrapped onto a third
     row of its own and the pill grew taller than it started. The icon keeps the
     filter entry point without costing the row its second field; the button
     carries an aria-label so it is still named for screen readers. */
  .hs-adv { padding: 0 12px; }
  .hs-adv-label { display: none; }
  .hs-adv svg { width: 17px; height: 17px; }

  .hero-trust { position: relative; display: block; height: 1.7em; margin-top: 16px; }
  .hero-trust li {
    position: absolute; left: 0; right: 0; top: 0;
    justify-content: center; opacity: 0;
    animation: trust-cycle 12s ease-in-out infinite;
  }
  .hero-trust li:nth-child(2) { animation-delay: 4s; }
  .hero-trust li:nth-child(3) { animation-delay: 8s; }
}
/* Each line fades and lifts through its own third of the 12s loop. */
@keyframes trust-cycle {
  0%        { opacity: 0; transform: translateY(10px); }
  2%, 31%   { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-10px); }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .hero-trust { position: static; display: flex; height: auto; }
  .hero-trust li { position: static; opacity: 1; animation: none; transform: none; }
}

/* ============================================================
   Short phones (SE / 8-class, <=740px tall). At full size the
   centered hero runs 810px against a 667px screen: the trust
   list falls below the fold and the help bubble, fixed to the
   bottom-right, lands squarely on the "All 2,000+ trips" pill.
   Tighten the stack so the whole block fits the screen and
   nothing tappable sits under the bubble.
   ============================================================ */
@media (max-width: 760px) and (max-height: 740px) {
  .hero-centered { padding: calc(var(--nav-h) + 8px) var(--pad-x) 40px; }
  .hero-centered .sale-ribbon { margin-bottom: 14px; }
  .hero-centered .kicker { font-size: .68rem; letter-spacing: .14em; }
  .home-compact .hero-centered .h-hero { font-size: 2.15rem; }
  .home-compact .hero-centered .hero-sub { font-size: .98rem; margin: 12px auto 18px; }
  .hero-centered .hero-quick { margin-top: 12px; }
  .hero-centered .hero-trust { margin-top: 14px; gap: 6px 20px; }
  .hero-search { padding: 6px; }
  .hero-search .hs-field input, .hero-search .hs-month-btn { padding: 12px 0; }
}

/* ---- Party size control (live trip.html) ----
   Carried over from the pre-redesign stylesheet. trip.html renders this
   control and is deliberately not part of this launch, so these rules must
   ship with the new sheet or that control loses its styling. ---- */
.pax-ctl { display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--sand-dim); border-radius:999px; background:#fff; padding:2px; }
.pax-ctl.active { border-color:var(--ink); background:var(--sand); }
.pax-value { font-weight:700; font-size:.86rem; color:var(--ink); min-width:9.5ch; text-align:center; padding:0 4px; }
.pax-step { width:32px; height:32px; border:0; border-radius:999px; background:transparent; color:var(--ink); font-size:1.15rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pax-step:hover:not(:disabled) { background:var(--sand-dim); }
.pax-step:disabled { color:var(--txt-dim); cursor:default; opacity:.45; }