/* ==========================================================================
   Diplomat Trekkers, light theme
   Brand palette taken from the "How to Join" graphic:
   navy #1C3A5E · olive #6E7A4A · rust #C0663A · cream #EFE8DA
   No webfonts, no libraries: the whole site is HTML, CSS and a little JS.
   ========================================================================== */

:root {
  /* the four brand colours */
  --navy:   #1C3A5E;
  --olive:  #6E7A4A;
  --rust:   #C0663A;
  --cream:  #EFE8DA;

  /* derived working palette */
  --navy-dk:  #14293F;
  --navy-lt:  #2C5382;
  --olive-dk: #55603A;
  --rust-dk:  #A5522C;
  --rust-lt:  #D98A5F;
  --cream-lt: #FAF6EE;
  --cream-dk: #E3D9C6;

  --ground:   #FAF6EE;
  --surface:  #FFFFFF;
  --surface-2:#F3EDE1;
  --ink:      #16283D;
  --ink-soft: #45566A;
  --muted:    #737A6E;
  --muted-lt: #9AA096;
  --line:     #E4DCCB;
  --line-soft:#EFE9DC;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas,
          "Liberation Mono", monospace;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(22,40,61,.06), 0 4px 14px rgba(22,40,61,.06);
  --shadow:    0 2px 6px rgba(22,40,61,.07), 0 16px 40px rgba(22,40,61,.10);

  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 40px);
  --head-h: 62px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.1;
  letter-spacing: -.022em;
  font-weight: 750;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.8vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
p { margin: 0 0 1.05em; }

::selection { background: var(--rust); color: #fff; }
:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--rust); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; }

/* --- layout --------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 860px; }

.section { padding-block: clamp(44px, 7vw, 92px); }
.trips-section { padding-top: clamp(15px, 20px, 40px); }
.section-tight { padding-block: clamp(30px, 4.5vw, 56px); }
.section-cream { background: var(--cream); }
.section-surface { background: var(--surface); }
.section-navy { background: var(--navy); color: var(--cream-lt); }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .muted { color: #A9BACD; }

/* the monospace label, the site's signature detail */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: none;
  color: var(--rust);
  margin-bottom: 14px;
}
.section-navy .eyebrow { color: var(--rust-lt); }

.lead { font-size: clamp(1rem, 1.8vw, 1.16rem); color: var(--ink-soft); max-width: 62ch; }
.section-navy .lead { color: #C3D0DD; }
.muted { color: var(--muted); }
.tiny { font-size: .84rem; }

.sec-head { margin-bottom: clamp(24px, 4vw, 42px); }
.sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}

/* --- header --------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 238, .88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.site-head.scrolled { border-color: var(--line); background: rgba(250, 246, 238, .96); }

.head-inner { display: flex; align-items: center; gap: 16px; height: var(--head-h); }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }

/* the supplied artwork keeps its own colours */
.logo-img { width: 46px; height: 46px; object-fit: contain; }

/* In the top bar the mark and the name are black, not navy. brightness(0)
   forces any artwork to solid black while leaving its transparency alone, so
   this keeps working if the logo file is ever swapped. */
.brand .logo { color: #000; flex: none; }
.brand .logo-img { width: 52px; height: 52px; filter: brightness(0); }

/* the full lockup is wider than it is tall, so it needs room to breathe */
.logo-lockup { width: auto; max-width: 100%; height: auto; }

/* footer: the whole lockup, sized to sit level with the link columns beside it.
   The svg selector is element-qualified so it never also matches the <img>,
   which carries both .logo and .logo-img. */
.foot-logo { margin-bottom: 18px; }
.foot-logo img.logo-img { width: min(110px, 40%); height: auto; }
.foot-logo svg.logo { width: 84px; height: 74px; color: var(--cream); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong {
  font-size: .96rem; font-weight: 800; letter-spacing: -.02em; color: #000;
}
.brand-text span {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em;
  text-transform: none; color: #55554E; margin-top: 3px;
}

/* On the homepage the bar stays out of the way over the entry screen and the
   centred link list: those links are already on the page. Once you scroll
   past them it slides down with the full menu. JS adds and removes .tucked. */
/* these markers need a real layout box, or measuring their position returns 0 */
#headerReveal, #siteStart { display: block; height: 1px; }

/* Fixed, not sticky. A sticky header keeps its space in the layout even when
   it is transformed out of sight, which left a blank band above the entry
   screen. Fixed takes it out of flow entirely, so the entry starts at y=0. */
.head-tuckable {
  position: fixed; top: 0; left: 0; right: 0;
  transition: transform .32s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
}
.head-tuckable.tucked {
  transform: translateY(-101%);
  opacity: 0;
  pointer-events: none;
}

/* Without JavaScript the class never gets removed, so the header would be
   permanently hidden on the homepage. This puts it back. */
.no-js .head-tuckable.tucked {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav > a {
  padding: 8px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em;
  text-transform: none; color: var(--ink-soft);
  transition: color .16s, background .16s;
}
.nav > a:hover { color: var(--navy); background: rgba(28, 58, 94, .07); }
.nav > a.on { color: var(--rust); }
.nav > a.btn-primary { color: var(--cream-lt); }
.nav .btn { margin-left: 8px; }

.burger {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
  margin-left: auto;
}
.burger span {
  display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .26s, opacity .18s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--head-h) 0 auto; flex-direction: column;
    align-items: stretch; gap: 0; padding: 10px var(--pad) 22px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .24s ease, opacity .2s ease;
    max-height: calc(100dvh - var(--head-h)); overflow-y: auto;
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav > a {
    padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line-soft);
    font-size: .95rem;
  }
  .nav > a.btn-primary { border-radius: 999px; border-bottom: 0; }
  .nav .btn { margin: 16px 0 0; }
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: .93rem; cursor: pointer; text-align: center;
  transition: transform .15s, background .18s, border-color .18s, color .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: none; }
.btn-primary { background: var(--rust); color: var(--cream-lt); box-shadow: 0 4px 14px rgba(192,102,58,.26); }
.btn-primary:hover { background: var(--rust-dk); box-shadow: 0 8px 22px rgba(192,102,58,.32); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-dk); }
.btn-olive { background: var(--olive); color: #fff; }
.btn-olive:hover { background: var(--olive-dk); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.section-navy .btn-ghost { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.section-navy .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-sm { padding: 9px 16px; font-size: .84rem; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .06em;
  text-transform: none; font-weight: 600; color: var(--rust);
}
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* --- loading screen --------------------------------------------------------
   Navy field, the logo drawing itself in, a bar that fills. Removed by JS the
   moment the page is ready. */

.preloader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--navy); color: var(--cream-lt);
  transition: opacity .5s ease, visibility .5s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }

.preloader-mark {
  width: clamp(96px, 22vw, 132px); height: clamp(96px, 22vw, 132px);
  display: grid; place-items: center; color: var(--cream-lt);
  animation: markIn .8s cubic-bezier(.2, .8, .3, 1) both;
}
.preloader-mark .logo,
.preloader-mark .logo-img { width: 100%; height: 100%; border-radius: 0; }

@keyframes markIn {
  from { opacity: 0; transform: scale(.82) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.preloader-name {
  font-size: clamp(.82rem, 3.4vw, 1rem); font-weight: 800; letter-spacing: .22em;
  color: #fff; animation: markIn .8s .12s cubic-bezier(.2, .8, .3, 1) both;
}
.preloader-name span { color: var(--rust-lt); }

.preloader-track {
  width: clamp(120px, 34vw, 190px); height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .16); overflow: hidden;
}
.preloader-track i {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: var(--rust-lt);
  animation: trackRun 1.15s ease-in-out infinite;
}
@keyframes trackRun {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* --- entry screen ----------------------------------------------------------
   The first thing anyone sees: the photo strip behind, the logo in front,
   filling the viewport. Tap or scroll to go on into the site. */

.entry {
  position: relative;
  /* the top bar is hidden over this screen, so it gets the whole viewport */
  height: 100svh;
  min-height: 440px;
  display: grid; place-items: center;
  overflow: hidden; background: var(--navy-dk);
  cursor: pointer;
}

.entry-strip {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.entry-strip figure { margin: 0; overflow: hidden; position: relative; }
.entry-strip img {
  width: 100%; height: 100%; object-fit: cover;
  animation: stripIn 1.1s cubic-bezier(.2, .8, .3, 1) both;
}
.entry-strip figure:nth-child(2) img { animation-delay: .07s; }
.entry-strip figure:nth-child(3) img { animation-delay: .14s; }
.entry-strip figure:nth-child(4) img { animation-delay: .21s; }
.entry-strip figure:nth-child(5) img { animation-delay: .28s; }
.entry-strip figure:nth-child(6) img { animation-delay: .35s; }
@keyframes stripIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; } }

.entry-strip::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,41,63,.55), rgba(20,41,63,.30) 35%, rgba(20,41,63,.82)),
    radial-gradient(60% 55% at 50% 45%, rgba(20,41,63,.55), transparent 70%);
}

.entry-inner {
  position: relative; z-index: 2; text-align: center; padding: 0 var(--pad);
  display: flex; flex-direction: column; align-items: center;
}
.entry-logo {
  width: clamp(120px, 26vw, 190px); height: clamp(120px, 26vw, 190px);
  display: grid; place-items: center; color: #fff; margin-bottom: 20px;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .5));
  animation: markIn 1s .35s cubic-bezier(.2, .8, .3, 1) both;
}
.entry-logo .logo, .entry-logo .logo-img { width: 100%; height: 100%; border-radius: 0; }

.entry-name {
  margin: 0 0 10px; color: #fff; font-weight: 850;
  font-size: clamp(1.3rem, 6vw, 2.9rem); letter-spacing: .12em; line-height: 1.1;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .5);
  animation: markIn 1s .45s cubic-bezier(.2, .8, .3, 1) both;
}
.entry-name span { color: var(--rust-lt); }

.entry-tag {
  margin: 0 0 clamp(24px, 5vw, 38px);
  font-family: var(--mono); font-size: clamp(.68rem, 2.6vw, .84rem);
  letter-spacing: .26em; color: #D6DFE8;
  animation: markIn 1s .55s cubic-bezier(.2, .8, .3, 1) both;
}

.entry-go {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; color: #fff;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .2em;
  padding: 10px 18px;
  animation: markIn 1s .65s cubic-bezier(.2, .8, .3, 1) both;
}
.entry-go svg { animation: nudge 1.9s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.entry-go:hover svg { color: var(--rust-lt); }

@media (max-width: 640px) {
  .entry-strip { grid-template-columns: repeat(3, 1fr); }
  .entry-strip figure:nth-child(n+4) { display: none; }
}

/* --- hero photo strip ----------------------------------------------------- */

.strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: clamp(240px, 42vw, 460px);
  background: var(--navy-dk);
}
.strip figure { margin: 0; overflow: hidden; position: relative; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip figure + figure { border-left: 2px solid var(--ground); }

.strip-word {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; padding-inline: var(--pad);
}
.strip-word b {
  font-size: clamp(2.4rem, 11vw, 8.5rem);
  font-style: italic; font-weight: 850; letter-spacing: -.045em;
  color: #fff; text-align: center; line-height: .9;
  text-shadow: 0 4px 30px rgba(20,41,63,.55), 0 1px 3px rgba(20,41,63,.5);
}

/* The slim strip is still used on the Our Story page; it just shows fewer
   slices as the screen narrows. */
@media (max-width: 860px) {
  .strip { grid-template-columns: repeat(4, 1fr); height: clamp(150px, 34vw, 240px); }
  .strip figure:nth-child(n+5) { display: none; }
}
@media (max-width: 520px) {
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip figure:nth-child(n+4) { display: none; }
}

/* --- hero copy ------------------------------------------------------------ */

.hero-copy { text-align: center; padding-block: clamp(30px, 5vw, 56px); }
.hero-copy h1 { max-width: 18ch; margin-inline: auto; }
.hero-copy h1 em, .hero-copy h2 em { font-style: italic; color: var(--rust); }
.hero-copy .lead { margin-inline: auto; }
/* the three short beats under the opening line: tighter together than a
   normal paragraph, so they read as one thought rather than three */
.hero-copy .lead-beat { margin-top: 10px; margin-bottom: 0; font-weight: 600; }
.hero-copy .lead-beat + .lead-beat { margin-top: 2px; font-weight: 400; }
.hero-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px;
}

.hero-nav {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 34px; position: relative;
}
.hero-nav a {
  font-family: var(--mono); font-size: .92rem; letter-spacing: .08em;
  text-transform: none; color: var(--ink-soft); padding: 5px 10px;
}
.hero-nav a:hover { color: var(--rust); }
/* The arrow belongs to "Community" and nothing else, so it is anchored to that
   link and sits clear to its right rather than floating over the list. */
.hero-nav-last { position: relative; display: inline-flex; align-items: center; }

/* the arrow sweeps up from below the line and points at the link */
.scribble {
  position: absolute; left: 100%; top: 100%;
  margin: -6px 0 0 6px;
  display: flex; align-items: flex-end; gap: 4px;
  color: var(--olive); white-space: nowrap; pointer-events: none;
}
.scribble svg { width: 88px; height: 53px; flex: none; }
.scribble em {
  font-style: normal; font-family: var(--mono);
  font-size: .78rem; letter-spacing: .04em; padding-bottom: 4px;
}

/* below this width there is no room beside the link without colliding */
@media (max-width: 1000px) { .scribble { display: none; } }

/* the quick-links list duplicates the hamburger menu on phones, so it is
   desktop only */
@media (max-width: 860px) { .hero-nav { display: none; } }

/* --- stats ---------------------------------------------------------------- */

.stat-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat-row div {
  flex: 1 1 130px; padding: 18px 12px; text-align: center;
  border-right: 1px solid var(--line-soft);
}
.stat-row div:last-child { border-right: 0; }
.stat-row b {
  display: block; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800;
  letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.stat-row span {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: none; color: var(--muted);
}

/* --- next out the door ---------------------------------------------------- */

.next-up {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  padding: 22px 26px; border-radius: var(--r-lg);
  background: var(--navy); color: #fff;
  background-image: linear-gradient(105deg, var(--navy) 40%, var(--navy-lt));
}
.next-up .eyebrow { color: var(--rust-lt); margin-bottom: 6px; }
.next-up h3 { margin: 0 0 4px; font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: #fff; }
.next-up p { margin: 0; color: #B9C8D8; font-size: .9rem; }
.countdown { display: flex; gap: 6px; }
.countdown div {
  min-width: 52px; text-align: center; padding: 8px 6px; border-radius: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
}
/* the seconds box pulses gently so it is obvious the clock is live */
.countdown div:last-child b { color: var(--rust-lt); }
@keyframes tickPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.countdown div:last-child b { animation: tickPulse 1s ease-in-out infinite; }
.is-departed .countdown div:last-child b { animation: none; }
.countdown b {
  display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.countdown span {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: none; color: #A9BACD;
}
.next-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
@media (max-width: 780px) {
  .next-up { grid-template-columns: 1fr; }
  .next-cta { justify-content: space-between; }
}

/* --- trip cards ----------------------------------------------------------- */

.trip-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }

/* The grid item on the trips page. Without this the item stretches to the row
   height but the card inside it does not, so cards in a row ended up ragged. */
.trip-item { display: flex; }
.trip-item > .trip-card { width: 100%; }

/* A class selector beats the browser's own [hidden] { display: none }, so the
   rule above would keep filtered-out trips on screen. This puts it back. */
.trip-item[hidden] { display: none; }

.trip-card {
  display: flex; flex-direction: column; position: relative;
  height: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
/* the whole card is one link */
.trip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cream-dk); }
.trip-card:focus-within { box-shadow: 0 0 0 3px rgba(192,102,58,.35); }

.trip-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.trip-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.trip-card:hover .trip-media img { transform: scale(1.05); }

.trip-date {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--cream-lt); border-radius: 10px; padding: 6px 10px; text-align: center;
  box-shadow: var(--shadow-sm); line-height: 1.05;
  pointer-events: none;   /* let clicks fall through to the card link beneath */
}
.trip-date b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--navy); }
.trip-date span {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: none; color: var(--rust);
}

.trip-badges {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  pointer-events: none;   /* decoration only, the whole card is the link */
}

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: none;
  background: rgba(255,255,255,.92); color: var(--navy); backdrop-filter: blur(4px);
}
.pill-rust  { background: var(--rust); color: #fff; }
.pill-olive { background: var(--olive); color: #fff; }
.pill-navy  { background: var(--navy); color: #fff; }

.trip-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.trip-region {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: none; color: var(--muted); margin-bottom: 6px;
}
.trip-body h3 { margin-bottom: 7px; font-size: 1.14rem; }
.trip-card:hover h3 { color: var(--rust); }
.trip-summary { font-size: .89rem; color: var(--ink-soft); margin-bottom: 14px; }

.trip-facts {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  font-size: .76rem; line-height: 1; color: var(--muted); margin-bottom: 0;
  margin-top: auto; padding-bottom: 14px;
}
.trip-facts b { color: var(--navy); font-weight: 700; }

.meter-group { display: inline-flex; align-items: flex-end; gap: 5px; }
.meter-label { font-size: .64rem; letter-spacing: .02em; }

.meter { display: inline-flex; align-items: flex-end; gap: 3px; }
.meter i { width: 7px; border-radius: 1px; background: var(--cream-dk); }
.meter i.on { background: var(--rust); }
.meter i:nth-child(1) { height: 6px; }
.meter i:nth-child(2) { height: 10px; }
.meter i:nth-child(3) { height: 14px; }

.trip-foot {
  padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.price b { font-size: 1.16rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.price span {
  display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: none; color: var(--muted);
}
.trip-go {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: none; color: var(--rust); font-weight: 600;
}

/* the card that closes off the trip row */
.trip-card-more {
  display: flex; flex-direction: column; justify-content: center;
  padding: 26px 24px; text-align: left; gap: 8px;
  background: var(--cream); border: 1.5px dashed var(--cream-dk);
}
.trip-card-more .more-mark {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: 1.4rem; font-weight: 300;
  line-height: 1; margin-bottom: 6px;
}
.trip-card-more h3 { margin: 0; font-size: 1.08rem; }
.trip-card-more p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.trip-card-more:hover { border-color: var(--rust); }
.trip-card-more:hover h3 { color: var(--rust); }

@media (max-width: 700px) {
  /* on the two-across phone grid it becomes one compact tile */
  .trip-card-more { padding: 12px 10px; text-align: center; align-items: center; }
  .trip-card-more .more-mark { width: 28px; height: 28px; font-size: 1.05rem; margin-bottom: 4px; }
  .trip-card-more h3 { font-size: .74rem; line-height: 1.2; }
  .trip-card-more p { display: none; }
  .trip-card-more .trip-go { display: none; }
}

/* stretched link: makes the ENTIRE card clickable without nesting links */
.stretch::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}

/* --- MOBILE: two trips per row ------------------------------------------ */
@media (max-width: 700px) {
  .trip-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }

  .trip-card { border-radius: var(--r); }
  .trip-media { aspect-ratio: 1 / 1; }
  .trip-body { padding: 8px 8px 10px; }

  /* Region and title get reserved space for exactly two lines each, so the
     price sits on the same baseline across a whole row whether a name runs to
     one line or two. Without this, "Zuti Forest" and "Lake Ellis & Nithi
     Falls" push their prices to different heights. */
  .trip-region {
    font-size: .54rem; letter-spacing: .08em; margin-bottom: 3px;
    min-height: 2.2em; line-height: 1.1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .trip-body h3 {
    font-size: .76rem; line-height: 1.2; margin-bottom: 4px; letter-spacing: -.01em;
    min-height: 2.4em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .trip-summary {
    font-size: .66rem; line-height: 1.35; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .trip-facts { font-size: .6rem; gap: 6px 10px; margin-top: 0; padding-bottom: 0; margin-bottom: 8px; }
  .meter-label { font-size: .56rem; }
  .trip-go { display: none; }
  .trip-foot { padding-top: 6px; border-top: 0; margin-top: auto; }
  .price b { font-size: .8rem; }
  .price span { display: none; }
  .trip-date { top: 6px; left: 6px; padding: 3px 6px; border-radius: 7px; }
  .trip-date b { font-size: .78rem; }
  .trip-date span { font-size: .48rem; }
  .trip-badges { top: 6px; right: 6px; }
  .pill { padding: 2px 7px; font-size: .5rem; gap: 3px; }
  .meter i { width: 5px; }
  .meter i:nth-child(1) { height: 5px; }
  .meter i:nth-child(2) { height: 8px; }
  .meter i:nth-child(3) { height: 11px; }
}

/* --- filters -------------------------------------------------------------- */

.filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 26px;
}
.chip {
  padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); cursor: pointer;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em;
  text-transform: none; color: var(--ink-soft);
  transition: all .16s;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --- how to join steps ---------------------------------------------------- */

.joinsteps { display: grid; gap: 14px; }
.joinstep {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px;
  position: relative;
}
.joinstep .num {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 1.02rem; color: #fff; flex: none;
}
.joinstep:nth-child(1) .num { background: var(--navy); }
.joinstep:nth-child(2) .num { background: var(--olive); }
.joinstep:nth-child(3) .num { background: var(--rust); }
.joinstep:nth-child(4) .num { background: var(--navy); }
.joinstep h3 { margin-bottom: 5px; font-size: 1.06rem; }
.joinstep p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.joinstep-note {
  grid-column: 1 / -1;
  margin: 14px -22px -20px -22px;
  padding: 8px 22px;
  background: var(--surface-2);
  color: var(--navy);
  font-size: .78rem;
  border-radius: var(--r-lg);
}
@media (min-width: 860px) {
  .joinsteps { grid-template-columns: repeat(2, 1fr); }
}

/* --- how-to-join layout ---------------------------------------------------
   Steps on the left, payment box on the right. On a phone it becomes one
   column with the payment details underneath the steps, where they belong in
   the reading order anyway. */

.join-layout { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) {
  .join-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .join-layout .paybox { order: 2; }
  .join-layout .joinsteps { order: 1; }
}

/* index page has no paybox: let the steps use the whole row */
@media (min-width: 900px) {
  .join-layout-solo { grid-template-columns: 1fr; }
  .join-layout-solo .joinsteps { grid-template-columns: repeat(4, 1fr); align-items: start; }
}

/* --- pay box -------------------------------------------------------------- */

.paybox {
  background: var(--cream); border: 2px dashed var(--rust);
  border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); text-align: center;
}
.paybox .till {
  font-family: var(--mono); font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 700;
  letter-spacing: .06em; color: var(--rust); margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.paybox .till-label {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: none; color: var(--navy);
}
.copybtn {
  margin-top: 12px; border: 1.5px solid var(--navy); background: transparent;
  color: var(--navy); border-radius: 999px; padding: 7px 16px; cursor: pointer;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: none;
  transition: all .16s;
}
.copybtn:hover { background: var(--navy); color: #fff; }
.copybtn.done { background: var(--olive); border-color: var(--olive); color: #fff; }

/* --- panels & lists ------------------------------------------------------- */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px);
}
.panel-cream { background: var(--cream); border-color: var(--cream-dk); }

/* the story column beside its stat tiles: two tracks, never a stray third */
.story-split { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) {
  .story-split { grid-template-columns: 1.35fr 1fr; }
}

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.ticklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ticklist li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.ticklist li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: rgba(110,122,74,.15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7A4A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.ticklist.cross li::before {
  background: rgba(192,102,58,.13)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0663A' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}
.ticklist.pack li::before {
  background: rgba(28,58,94,.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3A5E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")
    center / 10px no-repeat;
}

/* --- trip highlights ------------------------------------------------------- */

.highlights {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; gap: 12px;
}
@media (min-width: 720px) { .highlights { grid-template-columns: 1fr 1fr; } }
.highlights li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .96rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
}
.highlights li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px;
  border-radius: 50%; background: var(--rust);
}

/* --- meeting information --------------------------------------------------- */

.meet-card {
  margin-top: 30px; padding: 22px 24px;
  background: var(--cream); border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
}
.meet-grid {
  display: grid; gap: 16px 20px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.meet-grid span {
  display: block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .12em; color: var(--muted); margin-bottom: 4px;
}
.meet-grid b { font-size: .96rem; color: var(--navy); line-height: 1.35; }

/* --- itinerary download ---------------------------------------------------- */

.itin-download {
  display: flex; align-items: center; gap: 16px;
  margin-top: 18px; padding: 18px 20px;
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg);
  transition: transform .18s, box-shadow .18s;
}
.itin-download:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.itin-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--rust-lt);
}
.itin-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.itin-text b { font-size: 1rem; color: #fff; }
.itin-text small { font-size: .8rem; color: #A9BACD; }
.itin-go { margin-left: auto; font-size: 1.3rem; color: var(--rust-lt); flex: none; }
@media (max-width: 520px) {
  .itin-download { gap: 12px; padding: 15px 16px; }
  .itin-text b { font-size: .92rem; }
  .itin-text small { font-size: .74rem; }
}

/* the tagline under the "why people come back" copy */
.come-back-tag {
  margin: 18px 0 0; font-family: var(--mono);
  font-size: .8rem; letter-spacing: .22em; color: var(--rust-lt);
}

/* --- timeline ------------------------------------------------------------- */

.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--rust), rgba(192,102,58,.12));
}
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item::before {
  content: ""; position: absolute; left: -28px; top: 6px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--ground); border: 2.5px solid var(--rust);
}
.tl-time {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: none; color: var(--rust); font-weight: 600;
}
.tl-item h4 { margin: 3px 0 3px; font-size: 1rem; }
.tl-item p { margin: 0; font-size: .89rem; color: var(--ink-soft); }

/* --- accordion ------------------------------------------------------------ */

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  padding: 18px 40px 18px 0; cursor: pointer; list-style: none; position: relative;
  font-weight: 700; font-size: 1rem;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 300; color: var(--rust); transition: transform .24s;
}
.acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acc .acc-body { padding: 0 36px 20px 0; color: var(--ink-soft); font-size: .94rem; }

/* --- gallery -------------------------------------------------------------- */

.photo-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 180px;
}
.photo-grid figure {
  margin: 0; border-radius: var(--r); overflow: hidden; cursor: zoom-in;
  background: var(--surface-2);
}
.photo-grid figure:nth-child(5n+1) { grid-row: span 2; }
.photo-grid figure:nth-child(5n+3) { grid-column: span 2; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .3s; }
.photo-grid figure:hover img { transform: scale(1.05); }
@media (max-width: 640px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 8px; }
  .photo-grid figure:nth-child(5n+3) { grid-column: span 1; }
  .photo-grid figure:nth-child(5n+1) { grid-row: span 1; }
}

/* index's archive teaser is a fixed set of exactly 5 photos, not the
   gallery's repeating multi-row mosaic, so that pattern's row/column spans
   just leave a gap underneath. Lay these 6 out by hand instead: a tall
   portrait, a stacked landscape pair matching its height, a tall portrait,
   then another stacked pair, filling a clean 4-column rectangle with no
   gaps. */
@media (min-width: 641px) {
  .archive-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 185px);
  }
  .archive-grid figure:nth-child(1) { grid-column: 1; grid-row: span 2; }
  .archive-grid figure:nth-child(2) { grid-column: 2; grid-row: 1; }
  .archive-grid figure:nth-child(3) { grid-column: 2; grid-row: 2; }
  .archive-grid figure:nth-child(4) { grid-column: 3; grid-row: span 2; }
  .archive-grid figure:nth-child(5) { grid-column: 4; grid-row: 1; }
  .archive-grid figure:nth-child(6) { grid-column: 4; grid-row: 2; }
}

/* The trip page shows our own shots from that route, which are phone photos
   and usually portrait. Equal, taller cells suit them better than the
   gallery's deliberately uneven mosaic. Must follow .photo-grid to win on
   source order. */
.trip-photos { grid-auto-rows: 320px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trip-photos figure:nth-child(5n+1) { grid-row: span 1; }
.trip-photos figure:nth-child(5n+3) { grid-column: span 1; }
@media (max-width: 640px) {
  .trip-photos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,41,63,.94);
  display: none; align-items: center; justify-content: center; padding: 4vh 4vw;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--r); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  font-size: 1.3rem; display: grid; place-items: center;
}
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-cap {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: #B9C8D8; font-family: var(--mono); font-size: .76rem;
}

/* --- reviews -------------------------------------------------------------- */

.quotes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; margin: 0;
}
.quote p { font-size: .96rem; color: var(--ink-soft); margin-bottom: 14px; }
.quote footer { display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--olive); color: #fff; font-weight: 800; flex: none; font-size: .92rem;
}
.quote b { display: block; font-size: .9rem; }
.quote small { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: none; color: var(--muted); }
.stars { color: var(--rust); letter-spacing: 2px; font-size: .82rem; margin-bottom: 10px; }

/* --- trip detail ---------------------------------------------------------- */

.trip-hero { position: relative; height: clamp(240px, 40vw, 440px); overflow: hidden; }
.trip-hero img { width: 100%; height: 100%; object-fit: cover; }
.trip-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,41,63,.86), rgba(20,41,63,.15) 60%, rgba(20,41,63,.35));
}
.trip-hero-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding-block: clamp(20px, 4vw, 40px); color: #fff;
}
.trip-hero-copy h1 { color: #fff; margin-bottom: 6px; }
.trip-hero-copy p { color: #C3D0DD; margin: 0; }

.detail-shell { display: grid; grid-template-columns: 1fr 360px; gap: 34px; align-items: start; }
@media (max-width: 940px) { .detail-shell { grid-template-columns: 1fr; gap: 24px; } }

.book-panel { position: sticky; top: calc(var(--head-h) + 16px); }
@media (max-width: 940px) { .book-panel { position: static; } }

.included-panel { margin-top: 10px; }
@media (min-width: 941px) { .included-panel { margin-top: -17px; } }

.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.factgrid div {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 12px;
}
.factgrid b { display: block; font-size: 1.25rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.factgrid span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: none; color: var(--muted);
}

.summary-line {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
  font-size: .92rem; border-bottom: 1px dashed var(--line);
}
.summary-line:last-of-type { border-bottom: 0; }
.summary-line b { text-align: right; }

.breadcrumb {
  display: flex; gap: 7px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: none; color: var(--muted-lt); margin-bottom: 14px;
}
.breadcrumb a:hover { color: var(--rust); }

.page-head { padding-block: clamp(34px, 5vw, 66px) clamp(20px, 3vw, 34px); }

/* guide pages read as an article, so the heading block is centred over the
   text column rather than pinned to the left margin */
.guide-head { max-width: 74ch; margin-inline: auto; text-align: center; }
.guide-head .breadcrumb { justify-content: center; }
.guide-head .lead { margin-inline: auto; }

/* --- prose ---------------------------------------------------------------- */

/* Long reads sit in a centred column rather than hugging the left edge. */
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 {
  margin: 1.6em 0 .5em; padding-top: 1.1em; border-top: 1px solid rgba(22, 40, 61, .16);
  font-weight: 650; font-size: clamp(1.32rem, 3.8vw, 2.5rem);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose p { color: var(--ink-soft); line-height: 1.76; font-size: 15px; }
/* the enumerations in the policy documents: same colour and rhythm as
   the paragraphs around them, just indented */
.policy-list { margin: 0 0 1.1em; padding-left: 1.15em; color: var(--ink-soft); font-size: 15px; }
.policy-list li { line-height: 1.7; margin-bottom: .3em; }
.policy-list li::marker { color: var(--ink); }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 1.6em 0; padding: 16px 22px; border-left: 3px solid var(--rust);
  background: var(--cream); border-radius: 0 var(--r) var(--r) 0; color: var(--ink);
}

/* --- footer --------------------------------------------------------------- */

.site-foot { background: var(--navy); color: #C3D0DD; padding-block: clamp(40px, 6vw, 68px) 26px; }
.foot-top { display: grid; grid-template-columns: 1.5fr 2fr; gap: 36px; }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr; gap: 28px; } }
.site-foot .logo { color: var(--cream); margin-bottom: 14px; }
.foot-blurb { font-size: .89rem; max-width: 40ch; color: #A9BACD; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.foot-cols h4 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: none; color: var(--rust-lt); margin-bottom: 12px; font-weight: 600;
}
.foot-cols a { display: block; padding: 4px 0; font-size: .88rem; color: #A9BACD; }
.foot-cols a:hover { color: #fff; }

/* --- footer on a phone ----------------------------------------------------
   Two columns left one group stranded in a half-width block with dead space
   beside it. One column per group, separated by rules, reads cleanly and
   scans in a single pass. */
@media (max-width: 700px) {
  .site-foot { padding-block: 34px 22px; }

  .foot-top { gap: 0; }

  .foot-logo { margin-bottom: 14px; }
  .foot-logo img.logo-img { width: 100px; }
  .foot-blurb { font-size: .86rem; max-width: none; margin-bottom: 18px; }
  .social { margin-bottom: 6px; }

  .foot-cols { grid-template-columns: 1fr; gap: 0; }
  .foot-cols > div {
    padding-block: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .foot-cols h4 { margin-bottom: 8px; }

  /* the links sit two-up so a group is not a long thin list */
  .foot-cols > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }
  .foot-cols h4 { grid-column: 1 / -1; }
  .foot-cols a { padding: 6px 0; font-size: .85rem; }

}

/* only the genuinely narrow phones drop to a single list, pairs get cramped
   below about 360px */
@media (max-width: 359px) {
  .foot-cols > div { grid-template-columns: 1fr; }
}
/* Three groups spread across the width. On a phone they become columns rather
   than one long left-hand list, so the right-hand space is used. */
/* Three tracks with the outer two equal, so the middle group lands on the true
   centre of the bar. space-between would only distribute the leftover space,
   which leaves it a few pixels off when the outer groups differ in width. */
.foot-bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  gap: 14px 26px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: #7D93AB;
}
.fb-col { display: flex; flex-direction: column; gap: 6px; }
.fb-col-mid { align-items: center; text-align: center; }
.fb-col-end { align-items: flex-end; text-align: right; }
.fb-col a:hover { color: var(--rust-lt); }

/* On a phone these become two columns rather than one long left-hand list, so
   the empty space on the right gets used, with the NendaFlow credit centred
   on its own row underneath. Must sit after the rules above to win on source
   order. */
@media (max-width: 700px) {
  .foot-bottom {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px 14px; align-items: start;
    margin-top: 18px; padding-top: 16px;
  }
  .fb-col-end { align-items: flex-start; text-align: left; order: 2; }
  .fb-col-mid {
    order: 3;
    grid-column: 1 / -1;
    align-items: center; text-align: center;
    padding-top: 4px;
  }
}
.built-by a {
  color: var(--cream); font-weight: 600;
  border-bottom: 1px solid rgba(224,164,74,.5); padding-bottom: 1px;
  transition: color .18s, border-color .18s;
}
.built-by a:hover { color: var(--rust-lt); border-color: var(--rust-lt); }
@media (max-width: 620px) {
  .foot-bottom { justify-content: flex-start; gap: 8px; flex-direction: column; }
}
.social { display: flex; gap: 12px; margin-top: 14px; }
.social a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: var(--cream); transition: all .18s;
}
.social a:hover { background: var(--rust); border-color: var(--rust); color: #fff; }

/* --- sticky booking bar (phones, trip pages) -------------------------------
   The booking panel sits at the top of a long trip page on mobile, so this
   keeps the price and the button reachable the whole way down. */

.book-bar { display: none; }

@media (max-width: 940px) {
  .book-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(22, 40, 61, .1);
  }
  .book-bar-price { min-width: 0; }
  .book-bar-price span {
    display: block; font-size: .7rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .book-bar-price b {
    font-size: 1.05rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em;
  }
  .book-bar .btn { flex: none; }

  /* keep the WhatsApp button clear of the bar, and the footer clear of both */
  .book-bar ~ .wa-fab,
  body:has(.book-bar) .wa-fab { bottom: 78px; }
  body:has(.book-bar) .site-foot { padding-bottom: 86px; }
}

/* --- whatsapp fab --------------------------------------------------------- */

.wa-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  background: #1F8A45; color: #fff; font-weight: 700; font-size: .88rem;
  box-shadow: 0 6px 22px rgba(20,41,63,.3); transition: transform .2s;
}
.wa-fab:hover { transform: translateY(-2px); }
@media (max-width: 700px) {
  .wa-fab span { display: none; }
  .wa-fab { padding: 13px; }
}

/* --- misc ----------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }

.empty { text-align: center; padding: 50px 20px; color: var(--muted); }

/* A blurred fixed header is one of the more expensive things a phone can be
   asked to repaint while scrolling. Below tablet width it becomes a plain
   solid bar, which looks the same at that size and scrolls a lot smoother. */
@media (max-width: 900px) {
  .site-head {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ground);
  }
  .site-head.scrolled { background: var(--ground); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

.foot-legal a { color: #A9BACD; }
.foot-legal a:hover { color: var(--rust-lt); }

/* four footer link columns once the Legal list is added */
.foot-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .foot-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .foot-cols-4 { grid-template-columns: 1fr; } }
.policy-inline { color: var(--rust); }
.policy-inline:hover { text-decoration: underline; }

/* --- gear checklists ------------------------------------------------------- */
.gear-grid {
  display: grid; gap: 14px; margin: 22px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.gear-group {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px;
}
.gear-group h4 {
  margin: 0 0 10px; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .12em; color: var(--rust); font-weight: 600;
}
.gear-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.gear-group li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .89rem; color: var(--ink-soft); line-height: 1.4;
}
.gear-group li::before {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: 4px;
  border: 1.5px solid var(--cream-dk); border-radius: 3px; background: var(--ground);
}
.prose .gear-grid { max-width: none; }