/* ==========================================================================
   AXOM INTERNATIONAL TOURS — Homepage Stylesheet
   Framework-agnostic pure CSS. Converts cleanly to Next.js or PHP.
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand */
  --blue:        #1B4A9C;
  --navy:        #12224A;
  --gold:        #B8963E;
  --gold-light:  #C9A84C;

  /* Neutrals */
  --cream:       #FAF7F2;
  --cream-deep:  #F3EDE4;
  --white:       #FFFFFF;
  --ink:         #1A1A1A;
  --body:        #5A5A5A;
  --muted:       #8A8A8A;
  --line:        #E5DFD6;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --max:       1280px;
  --gutter:    clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 120px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- 3. UTILITIES ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.bg-cream { background: var(--cream); }
.bg-cream-deep { background: var(--cream-deep); }

.eyebrow {
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 18px;
}

.h-display { font-size: clamp(2.8rem, 5.6vw, 4.4rem); }
.h-section { font-size: clamp(2.2rem, 4vw, 3.3rem); }
.h-card    { font-size: clamp(1.4rem, 2.3vw, 1.75rem); }

.lede { font-size: 17px; color: var(--body); max-width: 46ch; margin: 0; }

.rule { width: 56px; height: 1px; background: var(--gold); margin: 22px 0; border: 0; }
.rule.center { margin-inline: auto; }

/* .lede is capped at 46ch with margin:0, which is right in a left-aligned
   column but wrong inside a centred block: the narrow box stays flush left and
   text-align:center then centres the words *inside that box*, so the paragraph
   reads as shifted left against the full-width text around it. This was being
   patched with inline margin-inline:auto on some pages and not others — hence
   the inconsistency. Fixed once, here. */
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Long-form copy column, for marketing pages.

   Replaced `.center.readable`, which centred the eyebrow, heading and lede but
   set the body left. That hybrid is what made the About page look misaligned —
   within one section the reader saw a centred heading, a centred lede, then
   paragraphs starting somewhere else.

   Everything in a .copy-block is left-aligned, and the block is anchored to the
   left of .wrap, so its left edge lines up exactly with .split-text and with the
   page hero. One vertical axis down the whole page.

   NOT called .prose — that name is already taken by the legal pages below
   (§ Legal / long-form), where `.prose h2` carries a border-top and the body is
   14.5px. Reusing it here silently restyled every About heading, because
   `.prose h2` (0-1-1) outranks `.h-section` (0-1-0).

   The measure is capped in ch, not px: what limits readability is characters
   per line, roughly 65–75, not a pixel width. */
.copy-block { max-width: 68ch; text-align: left; }
.copy-block .rule { margin-inline: 0; }
.copy-block > p + p { margin-top: 18px; }

/* Two-column editorial layout for the long About sections.

   A single 68ch column anchored left leaves ~45% of a 1280px page empty, which
   reads as unfinished rather than airy. Splitting heading from body uses the
   width, gives the eye a clear entry point, and keeps ONE left axis: the
   heading column starts exactly where .split-text and the page hero start.

   The body column is capped at 58ch — narrower than the 68ch single column,
   because it now sits beside something rather than alone. */
.copy-split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4.5vw, 76px);
  align-items: start;
}
.copy-split .copy-head .rule { margin-block: 22px 0; margin-inline: 0; }
.copy-split .copy-head .h-section { margin-bottom: 0; }
.copy-split .copy-body { max-width: 58ch; }
.copy-split .copy-body > * + * { margin-top: 18px; }
.copy-split .copy-body .lede + p { margin-top: 20px; }

/* One column below the point where two would squeeze the measure. The heading
   leads, as it does on the page hero. */
@media (max-width: 900px) {
  .copy-split { grid-template-columns: 1fr; gap: 22px; }
  .copy-split .copy-body { max-width: 68ch; }
}

/* Section heading row: title left, link right */
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* ---------- 4. BUTTONS & LINKS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--navy); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--gold); }

.btn-ghost { border: 1px solid rgba(255,255,255,.55); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* Text link with circular arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap .3s var(--ease);
}
.link-arrow:hover { gap: 18px; }
.link-arrow .circ {
  width: 26px; height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px;
  flex-shrink: 0;
}
.link-arrow.on-dark { color: var(--white); }

/* ---------- 5. HEADER / NAV ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  box-shadow: 0 1px 20px rgba(0,0,0,0);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled {
  background: var(--white);
  box-shadow: 0 1px 20px rgba(0,0,0,.12);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 88px;
}
.brand { display: block; line-height: 0; }
.brand img { height: 44px; width: auto; }
.brand .logo-light { display: none; }
.brand .logo-dark  { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-inline: auto;
}
.nav-links a {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 400;
  position: relative;
  padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .35s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 18px; }

.burger {
  display: grid;
  gap: 5px;
  padding: 8px;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--navy);
  transition: all .3s var(--ease);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 110;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--white);
  padding-block: 10px;
  transition: color .3s var(--ease);
}
.drawer a:hover { color: var(--gold-light); }
.drawer-close {
  position: absolute;
  top: 28px; right: 32px;
  font-size: 30px;
  color: var(--white);
  line-height: 1;
}

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  /* Full viewport height, with a floor so short/landscape windows stay usable */
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--ink);
  overflow: hidden;
}
.hero picture,
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-bg { display: block; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.65) 40%, rgba(255,255,255,.1) 70%);
  z-index: -1;
}
.hero-inner { max-width: 560px; padding-block: 120px 40px; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { color: var(--navy); margin-bottom: 4px; }
.hero .lede { color: var(--body); margin-bottom: 36px; }
.hero .rule { background: var(--gold); }
.hero .link-arrow { color: var(--navy); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- 7. SPLIT (Soul of Assam) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
/* Flips text and image so consecutive split sections don't march down the
   page in the same direction. Order is reset at the mobile breakpoint below,
   where the grid collapses to one column and text must lead. */
.split.reverse .split-text  { order: 2; }
.split.reverse .split-media { order: 1; }

.split-media { position: relative; }
.split-media img {
  width: 100%;
  /* height:auto is load-bearing. An <img> with width/height attributes — which
     it should have, they prevent layout shift — otherwise uses the ATTRIBUTE
     height, and the aspect-ratio above is ignored. That rendered the homepage
     photograph 609x959 instead of 609x457: right width, natural height, nearly
     three times too tall. Same trap as .founder-portrait img. */
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(11,31,59,.25);
}
.split-text .h-section { margin-bottom: 4px; }
.split-text .lede { margin-bottom: 26px; }

/* Decorative leaf watermark */
.split-text { position: relative; }

/* The Assam split's photo is noticeably taller than its text column, and
   center-alignment (the .split default) let it hang well past the "Our
   Story" link with nothing grounding it — read as a stray image rather
   than a designed section. Top-aligning the columns keeps its bottom edge
   close to the text above it. */
#assam .split { align-items: start; }

/* The Soul of Assam artwork (assets/img/soul-of-assam.png) is a composed,
   transparent-background graphic with its own gold frame, drop shadow and
   leaf sprigs baked in — not a rectangular photo. The generic .split-media
   treatment (hard crop to 4:3, added border, added shadow) fought the art
   instead of showing it: a visible box drawn around an irregular shape,
   plus object-fit:cover slicing off the frame's rounded corners. Scoped to
   this one figure so the other .split-media photos keep their frame. */
#assam .split-media img {
  aspect-ratio: auto;
  object-fit: contain;
  border: none;
  box-shadow: none;
  max-width: 85%;
  margin-inline: auto;
  display: block;
}

/* ---------- 8. DESTINATION CAROUSEL ---------- */
.rail-outer { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rail::-webkit-scrollbar { display: none; }

.dest-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  scroll-snap-align: start;
  display: block;
}
/* Destinations with no photography yet (Russia and Switzerland, added
   24 Aug). Same colour-and-weave treatment as the group tiles, so an absent
   photo reads as a designed panel rather than a hole — and no stock photo is
   borrowed, which the client ruled out on 23 Aug.

   Swap in an <img> when he sends pictures; the .no-photo class is all that
   needs removing. */
.dest-card.no-photo,
.trip-card .shot.no-photo {
  background-color: #16305C;
  background-image: url("../img/weave.svg");
  background-size: 110px 110px;
  background-blend-mode: soft-light;
}
.dest-card.no-photo[data-dest="switzerland"] { background-color: #1F4E6B; }
.dest-card.no-photo[data-dest="russia"]      { background-color: #4A2A55; }

.dest-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.dest-card:hover img { transform: scale(1.07); }
.dest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,14,30,.82) 0%, rgba(8,14,30,.22) 45%, transparent 70%);
}
.dest-card figcaption {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  z-index: 2;
  color: var(--white);
}
.dest-card figcaption .name {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.2;
  display: block;
}
.dest-card figcaption .tag {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 6px;
  display: block;
}

.rail-nav {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 22px rgba(0,0,0,.16);
  display: grid; place-items: center;
  z-index: 5;
  color: var(--navy);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.rail-nav:hover { background: var(--gold); color: var(--white); }
.rail-nav.next { right: -18px; }
.rail-nav.prev { right: auto; left: -18px; }

/* ---------- 9. CATEGORY TILES (Travel Your Way) ---------- */
/* Six groups, so the column counts are chosen to divide evenly — 6, then 3,
   then 2. auto-fit was leaving a 5 + 1 orphan row on a wide screen, which
   looked like a mistake rather than a layout. Explicit counts instead. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}

/* 3 x 2 once six across would make each tile too narrow to read.

   1200px is where six columns still leaves ~168px per tile. Below that the
   name starts breaking badly — "Special Departures" is the constraint. */
@media (max-width: 1200px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Group tiles.

   The client asked (23 Aug) for Indian imagery with no faces, to avoid
   copyright exposure, and for an identification colour per group: royal blue
   and gold for Men Only, baby pink for Women Only, and so on. The tiles
   previously carried Western stock faces, which failed on both counts.

   He then supplied the photographs himself — Indian locations, every subject
   shot from behind, already graded to those colours. They live in
   assets/img/categories/ named after the group slug.

   So each tile is three layers:
     1. --tile-deep + the gamosa weave, visible only while the photo loads
        or if it 404s, so a failed tile still reads as a designed panel
     2. the photograph
     3. a bottom-weighted scrim in the group colour, for label legibility
*/
.cat-tile {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  display: block;
  /* Sits behind the photograph. Visible only while it loads, or if it 404s —
     a broken tile then still reads as a designed panel rather than a gap. */
  background-color: var(--tile-deep);
  background-image: url("../img/weave.svg");
  background-size: 120px 120px;
  background-blend-mode: soft-light;
  transition: transform .6s var(--ease);
}
.cat-tile:hover { transform: translateY(-3px); }

/* Client photography. <picture> wraps it, so the positioning has to sit on the
   wrapper too or the img has nothing to fill. */
.cat-tile picture {
  position: absolute;
  inset: 0;
  display: block;
}
.cat-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.cat-tile:hover img { transform: scale(1.05); }

/* Scrim, not a tint.

   The photographs are already graded to each group's colour, so washing them
   in more of the same only muddies them. This is a bottom-weighted darkening
   whose colour comes from the group — enough to hold white type at any size,
   invisible across the top two-thirds where the picture does the work. */
.cat-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--tile-deep) 92%, transparent) 0%,
    color-mix(in srgb, var(--tile-deep) 55%, transparent) 34%,
    transparent 68%);
}

/* Fallback where color-mix() is unsupported: same shape, fixed opacity. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .cat-tile::after {
    background: linear-gradient(to top, var(--tile-deep) 0%, transparent 68%);
    opacity: .9;
  }
}

/* --- identity colours, per the client's brief ---

   Colour identifies the group through the PHOTOGRAPH and the scrim. The
   "GROUP TOURS" kicker stays the same gold on every tile: it is a label, not
   an identifier, and six different kicker colours read as inconsistency
   rather than as a system. */
.cat-tile { --tile-tone: #1B4A9C; --tile-deep: #0D1F42; }

/* Men Only — royal blue and luxury gold, exactly as asked. */
.cat-tile[data-group="men"]     { --tile-tone: #1B4A9C; --tile-deep: #0B1B3E; }

/* Women Only — baby pink, deepened at the foot so white text still reads.
   A true pastel behind white type fails contrast badly. */
.cat-tile[data-group="women"]   { --tile-tone: #E9AFC4; --tile-deep: #6E2A45; }

/* Family — marigold, the flower on every Indian celebration. */
.cat-tile[data-group="family"]  { --tile-tone: #E39A34; --tile-deep: #6B3210; }

/* LGBTQIA+ — a considered three-hue sweep rather than a literal flag. */
.cat-tile[data-group="lgbtq"]   { --tile-tone: #B8459A; --tile-deep: #2E1A52; }

/* Senior Citizens — jade. Calm and dignified; avoids both the medical blues
   and the "sunset years" cliché. */
.cat-tile[data-group="seniors"] { --tile-tone: #2E8577; --tile-deep: #0E3C34; }

/* Special Departures — brand navy and gold, since these are the flagship
   festive trips. */
/* The sixth tile is a TOUR TYPE, not a traveller group — the Special Departures
   group was retired 2 Sep 2026 and the tile became Exclusive Departure. Same
   colours; only the attribute the rule hangs on has changed. */
.cat-tile[data-tier="exclusive"] { --tile-tone: #24406E; --tile-deep: #0B1730; }

.cat-tile .label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(14px, 1.4vw, 22px) clamp(13px, 1.3vw, 20px) clamp(16px, 1.6vw, 24px);
  color: var(--white);
  font-family: var(--serif);
  /* Six across on a 1280 page leaves each tile ~190px. The name must fit that
     without truncating "Special Departures", and still look generous when the
     grid drops to two columns on a phone. */
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 400;
  line-height: 1.15;
  /* The photographs vary in how bright they are behind the text. The scrim
     handles most of it; this catches the rest without dulling the picture. */
  text-shadow: 0 1px 14px rgba(0, 0, 0, .38);
}
.cat-tile .label small {
  display: block;
  font-family: var(--sans);
  font-size: clamp(9px, .78vw, 11px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 6px;
}

/* Short rule under the name, matching the gold rule used elsewhere on the
   site. Drawn on the label rather than added as markup, so it cannot be
   forgotten on a new tile. */
.cat-tile .label::after {
  content: "";
  display: block;
  width: clamp(22px, 2vw, 30px);
  height: 1px;
  margin-top: clamp(9px, 1vw, 13px);
  background: var(--gold-light);
  transition: width .5s var(--ease);
}
.cat-tile:hover .label::after { width: 52px; }

/* ---------- 10. WORLD MAP ---------- */
.map-split {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.map-wrap { position: relative; }
.map-wrap > img { width: 100%; height: auto; }

/* Routes out of Assam — sits exactly over the dot map */
.map-arcs {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .55;
  pointer-events: none;
}
.map-arcs path {
  stroke-dasharray: 3 4;
  animation: flow 26s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -140; } }
/* Zero-size anchor sits at the exact coordinate; the dot and label hang
   off it, so a label can flip sides without moving the pin. */
.map-pin { position: absolute; width: 0; height: 0; }

.map-pin i {
  position: absolute;
  left: -4px; top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.6s infinite;
}
.map-pin b {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
/* Placement variants so crowded pins stay legible */
.map-pin.up    b { top: auto; bottom: 12px; }
.map-pin.right b { top: -7px; left: 15px; transform: none; }
.map-pin.left  b { top: -7px; left: auto; right: 15px; transform: none; }

/* Home base reads differently from the destinations */
.map-pin.origin i {
  width: 10px; height: 10px;
  left: -5px; top: -5px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(27,74,156,.16);
  animation: none;
}
.map-pin.origin b { color: var(--blue); font-weight: 600; }

/* Labels that would run off the left edge on a narrow screen.
   `Switzerland` sits at 13.1% of the map and its label is drawn to the LEFT of
   the dot, so on a 375px phone it started 35px outside the viewport and was cut
   in half. It is the only one that overflows — measured, not guessed — so only
   it is flipped, rather than restyling every pin and disturbing a layout that
   is correct everywhere else.

   The map is one column below 980px, so the flip is keyed to the width where
   the label actually stops fitting, not to the layout breakpoint. */
@media (max-width: 620px) {
  /* Centred BELOW the dot — the default .map-pin position — rather than flipped
     to the right of it. Flipping right cleared the edge but then collided with
     the Turkey label; centred, the label needs only half its width either side
     and clears both. Measured at 320-620px. */
  .map-pin.edge-left b {
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,150,62,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(184,150,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,150,62,0); }
}

/* ---------- 11. SIGNATURE (4 pillars) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.pillar {
  padding: 34px clamp(16px, 3vw, 34px);
  border-right: 1px solid var(--line);
}
.pillar:last-child { border-right: 0; }
.pillar .ico {
  width: 30px; height: 30px;
  color: var(--gold);
  margin-bottom: 16px;
}
.pillar h3 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.pillar p { font-size: 15px; margin: 0; line-height: 1.6; }

/* ---------- 12. DUAL CTA CARDS ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.duo-card {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--cream-deep);
}
.duo-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.duo-card:hover img { transform: scale(1.05); }
.duo-body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 48px);
  max-width: 62%;
  background: linear-gradient(90deg, rgba(250,247,242,.96) 0%, rgba(250,247,242,.9) 70%, rgba(250,247,242,0) 100%);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.duo-body .h-card { margin-bottom: 10px; }
.duo-body p { font-size: 15px; margin: 0 0 24px; }
.duo-body .btn { align-self: flex-start; }

.duo-body.right {
  margin-left: auto;
  background: linear-gradient(270deg, rgba(250,247,242,.96) 0%, rgba(250,247,242,.9) 70%, rgba(250,247,242,0) 100%);
}

/* ---------- 13. STORIES ---------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.story {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  display: block;
}
.story img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.story:hover img { transform: scale(1.06); }
.story::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,30,.86), rgba(8,14,30,.18) 55%, transparent);
}
.story-body {
  position: absolute;
  inset: auto 24px 24px 24px;
  z-index: 2;
  color: var(--white);
}
.story-body .h-card { color: var(--white); margin-bottom: 4px; }
.story-body p {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ---------- 14. TESTIMONIALS (video placeholders) ---------- */
.video-grid {
  display: grid;
  /* A capped max (not 1fr) keeps cards a sane size when there are only two of
     them: 1fr let each stretch to half the wrap's width, and at the 9:13
     portrait ratio that rendered as an ~870px-tall video tile. justify-content
     centers the row instead of the grid spreading two cards to the edges. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  justify-content: center;
  gap: 22px;
}
.video-card {
  position: relative;
  aspect-ratio: 9/13;
  background: var(--navy);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.video-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .5s var(--ease), transform .9s var(--ease);
}
.video-card:hover img { opacity: .62; transform: scale(1.05); }
.play {
  /* Absolutely centered rather than relying on the grid's place-items: center
     to position it — explicit, so it stays dead-center of the card no matter
     what else the card gains (native video controls, a taller caption). */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background: var(--gold);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  display: grid; place-items: center;
  color: var(--white);
  transition: transform .35s var(--ease);
}
.video-card:hover .play { transform: translate(-50%, -50%) scale(1.06); }

/* A video mid-playback sits above the poster (z-index 3, below). The moment
   it is paused — by the user, not just at the start — .playing comes off
   (see main.js) and the video must get out of the way so the poster image
   and this same gold play button show through again, exactly as before the
   first click. Without this the paused frame stays on top forever. */
.video-card:not(.playing) video { visibility: hidden; }
.video-meta {
  position: absolute;
  inset: auto 22px 22px 22px;
  z-index: 2;
  color: var(--white);
}
.video-meta strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  display: block;
}
.video-meta span {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.video-note {
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 22px;
  text-align: center;
}

/* ---------- 15. CLOSING CTA ---------- */
.closing { text-align: center; }
.closing .h-section { margin-bottom: 12px; }
.closing p { margin: 0 auto 30px; max-width: 44ch; font-size: 16px; }

/* ---------- 16. FOOTER ---------- */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 76px) 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 48px;
}
.foot-brand img { height: 52px; width: auto; margin-bottom: 18px; }
.foot-brand p { font-size: 14.5px; margin: 0 0 22px; max-width: 30ch; }
.socials { display: flex; gap: 14px; }
.socials a {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--navy);
  transition: all .3s var(--ease);
}
.socials a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.socials svg { width: 14px; height: 14px; }

.foot-col h4 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 16px;
}
.foot-col a {
  display: block;
  font-size: 14.5px;
  color: var(--body);
  padding-block: 5px;
  transition: color .25s var(--ease);
}
.foot-col a:hover { color: var(--gold); }

.foot-bottom {
  border-top: 1px solid var(--line);
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- 17. SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar:nth-child(1), .pillar:nth-child(2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-right .btn { display: none; }
  .split, .map-split { grid-template-columns: 1fr; }
  /* One column: the heading must come first regardless of the desktop flip. */
  .split.reverse .split-text  { order: 1; }
  .split.reverse .split-media { order: 2; }
  .split-media { order: -1; }
  .duo { grid-template-columns: 1fr; }
  .duo-body, .duo-body.right { max-width: 100%; margin-left: 0; background: linear-gradient(rgba(250,247,242,.95), rgba(250,247,242,.95)); }
  .rail { grid-auto-columns: minmax(230px, 76%); }
  .rail-nav { display: none; }
}

@media (max-width: 640px) {
  .nav { height: 72px; }
  .brand img { height: 38px; }
  .hero-inner { padding-block: 100px 60px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--line); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }   /* 2 x 3 on a phone */
  .head-row { margin-bottom: 32px; }
}

/* ==========================================================================
   19. INNER PAGES
   Everything below is used by about / contact / faq / legal pages.
   ========================================================================== */

/* ---------- 19.1 Page hero (compact, not full-bleed like the homepage) ---------- */
/* Light treatment to match the homepage hero — the nav sits on dark text,
   so inner heroes must stay light or the nav becomes unreadable. */
.page-hero {
  position: relative;
  background: var(--cream);
  padding-block: clamp(140px, 16vw, 190px) clamp(52px, 7vw, 82px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/*
 * The scrim. Lightened on 8 Sep 2026 — it was .95/.80/.50 and washed the About
 * photograph out to almost nothing.
 *
 * This rule is on every .page-hero, but ONLY about.html has a photograph behind
 * it; the other eleven are a plain cream band, where cream-over-cream at any
 * alpha looks identical. So this is an About-page change in practice.
 */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(250,247,242,.86) 0%, rgba(250,247,242,.62) 45%, rgba(250,247,242,.25) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: var(--navy); font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.page-hero .lede { margin-top: 16px; }

/*
 * Less scrim means less contrast for everything written on top of it, so the
 * text over a PHOTOGRAPH is darkened to pay for it. Measured against the actual
 * pixels behind each line, at 932 / 1280 / 1920px wide, worst case:
 *
 *                     before        after
 *   heading (navy)    10.2-11.9  →  7.1-10.1     both far past AA
 *   lede              4.9-5.5    →  6.0-8.0      was only just over 4.5
 *   breadcrumb        2.2-2.9    →  4.8-5.0      was well under AA
 *   eyebrow (gold)    1.8-2.3    →  3.1          still under, but nearly doubled
 *
 * Every line is more readable than before the scrim was lightened, not less.
 *
 * Scoped by the class, not by :has(img): if these colours failed to apply the
 * text would be harder to read than it is today, and that is not a failure mode
 * to leave resting on browser support.
 */
.page-hero.has-photo .breadcrumb { color: var(--body); }
.page-hero.has-photo .eyebrow    { color: #8C6F24; }   /* the gold, darkened */
.page-hero.has-photo .lede       { color: #3A3A3A; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.breadcrumb a { transition: color .25s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span::after { content: "/"; margin-left: 8px; opacity: .5; }

/* ---------- 19.2 Long-form prose (legal, about) ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 1.9em;
}
.prose p, .prose li { font-size: 14.5px; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5em; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--navy); font-weight: 500; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose .meta {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Highlighted block for important terms */
.callout {
  background: var(--cream);
  border-left: 2px solid var(--gold);
  padding: 20px 24px;
  font-size: 14px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: .8em; }
.callout.warn { border-left-color: #B4472F; background: #FBF1EE; }

/* ---------- 19.3 Legal layout: sticky contents + prose ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
}
.toc { position: sticky; top: 110px; }
.toc h4 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.toc a {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body);
  padding: 6px 0 6px 12px;
  border-left: 1px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.toc a:hover, .toc a.active { color: var(--gold); border-left-color: var(--gold); }

/* ---------- 19.4 Accordion (FAQ, itineraries) ---------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover { color: var(--gold); }
.acc-item summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.acc-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.acc-body { padding: 0 44px 24px 0; }
.acc-body p, .acc-body li { font-size: 14px; line-height: 1.7; margin: 0; }
.acc-body p + p, .acc-body ul { margin-top: .8em; }
.acc-body ul { padding-left: 1.15em; list-style: disc; }
.acc-body li::marker { color: var(--gold); }

.faq-group + .faq-group { margin-top: 56px; }
.faq-group > h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: 18px;
}

/* ---------- 19.5 Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}
.field label .req { color: var(--gold); }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 13px 15px;
  width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,150,62,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #B0AAA1; }
.field .hint { font-size: 11.5px; color: var(--muted); }

.check {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 12.5px;
  line-height: 1.55;
  cursor: pointer;
}
/* Grid, not flex: with flex the box drifted out of line as the wrapped label
   grew. The column is fixed, so the box stays put however long the text runs.
   margin-top centres the 16px box on the first 19.4px line. */
.check input {
  width: 16px;
  height: 16px;
  margin: 0;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}

.form-note { font-size: 11.5px; color: var(--muted); margin-top: 14px; }

/* ---------- 19.6 Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.info-list { display: grid; gap: 26px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-item svg {
  width: 19px; height: 19px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}
.info-item h3 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 5px;
}
.info-item p { font-size: 14px; margin: 0; line-height: 1.6; }
.info-item a { color: var(--body); transition: color .25s var(--ease); }
.info-item a:hover { color: var(--gold); }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(26px, 4vw, 42px);
}
.form-card > h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 6px; }
.form-card > p  { font-size: 13.5px; margin: 0 0 28px; }

/* ---------- 19.7 About ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 30px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}
.stat span {
  display: block;
  margin-top: 9px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.value h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.value .num {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 12px;
}
.value p { font-size: 13.5px; margin: 0; }

/* ---------- 19.8 Responsive ---------- */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: static; padding-bottom: 12px; }
  .toc a { display: inline-block; border-left: 0; border-bottom: 1px solid var(--line); margin-right: 14px; padding-left: 0; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .acc-item summary { font-size: 1.02rem; padding-right: 36px; }
}

/* ==========================================================================
   20. TRIPS — listing, filters, cards
   ========================================================================== */

/* ---------- 20.1 Filter bar ---------- */
.filter-bar {
  background: var(--cream);
  border-block: 1px solid var(--line);
  position: sticky;
  top: 88px;
  z-index: 40;
}
.filter-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 16px;
}
.filter-field { display: flex; align-items: center; gap: 8px; }
.filter-field label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.filter-bar select,
.filter-bar input[type="month"] {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 9px 12px;
  min-width: 130px;
  transition: border-color .25s var(--ease);
}
.filter-bar select:focus,
.filter-bar input:focus { outline: none; border-color: var(--gold); }

.filter-search { position: relative; flex: 1 1 180px; min-width: 160px; }
.filter-search input {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 9px 12px 9px 34px;
}
.filter-search input:focus { outline: none; border-color: var(--gold); }
.filter-search svg {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.btn-clear {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 9px 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.btn-clear:hover { border-bottom-color: var(--gold); }
.btn-clear[hidden] { display: none; }

/* Apply — the no-JavaScript path for the filter selects. main.js hides it once
   it has attached submit-on-change, so most visitors never see it; anyone
   without JavaScript needs it, because without it the selects cannot be
   applied at all. Styled as the quieter sibling of the gold buttons: it is a
   fallback, not the primary action on the page. */
.btn-apply {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--navy);
  padding: 8px 16px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn-apply:hover { background: var(--navy); color: var(--white); }
.btn-apply[hidden] { display: none; }

/* Active filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
.chips:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .06em;
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--navy);
  padding: 6px 10px 6px 12px;
}
.chip button {
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  padding: 0 2px;
}
.chip button:hover { color: var(--navy); }

/* ---------- 20.2 Result bar ---------- */
.result-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.result-count { font-size: 13px; color: var(--muted); }
.result-count b { color: var(--navy); font-weight: 500; }

/* ---------- 20.3 Trip cards ---------- */
.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px;
}
.trip-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
  /* The containing block for the whole-card click target below. */
  position: relative;
}
.trip-card:hover { box-shadow: 0 12px 40px rgba(18,34,74,.1); transform: translateY(-3px); }

/*
 * THE WHOLE CARD IS THE LINK.
 *
 * Only the photograph and the title were clickable, so the dates, the cities,
 * the price and the "Booking open" pill all looked like part of a button that
 * did nothing — the card lifts on hover, which promises a click everywhere.
 *
 * This is the stretched-link pattern rather than an <a> wrapped around the
 * card, because the card already contains links and an anchor may not nest
 * inside another. The title keeps being the real link — so it is still one tab
 * stop, still announced by a screen reader as the trip's name, and still opens
 * in a new tab on ⌘-click or middle-click, which a JS click handler on the
 * card would have broken. Its ::after is simply stretched over the card.
 *
 * z-index 3 clears the .badge overlays, which sit at 2.
 *
 * The trade-off is that text inside a card can no longer be selected by
 * dragging. That is the accepted cost of the pattern, and nothing on a card is
 * text anyone copies — the trip page has all of it.
 */
.trip-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* Without this the focus ring would be drawn around the STRETCHED box — a
   rectangle the size of the whole card — instead of the title. */
.trip-card h3 a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.trip-card .shot { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.trip-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.trip-card:hover .shot img { transform: scale(1.05); }

.badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  padding: 6px 10px;
}
.badge.gold { background: var(--gold); }
.badge.ghost { background: rgba(255,255,255,.92); color: var(--navy); }
.badge.warn { background: #B4472F; }
/* Tour type sits directly under the group badge in the top-left corner.
   The offset is the gold badge's own height — 9.5px line + 12px padding —
   so if .badge padding changes, change this too. */
.badge.tier {
  top: 40px;
  background: rgba(255,255,255,.92);
  color: var(--navy);
  font-weight: 600;
}
.badge-stack { position: absolute; top: 14px; right: 14px; display: grid; gap: 6px; justify-items: end; z-index: 2; }
.badge-stack .badge { position: static; }

.trip-card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.trip-card .where {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.trip-card h3 {
  font-size: 1.32rem;
  line-height: 1.22;
  margin-bottom: 10px;
}
.trip-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--body);
  margin-bottom: 18px;
}
.trip-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.trip-card .meta svg { width: 13px; height: 13px; color: var(--gold); flex-shrink: 0; }

.trip-card .foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.price small {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.price b {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}
.price i { font-style: normal; font-size: 11px; color: var(--muted); display: block; margin-top: 4px; }

/* ---------- 20.4 Empty state ---------- */
.empty-state {
  text-align: center;
  padding: clamp(48px, 8vw, 90px) 20px;
  border: 1px dashed var(--line);
  background: var(--cream);
}
.empty-state svg { width: 38px; height: 38px; color: var(--gold); margin: 0 auto 20px; }
.empty-state h3 { font-size: 1.5rem; margin-bottom: 10px; }
.empty-state p { font-size: 14px; max-width: 40ch; margin: 0 auto 24px; }

/* ==========================================================================
   21. TRIP DETAIL
   ========================================================================== */

.trip-hero { position: relative; background: var(--navy); color: var(--white); overflow: hidden; }
.trip-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.trip-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,18,38,.72) 0%, rgba(10,18,38,.5) 45%, rgba(10,18,38,.85) 100%);
}
.trip-hero .wrap { position: relative; z-index: 2; padding-block: clamp(140px, 15vw, 180px) clamp(40px, 5vw, 60px); }
.trip-hero .breadcrumb { color: rgba(255,255,255,.66); }
.trip-hero .breadcrumb a:hover { color: var(--gold-light); }
.trip-hero .eyebrow { color: var(--gold-light); }
.trip-hero h1 { color: var(--white); font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; }
.trip-hero .tagline {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-style: italic;
  color: rgba(255,255,255,.86);
  margin: 14px 0 0;
  max-width: 44ch;
}

.trip-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.fact small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 5px;
}
.fact b {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--white);
}

/* ---------- 21.1 Two-column layout with sticky booking card ---------- */
.trip-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.trip-main > section + section {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--line);
}
.trip-main h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 18px;
  scroll-margin-top: 110px;
}
.trip-main > section > p { font-size: 15px; }

.book-card {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line);
  background: var(--white);
}
.book-card .top { padding: 24px; border-bottom: 1px solid var(--line); }
.book-card .price b { font-size: 1.9rem; }
.book-card .note { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.book-card .mid { padding: 20px 24px; display: grid; gap: 12px; }
.book-card .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.book-card .row span { color: var(--muted); }
.book-card .row b { color: var(--navy); font-weight: 500; text-align: right; }
.book-card .actions { padding: 0 24px 24px; display: grid; gap: 10px; }
.book-card .actions .btn { width: 100%; }
/* Grid items default to min-width: auto, i.e. "never narrower than my own
   content" — which is how one long label drags the card open. */
.book-card .actions .btn { min-width: 0; }
.btn-whatsapp { background: #1FA855; color: #fff; }
.btn-whatsapp:hover { background: #16833f; }
.btn-outline { border: 1px solid var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }

/* Download brochure. Quieter than Book and Enquire on purpose — it is a way to
   go on thinking about the trip, not a way to commit to it, so it should not
   compete with the two buttons that are. */
.btn-brochure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--cream);
  /* "Download Brochure  PDF · 997 KB" on ONE line is 356px wide against a card
     that is 340px. A grid item cannot shrink below its min-content width, so
     this single button widened the whole .actions track and pushed all four
     buttons 41px past the card's right border. Wrapping lets the size drop to
     a second line when it does not fit; padding here rather than the .btn 36px
     because 72px of it inside a 290px column is most of the room. */
  flex-wrap: wrap;
  padding-left: 20px;
  padding-right: 20px;
}
.btn-brochure svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-brochure .meta {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.btn-brochure:hover { border-color: var(--navy); color: var(--navy); background: var(--white); }
.btn-brochure:hover .meta { color: var(--navy); }

/* ---------- 21.2 Highlights ---------- */
.hl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 28px;
}
.hl {
  display: flex;
  gap: 11px;
  font-size: 14px;
  line-height: 1.55;
  align-items: flex-start;
}
.hl svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }

/* ---------- 21.3 Itinerary ---------- */
.itin { border-top: 1px solid var(--line); }
.itin-day { border-bottom: 1px solid var(--line); }
/* Not on the last one. Every section on the trip page is already separated from
   the next by the border-top on `.trip-main > section + section`, so the last
   day's own rule sat a few pixels above that one and drew the boundary twice —
   the only place on the page where two lines stacked. */
.itin-day:last-child { border-bottom: 0; }
.itin-day summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 40px 22px 0;
  position: relative;
}
.itin-day summary::-webkit-details-marker { display: none; }
.itin-day summary::after {
  content: "";
  position: absolute; right: 6px; top: 30px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.itin-day[open] summary::after { transform: rotate(-135deg); }
.daynum {
  flex-shrink: 0;
  width: 46px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 5px;
}
.daynum b { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--navy); letter-spacing: 0; }
.itin-day .head h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 400; margin-bottom: 6px; }
.itin-day .when { font-size: 11.5px; color: var(--muted); }
.itin-body { padding: 0 40px 26px 64px; }
.itin-body p { font-size: 14px; line-height: 1.72; margin: 0 0 .85em; }
.itin-body p:last-of-type { margin-bottom: 0; }

.day-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.day-meta div small {
  display: block;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
.day-meta div span { font-size: 12.5px; color: var(--body); }

/* ---------- 21.4 Inclusions / exclusions ---------- */
.ie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.ie h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ie ul { display: grid; gap: 11px; }
.ie li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.55; align-items: flex-start; }
.ie li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; }
.ie.inc h3, .ie.inc svg { color: #2E7D4F; }
.ie.exc h3, .ie.exc svg { color: #B4472F; }

/* Photographs inside a day. Optional — most days have none — so this only ever
   applies when the client has explicitly put pictures on that day. */
.day-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.day-shots img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  background: var(--cream-deep);
}

/* ---------- 21.5 Batches ---------- */
.batches { border: 1px solid var(--line); }
.batch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.batch:last-child { border-bottom: 0; }
.batch .dates { font-family: var(--serif); font-size: 1.18rem; color: var(--navy); }
.batch .sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.batch .right { display: flex; align-items: center; gap: 18px; }

/* The booking cut-off. Deliberately quieter than the dates and louder than the
   duration line under it — it is a deadline, so it has to be noticed, but it is
   not the headline. Rendered only when the operator has published one. */
.batch .sub.deadline { color: var(--navy); font-weight: 500; }

/* ---------- 21.6 Per-tour notes ---------- */
/* The brochure's "Important Notes" — hotel timings, what may be rearranged,
   exchange-rate caveats. Set narrower and quieter than body copy: it is small
   print, and it should read as small print rather than as a feature list. */
.trip-notes { display: grid; gap: 10px; padding-left: 20px; }
.trip-notes li { font-size: 13px; line-height: 1.6; color: var(--muted); }

.pill {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid currentColor;
}
.pill.open { color: #2E7D4F; }
.pill.filling { color: #B8963E; }
.pill.closed { color: #B4472F; }

/* ---------- 21.6 Variants ---------- */
.variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.variant {
  display: block;
  border: 1px solid var(--line);
  padding: 18px 20px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.variant:hover { border-color: var(--gold); background: var(--cream); }
.variant small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.variant b { font-family: var(--serif); font-size: 1.14rem; font-weight: 400; color: var(--navy); }

/* ---------- 21.7 Mobile sticky booking bar ---------- */
.mobile-book {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(0,0,0,.1);
  padding: 12px var(--gutter);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mobile-book .price b { font-size: 1.25rem; }
.mobile-book .btn { padding: 13px 24px; }

/* ==========================================================================
   22. BOOKING FORM
   ========================================================================== */

.stepper { display: flex; gap: 0; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.step-tab {
  flex: 1;
  padding: 0 8px 16px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.step-tab b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--line);
  transition: color .3s var(--ease);
}
.step-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.step-tab.active b { color: var(--gold); }
.step-tab.done b { color: var(--navy); }
.step-tab.done { color: var(--body); }

.step { display: none; }
.step.active { display: block; }

.step > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 6px; }
.step > .sub { font-size: 14px; margin: 0 0 30px; }

.member-block {
  border: 1px solid var(--line);
  padding: clamp(20px, 3vw, 30px);
  margin-bottom: 20px;
  position: relative;
}
.member-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.member-block > header h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.member-block > header h3 span { color: var(--gold); }
.btn-remove {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B4472F;
  transition: opacity .25s var(--ease);
}
.btn-remove:hover { opacity: .7; }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px dashed var(--line);
  padding: 15px 26px;
  width: 100%;
  justify-content: center;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.btn-add:hover { border-color: var(--gold); color: var(--gold); }
.btn-add svg { width: 15px; height: 15px; }

/* Radio cards for yes/no choices */
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* The card previously hid the radio completely and showed selection only as a
   border tint via :has(). Two problems: there was no control to look at, and
   in a browser without :has() there was no selected state at all. The radio is
   now visible and drawn by the input itself, so the checked state never
   depends on a selector the browser might not support.

   Grid rather than padding-left: the dot column is fixed, so the two lines of
   text align with each other and the dot sits on the first line's centre. */
.radio-card {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.radio-card:hover { border-color: var(--gold); }
.radio-card input {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  /* 13.5px text on a 1.3 line box is ~17.5px tall; nudges the dot onto the
     optical centre of the title rather than its top edge. */
  margin-top: 1px;
  accent-color: var(--gold);
  cursor: pointer;
}
.radio-card b {
  grid-column: 2;
  grid-row: 1;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 4px;
}
.radio-card span {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.radio-card:has(input:checked) { border-color: var(--gold); background: var(--cream); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Validation */
.field.invalid input,
.field.invalid select { border-color: #B4472F; }
.field .error {
  font-size: 11.5px;
  color: #B4472F;
  display: none;
}
.field.invalid .error { display: block; }

.step-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.step-nav .btn { min-width: 150px; }
.step-nav .spacer { flex: 1; }

/* Review step */
.review-block { border: 1px solid var(--line); margin-bottom: 16px; }
.review-block > h3 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.review-rows { padding: 8px 22px 18px; }
.review-rows div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.review-rows div:last-child { border-bottom: 0; }
.review-rows span { color: var(--muted); }
.review-rows b { color: var(--navy); font-weight: 500; text-align: right; }

.form-success {
  text-align: center;
  padding: clamp(40px, 6vw, 70px) 24px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.form-success svg { width: 44px; height: 44px; color: #2E7D4F; margin: 0 auto 22px; }
.form-success h2 { font-size: 1.8rem; margin-bottom: 12px; }
.form-success p { font-size: 14.5px; max-width: 44ch; margin: 0 auto 26px; }

/* ==========================================================================
   23. GALLERY / TESTIMONIALS / BLOG
   ========================================================================== */

.tabs { display: flex; flex-wrap: wrap; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.tab {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.tab:hover { color: var(--navy); }
.tab.active { color: var(--navy); border-bottom-color: var(--gold); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.shot-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream-deep);
}
.shot-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shot-tile:hover img { transform: scale(1.07); }
.shot-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 16px 14px;
  background: linear-gradient(transparent, rgba(8,14,30,.8));
  color: var(--white);
  font-size: 11.5px;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.shot-tile:hover figcaption { opacity: 1; }
.shot-tile.tall { grid-row: span 2; aspect-ratio: 1/2.06; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,14,30,.94);
  display: none;
  place-items: center;
  padding: 24px;
}
.lightbox.open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lightbox figcaption {
  color: rgba(255,255,255,.8);
  font-size: 12.5px;
  text-align: center;
  margin-top: 16px;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  color: var(--white);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  transition: background .25s var(--ease);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.16); }
.lb-close { top: 24px; right: 24px; font-size: 22px; line-height: 1; }
.lb-prev { left: 20px; top: 50%; margin-top: -23px; }
.lb-next { right: 20px; top: 50%; margin-top: -23px; }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.post-card { display: flex; flex-direction: column; }
.post-card .shot { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 18px; }
.post-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .shot img { transform: scale(1.05); }
.post-card .kicker {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.post-card h3 { font-size: 1.35rem; line-height: 1.24; margin-bottom: 9px; transition: color .3s var(--ease); }
.post-card:hover h3 { color: var(--gold); }
.post-card p { font-size: 13.5px; margin: 0 0 12px; }
.post-card .byline { font-size: 11.5px; color: var(--muted); margin-top: auto; }

.post-featured {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  padding-bottom: clamp(36px, 5vw, 56px);
  margin-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.post-featured .shot { aspect-ratio: 16/10; overflow: hidden; }
.post-featured .shot img { width: 100%; height: 100%; object-fit: cover; }
.post-featured h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 12px; }

/* Article body */
.article { max-width: 68ch; margin-inline: auto; }
.article > * + * { margin-top: 1.1em; }
.article p, .article li { font-size: 16px; line-height: 1.78; }
.article h2 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); margin-top: 1.9em; }
.article h3 { font-size: 1.22rem; margin-top: 1.6em; }
.article ul, .article ol { padding-left: 1.2em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-top: .5em; }
.article li::marker { color: var(--gold); }
.article img { width: 100%; margin-block: 2em; }
.article blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 24px;
  margin-block: 2em;
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--navy);
  font-style: italic;
}
.article figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: -1.4em; }

/* Testimonial quote cards */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.quote {
  border: 1px solid var(--line);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.quote .stars { color: var(--gold); font-size: 13px; letter-spacing: 3px; margin-bottom: 16px; }
.quote blockquote {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
}
.quote .who { margin-top: auto; font-size: 12.5px; }
.quote .who b { display: block; color: var(--navy); font-weight: 500; }
.quote .who span { color: var(--muted); }

/* ==========================================================================
   24. RESPONSIVE — sections 20-23
   ========================================================================== */

@media (max-width: 1024px) {
  .trip-layout { grid-template-columns: 1fr; }
  /*
   * The card used to be display:none here, because the JS renderer this page
   * replaced built a sticky .mobile-book bar to stand in for it. The PHP page
   * never built that bar, so from the port until 2 Sep 2026 a phone got NO
   * WhatsApp button, NO brochure download, and no departure, availability or
   * single-supplement rows at all — roughly half the site's traffic.
   *
   * It is shown in the flow instead, ordered above the itinerary, which is
   * where someone deciding whether to book wants it.
   */
  .book-card {
    position: static;
    order: -1;
    margin-bottom: 8px;
  }
  .mobile-book { display: flex; }
  body.has-mobile-book { padding-bottom: 78px; }
  .post-featured { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .filter-bar { top: 72px; }
  .filter-inner { gap: 10px; }
  .filter-field { flex: 1 1 45%; }
  .filter-field label { display: none; }
  .filter-bar select, .filter-bar input[type="month"] { width: 100%; min-width: 0; }
}

@media (max-width: 640px) {
  .ie-grid { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .itin-body { padding-left: 0; padding-right: 0; }
  .itin-day summary { padding-right: 30px; gap: 14px; }
  .step-tab { font-size: 0; padding-bottom: 12px; }
  .step-tab b { font-size: 1.2rem; margin: 0; }
  .step-nav .btn { min-width: 0; flex: 1; }
  .trip-facts { gap: 16px 26px; }
  .shot-tile.tall { grid-row: span 1; aspect-ratio: 1; }
}

/* Traveller number inside a repeatable booking block, set by booking.js */
.mnum { color: var(--gold); }

/* ==========================================================================
   25. DARK-HERO HEADER
   The nav is dark-on-light by default, which disappears against a dark hero
   (trip detail). Pages with one set `<body class="dark-hero">` and the header
   inverts until it sticks — once scrolled it goes white and reverts.
   ========================================================================== */
body.dark-hero .site-header:not(.scrolled) .nav-links a { color: var(--white); }
body.dark-hero .site-header:not(.scrolled) .burger span { background: var(--white); }
body.dark-hero .site-header:not(.scrolled) .brand .logo-light { display: block; }
body.dark-hero .site-header:not(.scrolled) .brand .logo-dark  { display: none; }

/* ==========================================================================
   26. TRIP PHOTOGRAPHY
   Images extracted from the client's own itinerary document.
   ========================================================================== */

/* Photos inside an itinerary day */

/* Trip gallery */
.trip-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.trip-gallery figure {
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--cream-deep);
}
/* Only the figures something actually opens. The PHP trip page loads main.js,
   whose lightbox is bound to the Gallery page's #galleryGrid — so a zoom-in
   cursor there promises a click that does nothing. */
.trip-gallery figure[data-lb] { cursor: zoom-in; }
.trip-gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.trip-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.trip-gallery figure:hover img { transform: scale(1.04); }

@media (max-width: 640px) {
  .trip-gallery figure:first-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 3/2; }
}

/* ==========================================================================
   27. CONTENTS SCROLLSPY
   .toc a.active is set by main.js as you scroll. Long lists (Terms has 14
   items) get their own scroll area so the sticky sidebar can't outgrow the
   viewport and strand the active item off-screen.
   ========================================================================== */
.toc {
  max-height: calc(100svh - 130px);
  overflow-y: auto;
  scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }

.toc a {
  transition: color .25s var(--ease),
              border-color .25s var(--ease),
              background .25s var(--ease);
}
.toc a.active {
  color: var(--gold);
  border-left-color: var(--gold);
  font-weight: 500;
}

@media (max-width: 900px) {
  /* Horizontal strip on mobile — the active item scrolls itself into view */
  .toc {
    max-height: none;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .toc a.active { border-left: 0; border-bottom-color: var(--gold); }
}

/* ══════════════ 29. DATE PICKER (assets/js/datepicker.js) ══════════════
   Absolutely positioned on <body> and moved into place per field, so it is
   never clipped by a parent's overflow. z-index sits above the sticky header.
*/
.dp {
  position: absolute;
  z-index: 200;
  width: 288px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(11,31,59,.16);
  padding: 14px;
  font-family: var(--sans);
}
.dp[hidden] { display: none; }

.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dp-nav {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.dp-nav:hover { border-color: var(--gold); color: var(--gold); }

/* The two selects are what make a 1974 birth date reachable in two clicks. */
.dp-month, .dp-year {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: 12.5px;
  padding: 0 4px;
  cursor: pointer;
}
.dp-year { flex: 0 0 72px; }

.dp-dow, .dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dp-dow span {
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
}
.dp-day {
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 2px;
}
/* Empty leading cells before the 1st of the month. Declared explicitly rather
   than left as a bare <span> so the page linter can see it is intentional. */
.dp-pad { aspect-ratio: 1; }
.dp-day:hover:not([disabled]) { background: var(--cream); }
.dp-day[disabled] { color: #C9CDD4; cursor: default; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--line); }
.dp-day.is-sel { background: var(--gold); color: var(--white); }
.dp-day:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.dp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.dp-foot button {
  border: 0;
  background: transparent;
  color: var(--navy);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.dp-clear, .dp-today { /* styled by .dp-foot button above */ }
.dp-clear:hover { color: #B4472F; }
.dp-foot button:hover:not([disabled]) { color: var(--gold); }
.dp-foot button[disabled] { color: var(--muted); cursor: default; }

@media (max-width: 380px) {
  .dp { width: calc(100vw - 24px); }
}

/* ══════════════ 30. CUSTOM SELECT (assets/js/select.js) ══════════════
   The native <select> stays in the DOM for form data and validation; it is
   only hidden from view. `.sel-btn` is what the user sees, `.selpop` is the
   option list, positioned on <body> so nothing can clip it.
*/
.sel { position: relative; display: block; }

/* Not display:none — a hidden-but-present control keeps form semantics and
   lets scripts and tests read and set .value exactly as before. */
.sel > select {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.sel-btn:hover { border-color: var(--gold); }
.sel-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sel-btn[aria-expanded="true"] { border-color: var(--gold); }
.sel-btn[disabled] { opacity: .55; cursor: default; }

.sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An unanswered field should read as unanswered. */
.sel.is-placeholder .sel-valXX { color: var(--muted); }

.sel-caret { width: 16px; height: 16px; flex-shrink: 0; color: var(--navy); transition: transform .2s var(--ease); }
.sel-btn[aria-expanded="true"] .sel-caret { transform: rotate(180deg); }

/* Sits above the date picker (z-index 200), because the month and year
   dropdowns live inside it. */
.selpop {
  position: absolute;
  z-index: 300;
  overflow-y: auto;
  /* Stops the wheel chaining to the page once the list hits its end — without
     this, reaching the bottom of a 100-entry year list starts scrolling the
     booking form underneath it. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(11,31,59,.16);
  padding: 6px;
}

/* A long list needs a visible scrollbar — the macOS overlay scrollbar hides
   until you scroll, which is exactly when someone is deciding whether the list
   scrolls at all. */
.selpop::-webkit-scrollbar { width: 10px; }
.selpop::-webkit-scrollbar-track { background: transparent; }
.selpop::-webkit-scrollbar-thumb {
  background: rgba(11,31,59,.22);
  border: 3px solid var(--white);
  border-radius: 6px;
}
.selpop::-webkit-scrollbar-thumb:hover { background: rgba(11,31,59,.38); }
/* Firefox */
.selpop { scrollbar-width: thin; scrollbar-color: rgba(11,31,59,.28) transparent; }
.selpop[hidden] { display: none; }

.selopt {
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
/* Highlight follows the keyboard AND the mouse, so there is only ever one
   indicator — two would be ambiguous about what Enter does. */
.selopt.is-active { background: var(--cream); }
.selopt[aria-selected="true"] { color: var(--navy); font-weight: 500; }
.selopt[aria-selected="true"]::after {
  content: '';
  float: right;
  width: 6px; height: 10px;
  margin-left: 14px;
  border: solid var(--gold);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-1px);
}
.selopt.is-disabled { color: var(--muted); cursor: default; }

/* Filter bar and date picker are tighter than a form field. */
.filter-field .sel-btn { padding: 10px 12px; font-size: 13.5px; }
.dp .sel-btn { padding: 4px 8px; font-size: 12.5px; height: 28px; }
.dp .sel-caret { width: 13px; height: 13px; }

/* Validation state has to reach the visible control, not the hidden select. */
.field.invalid .sel-btn { border-color: #B4472F; }


/* ══════════════ 28. TOUR TYPE EXPLAINER ══════════════
   Replaces the two large cards that used to sit above the trip grid. Those
   spent the whole first screen defining a label instead of showing product.
   The explanation now hangs off the filter that uses it, and is repeated on
   the trip page beside the inclusions — the two places the distinction
   actually changes a decision.
*/

/* The "?" beside the Tour Type label. */
.hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  padding: 0;
  vertical-align: middle;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 9.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.hint-btn:hover { border-color: var(--gold); color: var(--gold); }
.hint-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hint-btn[aria-expanded="true"] { border-color: var(--gold); background: var(--gold); color: var(--white); }

.hint-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 3vw, 32px);
  margin-top: 18px;
  padding: clamp(18px, 2.4vw, 24px);
  background: var(--white);
  border: 1px solid var(--line);
}
.hint-panel[hidden] { display: none; }
.hint-item h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.hint-item p { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.hint-item p + p { margin-top: 8px; }
.hint-item .suited { font-size: 12.5px; }
.hint-item .suited strong { color: var(--navy); font-weight: 500; }

/* Same copy on the trip page, next to what it describes. */
.tier-note {
  margin-bottom: clamp(24px, 3vw, 34px);
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--cream);
  border-left: 2px solid var(--gold);
}
.tier-note h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.tier-note p { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); }
.tier-note p + p { margin-top: 8px; }
.tier-note .suited { font-size: 12.5px; }
.tier-note .suited strong { color: var(--navy); font-weight: 500; }

/* ══════════════ 31. FOUNDER'S NOTE (about.html) ══════════════
   A signed personal message. Set apart from the surrounding company-voice copy
   by a gold rule down the left and slightly larger, lighter type — the reader
   should register that a person is speaking, not the brand.

   Sits inside .copy-split's body column, so it keeps the page's left axis and
   the two-column rhythm rather than inventing a third layout.
*/
.founder-note blockquote {
  margin: 0;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--gold);
}
.founder-note blockquote p {
  font-family: var(--serif);
  font-size: clamp(16.5px, 1.5vw, 19px);
  line-height: 1.68;
  color: var(--ink);
}
.founder-note blockquote p + p { margin-top: 16px; }

.founder-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 34px);
  padding-left: clamp(18px, 2vw, 26px);
}
/* Portrait slot — commented out in the markup until the client sends a photo.
   Styled now so dropping the file in needs no CSS work. */
.founder-photo {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
}
.sign-name {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--navy);
  line-height: 1.2;
}
.sign-role {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 5px;
}
.sign-contact { font-size: 13.5px; color: var(--body); margin-top: 9px; }
.sign-contact a { color: var(--body); }
.sign-contact a:hover { color: var(--gold); }
.sign-contact span { margin: 0 6px; color: var(--line); }

/* Enquiry form result banners (contact.php). Deliberately not a JS toast:
   the form is a plain post, so the answer arrives as a page load. */
.form-sent,.form-error{grid-column:1/-1;padding:16px 18px;border-radius:3px;margin-bottom:6px}
.form-sent{background:#E7F3ED;border-left:3px solid #1E7A54}
.form-error{background:#FBEDED;border-left:3px solid #A62121}
.form-sent h3{margin:0 0 6px;font-size:17px}
.form-sent p,.form-error p{margin:0;font-size:14.5px}
/* Honeypot: off-screen rather than display:none — some bots skip hidden
   fields, and a field that is not rendered is not filled in. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Booking result states (booking.php). The failure box always offers WhatsApp:
   if the form cannot take a booking, a human still can — and a dead end on a
   booking form is a lost customer, not just a bad error message. */
.form-error-box{background:#FBEDED;border-left:3px solid #A62121;padding:20px 22px;margin-bottom:22px}
.form-error-box h3{margin:0 0 8px;font-size:17px}
.form-error-box .msg{margin:0 0 10px;font-size:15px}
.form-error-box .alt{margin:0;font-size:14px;color:#5B5F68}
.booking-ref{margin-top:14px;font-size:15px}
.booking-ref strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}

/* ── offer pricing ──────────────────────────────────────────────────────────
   The struck-through figure must read as secondary at a glance, or the eye
   lands on the wrong number — which is the one failure mode of this pattern.
   Smaller, lighter, and muted; the sale price keeps the inherited weight. */
.price s.was,
.book-card s.was,
.fact s.was{
  font-size:.78em;
  font-weight:400;
  color:var(--mute,#7a7a7a);
  text-decoration-thickness:1px;
  margin-right:.35em;
}
.price .now,.book-card .now,.fact .now{color:inherit}

/* The badge names WHY it is cheaper. Without it a struck price is just a
   number that changed. */
.offertag{
  display:inline-block;
  margin-left:.5em;
  padding:.15em .5em;
  border-radius:3px;
  background:var(--gold,#B8963E);
  color:#fff;
  font-family:var(--font-body,inherit);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  vertical-align:middle;
  white-space:nowrap;
}

/* ── discount code on the booking form ──────────────────────────────────── */
.couponrow{display:flex;gap:10px;align-items:stretch;max-width:460px}
.couponrow input{flex:1;text-transform:uppercase;letter-spacing:.06em;
                 font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.couponrow .btn{flex:none;white-space:nowrap}
.couponmsg{margin:10px 0 0;font-size:14px;line-height:1.5;min-height:1.2em}
.couponmsg.ok{color:#1F6B45}
.couponmsg.no{color:#9A2C2C}
/* The pre-tax caveat sits with the figure, not in a footnote. A number the
   customer reads as final and the office later contradicts is worse than
   showing no number at all. */
.couponmsg .caveat{display:block;margin-top:3px;color:var(--mute,#7a7a7a);font-size:12.5px}
.couponbox .opt{color:var(--mute,#7a7a7a);font-weight:400}

/* Once a testimonial is playing, the play button and the caption must get out
   of the way — otherwise they sit on top of the video and over its controls. */
.video-card.playing .play,
.video-card.playing .video-meta { display: none; }
.video-card.playing img { opacity: 0; }


/* A .split-media figure that is decorative rather than informative can be
   dropped on a phone, where it otherwise pushes the copy a full screen down.
   Scoped to a class rather than applied to every .split-media: the other split
   sections carry pictures that earn their place on mobile. */
@media (max-width: 900px){
  .split-media.hide-on-mobile{display:none}
}