/* ============================================================
   Lappet Faced Safaris — "Savanna Dusk" design system
   Teal-green on warm sand, Afacad + Nunito. SEO-first, CWV-first.
   ============================================================ */

:root {
  --green-950: #0d1f1d;
  --green-800: #12463c;
  --green-700: #145e4f;
  --green-600: #1c7a68;
  /* Light enough to read as an accent on the near-black footer, where
     --green-600 measures only 3.28:1 and reads as a smudge. */
  --green-400: #4ec3a7;
  --green-100: #e7f2ef;
  --amber-400: #fbbf24;
  --sand-50: #faf8f4;
  --sand-100: #f3eee5;
  --ink-900: #1b2420;
  --ink-600: #51625c;
  --line: #e3ded3;
  --white: #ffffff;

  --font-display: "Afacad", system-ui, sans-serif;
  /* Eleven rules referenced --font-head and nothing declared it, so they were
     falling back to the body face. They meant the display one. */
  --font-head: var(--font-display);
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 2px 6px rgba(13, 31, 29, .06), 0 12px 32px -12px rgba(13, 31, 29, .18);
  --shadow-card-hover: 0 4px 10px rgba(13, 31, 29, .08), 0 24px 48px -16px rgba(13, 31, 29, .28);
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Base text size. Every font-size on the site is in rem, so this one value
   scales all text together (spacing is in px and stays put): 18px on larger
   screens, 17px on phones. Raised from the browser's 16px at the owner's
   request. */
html { font-size: 112.5%; }
@media (max-width: 720px) { html { font-size: 106.25%; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-600); }
a:hover { color: var(--green-700); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--green-950); }
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.375rem; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-950); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--radius-sm); border: 2px solid transparent;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 52px; padding: 14px 30px; font-size: 1.0625rem; }
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-700); color: #fff; }
.btn-green { background: var(--green-600); color: #fff; }
.btn-green:hover { background: var(--green-700); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.65); backdrop-filter: blur(2px); }
.btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-outline { background: transparent; color: var(--green-700); border-color: var(--green-600); }
.btn-outline:hover { background: var(--green-100); color: var(--green-800); }

.link-more { font-weight: 800; color: var(--green-600); text-decoration: none; }
.link-more::after { content: " →"; }
a:hover .link-more, .link-more:hover { color: var(--green-800); }

.kicker {
  margin: 0 0 8px; font-size: .8125rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-600);
}
.kicker-light { color: var(--green-100); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 244, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 72px; }
/* The image is 12px tall, so the link around it was a 12px tap target on
   the one control every page needs. The padding is what you press. */
.brand {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 4px;
}
/* The emblem-and-wordmark logo (images/logo.png, 604x120 for sharp retina). */
.brand img { width: auto; height: 50px; }
.main-nav { flex: 1; }
.nav-toggle { display: none; }
.icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-menu a {
  display: block; padding: 10px 13px; border-radius: 8px;
  color: var(--ink-900); font-weight: 700; font-size: .9375rem; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.nav-menu a:hover { background: var(--green-100); color: var(--green-800); }
/* The drawer's WhatsApp/WeChat row exists only on phone and tablet widths. */
.nav-contact { display: none; }

/* ---- Contact Us panel: founder card, ways to reach us, message buttons ---- */
.nav-expert {
  position: relative; text-align: center;
  padding: 58px 20px 24px;
  background: var(--sand-100); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 6px 20px -10px rgba(13, 31, 29, .25);
}
.nav-expert img {
  position: absolute; top: -52px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: 50% 28%;
  border: 4px solid var(--sand-50); box-shadow: 0 4px 14px rgba(13, 31, 29, .18);
}
.nav-expert-name { margin: 0; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--green-950); }
.nav-expert-role { margin: 2px 0 16px; font-size: .875rem; color: var(--ink-600); }
.nav-expert-line {
  margin: 0 0 16px; font-size: .875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-800);
}
.nav-menu .nav-expert-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 26px;
  border-radius: 999px; background: var(--green-700); color: #fff; font-weight: 800; font-size: 1rem;
}
.nav-menu .nav-expert-call:hover { background: var(--green-800); color: #fff; }
.nav-menu .nav-contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 14px; border-radius: 10px;
  font-weight: 800; font-size: .9375rem;
}
.nav-menu .nav-contact-whatsapp { background: #25d366; color: var(--green-950); }
.nav-menu .nav-contact-whatsapp:hover { background: #1fb857; color: var(--green-950); }
.nav-menu .nav-contact-wechat { background: #fff; color: var(--green-800); border: 1.5px solid var(--green-600); }
.nav-menu .nav-contact-wechat:hover { background: var(--green-100); color: var(--green-800); }
.mega-panel.mega-contact { width: min(880px, calc(100vw - 40px)); padding: 34px; }   /* .mega-panel later in the file would otherwise win */
.mega-contact-grid { display: grid; grid-template-columns: 280px 1fr 1fr; gap: 36px; align-items: start; }
/* In the panel the photo sits inside the card, so nothing is clipped at the top. */
.mega-contact .nav-expert { padding: 22px 20px 22px; }
.mega-contact .nav-expert img { position: static; transform: none; width: 96px; height: 96px; margin: 0 auto 12px; display: block; }
.mega-contact-list { margin-bottom: 14px !important; }
.nav-menu .mega-contact-list a, .mega-contact-static {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-radius: 0;
  font-weight: 700; font-size: .9375rem; color: var(--ink-900); text-decoration: none;
}
.mega-contact-list span span, .mega-contact-list a > span {
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
}
.nav-menu .mega-contact-list a:hover { background: none; color: var(--green-700); transform: none; }
.mega-contact-note { margin: 0 0 16px; font-size: .9375rem; line-height: 1.55; color: var(--ink-600); }
.mega-contact-buttons { display: grid; gap: 10px; }
.header-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

/* ---------- Mega menu ---------- */
.header-inner { position: relative; }
.nav-item { display: flex; align-items: center; }
.panel-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 4px; margin-left: -6px;
  color: var(--ink-600); cursor: pointer; border-radius: 6px;
}
.panel-toggle svg { transition: transform .2s ease; }
.nav-item:hover .panel-toggle svg,
.nav-item.open .panel-toggle svg { transform: rotate(180deg); }
.mega-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(940px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: 30px; z-index: 99;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mega-panel::before { /* hover bridge across the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nav-item.has-panel:hover .mega-panel,
.nav-item.has-panel:focus-within .mega-panel,
.nav-item.open .mega-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-grid { display: flex; gap: 36px; align-items: stretch; }
.mega-col { flex: 1; min-width: 0; }
.mega-title {
  margin: 0 0 12px; font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-600);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li a {
  display: block; padding: 7px 0; color: var(--ink-900);
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.mega-col li a:hover { color: var(--green-700); transform: translateX(4px); }
.mega-featured {
  position: relative; flex: 0 0 250px; display: block;
  border-radius: var(--radius-sm); overflow: hidden; text-decoration: none;
}
.mega-featured img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mega-featured:hover img { transform: scale(1.05); }
.mega-featured::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(13,31,29,.85) 100%);
}
.mega-featured-text {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
  display: flex; flex-direction: column; gap: 3px;
}
.mega-featured-label {
  color: var(--green-100); font-size: .75rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.mega-featured-title {
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
}
.phone-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--green-800); font-weight: 800; font-size: .9375rem; text-decoration: none; }
.phone-link:hover { color: var(--green-600); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(92vh, 900px); display: flex; align-items: center; overflow: hidden; }
/* Hero slideshow.
   Slides are stacked and cross-faded. The long fade plus a drift that keeps
   moving through the hold is what stops it reading as a carousel — nothing ever
   sits perfectly still, which is how footage behaves. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1800ms cubic-bezier(.4, 0, .2, 1);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hero scrims.
 *
 * Every one of these used to be a single vertical gradient that was WEAKEST in
 * the middle (.25–.38) — exactly where the headline sits. Over a bright sky the
 * white text had almost nothing behind it.
 *
 * Each is now layered: a scrim concentrated where the words actually are, a
 * bottom anchor so the section grounds into the page, and a light top wash so
 * the sticky header separates from the photograph. The tint is the brand
 * near-black rather than pure black, which keeps the greens and golds in the
 * pictures instead of greying them out. */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    /* Diagonal now the copy sits left: heaviest under the words, clearing
       across to the right so the photograph is still a photograph. The
       vertical wash underneath keeps the sticky header separated and
       grounds the section into the page below. */
    linear-gradient(100deg,
      rgba(9,23,21,.88) 0%,
      rgba(9,23,21,.74) 38%,
      rgba(9,23,21,.34) 68%,
      rgba(9,23,21,.18) 100%),
    linear-gradient(180deg,
      rgba(9,23,21,.34) 0%,
      rgba(9,23,21,0) 30%,
      rgba(9,23,21,0) 62%,
      rgba(9,23,21,.42) 100%);
}
/* The block was already centred by .container; only its contents were
   left-aligned. The overlay is a vertical gradient, so centred text sits on
   the same tone it did before and stays legible. */
/* Two columns: the promise, and the way to act on it. 1.1fr/.9fr keeps the
   headline on two lines at desktop widths while leaving the card room for
   four fields without crowding. */
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-block: clamp(48px, 7vw, 88px);
}
.hero-copy { color: #fff; max-width: 620px; }
.hero-content { position: relative; z-index: 1; color: #fff; max-width: 780px; padding-block: 52px; }

/* Facts the site already states elsewhere. A hero is the wrong place to
   make a claim for the first time. */
.hero-badges {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 22px;
}
.hero-badges li {
  display: flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 600; color: rgba(255,255,255,.93);
}
.hero-badges svg { color: var(--amber-400); flex: 0 0 auto; }

/* The enquiry card. Solid rather than glass: over a slideshow the contrast
   under every word changed with the picture, and white is legible whatever
   is behind it. Smaller too, now that it does not have to shout over the
   photograph to be read. */
.hero-quote { position: relative; z-index: 1; justify-self: end; width: 100%; max-width: 380px; }
.quote-card {
  background: #fff; border: 1px solid rgba(13,31,29,.08);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  color: var(--ink-900);
}
/* Gold, not another green. The button is already green and the eye needs
   somewhere to land before it. #b45309 rather than the display gold,
   which fails contrast on white at this size. */
.quote-card-kicker {
  margin: 0 0 5px; font-size: .625rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: #b45309;
}
.quote-card h2 { color: var(--ink-900); font-size: 1.375rem; line-height: 1.15; margin: 0 0 6px; }
.quote-card-sub { margin: 0 0 16px; font-size: .8125rem; line-height: 1.45; color: var(--ink-600); }
.quote-form { display: grid; gap: 10px; }
.quote-form label { display: block; }
.quote-form label span {
  display: block; margin-bottom: 4px;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-600);
}
.quote-form input, .quote-form select {
  width: 100%; padding: 10px 12px;
  /* Trying the darkest brand green on the field edge. */
  border: 1px solid #0d1f1d; border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-900);
  font: inherit; font-size: .875rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.quote-form input::placeholder { color: #9aa8a2; }
.quote-form input:focus, .quote-form select:focus {
  outline: none; border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(28,122,104,.14);
}
.quote-form .btn { margin-top: 4px; width: 100%; }

/* Three answers and a door, not a form. The card asks only what the trip
   designer would ask first anyway, and hands the answers over. */
.quote-form-plan { gap: 12px; }
.quote-form-plan select,
.quote-form-plan input { padding: 11px 12px; font-size: .9375rem; }
.quote-form-plan select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2351625c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.quote-form-plan .btn { margin-top: 8px; padding-block: 13px; font-size: 1.0625rem; }
/* The arrow moves, not the button: a card that jumps under the cursor is
   harder to click, and this is the one control the whole hero exists for. */
.quote-go { box-shadow: 0 6px 16px rgba(28,122,104,.28); }
.quote-go svg { transition: transform .18s ease; }
.quote-go:hover { box-shadow: 0 8px 22px rgba(28,122,104,.36); }
.quote-go:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .quote-go svg { transition: none; }
  .quote-go:hover svg { transform: none; }
}
/* What it costs the reader to start, said before they start. */
.quote-effort {
  margin: 8px 0 0; text-align: center;
  font-size: .75rem; color: var(--ink-600);
}
.quote-trust {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 4px;
}
.quote-trust li { font-size: .75rem; color: var(--ink-600); }
.quote-trust li::before { content: "\2713\00a0"; color: var(--green-600); font-weight: 700; }

/* Stacked full-width, the two buttons ate 150px of a phone screen and pushed
   the form below the fold. Side by side they cost one row. */
@media (max-width: 620px) {
  /* Scoped to the hero. .hero-actions is used by four other blocks on this
     page, and they were being re-laid-out along with it. */
  .hero-copy .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-copy .hero-actions .btn {
    flex: 1 1 0; min-width: 0; padding-inline: 10px;
    font-size: .875rem; text-align: center;
  }
  .hero-badges { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* One column below the point where the card would squeeze the headline. */
@media (max-width: 940px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: none; }
  .hero-quote { max-width: 480px; }
}

.hero-kicker {
  display: inline-block; margin: 0 0 16px; padding: 7px 14px;
  background: rgba(231,242,239,.16); border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  color: #fff; font-weight: 800; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
}
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero-lede { font-size: 1.1875rem; max-width: 560px; margin: 0 0 28px; color: rgba(255,255,255,.94); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 22px 0 0; padding: 0; font-weight: 700; font-size: .875rem; color: rgba(255,255,255,.86); }
.hero-trust a { color: #fff; }
.stars { color: var(--amber-400); letter-spacing: 2px; margin-right: 6px; }

/* ---------- Sections ---------- */
.section { padding-block: 96px; }

/* ---------- Seam tightening ----------------------------------------------
   The 96px section rhythm reads as deliberate banding where the background
   changes colour, and as dead space where it does not: two full paddings meet
   and leave ~190px of empty page. These are the same-background seams, each
   side cut to roughly 40% of the standard. Measured across every template
   before choosing them — the alternating-tint seams on hub, destination and
   accommodation pages are deliberately left at full rhythm. */
.specialists,
.countries,
.tours,
.intent,
.tour-page .pricing-section,
.tour-page .incl-excl,
.tour-page .gallery-section { padding-bottom: 40px; }

.countries,
.tours,
.intent,
.story,
.tour-page .incl-excl,
.tour-page .gallery-section,
.tour-page .related-band { padding-top: 36px; }
.section-tint { background: var(--sand-100); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0; }

/* ---------- Carousel ---------- */
.carousel-head { align-items: center; margin-bottom: 36px; }
.carousel-head h2 { max-width: 560px; }
.carousel-nav { display: flex; gap: 10px; flex-shrink: 0; }
.carousel-nav[hidden] { display: none; }
.carousel-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--green-950);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* overflow-x also clips vertically — pad the scroller so card shadows aren't
     sliced off, then pull the layout back with matching negative margins. */
  padding: 10px 8px 28px;
  margin: -10px -8px -28px;
  scroll-padding-inline: 8px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-track:focus-visible { outline: 3px solid var(--green-600); outline-offset: 4px; border-radius: var(--radius); }

/* ---------- Intent cards ---------- */
.intent h2 { max-width: 560px; }
.intent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
/* a peeking next card signals the row is swipeable */
.intent-grid.carousel-track { margin-top: -10px; grid-template-columns: none; grid-auto-columns: calc(30% - 15px); }
.intent-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: #fff; box-shadow: var(--shadow-card); text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.intent-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.intent-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.intent-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.intent-body h3 { margin-bottom: 4px; font-size: 1.25rem; }
.intent-body p { margin: 0 0 14px; color: var(--ink-600); font-size: .9375rem; }
/* the call to action sits on a shared baseline across every card */
.intent-body .link-more { margin-top: auto; }

/* ---------- Tour cards ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tour-card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.tour-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.tour-media { position: relative; display: block; }
.tour-media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.badge-days {
  position: absolute; top: 14px; left: 14px;
  background: var(--green-600); color: #fff;
  padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: .8125rem;
}
.badge-tag {
  position: absolute; top: 14px; right: 14px;
  background: rgba(13,31,29,.78); color: #fff;
  padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: .8125rem;
}
.tour-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tour-body h3 { font-size: 1.3125rem; margin: 0; }
.tour-body h3 a { color: var(--green-950); text-decoration: none; }
.tour-body h3 a:hover { color: var(--green-700); }
.tour-meta { margin: 0; color: var(--ink-600); font-size: .9375rem; }
.tour-cta { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-600); }

/* ---------- Story ---------- */
.story-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.story-media { position: relative; }
.story-media img { border-radius: var(--radius); box-shadow: var(--shadow-card); aspect-ratio: 5 / 6; object-fit: cover; }
.story-badge {
  position: absolute; right: -18px; bottom: 32px;
  background: var(--green-950); color: #fff; border-radius: var(--radius);
  padding: 18px 22px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-card-hover);
}
.story-badge strong { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; color: #fff; }
.story-badge span { font-size: .875rem; line-height: 1.35; font-weight: 700; }
.checks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.checks li { padding-left: 34px; position: relative; font-weight: 600; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--green-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7a68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}

/* ---------- Destinations ---------- */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dest-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.dest-card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform .4s ease; }
.dest-card:hover img { transform: scale(1.05); }
.dest-overlay {
  position: absolute; inset: auto 0 0 0; padding: 48px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(13,31,29,.88));
}
.dest-overlay h3 { color: #fff; font-size: 1.25rem; margin-bottom: 2px; }
.dest-overlay p { margin: 0; color: var(--green-100); font-size: .875rem; font-weight: 700; }

/* ---------- Migration band ---------- */
.migration-band, .cta-band { position: relative; overflow: hidden; }
.migration-band { padding-block: 120px; }
/* ---------- Specialists intro -------------------------------------------- */
.specialists-inner { max-width: 780px; margin-inline: auto; text-align: center; }
.specialists-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-600); margin-bottom: 30px; }

/* ---------- Country cards ------------------------------------------------
   Laid out like the reference the owner supplied: picture on top, name and a
   line of copy beneath it. The section heading and its pill link were removed
   at the owner's request, so the cards now open the band on their own.
   Deliberately NOT the old site's treatment, where the name sat on top of
   the photograph — text over a busy wildlife image is harder to read.
   Typography stays Afacad/Nunito rather than the reference's serif, so the
   section still belongs to this site.                                        */
/* highlighter behind one word, as in the reference */
.mark {
  background-image: linear-gradient(180deg, transparent 58%, rgba(251, 191, 36, .55) 58%);
  padding-inline: 2px;
}
.btn-pill {
  border-radius: 999px; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink-900); padding: 12px 26px;
  font-weight: 700; white-space: nowrap;
}
.btn-pill:hover { border-color: var(--green-600); color: var(--green-600); }

.country-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
/* The name, the count and the way in all sit on the photograph. */
.country-card {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.country-card img {
  /* Portrait. Four cards across a container leaves each one about 270px
     wide, and a landscape frame made them 200px tall — the overlay then
     took three-quarters of the card and the photograph was a strip along
     the top. A 4:5 frame gives the picture back rather more than half. */
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center;
  transition: transform .5s ease;
}
.country-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.country-card:hover img { transform: scale(1.05); }
.country-card:focus-visible { outline: 3px solid var(--green-600); outline-offset: 3px; }

/* The scrim only darkens the bottom third, so the picture is still the card.
   Without it white text lands on whatever the photograph happens to be. */
.country-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 22, 20, .92) 0%, rgba(8, 22, 20, .55) 28%, rgba(8, 22, 20, 0) 58%);
}
.country-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px 22px 22px; }
.country-card h3 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: #fff; margin: 0 0 2px; line-height: 1.15;
}
.country-count { margin: 0 0 14px; font-size: .9375rem; color: rgba(255, 255, 255, .82); }
.country-count strong { color: var(--green-200, #9fd8c8); font-weight: 800; }
.country-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; font-size: .875rem;
}
.country-card:hover .country-btn { background: var(--green-800, #12463c); }

/* The row dots, and the two positions of the More link. On a wide screen the
   link sits beside the heading; on a phone the row is swiped, so it moves to
   the end of the swipe where the thumb already is. */
.row-dots { display: flex; justify-content: center; gap: 7px; margin: 16px 0 0; }
.row-dots[hidden] { display: none; }
.row-dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
  background: #cfd6d2; cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.row-dot.is-on { width: 20px; background: var(--green-600); }
.row-dot:focus-visible { outline: 2px solid var(--green-600); outline-offset: 3px; }

.countries-more-foot { display: none; }

@media (max-width: 720px) {
  .countries-more-top { display: none; }
  .countries-more-foot { display: block; margin-top: 14px; text-align: center; }
}

/* On a narrow card the overlay was taking 79% of the height and leaving a
   strip of photograph. A taller frame and smaller type give the picture back
   roughly half the card. */
@media (max-width: 700px) {
  /* Two whole tiles at a time, not one and a sliver. The row gap is 14px, so
     each card is half the row minus half the gap and the pair lands exactly
     on the width. Scoped to this row: the package and journal rows still show
     one big card, which is right for cards carrying more text. */
  .card-row.country-grid { grid-auto-columns: calc(50% - 7px); }
  .country-card-body { padding: 12px 12px 14px; }
  .country-card h3 { font-size: 1.0625rem; }
  .country-count { margin-bottom: 8px; font-size: .75rem; }
  /* Taller frame so two half-width tiles still read as photographs rather
     than as captions with a picture behind them. */
  .country-card img { aspect-ratio: 2 / 3; }
  /* .btn keeps a 44px minimum because a button is a tap target. This one is
     a <span>: the whole card is the link, so there is nothing here to tap at
     and the minimum only costs a third of the card. */
  .country-btn { min-height: 0; padding: 6px 12px; font-size: .75rem; gap: 5px; }
}

.band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,31,29,.86) 0%, rgba(13,31,29,.55) 55%, rgba(13,31,29,.25) 100%); }
.band-content { position: relative; z-index: 1; color: #fff; max-width: 640px; }
.band-content h2 { color: #fff; }
.band-content p { font-size: 1.0625rem; color: rgba(255,255,255,.92); margin-bottom: 26px; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card a { text-decoration: none; display: block; }
.post-card img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow-card); transition: transform .25s ease; }
.post-card a:hover img { transform: translateY(-4px); }
.post-card h3 { font-size: 1.1875rem; margin: 16px 0 8px; }
.post-card a:hover h3 { color: var(--green-700); }

/* ---------- FAQ ---------- */
.faq-inner { max-width: 820px; }
.faq-list { margin-top: 32px; display: grid; gap: 14px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 24px; box-shadow: 0 1px 3px rgba(13,31,29,.05);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 1.0625rem; color: var(--green-950);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex-shrink: 0; color: var(--green-600); transition: transform .25s ease; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 0 20px; color: var(--ink-600); }

/* ---------- Reviews + offers ---------- */
.reviews-head { text-align: center; max-width: 620px; margin-inline: auto; }
/* the logo row now sits inside the specialists section, under its CTA */
/* Inside the section column now, and first in it, so the space it needs is
   underneath. The old 52px top margin was pushing it away from a section
   edge it no longer touches. */
/* ---------- the review strip -------------------------------------------
   A 50px band directly under the hero. The section's own 96px top padding is
   removed so the strip starts where the photograph ends, and given back to
   the column below it so the heading keeps its air. */
/* .section.specialists, not .specialists: the responsive `.section` rules come
   later in this file at the same specificity, so a plain .specialists rule
   loses to them and the 64px padding came back on a phone. */
.section.specialists { padding-top: 0; }
.specialists .specialists-inner { padding-top: 72px; }
@media (max-width: 720px) {
  .specialists .specialists-inner { padding-top: 44px; }
}
/* margin-inline stays auto: this is also a .container, and a bare `margin: 0`
   here cancelled the container's centring, so on a screen wider than 1200px
   the band sat against the left edge with the logos off-centre. */
.reviews-inline {
  height: 50px; display: flex; align-items: center; justify-content: center;
  margin-block: 0; margin-inline: auto;
}
/* Everything in the strip is sized to sit inside 50px: the mark, a 4px gap
   and one line of score. */
.reviews-inline .review-logos { margin: 0; gap: 8px 44px; }
.reviews-inline .review-logos li { gap: 3px; }
/* Nothing stacks any more, so the row is only as tall as its tallest piece
   and the marks can be read properly again. */
/* The vw term is there so the strip never forces a page wider than the
   screen. 14vw was written when three logos shared one line; in the mobile
   marquee each one has the width to itself, and 14vw of a 375px phone is
   53px — the mark was rendering 11px tall and unreadable. */
.reviews-inline .review-logos img { max-width: min(120px, 32vw); max-height: 24px; }
.reviews-inline .review-logos .stars { font-size: .75rem; letter-spacing: 1px; line-height: 1; }
/* The score line was 28px tall for 11px text: the stars carry a line box of
   their own and it set the height of the row, which pushed the strip past
   its 50px. */
.reviews-inline .review-logo-score { line-height: 1.15; }
/* The score and the count carry their own sizes from the full-size block —
   17px and 13px — so setting 11px on the parent changed nothing and the row
   stayed 20px tall. They are sized here too, or the strip cannot be 50px. */
.reviews-inline .review-logo-score strong { font-size: .8125rem; line-height: 1.15; }
.reviews-inline .review-logo-count { font-size: .6875rem; line-height: 1.15; }
.reviews-inline .review-logos a { gap: 9px; }
.review-logo-score { font-size: .6875rem; }
.review-logo-name { font-size: .8125rem; }
/* Matched to the live site: the logos sit straight on the page with green
   stars beneath, no card, no border, no shadow — the white boxes were shrinking
   each mark to about half the size it reads at on lappetfacedsafaris.com. */
.review-logos {
  /* The proof sits ABOVE the heading, so the space it needs is below it —
     these margins were written when the block closed the section. */
  list-style: none; margin: 0 0 42px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-end; gap: 16px 56px;
}
/* Two parts side by side: the mark with its stars beneath it, and the review
   count set apart on the right. The score stays with the stars — a number
   beside the stars it was drawn from is one statement, the count is another. */
.review-logos li {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 0; padding: 0;
  min-width: 0; box-shadow: none;
}
.review-logo-count { white-space: nowrap; color: var(--ink-600); }
/* Balanced by WIDTH, which is what the eye compares in a horizontal row.
   The three marks have very different proportions once trimmed — a one-line
   wordmark at 5.97:1 against SafariBookings' stacked lockup at 2.70:1 — so a
   shared max-height alone would leave the stacked one looking half the size.
   The vw cap means they shrink with the viewport rather than forcing the row
   to overflow, so there is no width at which this block breaks. */
.review-logos img {
  width: auto; object-fit: contain;
  /* Smaller than they were. This is a strip of proof under the hero, read
     on the way past — it does not need to compete with the heading below it. */
  max-width: min(124px, 15vw); max-height: 38px;
}
.review-logos .stars { color: var(--green-600); font-size: .9375rem; letter-spacing: 2px; }
/* Each logo is now a link to the page its figure came from. */
.review-logos a {
  /* The mark on the left, its rating and count to the right of it. */
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.review-logo-score { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.review-logos a:hover .review-logo-score strong { text-decoration: underline; }
.review-logos a:focus-visible { outline: 3px solid var(--green-600); outline-offset: 6px; border-radius: 8px; }
/* SafariGo has no logo asset, so its name is set as one. */
.review-logo-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: var(--ink-900); line-height: 1;
}
.review-logo-score {
  display: flex; align-items: baseline; flex-wrap: wrap;
  justify-content: center; gap: 4px 8px;
}
.review-logo-score strong { font-size: 1.0625rem; color: var(--ink-900); }
.review-logo-score > span:last-child { font-size: .8125rem; color: var(--ink-600); }

/* Spoke-to-hub line on the safari-type pages. Sits between the FAQ and the
   plan panel, so it reads as a next step rather than a nav element. */
.hub-uplink { padding-block: 0 40px; }
.hub-uplink-line { text-align: center; color: var(--ink-600); margin: 0; }
.hub-uplink-line a { font-weight: 700; }

/* ---------- Start CTA (final) ---------- */
.start-cta { background: var(--sand-100); }
.start-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.start-body h2 { max-width: 520px; }
.start-body > p { max-width: 520px; margin-bottom: 26px; }
.start-media img { border-radius: var(--radius); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; object-fit: cover; }
.btn-whatsapp { background: #25d366; color: var(--green-950); }
.btn-whatsapp:hover { background: #1fb857; color: var(--green-950); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-950); color: rgba(255,255,255,.82); }
/* The closing invitation, above the links rather than buried among them.
   Three ways in, given equal weight, because which one a reader reaches for
   is about them and not about us. */
.footer-cta { border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-cta-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 32px; padding-block: 44px;
}
.footer-cta-copy { max-width: 54ch; }
/* The founder's portrait, first in the row: a round photo in a thin ring,
   his name and role beneath. */
.footer-founder { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.footer-founder img {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: 50% 30%;
  padding: 5px; background: rgba(255,255,255,.08); border: 2px solid var(--green-400);
}
.footer-founder figcaption { font-size: .875rem; font-weight: 700; color: #fff; line-height: 1.3; }
.footer-founder figcaption span { display: block; font-size: .75rem; font-weight: 600; color: var(--green-400); letter-spacing: .08em; text-transform: uppercase; }
/* The copy sits beside the portrait and gives up width before the contact
   buttons are forced onto a second line. */
.footer-founder + .footer-cta-copy { flex: 1 1 320px; min-width: 0; }
/* logo-white.png is the emblem with the wordmark in white, drawn for the dark
   footer. The old one-colour wordmark was forced white with a filter; that
   would now wash the emblem out to a white square, so there is no filter. */
.footer-cta-mark {
  width: auto; height: 54px; margin-bottom: 16px;
}
.footer-cta h2 {
  color: #fff; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.2; margin: 0 0 8px;
}
/* No heading above it any more, so it sets a size larger than body copy and
   in the near-white the heading had. */
.footer-cta-lede {
  margin: 0 0 18px; max-width: 52ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.5;
  color: rgba(255,255,255,.92);
}
.footer-actions {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.footer-actions a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 128px; padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-sm);
  color: rgba(255,255,255,.9); text-decoration: none;
  font-size: .875rem; font-weight: 700; text-align: center;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
/* "Chat on WhatsApp" wraps where the other two do not, so without this the
   three tiles come out different heights. */
.footer-actions li { display: flex; }
.footer-actions a { height: 100%; justify-content: center; }
.footer-actions svg { color: var(--green-400); }
.footer-actions a:hover {
  border-color: var(--green-400); background: rgba(255,255,255,.06); color: #fff;
}
.footer-actions a:focus-visible { outline: 3px solid var(--green-400); outline-offset: 2px; }

/* Seven columns is too many for one row at any sensible width, so the grid
   wraps on its own rather than being told where to break. */
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px; padding-block: 56px 44px;
}

/* The rule under a heading is the one thing the reference layout does that
   this footer did not: it groups a column at a glance. */
.footer-col h2 { position: relative; padding-bottom: 10px; }
.footer-col h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px; background: var(--green-400); border-radius: 2px;
}

.footer-contact-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 11px; }
.footer-contact-list li { display: flex; align-items: center; gap: 9px; font-size: .9375rem; }
.footer-contact-list svg { color: var(--green-400); flex: 0 0 auto; }
.footer-contact-list a { color: rgba(255,255,255,.82); text-decoration: none; }
.footer-contact-list a:hover { color: #fff; text-decoration: underline; }
.footer-credential {
  margin: 0 0 14px; font-size: .8125rem; line-height: 1.45;
  color: rgba(255,255,255,.72);
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff;
  transition: background-color .2s ease, color .2s ease;
}
.footer-social a:hover { background: var(--green-600); color: #fff; }
.footer-col h2 { font-family: var(--font-body); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-100); margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .9375rem; }
.footer-col a:hover { color: #fff; }
.footer-contact { margin-top: 22px; font-size: .9375rem; line-height: 1.9; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px;
  font-size: .875rem; color: rgba(255,255,255,.6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
}
.footer-bottom p { margin: 0; }
.footer-bottom-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.footer-bottom-links a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer-bottom-links a:hover { color: #fff; text-decoration: underline; }

.whatsapp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(13,31,29,.35);
  transition: transform .2s ease;
}
.whatsapp-fab:hover { transform: scale(1.08); color: #fff; }

.auto-link { font-weight: 700; }
/* A lodge named in itinerary prose opens its overview rather than
   navigating away, so it is a button — and has to read as the link it
   replaced. */
.stay-inline-btn {
  font: inherit; font-weight: 700; color: var(--green-600);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.stay-inline-btn:hover { text-decoration: underline; }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; background: var(--green-950); overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(9,23,21,.56) 0%,
      rgba(9,23,21,.70) 28%,
      rgba(9,23,21,.70) 70%,
      rgba(9,23,21,.88) 100%);
}
.page-hero-content { position: relative; z-index: 1; padding-block: 72px 56px; color: #fff; }
.page-hero:not(.has-image) .page-hero-content { padding-block: 48px 40px; }
.page-hero h1 { color: #fff; max-width: 880px; font-size: clamp(1.75rem, 3.6vw, 2.75rem); margin-bottom: 18px; }
.page-hero .hero-actions { margin-top: 4px; }

.breadcrumbs { margin-bottom: 14px; font-size: .875rem; }
/* On photo heroes the trail sits at the bottom edge, aligned to the container */
.tour-hero .breadcrumbs, .dest-hero .breadcrumbs, .page-hero .breadcrumbs {
  position: absolute; bottom: 16px; left: 20px; right: 20px;
  width: calc(100% - 40px); max-width: calc(var(--container) - 40px); margin-inline: auto;
  margin-bottom: 0; z-index: 2;
}
.tour-hero .breadcrumbs ol, .dest-hero .breadcrumbs ol, .page-hero .breadcrumbs ol { flex-wrap: nowrap; }
.tour-hero .breadcrumbs li, .dest-hero .breadcrumbs li, .page-hero .breadcrumbs li { white-space: nowrap; }
.tour-hero .breadcrumbs li[aria-current], .dest-hero .breadcrumbs li[aria-current], .page-hero .breadcrumbs li[aria-current] {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin: 0 7px; opacity: .6; }
.page-hero .breadcrumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.page-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs li[aria-current] { color: rgba(255,255,255,.65); }
.breadcrumbs-flat a { color: var(--ink-600); text-decoration: none; }
.breadcrumbs-flat a:hover { color: var(--green-700); }
/* Long article titles are trimmed by CSS, not by PHP: the full name stays
   in the DOM so the trail still matches the BreadcrumbList. */
.breadcrumbs-flat li[aria-current] {
  color: var(--ink-600);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.content-layout { padding-block: 56px 72px; }
.prose { max-width: 760px; margin-inline: auto; font-size: 1.0625rem; }
.prose h2 { margin-top: 1.6em; font-size: 1.625rem; }
.prose h3 { margin-top: 1.4em; font-size: 1.25rem; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: .45em; }
.prose img { border-radius: var(--radius); margin: 1.6em 0; box-shadow: var(--shadow-card); }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--line); color: var(--ink-600); font-style: italic; }
/* A wide table scrolls itself rather than widening the page. display:block
   is what makes the table a scroll container; min-width keeps narrow ones
   filling the column exactly as they did before, and fit-content lets a
   wide one keep its natural column widths instead of crushing them. */
.prose table {
  display: block; width: fit-content; min-width: 100%; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; margin: 1.6em 0; font-size: .9375rem;
}
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.prose th { background: var(--green-100); color: var(--green-950); font-weight: 700; }
.prose tr:nth-child(even) td { background: var(--sand-100); }
.prose-table-wrap { overflow-x: auto; }

.related-band .related-title { margin-bottom: 24px; }
.related-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.related-grid a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 20px; font-weight: 700; color: var(--green-950); text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.related-grid a:hover { border-color: var(--green-600); color: var(--green-700); }

.blog-lede { color: var(--ink-600); margin: 0 0 36px; max-width: 560px; }
.post-grid-index { grid-template-columns: repeat(3, 1fr); }
.post-grid-index h2 { font-size: 1.125rem; margin: 14px 0 6px; }
.post-card-placeholder { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); background: linear-gradient(135deg, var(--green-100), var(--sand-100)); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 48px; }
.pagination-status { font-weight: 700; color: var(--ink-600); }

/* ---------- Premium tour template ---------- */
.tour-hero, .dest-hero { position: relative; background: var(--green-950); overflow: hidden; }
.tour-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(9,23,21,.56) 0%,
      rgba(9,23,21,.70) 28%,
      rgba(9,23,21,.70) 70%,
      rgba(9,23,21,.88) 100%);
}
.dest-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(9,23,21,.56) 0%,
      rgba(9,23,21,.70) 28%,
      rgba(9,23,21,.70) 70%,
      rgba(9,23,21,.88) 100%);
}
.tour-hero-content { position: relative; z-index: 1; color: #fff; padding-block: 88px 56px; }
.dest-hero-content { position: relative; z-index: 1; color: #fff; padding-block: 140px 72px; }
.tour-hero.no-image .tour-hero-content { padding-block: 56px 44px; }
.tour-kicker {
  margin: 14px 0 10px; font-size: .8125rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-100);
}
.tour-hero h1, .dest-hero h1 { color: #fff; max-width: 900px; margin-bottom: 10px; }
.dest-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
.tour-route { margin: 0 0 26px; font-size: 1.125rem; font-weight: 600; color: rgba(255,255,255,.92); }
.dest-tagline { margin: 0; font-size: clamp(1.125rem, 2vw, 1.375rem); color: rgba(255,255,255,.92); max-width: 620px; }
.tour-hero-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.tour-price { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: #fff; }
.tour-price span { display: block; font-family: var(--font-body); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-100); }
.tour-price em { font-style: normal; font-family: var(--font-body); font-size: .9375rem; font-weight: 600; color: rgba(255,255,255,.8); }

.section-pills { position: sticky; top: 72px; z-index: 60; background: rgba(250,248,244,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.section-pills ul {
  list-style: none; display: flex; gap: 8px; margin: 0; padding: 12px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-padding-inline: 20px;
}
.section-pills ul::-webkit-scrollbar { display: none; }
.section-pills a {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink-900); font-weight: 700; font-size: .875rem; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.section-pills a:hover { border-color: var(--green-600); color: var(--green-700); }
.section-pills .pill-cta { margin-left: auto; }
/* anchor targets clear the sticky header + pill bar */
#overview, #itinerary, #pricing, #included, #gallery { scroll-margin-top: 148px; }
.section-pills .pill-cta a { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.section-pills .pill-cta a:hover { background: var(--green-700); }

.tour-overview-grid { display: grid; grid-template-columns: 7fr 4fr; gap: 56px; align-items: start; }
.tour-overview-grid .prose { margin-inline: 0; max-width: none; }
.glance-card {
  position: sticky; top: 140px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 26px 26px 24px;
}
.glance-card h2,
.glance-card h3 { font-size: 1.25rem; margin-bottom: 16px; }
.glance-card dl { margin: 0 0 20px; display: grid; gap: 12px; }
.glance-card dl div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--sand-100); padding-bottom: 10px; }
.glance-card dt { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green-600); }
.glance-card dd { margin: 0; font-size: .9375rem; font-weight: 600; }
.glance-card .btn { width: 100%; }
.glance-note { margin: 12px 0 0; text-align: center; font-size: .8125rem; color: var(--ink-600); }

.itinerary-grid { display: block; margin-top: 32px; }

/* ---------- Itinerary + sticky enquiry rail ------------------------------
   The days scroll; the enquiry card follows. 139px is not arbitrary: the
   site header is 73px and sticks, and the section pills are 66px and stick
   under it, so anything less than their sum slides underneath both. */
.itinerary-grid-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
/* The card is ~680px. On a laptop shorter than about 820px that is taller
   than the space under the two sticky bars, so cap it and let it scroll
   inside itself rather than have the submit button stranded off-screen. */
.itin-aside {
  position: sticky; top: 139px;
  max-height: calc(100vh - 155px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.book-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.book-card-head { background: var(--green-950); color: #fff; padding: 20px 22px; }
.book-card-body { padding: 20px 22px; }
.book-card-kicker {
  margin: 0 0 6px; font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-100);
}
.book-card-price { margin: 0; font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.book-card-price span { font-size: .9375rem; font-weight: 600; opacity: .8; margin-left: 4px; }
.book-card-sub { margin: 8px 0 0; font-size: .8125rem; line-height: 1.5; opacity: .8; }

.book-form { padding: 18px 22px 22px; display: grid; gap: 12px; }
/* The label text and its required marker are one grid row, not two — left
   as bare text beside a <span>, the asterisk became its own row. */
.book-form label { display: grid; gap: 5px; }
.book-label { font-size: .8125rem; font-weight: 600; color: var(--ink-900); }
.book-form input, .book-form select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-weight: 400; font-size: .9375rem; background: #fff; color: var(--ink-900);
}
.book-form input:focus-visible, .book-form select:focus-visible {
  outline: 3px solid var(--green-600); outline-offset: 1px; border-color: var(--green-600);
}
.book-form .btn { width: 100%; margin-top: 2px; }
.book-note { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--ink-600); }

/* Below the two-column threshold the rail is just another block after the
   days — sticking a full-width form to the top of a phone screen would
   cover the itinerary it is meant to sit beside. */
@media (max-width: 1000px) {
  .itinerary-grid-rail { grid-template-columns: minmax(0, 1fr); }
  .itin-aside { position: static; max-width: 520px; }
}

.route-panel {
  position: sticky; top: 140px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 24px;
}
.route-panel h3 { font-size: 1.25rem; margin-bottom: 16px; }

/* Freeingo-style photo map: image + scrim + grid SVG overlay */
.map-stage { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.map-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-scrim { position: absolute; inset: 0; background: linear-gradient(rgba(13,31,29,.35), rgba(13,31,29,.62)); }
.route-map { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.map-route {
  fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.2;
  stroke-dasharray: 6 7; stroke-linecap: round; stroke-linejoin: round;
}
.map-node.has-info { cursor: pointer; }
.map-halo { fill: #fff; opacity: 0; transition: opacity .25s ease; }
.map-node.has-info:hover .map-halo, .map-node.has-info:focus .map-halo { opacity: .22; }
.map-pin { fill: #fff; stroke: var(--green-950); stroke-width: 2; transition: fill .2s ease; }
.map-node.has-info:hover .map-pin, .map-node.has-info:focus .map-pin { fill: var(--green-100); }
.map-node:focus { outline: none; }
.map-label {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 800; fill: #fff;
  paint-order: stroke; stroke: rgba(13,31,29,.65); stroke-width: 2.5px;
}
.map-days {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 700; fill: var(--green-100);
  paint-order: stroke; stroke: rgba(13,31,29,.6); stroke-width: 2px;
}

/* hover card near map nodes */
.map-hovercard {
  position: absolute; z-index: 2; width: 190px; pointer-events: none;
  background: #fff; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}
.map-hovercard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.map-hovercard strong { display: block; padding: 8px 12px 2px; font-size: .8125rem; color: var(--green-950); }
.map-hovercard span { display: block; padding: 0 12px 10px; font-size: .71875rem; line-height: 1.45; color: var(--ink-600); }

/* chip buttons (open popup, no navigation) */
.chip-btn {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  background: none; border: 0; font-family: var(--font-body);
  color: var(--green-800); font-weight: 700; font-size: .875rem; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(28,122,104,.4); text-underline-offset: 3px;
  transition: background-color .2s ease, color .2s ease;
}
.chip-btn:hover { background: var(--green-600); color: #fff; }
.chip-static { cursor: default; text-decoration: none; }
.chip-static:hover { background: none; color: var(--green-800); }

/* destination popup modal */
.dest-modal, .stay-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dest-modal[hidden], .stay-modal[hidden] { display: none; }
.dest-modal-backdrop, .stay-modal-backdrop { position: absolute; inset: 0; background: rgba(13,31,29,.55); backdrop-filter: blur(3px); }
.dest-modal-card, .stay-modal-card {
  position: relative; width: min(460px, 100%); max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card-hover);
  animation: modal-in .25s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.dest-modal-close, .stay-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(13,31,29,.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.dest-modal-close:hover, .stay-modal-close:hover { background: var(--green-950); }
.dest-modal-img, .stay-modal-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.dest-modal-img[src=""], .stay-modal-img[src=""] { display: none; }
.dest-modal-body, .stay-modal-body { padding: 22px 26px 24px; }
.dest-modal-body h3, .stay-modal-body h3 { font-size: 1.375rem; margin-bottom: 8px; }
.dest-modal-desc { margin: 0 0 14px; color: var(--ink-600); }
.route-stops { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.route-stops li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.stop-num {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: var(--green-950); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800;
}
.stop-label { font-weight: 700; }
.stop-days { margin-left: auto; color: var(--green-700); font-weight: 700; font-size: .8125rem; }
.route-visits-title {
  margin: 20px 0 10px; font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-600);
}
.route-visits a { font-size: .875rem; padding: 7px 14px; }

/* Editorial timeline: light rail with numbered nodes, photo-forward cards */
/* ---------- Day-by-day: one self-contained card per day ---------- */
/* ---------- Itinerary: day-by-day timeline -------------------------------
   A vertical rule runs the length of the itinerary with a dot per day, and
   each day is a button that opens its own panel. Replaces a stack of always-
   open cards: eight expanded days ran to roughly 8,000px of scrolling, and a
   reader could not see the shape of the trip without scrolling all of it.
   Day one opens by default so the section is never a wall of closed rows. */
.itin { list-style: none; margin: 0; padding: 0; position: relative; }
.itin::before {
  content: "";
  position: absolute; left: 9px; top: 18px; bottom: 18px;
  width: 1px;
  /* solid green down the first day, then a hairline for the rest, so the eye
     starts at the top of the trip rather than in the middle of it */
  background: linear-gradient(to bottom, var(--green-600) 0 46px, var(--line) 46px 100%);
}

.day { position: relative; padding-left: clamp(34px, 4vw, 52px); }
.day__dot {
  position: absolute; left: 0; top: 26px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--sand-50, #fff);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: border-color .25s ease;
}
.day__dot::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background .25s ease;
}
.day.is-open .day__dot { border-color: var(--green-600); }
.day.is-open .day__dot::after { background: var(--green-600); }

/* The heading is structural only — the type is set on .day__title inside it. */
.day__heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.day__trigger {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.day__trigger:focus-visible { outline: 3px solid var(--green-600); outline-offset: 3px; border-radius: 8px; }
.day__head { display: block; }
.day__num {
  display: block; margin-bottom: 6px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700);
}
.day__nights { color: var(--ink-600); font-weight: 600; letter-spacing: .06em; }
.day__title {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.25;
  color: var(--ink-900);
  transition: color .2s ease;
}
.day__trigger:hover .day__title { color: var(--green-700); }
.day__sub { display: block; margin-top: 6px; font-size: .9375rem; color: var(--ink-600); }
.day__chev { flex: none; margin-top: 8px; color: var(--green-700); transition: transform .25s ease; }
.day__trigger[aria-expanded="true"] .day__chev { transform: rotate(180deg); }

.day__panel[hidden] { display: none; }
.day__inner { padding: 24px 0 30px; }
/* Every day runs one column: prose at full width, then the night's stay
   beneath it. The lodge used to sit in a side column half this wide. */

/* .prose centres itself in a 760px measure, which is right for an article
   and wrong inside a panel that is already a column: it left a 170px gap
   down the side of every day. Inside the itinerary the panel sets the
   measure. */
.day__main .prose { max-width: none; margin-inline: 0; }

.day__photo { margin: 0 0 18px; border-radius: var(--radius-sm); overflow: hidden; }
.day__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.day__facts {
  list-style: none; margin: 20px 0 0; padding: 16px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  border-top: 1px solid var(--line);
}
.day__fact {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .875rem; color: var(--ink-600);
}
.day__fact svg { flex: none; color: var(--green-600); }

/* pricing tiers */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 6px;
}
.price-card-from { border-color: var(--green-600); box-shadow: var(--shadow-card); }
.price-tier { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green-600); }
.price-total { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.875rem; color: var(--green-950); line-height: 1.15; }
.price-total span { display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }
.price-total em { font-style: normal; font-size: 1.25rem; color: var(--ink-600); }
.price-rate { margin: 2px 0 8px; font-size: .875rem; font-weight: 700; color: var(--ink-600); }
.price-note { margin: 0 0 18px; font-size: .9375rem; color: var(--ink-600); }
.price-card .btn { margin-top: auto; }
/* ---------- Price table --------------------------------------------------
   Replaces three side-by-side cards. A table is the honest shape for this:
   the reader is comparing the same figures across tiers, and cards make that
   a left-to-right eye journey instead of a straight column.

   It also carries the season x group-size grid when that data exists. It does
   not exist yet on any tour, so today every page renders the comfort-tier
   version. */
.price-table-wrap { margin-top: 28px; overflow-x: auto; }
.price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.price-table th, .price-table td { text-align: left; vertical-align: top; }
.price-table thead th {
  padding: 0 0 14px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-600);
  border-bottom: 1px solid var(--line);
}
.price-table tbody th, .price-table tbody td {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table .price-col { text-align: right; padding-left: 20px; white-space: nowrap; }
.price-table thead .price-col { text-align: right; }

.price-season { display: block; font-weight: 700; font-size: 1.0625rem; color: var(--ink-900); }
.price-dates { display: block; margin-top: 3px; font-size: .8125rem; color: var(--ink-600); }
.price-season-note {
  display: block; margin-top: 4px; max-width: 46ch;
  font-size: .8125rem; line-height: 1.5; color: var(--ink-600);
}

/* The cheapest figure in the table, matching the "from" price in the hero. */
.price-table td.is-lowest { color: var(--green-700); font-weight: 700; }
.price-table .price-col { font-size: 1.125rem; color: var(--ink-900); }
.price-from { font-size: .75rem; font-weight: 600; color: var(--ink-600); text-transform: uppercase; letter-spacing: .08em; }
.price-col-action { font-size: .875rem; }
.price-col-action .link-more { white-space: nowrap; }

.price-footnote { margin: 18px 0 0; font-size: .8125rem; color: var(--ink-600); }

@media (max-width: 720px) {
  .price-table tbody th, .price-table tbody td { padding: 16px 0; }
  .price-table .price-col { font-size: 1rem; padding-left: 14px; }
}
.price-disclaimer { margin: 26px 0 0; font-size: .9375rem; color: var(--ink-600); max-width: 760px; }

.incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 36px; }
.incl-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; }
.incl-col h3 { font-size: 1.125rem; margin-bottom: 16px; }
.incl-col .checks { margin: 0; }
.crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.crosses li { padding-left: 34px; position: relative; font-weight: 600; color: var(--ink-600); }
.crosses li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--sand-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351625c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.gallery-grid img { border-radius: var(--radius-sm); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; box-shadow: var(--shadow-card); transition: transform .25s ease; }
.gallery-grid img:hover { transform: scale(1.02); }

/* Tour photo carousel, above the overview text (after the RedSoil photo strip):
   rounded square photographs, four in view beside the At a Glance card, with
   the prev/next arrows sitting over the photos' left and right edges. */
.tour-overview-main { min-width: 0; }   /* a grid item; without this the scrolling track would widen the column */
.photo-carousel { position: relative; margin-bottom: 40px; }
.photo-strip.carousel-track { grid-auto-columns: calc((100% - 30px) / 4); column-gap: 10px; }
.photo-strip-item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--sand-100); }
.photo-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-carousel .carousel-nav {
  position: absolute; left: -14px; right: -14px; top: 50%; transform: translateY(-50%);
  justify-content: space-between; pointer-events: none;
}
.photo-carousel .carousel-btn { pointer-events: auto; width: 40px; height: 40px; box-shadow: var(--shadow-card); }
.photo-carousel .carousel-btn:disabled { opacity: 0; }
@media (max-width: 720px) {
  .photo-strip.carousel-track { grid-auto-columns: calc((100% - 10px) / 2.3); }
  .photo-carousel { margin-bottom: 28px; }
  .photo-carousel .carousel-nav { left: -6px; right: -6px; }
}

/* Galleries run as a carousel at every width, not just on phones. Six photos
   stacked two rows deep pushed the page's real content down for no gain — a
   gallery is something you browse, so it costs one row and the part-visible
   next image says there is more. `grid-template-columns: none` is needed
   because the responsive .gallery-grid rules further down would otherwise
   fight the auto-flow track. */
.gallery-grid.carousel-track {
  margin-top: 0;
  grid-template-columns: none;
  grid-auto-columns: calc(30% - 11px);
}
.gallery-grid.carousel-track img { margin: 0; }
/* The hover zoom fought the snap scroller — a scaled image overlapped its
   neighbour and nudged the scroll position. Lift instead. */
.gallery-grid.carousel-track img:hover { transform: translateY(-4px); }

/* "Other destinations" runs as a carousel too. These cards are 4:5, so three
   of them stacked into two ragged rows cost about a screen and a half at the
   very bottom of the page. Same 22px gap as .dest-grid, hence -15px.
   The .dest-card hover zoom is safe here: it scales the img inside a card with
   overflow:hidden, so nothing spills into the neighbouring track item. */
.dest-grid-3.carousel-track {
  margin-top: 0;
  grid-template-columns: none;
  grid-auto-columns: calc(30% - 15px);
}

/* ---------- Premium destination template ---------- */
.facts-bar { background: #fff; border-bottom: 1px solid var(--line); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.fact { padding: 22px 26px; border-left: 1px solid var(--line); display: grid; gap: 4px; }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact-label { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green-600); }
.fact-value { font-weight: 700; font-size: .9375rem; }

.chips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.chip-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-list li {
  padding: 9px 18px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); font-weight: 700; font-size: .9375rem;
}
.chip-list-green li { background: var(--green-100); border-color: transparent; color: var(--green-800); }
.chip-list-links li { padding: 0; }
.chip-list-links a {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  color: var(--green-800); font-weight: 700; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.chip-list-links a:hover { background: var(--green-600); color: #fff; }
.lodges-note { margin: 20px 0 0; }
.lodges-intro { max-width: 640px; color: var(--ink-600); margin: 0 0 24px; }
.chip-linked { padding: 0 !important; }
.chip-linked a {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  color: var(--green-800); font-weight: 700; text-decoration: underline;
  text-decoration-color: rgba(28,122,104,.4); text-underline-offset: 3px;
  transition: background-color .2s ease, color .2s ease;
}
.chip-linked a:hover { background: var(--green-600); color: #fff; }
.guides-section .related-grid { margin-top: 28px; }
.dest-grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }

/* ---------- Hub pages ---------- */
.hub-hero .dest-hero-content { padding-block: 110px 60px; }
.area-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; }
.area-pills a {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink-900); font-weight: 700; font-size: .875rem; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.area-pills a:hover { border-color: var(--green-600); color: var(--green-700); }
.area-title {
  display: flex; align-items: baseline; gap: 10px;
  margin: 44px 0 20px; scroll-margin-top: 96px; font-size: 1.375rem;
}
.area-title span { font-family: var(--font-body); font-size: .875rem; font-weight: 700; color: var(--ink-600); }
.area-intro { max-width: 760px; margin: -8px 0 22px; color: var(--ink-600); }
.stay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.stay-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.stay-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.stay-card img, .stay-card .post-card-placeholder {
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block;
}
.stay-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; gap: 8px; }
.stay-name { display: block; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--ink-900); line-height: 1.35; }
.stay-card:hover .stay-name { color: var(--green-700); }
.stay-excerpt { display: block; font-size: .855rem; line-height: 1.6; color: var(--ink-600); }
.stay-body .link-more { margin-top: auto; font-size: .8rem; }

/* ---------- Article (blog post) ---------- */
/* ---- Journal article ---------------------------------------------------
   The only page type that had no hero, so an article arrived from search
   looking like a different site. Same overlay treatment as the destination
   and tour heroes, at a shorter height because the reading starts here. */
.article-hero { position: relative; background: var(--green-950); overflow: hidden; }
.article-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.08) contrast(1.05);
}
.article-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(9,23,21,.56) 0%,
      rgba(9,23,21,.70) 28%,
      rgba(9,23,21,.70) 70%,
      rgba(9,23,21,.88) 100%);
}
.article-hero-content {
  position: relative; z-index: 1; color: #fff;
  padding-block: 64px 52px; max-width: 880px;
}
.article-hero:not(.has-image) .article-hero-content { padding-block: 48px 40px; }
.article-hero h1 {
  /* h1 carries its own dark colour globally, so it has to be set here or the
     title renders green-on-green over the photograph. */
  color: #fff;
  font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.12; margin: 10px 0 14px;
}
/* The article keeps the flat trail rather than the absolutely positioned one
   the tall photo heroes use, so its dark colours have to be lifted here. */
.article-hero .breadcrumbs-flat a { color: rgba(255,255,255,.85); }
.article-hero .breadcrumbs-flat a:hover { color: #fff; }
.article-hero .breadcrumbs-flat li[aria-current] { color: rgba(255,255,255,.62); }
.article-cat { color: inherit; text-decoration: none; }
.article-cat:hover { text-decoration: underline; }

/* Reading progress. Scaled to nothing until main.js sets it, so no-JS shows
   nothing. scaleX rather than width: this repaints on every scroll frame,
   and a transform is composited where a width change is a layout pass. */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.read-progress span {
  display: block; width: 100%; height: 100%;
  background: var(--green-600);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .1s linear;
}

/* Only articles with four or more sections get a contents list — below that
   it is longer than the reading it saves. */
.article-toc {
  margin: 0 0 36px; padding: 20px 24px;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.article-toc-title {
  margin: 0 0 10px; font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green-700);
}
.article-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.article-toc li { font-size: .9375rem; line-height: 1.45; }
.article-toc a { color: var(--ink-900); text-decoration: none; }
.article-toc a:hover { color: var(--green-700); text-decoration: underline; }

/* A heading the contents list jumps to must not land under the sticky bar. */
.article-prose h2[id] { scroll-margin-top: 90px; }
.article-prose > p:first-of-type {
  font-size: 1.125rem; line-height: 1.75; color: var(--ink-700, var(--ink-900));
}

.post-grid-related { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.article-wrap { max-width: 820px; padding-block: 48px 64px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; font-size: .9375rem; font-weight: 600; color: rgba(255,255,255,.86); }
.article-prose { margin-inline: 0; max-width: none; }
.article-cta {
  margin-top: 48px; padding: 28px 30px; border-radius: var(--radius);
  background: var(--green-950); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.article-cta h2 { color: #fff; font-size: 1.375rem; margin-bottom: 6px; }
.article-cta p { margin: 0; color: rgba(255,255,255,.85); max-width: 460px; }

/* ---------- Contact ---------- */
.contact-head { max-width: 640px; margin-bottom: 44px; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 64px; }
.contact-card {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; text-decoration: none; color: var(--ink-900);
  box-shadow: 0 1px 3px rgba(13,31,29,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--green-600); }
.contact-icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 10px;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
}
.contact-icon-wa { background: #e7f8ec; color: #1fb857; }
.contact-card strong { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.contact-detail { font-weight: 700; color: var(--green-700); }
.contact-note { font-size: .875rem; color: var(--ink-600); }
.contact-help { max-width: 640px; }
.contact-reviews { margin-top: 22px; font-weight: 700; color: var(--ink-600); }

/* ---------- Safari package card (SafariInquiry pattern) ---------- */
.pkg-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 1px 3px rgba(13,31,29,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.pkg-media { position: relative; display: block; }
.pkg-media img, .pkg-media .post-card-placeholder {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
.pkg-days, .pkg-tag {
  position: absolute; top: 14px; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  font-size: .75rem; font-weight: 800; letter-spacing: .01em;
}
.pkg-days { left: 14px; background: rgba(255,255,255,.95); color: var(--green-950); }
.pkg-tag { right: 14px; background: var(--green-600); color: #fff; }
.pkg-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.pkg-title { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.pkg-title a { color: var(--green-950); text-decoration: none; }
.pkg-card:hover .pkg-title a { color: var(--green-700); }
.pkg-route {
  display: flex; align-items: flex-start; gap: 7px; margin: 0;
  font-size: .875rem; color: var(--ink-600);
}
.pkg-route svg { flex-shrink: 0; margin-top: 2px; color: var(--green-600); }
.pkg-features { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 0; padding: 0; }
.pkg-features li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 700; color: var(--ink-900);
}
.pkg-features svg { color: var(--green-600); flex-shrink: 0; }
.pkg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sand-100);
}
.pkg-price { margin: 0; line-height: 1.25; }
.pkg-price span { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }
.pkg-price strong { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--green-950); }
.pkg-price em { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--ink-600); }
.pkg-btn { min-height: 40px; padding: 8px 18px; font-size: .875rem; }

/* ---------- Hub curated sections ---------- */
.section-intro { margin: 0 0 32px; max-width: 720px; }
.section-intro p:last-child { margin-bottom: 0; }
.step-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step-list li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-600); color: #fff; font-weight: 800; font-size: 1.0625rem;
  margin-bottom: 14px;
}
.step-list h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.step-list p { margin: 0; color: var(--ink-600); }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.hub-section-values .value-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.value-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; }
.value-card h3 { font-size: 1.125rem; margin-bottom: 8px; }
.value-card p { margin: 0 0 6px; color: var(--ink-600); font-size: .9375rem; }

.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.style-card {
  background: var(--green-950); color: #fff; border-radius: var(--radius);
  padding: 30px 28px;
}
.style-tag {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 999px;
  background: rgba(231,242,239,.14); color: var(--green-100);
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.style-card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 10px; }
.style-card p { margin: 0; color: rgba(255,255,255,.82); font-size: .9375rem; }

.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.route-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 24px 20px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.route-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.route-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.route-card .badge-days { position: static; }
.route-diff { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.route-diff-moderate { color: var(--green-600); }
.route-diff-challenging { color: #b45309; }
.route-diff-strenuous { color: #b91c1c; }
.route-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.route-card > p { color: var(--ink-600); font-size: .9375rem; margin: 0 0 16px; }
.route-stats { margin: auto 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: 1px solid var(--sand-100); padding-top: 14px; }
.route-stats div { display: grid; gap: 2px; }
.route-stats dt { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green-600); }
.route-stats dd { margin: 0; font-weight: 700; font-size: .875rem; }
.route-actions { margin: 0; display: flex; justify-content: space-between; align-items: center; }
.route-enquire { font-weight: 800; color: var(--ink-600); text-decoration: none; font-size: .875rem; }
.route-enquire:hover { color: var(--green-700); }

.checks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; margin-top: 30px; max-width: 860px; }
.tour-price-line { color: var(--ink-600); }
.tour-price-line strong { color: var(--green-800); }
.tour-price-request span { margin-bottom: 2px; }

/* ---------- Experience pages ---------- */
.fact-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.fact-chips li {
  padding: 9px 18px; border-radius: 999px;
  background: var(--green-100); color: var(--green-800);
  font-weight: 700; font-size: .875rem;
}
.exp-cards { margin-top: 30px; grid-template-columns: repeat(2, 1fr); }
.season-table { width: 100%; border-collapse: collapse; margin-top: 8px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.season-table th {
  background: var(--green-950); color: #fff; text-align: left;
  padding: 14px 20px; font-size: .8125rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.season-table td { padding: 15px 20px; border-top: 1px solid var(--sand-100); vertical-align: top; }
.season-table tr:nth-child(even) td { background: var(--sand-50); }
.season-window { font-weight: 800; color: var(--green-700); white-space: nowrap; }
.plan-section { padding-top: 0; }
.plan-panel {
  background: var(--green-950); color: #fff; border-radius: var(--radius);
  padding: 52px 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.plan-panel h2 { color: #fff; margin-bottom: 10px; max-width: 520px; }
.plan-panel p { margin: 0; color: rgba(255,255,255,.85); max-width: 520px; }
.plan-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* ---------- Destination directory ---------- */
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 8px; }
.dir-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; box-shadow: 0 1px 3px rgba(13,31,29,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.dir-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.dir-media img, .dir-media .post-card-placeholder { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dir-body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.dir-region { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green-600); }
.dir-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; color: var(--green-950); line-height: 1.3; }
.dir-card:hover .dir-name { color: var(--green-700); }
.dir-tagline { color: var(--ink-600); font-size: .9375rem; margin-bottom: 8px; }

/* ---------- Enquiry form ---------- */
.enquiry-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 36px 38px; margin-bottom: 64px;
  scroll-margin-top: 96px; max-width: 760px;
}
.enquiry-head { margin-bottom: 24px; }
.enquiry-head h2 { margin-bottom: 6px; }
.enquiry-head p { margin: 0; color: var(--ink-600); }
.enquiry-error { background: #fdf0ef; border: 1px solid #e7b8b3; color: #8f2c22; border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 600; }
.enquiry-form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.enquiry-form label { display: grid; gap: 7px; font-weight: 700; font-size: .9375rem; color: var(--green-950); }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  font: inherit; font-weight: 500; color: var(--ink-900);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; background: var(--sand-50); min-height: 46px;
}
.enquiry-form textarea { resize: vertical; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus {
  outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); background: #fff;
}
.enquiry-form .btn { justify-self: start; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.enquiry-success h2 { margin-bottom: 8px; }
.enquiry-success p { color: var(--ink-600); }

/* ---------- Responsive ---------- */
@media (max-width: 1220px) {
  /* squeeze zone: keep header on one line — drop the phone, tighten nav */
  .header-cta .phone-link { display: none; }
  .nav-menu a { padding: 10px 10px; font-size: .875rem; }
}

@media (max-width: 1024px) {
  .section { padding-block: 72px; }
  .specialists, .countries, .tours, .intent,
  .tour-page .pricing-section, .tour-page .incl-excl,
  .tour-page .gallery-section { padding-bottom: 32px; }
  .countries, .tours, .intent, .story,
  .tour-page .incl-excl, .tour-page .gallery-section,
  .tour-page .related-band { padding-top: 28px; }
  .intent-grid, .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .intent-grid.carousel-track { grid-auto-columns: calc(50% - 11px); }
  .tour-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-media img { aspect-ratio: 16 / 10; }
  .header-cta .phone-link { display: none; }
  .tour-overview-grid { grid-template-columns: 1fr; gap: 40px; }
  .glance-card { position: static; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .fact { border-left: 0; padding-left: 0; }
  .chips-grid { grid-template-columns: 1fr; gap: 44px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .dest-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  /* five footer columns left ~118px each at 768px and the link text spilled
     past the viewport; three is the widest that still fits. */
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .stay-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .step-list, .value-grid, .style-grid, .route-grid, .dir-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-section-values .value-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

/* The drawer starts at tablet width, not 720px. Between 721 and 1024 the
   full desktop nav, the logo and the BOOK NOW button did not fit, so every
   page scrolled sideways at 768px (843px wide against a 753px viewport). */
@media (max-width: 1024px) {
  /* single-row header: logo · compact CTA · icon hamburger */
  .header-inner { gap: 10px; min-height: 64px; flex-wrap: nowrap; }
  .brand img { width: auto; height: 42px; }
  .header-cta { gap: 10px; margin-left: auto; }
  .header-cta .btn { min-height: 40px; padding: 8px 14px; font-size: .875rem; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: none; border: 1px solid var(--line); border-radius: 8px;
    color: var(--ink-900); cursor: pointer;
  }
  .main-nav { flex: 0; position: static; }
  /* drawer overlays the page below the sticky header */
  .nav-menu {
    display: none; flex-direction: column; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--sand-50); border-top: 1px solid var(--line);
    box-shadow: 0 18px 30px -12px rgba(13,31,29,.25);
    padding: 10px 20px 18px;
    max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  .nav-menu.open { display: flex; }
  /* ---- drawer, after the owner's reference: uppercase rows, a hairline under
     each, an arrow on the right; then the founder card and the messaging
     buttons. ---- */
  .nav-menu { gap: 0; padding: 4px 20px 28px; }
  .nav-menu > .nav-item { border-bottom: 1px solid var(--line); }
  .nav-menu > .nav-item > a {
    padding: 14px 0; min-height: 54px; border-radius: 0;
    text-transform: uppercase; letter-spacing: .04em; font-size: .9375rem; font-weight: 700; color: var(--ink-900);
  }
  .nav-menu > .nav-item > a:hover { background: none; color: var(--green-700); }
  /* Arrows point right; an open section turns its arrow down. */
  .nav-menu .panel-toggle svg { transform: rotate(-90deg); }
  .nav-menu .nav-item:hover .panel-toggle svg { transform: rotate(-90deg); }
  .nav-menu .nav-item.open .panel-toggle svg { transform: rotate(0deg); }
  .nav-menu > .nav-item:not(.has-panel) > a::after {
    content: ""; width: 7px; height: 7px; margin: 0 19px 0 auto; color: var(--ink-600);
    border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: rotate(45deg);
  }

  .nav-menu .nav-contact {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 72px;   /* room for the photo that rises out of the card */
  }
  /* The founder card's size and colours are shared with the desktop Contact
     Us panel (see the Mega menu section); only its place in the drawer is here. */
  .nav-contact .nav-expert { grid-column: 1 / -1; margin-bottom: 14px; }
  /* Contact Us is a plain link in the drawer: the card below already says it all. */
  .nav-item-contact .panel-toggle, .nav-item-contact .mega-panel { display: none !important; }
  .nav-menu > .nav-item-contact > a::after {
    content: ""; width: 7px; height: 7px; margin: 0 19px 0 auto; color: var(--ink-600);
    border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: rotate(45deg);
  }
  .nav-menu a { min-height: 44px; display: flex; align-items: center; }
  /* Mega menu becomes an accordion inside the drawer */
  .nav-item { flex-wrap: wrap; }
  .nav-item > a { flex: 1; }
  .panel-toggle { width: 44px; height: 44px; margin-left: 0; }
  .mega-panel {
    position: static; transform: none; width: 100%;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none; box-shadow: none; border: 0; border-left: 1px solid var(--line);
    border-radius: 0; padding: 6px 0 10px 16px; margin: 0 0 6px;
    transition: none;
  }
  .nav-item.has-panel:hover .mega-panel,
  .nav-item.has-panel:focus-within .mega-panel { display: none; transform: none; }
  .nav-item.has-panel.open .mega-panel { display: block; transform: none; }
  .mega-panel::before { display: none; }
  .mega-grid { flex-direction: column; gap: 14px; }
  .mega-featured { flex-basis: auto; max-height: 150px; }
  .mega-col li a { min-height: 40px; }
  .header-inner { flex-wrap: wrap; }
  .header-cta { margin-left: auto; }
}

@media (max-width: 720px) {
  .section { padding-block: 64px; }
  .specialists, .countries, .tours, .intent,
  .tour-page .pricing-section, .tour-page .incl-excl,
  .tour-page .gallery-section { padding-bottom: 28px; }
  .countries, .tours, .intent, .story,
  .tour-page .incl-excl, .tour-page .gallery-section,
  .tour-page .related-band { padding-top: 24px; }
  .tour-grid, .post-grid, .intent-grid, .dest-grid, .promo-grid { grid-template-columns: 1fr; }
  .intent-grid.carousel-track { grid-auto-columns: 82%; }
  .carousel-head { align-items: flex-start; }
  .start-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Two per row on a phone rather than three stacked. The vw cap keeps that
     true down to a 320px screen instead of overflowing. */
  /* A continuous marquee rather than a stack. The track is the three
     platforms followed by a duplicate set, slid exactly half its own width:
     when the animation ends the copy is sitting where the original began, so
     the restart cannot be seen. */
  .reviews-inline { overflow: hidden; }
  .review-logos {
    flex-wrap: nowrap; justify-content: flex-start;
    width: max-content; gap: 44px; margin: 0 0 30px;
  }
  .review-logos.is-marquee {
    animation: review-marquee var(--marquee-time, 18s) linear infinite;
    will-change: transform;
  }
  /* Hold still while someone is reading one or tabbing to its link. */
  .review-logos.is-marquee:hover,
  .review-logos.is-marquee:focus-within { animation-play-state: paused; }
  .review-logos li { flex: 0 0 auto; }
  @keyframes review-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(var(--marquee-shift, 50%) * -1), 0, 0); }
  }
  /* Motion is never forced on anyone who has said no to it. */
  @media (prefers-reduced-motion: reduce) {
    .review-logos.is-marquee { animation: none; }
  }
  .review-logos img { max-width: min(140px, 38vw); max-height: 46px; }
  .review-logos .stars { font-size: 1rem; letter-spacing: 2px; }
  .related-grid { grid-template-columns: 1fr; }
  .content-layout { padding-block: 40px 56px; }
  .incl-grid { grid-template-columns: 1fr; }
  /* mobile route panel: just the "You'll visit" destination chips */
  .route-panel { position: static; padding: 20px; }
  .route-visits-title { margin-top: 0; }
  /* no timeline gutter on mobile — the DAY 01 overline carries the numbering */
  .day { padding-left: 30px; }
  .gallery-grid, .dest-grid-3 { grid-template-columns: 1fr; }
  .stay-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stay-excerpt { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .article-wrap { padding-block: 32px 48px; }
  .step-list, .value-grid, .style-grid, .route-grid, .checks-grid, .exp-cards, .dir-grid, .price-grid { grid-template-columns: 1fr; }
  .plan-panel { padding: 32px 24px; }
  .hub-section-values .value-grid:has(> :nth-child(4)) { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .enquiry-panel { padding: 24px 20px; }
  .tour-hero-content { padding-block: 56px 68px; }
  .dest-hero-content { padding-block: 88px 72px; }
  .page-hero-content { padding-bottom: 68px; }
  .section-pills { top: 64px; }
  #overview, #itinerary, #pricing, #included, #gallery { scroll-margin-top: 128px; }
  /* swipeable pill row: bleed to the screen edges so pills aren't clipped mid-letter */
  .section-pills .container { padding-inline: 0; }
  .section-pills ul { padding-inline: 20px; }
  .section-pills .pill-cta { margin-left: 0; }
  .post-grid-index { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-content { padding-block: 72px; }
  /* 19px body copy is oversized on a phone — drop the hero lede to a
     comfortable reading size and tighten its leading to match. */
  .hero-lede { font-size: 1rem; line-height: 1.6; margin-bottom: 22px; }
  .story-badge { right: 10px; bottom: 14px; padding: 12px 16px; }
  .migration-band { padding-block: 80px; }
}

/* ---- Editorial section types (faq / table / stats / timeline) ---- */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  color: var(--ink-900); cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 10px; height: 10px; margin-top: 6px;
  border-right: 2px solid var(--green-600); border-bottom: 2px solid var(--green-600);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item[open] summary { padding-bottom: 6px; }
.faq-answer { padding: 0 22px 20px; color: var(--ink-600); line-height: 1.75; }
.faq-answer p { margin: 0 0 .8em; }
.faq-answer p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; border-radius: 14px; overflow: hidden; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; }
.cmp-table thead th { background: var(--green-600); color: #fff; font-family: var(--font-head); font-weight: 600; }
.cmp-table tbody th { font-weight: 600; color: var(--ink-900); }
.cmp-table td { color: var(--ink-600); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:nth-child(even) { background: var(--sand); }
.table-note { margin-top: 14px; font-size: .9rem; color: var(--ink-600); }

.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 0; }
.stat-cell { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.stat-cell dt { font-family: var(--font-head); font-weight: 600; font-size: 1.9rem; color: var(--green-600); line-height: 1.1; }
.stat-cell dd { margin: 8px 0 0; }
.stat-cell dd strong { display: block; color: var(--ink-900); font-size: .98rem; }
.stat-cell dd span { display: block; margin-top: 4px; color: var(--ink-600); font-size: .88rem; line-height: 1.6; }

.month-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.month-timeline li { display: flex; gap: 20px; padding: 0 0 26px 26px; position: relative; }
.month-timeline li::before {
  content: ""; position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green-600); border: 3px solid var(--sand);
}
.month-timeline li:last-child { padding-bottom: 0; }
.month-when {
  flex: none; width: 130px; font-family: var(--font-head); font-weight: 600;
  color: var(--green-600); font-size: .95rem; padding-top: 2px;
}
.month-timeline h3 { margin: 0 0 6px; font-size: 1.05rem; }
.month-timeline p { margin: 0; color: var(--ink-600); line-height: 1.7; }
@media (max-width: 620px) {
  .month-timeline li { flex-direction: column; gap: 4px; }
  .month-when { width: auto; }
}

/* ---- Itinerary: destinations strip + per-day accommodation sliders ---- */
.visit-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 16px 20px; margin-bottom: 32px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.visit-strip-title {
  margin: 0; flex: none;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-700);
}
.visit-strip .route-visits { margin: 0; }

/* Where you stay — one card per night, beneath that day's description */
/* Where-you-sleep options, shown on the nights an itinerary names no lodge.
   Deliberately lighter than the named-lodge card next to it: these are
   choices in an area, not a confirmed booking, and the design should not
   suggest otherwise. */
/* The options sit under the prose at the full width of the panel, so they
   lay out as a row of cards rather than the cramped vertical list they were
   when they lived in the side column. auto-fit keeps it three across on a
   wide panel and folds to one on a phone without a breakpoint. */
.day-stay-options .stay-options {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.stay-option {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.stay-option:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.stay-option-link {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.stay-option-link img {
  width: 100%; height: 118px; object-fit: cover; display: block;
  border-radius: 0;
}
.stay-option-name {
  display: block; padding: 12px 14px 0;
  font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--ink-900);
}
.stay-option-link:hover .stay-option-name { color: var(--green-700); }
.stay-option-blurb {
  padding: 0 14px 14px;
  font-size: .8125rem; color: var(--ink-600); line-height: 1.5;
}
.stay-options-note {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-600); line-height: 1.55;
}

.day-stay { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sand-100); }
.day-stay-label {
  display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green-700);
}
/* Full width of the panel, matching the options grid beside which it never
   appears but against which it is read. White like those cards, so a named
   lodge and an area choice are one family. */
.stay-card-day {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}

/* Seventeen of the 83 named lodges have no photograph on file. Without one
   the 300px picture column would just be a hole down the left of the card. */
.stay-card-day--noimg { grid-template-columns: minmax(0, 1fr); }

.stay-card-day .stay-card-body {
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: 18px 20px;
}
.stay-card-day .stay-card-body strong { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }
.stay-card-day .stay-card-body strong a { color: var(--ink-900); text-decoration: none; }
.stay-card-day .stay-card-body strong a:hover { color: var(--green-700); text-decoration: underline; }
.stay-card-area {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--green-700);
}
.stay-card-excerpt { font-size: .875rem; line-height: 1.6; color: var(--ink-600); }
.stay-card-day .link-more { margin-top: 4px; font-size: .82rem; }

/* Slider */
.acc-slider { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.acc-slides { position: absolute; inset: 0; }
.acc-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .55s ease;
}
.acc-slide.is-active { opacity: 1; }
.acc-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(13, 31, 29, .5); color: #fff; font-size: 1.25rem; line-height: 1;
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.acc-slider:hover .acc-nav, .acc-nav:focus-visible { opacity: 1; }
.acc-nav:hover { background: var(--green-600); }
.acc-prev { left: 8px; }
.acc-next { right: 8px; }
.acc-dots { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 5px; }
.acc-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: background .2s, transform .2s; }
.acc-dot.is-active { background: #fff; transform: scale(1.35); }
@media (hover: none) { .acc-nav { opacity: 1; background: rgba(13,31,29,.42); } }

@media (max-width: 620px) {
  .stay-card-day { grid-template-columns: 1fr; }
  .acc-slider { aspect-ratio: 16 / 10; }
  .visit-strip { padding: 14px 16px; }
}
.day-date {
  margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line);
  font-weight: 600; letter-spacing: .04em; color: var(--ink-600); text-transform: none;
}


/* ---- Lodge overview popup ---------------------------------------------
   Opened by the itinerary stay cards. The shell is the destination
   popup's, above; only what is particular to a property is set here. */
.stay-modal-card { width: min(560px, 100%); }
.stay-modal-img { aspect-ratio: 3 / 2; }
.stay-modal-thumbs { display: flex; gap: 6px; padding: 8px 8px 0; overflow-x: auto; }
.stay-modal-thumbs[hidden] { display: none; }
.stay-modal-thumb {
  flex: 0 0 74px; height: 54px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none;
}
.stay-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stay-modal-thumb.is-active { border-color: var(--green-600); }
.stay-modal-area {
  margin: 0 0 12px; font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--green-700);
}
.stay-modal-area:empty { display: none; }
.stay-modal-desc p { margin: 0 0 12px; color: var(--ink-600); }
.stay-modal-desc p:last-child { margin-bottom: 0; }

/* The lodge name and its "more" control open the popup, so both are
   buttons now. Neither should look like one. */
.stay-name-btn, .stay-more-btn {
  font: inherit; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.stay-name-btn { color: var(--ink-900); }
.stay-name-btn:hover { color: var(--green-700); text-decoration: underline; }


/* A hub's opening paragraph. It sits directly above the listing, so it
   carries the section's top padding and none of its bottom. */
.hub-intro { padding-bottom: 0; }
.hub-intro-text {
  max-width: 68ch; margin: 0;
  font-size: 1.0625rem; line-height: 1.75; color: var(--ink-600);
}


/* Hero furniture on the plain content template, for the pages that sell
   something. Matches the destination hero rather than inventing a third
   look. Legal pages carry none of this and keep the bare hero. */
.page-hero-sub {
  margin: 14px 0 0; max-width: 620px;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6;
  color: rgba(255,255,255,.92);
}
.page-hero:not(.has-image) .page-hero-sub { color: var(--ink-600); }
/* Chips sit between the hero and the prose, so they take the gap from the
   section below rather than adding one of their own. */
.page-facts { margin: 28px 0 0; }

/* ---- Footer journal column + HTML sitemap ---- */
.footer-col .footer-more { font-weight: 700; color: var(--green-100); }
/* Article titles are long — let them wrap tightly instead of stretching the column. */
nav[aria-label="Safari journal"] a { line-height: 1.45; display: inline-block; }

.sitemap-list {
  list-style: none; margin: 0 0 40px; padding: 0;
  columns: 3; column-gap: 40px;
}
.sitemap-list li { break-inside: avoid; margin-bottom: 9px; }
.sitemap-list a {
  color: var(--ink-600); text-decoration: none; font-size: .9rem; line-height: 1.5;
  border-bottom: 1px solid transparent;
}
.sitemap-list a:hover { color: var(--green-700); border-bottom-color: currentColor; }
@media (max-width: 1024px) { .sitemap-list { columns: 2; } }
@media (max-width: 620px)  { .sitemap-list { columns: 1; } }
/* Journal titles run long; hold them to two lines so the column stays balanced. */
nav[aria-label="Safari journal"] li a:not(.footer-more) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .89rem;
}

/* ---- Swipeable card rows on phones -------------------------------------
   Curated rows (featured safaris, destinations, journal, "safaris featuring
   X") stack into one very tall column on a phone — the homepage ran to
   ~14,000px. On mobile these become horizontal snap carousels with the next
   card peeking, so a row costs one card's height instead of six.
   Full listings (hub, directory, blog index) deliberately keep stacking:
   there you want to scan everything, not swipe past it.                    */
@media (max-width: 720px) {
  .card-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* overflow-x clips vertically too — pad so card shadows survive, then
       pull the layout back with matching negative margins. */
    padding: 8px 16px 22px;
    margin-inline: -16px;
    margin-block: -8px -22px;
  }
  .card-row::-webkit-scrollbar { display: none; }
  .card-row > * { scroll-snap-align: start; height: auto; }
  /* the grid's own responsive column rules must not fight the carousel */
  .card-row.tour-grid,
  .card-row.dest-grid,
  .card-row.country-grid,
  .card-row.dest-grid-3,
  .card-row.post-grid { grid-template-columns: none; }

  /* a hint that the row moves sideways */
  .section-head { align-items: flex-start; }
}

/* The days used to be <details> collapsed only on phones; they are now a
   button-driven accordion at every width, so those rules are gone. */

/* Footer on phones: five stacked columns ran to ~1,500px. Tighten the rhythm
   without dropping any of the links. */
@media (max-width: 720px) {
  .footer-grid { gap: 26px; padding-block: 48px 32px; }
  .footer-col h2 { margin-bottom: 12px; }
  .footer-col ul { gap: 8px; }
  .footer-bottom { padding-block: 18px; }
}

/* A handful of imported images are hotlinked from third-party hosts, so their
   real dimensions cannot be read at build time. Reserve a sensible box for
   those specific ones so they cannot shove the text down as they arrive. */
.prose img:not([width]),
.prose-day img:not([width]) { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
@media (max-width: 720px) {

  /* gallery photos swipe rather than stacking eight deep — the track is now
     .carousel-track at every width, so a phone only changes how much shows */
  .gallery-grid.carousel-track { grid-auto-columns: 82%; }
  .gallery-grid.carousel-track img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; margin: 0; }
  /* one destination card at a time, with the next peeking */
  .dest-grid-3.carousel-track { grid-auto-columns: 78%; }
}

/* ==========================================================================
   Tailor-made trip designer  (/book_your_trip_now/)
   Six steps rendered server-side and hidden by JS, so the form still works
   without JavaScript — all six show at once and the final button posts the lot.
   ========================================================================== */
.designer-head { padding-bottom: 0; }
.designer-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-600); max-width: 62ch; }
.designer-done { max-width: 62ch; }
.designer-alert {
  background: #fdf3f2; border: 1px solid #e6c9c5; border-radius: var(--radius);
  padding: 14px 18px; color: #8a3227; margin-bottom: 28px;
}
.designer { padding-block: 40px 96px; }

.designer-progress { margin-bottom: 40px; }
.designer-bar { height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; }
.designer-bar span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--green-600), var(--green-500, #2f9d84));
  transform-origin: left center; transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.designer-meta {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 10px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-600);
}

.designer-step { border: 0; margin: 0; padding: 0; }
.designer-step legend { padding: 0; margin-bottom: 26px; }
.designer-q {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2;
  color: var(--ink-900); margin-top: 6px;
}
.designer-hint { color: var(--ink-600); margin: -14px 0 24px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.choice-grid-tight { grid-template-columns: repeat(4, 1fr); }
.choice-grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* A card you press, not a form row with a radio in the corner. The native
   control is restyled rather than replaced, so it keeps its keyboard
   behaviour and its announcement. */
.choice {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 20px 52px; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease,
              background-color .18s ease, transform .18s ease;
}
.choice:hover {
  border-color: var(--green-600); transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(13,31,29,.08);
}
/* The control is drawn, not replaced. Hiding it and painting a proxy span
   on top removed it from the render tree: offsetParent went null, focus()
   skipped to the next field, and none of the 22 choices could be reached
   from the keyboard. appearance:none keeps it real. */
.choice input {
  appearance: none; -webkit-appearance: none;
  position: absolute; left: 18px; top: 21px; margin: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-strong, #cfd8d5); background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
/* Checkboxes are a different promise from radios — square, and more than
   one of them can be true. */
.choice input[type="checkbox"] { border-radius: 6px; }
/* display:flex beats the UA sheet, so a length that does not belong to
   the chosen route would stay on screen. */
.choice[hidden] { display: none; }
.choice input::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/11px 8px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8'%3E%3Cpath d='M1 4l3 3 6-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .15s ease;
}
.choice:hover input { border-color: var(--green-600); }
.choice:has(input:checked) {
  border-color: var(--green-600); background: var(--green-50, #f2f8f6);
  box-shadow: 0 0 0 2px rgba(28,122,104,.16);
}
.choice input:checked { background: var(--green-600); border-color: var(--green-600); }
.choice input:checked::after { opacity: 1; }
.choice:has(input:focus-visible) { outline: 3px solid var(--green-600); outline-offset: 3px; }
.choice input:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.choice-body { display: flex; flex-direction: column; gap: 3px; }
.choice-body strong { font-family: var(--font-display); font-size: 1rem; color: var(--ink-900); }
.choice-body span { font-size: .875rem; line-height: 1.45; color: var(--ink-600); }
.choice-inline { max-width: 34rem; margin-top: 18px; }

.designer-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.designer-field { display: flex; flex-direction: column; gap: 7px; }
.designer-field-wide { margin-top: 22px; }
/* display:flex beats the UA sheet, so the ages field stayed visible with no
   children to name. Scoped rather than global: the no-JS fallback relies on
   being able to force a [hidden] step back into view. */
.designer-field[hidden] { display: none; }
.designer-row-2 { grid-template-columns: repeat(2, 1fr); }

/* One box per child. Small and in a row, because twelve stacked fields
   would look like more work than typing three numbers. */
.child-ages { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.child-ages[hidden] { display: none; }
.child-ages-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.child-age {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff;
  transition: border-color .18s ease;
}
.child-age[hidden] { display: none; }
.child-age:focus-within { border-color: var(--green-600); }
.child-age-n { font-size: .75rem; font-weight: 700; color: var(--ink-600); }
.child-age input {
  width: 58px; padding: 7px 8px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem; color: var(--ink-900); background: #fff;
}
.child-age input:focus-visible { outline: 2px solid var(--green-700); outline-offset: 1px; }
.child-age-u { font-size: .8125rem; color: var(--ink-600); }
.designer-label { font-size: .875rem; font-weight: 700; color: var(--ink-900); }
/* The age band belongs to the label but is not the label. */
.designer-age { font-weight: 500; color: var(--ink-600); }
.designer-field input[type="text"],
.designer-field input[type="email"],
.designer-field input[type="tel"],
.designer-field input[type="date"],
.designer-field select,
.designer-field textarea {
  width: 100%; font: inherit; color: var(--ink-900);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 48px;
}
.designer-field textarea { min-height: 120px; resize: vertical; }
.designer-field :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--green-600); outline-offset: 1px; border-color: var(--green-600);
}
.designer-error { font-size: .8125rem; color: #8a3227; min-height: 1em; }

/* number stepper — a tap target either side of the value */
.stepper { display: flex; align-items: stretch; max-width: 190px; }
.stepper button {
  width: 48px; min-height: 48px; flex-shrink: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink-900);
  font-size: 1.25rem; line-height: 1;
}
.stepper button:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.stepper button:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.stepper button:hover:not(:disabled) { border-color: var(--green-600); color: var(--green-600); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper input {
  width: 100%; min-width: 0; text-align: center; font: inherit; font-weight: 700;
  border: 1px solid var(--line); border-inline: 0; background: #fff; color: var(--ink-900);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.designer-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 34px;
}
.designer-note { margin-top: 16px; font-size: .875rem; color: var(--ink-600); }
.hp-wrap { position: absolute; left: -9999px; }

.designer-step[hidden] { display: none; }

@media (max-width: 1024px) {
  .choice-grid, .choice-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .choice-grid-tight { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .choice-grid, .choice-grid-tight, .choice-grid-3 { grid-template-columns: 1fr; }
  /* Three tiles beside the copy do not fit, so the band stacks and the tiles
     share the width between them. */
  .footer-cta-inner { flex-direction: column; align-items: flex-start; padding-block: 34px; }
  /* Stacked, a flex size is a height: the 320px basis left a tall empty gap. */
  .footer-founder + .footer-cta-copy { flex: 0 0 auto; }
  .footer-actions { width: 100%; }
  .footer-actions li { flex: 1 1 0; min-width: 0; }
  .footer-actions a { min-width: 0; padding: 14px 8px; font-size: .75rem; }
  /* minmax(180px) plus a brand spanning two tracks needs 388px of column on a
     320px screen, which pushed the whole page sideways. Narrower tracks, and
     the brand takes the full row instead of two columns of it. */
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 26px 20px; padding-block: 38px 30px;
  }

  /* Compact cards. Half the padding, a tighter control, and the description
     at the size it would be in a caption — enough to tell two options apart,
     which is all it has to do. The hover lift goes: there is no hover on a
     phone, and the shadow only cost a repaint. */
  /* The gaps around the question, which were sized for a page and not for a
     phone: below the summary, under the heading, and above the buttons. */
  .designer-step legend { margin-bottom: 12px; }
  .designer-q { margin-top: 2px; }
  .designer-hint { margin: -6px 0 12px; font-size: .8125rem; line-height: 1.45; }
  .designer-nav { margin-top: 18px; }
  .designer-note { margin-top: 10px; font-size: .75rem; }
  .choice-grid, .choice-grid-3 { gap: 6px; }
  .choice { gap: 9px; padding: 8px 12px 8px 34px; border-radius: var(--radius-sm); }
  .choice:hover { transform: none; box-shadow: none; }
  .choice input { left: 11px; top: 11px; width: 16px; height: 16px; }
  .choice input[type="checkbox"] { border-radius: 4px; }
  .choice-body { gap: 0; }
  .choice-body strong { font-size: .875rem; line-height: 1.3; }
  .choice-body span { font-size: .6875rem; line-height: 1.3; }
  .designer-row { grid-template-columns: 1fr; }
  .designer { padding-block: 28px 72px; }
  .designer-nav { flex-direction: column-reverse; align-items: stretch; }
  .designer-nav .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Designer popup.
   On load the shell is lifted into a dialog over a dimmed page. Closing it —
   by the X, Esc, a click outside, or a scroll gesture — drops the same shell
   back into normal page flow, so there is only ever one form on the page.
   Everything here is additive: with the modal closed (or JS off) the shell is
   an ordinary light section.
   -------------------------------------------------------------------------- */
.designer-shell { position: relative; }
.designer-close { display: none; }

body.designer-open { overflow: hidden; }

.designer-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 18, 17, .8);
  opacity: 0; transition: opacity .25s ease;
}
.designer-backdrop.is-shown { opacity: 1; }

.designer-page.is-modal {
  position: fixed; inset: 0; z-index: 201;
  display: grid; place-items: start center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(12px, 3vh, 40px) 16px;
}
.designer-page.is-modal .designer-shell {
  background: var(--sand-50);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
  width: 100%; max-width: 1040px;
  padding-bottom: 8px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.designer-page.is-modal .designer-shell.is-shown { opacity: 1; transform: none; }
.designer-page.is-modal .designer-shell:focus { outline: none; }

/* The popup opens straight onto the question. The page heading, kicker and
   lede stay in the markup — the page still needs its H1, and they show
   normally once the popup is closed — they are simply not repeated inside the
   dialog, where the step is the whole point.
   aria-labelledby still names the dialog from that hidden H1: the accessible
   name computation deliberately includes hidden referenced nodes. */
.designer-page.is-modal .designer-head { display: none; }
/* top padding clears the close button, which is 40px tall at 14px from the top */
.designer-page.is-modal .designer { padding-block: 64px 34px; }

.designer-page.is-modal .designer-close {
  display: grid; place-items: center;
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink-900);
}
.designer-page.is-modal .designer-close:hover { border-color: var(--green-600); color: var(--green-600); }
.designer-page.is-modal .designer-close:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; }

.designer-dismiss {
  display: block; width: 100%; margin: 4px 0 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .8125rem; color: var(--ink-600);
  padding: 10px; text-decoration: underline; text-underline-offset: 3px;
}
.designer-dismiss:hover { color: var(--green-600); }

@media (prefers-reduced-motion: reduce) {
  .designer-backdrop, .designer-page.is-modal .designer-shell { transition: none; }
}

@media (max-width: 720px) {
  .designer-page.is-modal { padding: 0; }
  .designer-page.is-modal .designer-shell { border-radius: 0; min-height: 100%; }
  .designer-page.is-modal .designer { padding-block: 58px 28px; }
}

/* --------------------------------------------------------------------------
   Hero photographs: a light finish, and a scrim that follows the text on phones
   -------------------------------------------------------------------------- */

/* A restrained lift — enough to bring the greens and golden light back after
   the scrim, without the over-processed look of a heavy filter. */
.hero-bg,
.page-hero-bg,
.tour-hero-bg,
.dest-hero > img {
  filter: saturate(1.08) contrast(1.05);
}

/* A slow zoom gives the hero some life on arrival. Skipped entirely for anyone
   who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero-bg,
  .tour-hero-bg,
  .dest-hero > img {
    animation: hero-drift 22s ease-out forwards;
  }
  @keyframes hero-drift {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }
}

@media (max-width: 900px) {
  /* A touch stronger on a phone: the text block is proportionally larger and
     covers more of the picture. */
  .hero-overlay,
  .tour-hero-overlay,
  .dest-hero-overlay,
  .page-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(9,23,21,.60) 0%,
        rgba(9,23,21,.76) 28%,
        rgba(9,23,21,.76) 68%,
        rgba(9,23,21,.90) 100%);
  }
}

/* The scrim handles the average luminance; this carries the text over specular
   highlights — a blown-out cloud, a sunlit patch of grass — without darkening
   the whole photograph just to reach them. */
.hero-content,
.page-hero-content,
.tour-hero-content,
.dest-hero-content {
  text-shadow: 0 1px 18px rgba(9, 23, 21, .5), 0 1px 3px rgba(9, 23, 21, .35);
}
.hero-content .btn,
.page-hero-content .btn,
.tour-hero-content .btn,
.dest-hero-content .btn { text-shadow: none; }

/* Each slide drifts for its whole time on screen. Alternating the origin means
   consecutive slides move differently, so the loop is not obvious. */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active img { animation: hero-pan 11s linear forwards; }
  .hero-slide:nth-child(2n).is-active img { transform-origin: 70% 40%; }
  .hero-slide:nth-child(3n).is-active img { transform-origin: 30% 65%; }
  .hero-slide:nth-child(4n).is-active img { transform-origin: 50% 20%; }
  @keyframes hero-pan {
    from { transform: scale(1.12); }
    to   { transform: scale(1.0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  /* one still picture, no fade, no drift */
  .hero-slide { transition: none; }
  .hero-slide img { transform: none; }
}

/* ---- Tripadvisor reviews --------------------------------------------------
   Real reviews, recovered from the widget the old site ran. Long ones are
   clamped rather than truncated: the whole review is always in the DOM, so
   opening it costs no request and a crawler never sees a half sentence. */
/* The arrows join the heading row, so they are near the thing they move. */
.reviews-head .carousel-nav { margin-left: auto; }
/* 96px above and below is the site-wide section rhythm, which is right for a
   band of prose and too much for one row of small cards. */
.reviews-band { padding-block: 52px; }
/* The total, then where it comes from. The breakdown is the part that makes
   the total checkable, so it is a list of links rather than a footnote. */
.reviews-agg { display: grid; gap: 6px; }
.reviews-agg-total {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
}
.reviews-agg-total strong { font-size: 1.0625rem; color: var(--ink-900); }
.reviews-agg-total > span { font-size: .875rem; color: var(--ink-600); }
.reviews-agg-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.reviews-agg-list a {
  display: inline-flex; align-items: baseline; gap: 6px;
  text-decoration: none; color: var(--ink-600); font-size: .8125rem;
}
.reviews-agg-list strong { color: var(--ink-900); font-size: .875rem; }
/* Height-capped rather than width-capped: the two logos have different
   aspect ratios, and matching their heights is what makes them sit on one
   line together. */
.reviews-agg-logo { height: 16px; width: auto; max-width: 84px; object-fit: contain; }
.reviews-agg-name { font-weight: 700; color: var(--ink-900); font-size: .8125rem; }
/* The row is now text and images on one baseline, so it aligns on centres
   rather than baselines — an image has no baseline to share. */
.reviews-agg-list a { align-items: center; }
.reviews-agg-list a:hover { color: var(--green-700); text-decoration: underline; }
.reviews-head { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.reviews-agg { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.reviews-agg strong { font-family: var(--font-head); font-size: 1.125rem; color: var(--green-800, var(--green-700)); letter-spacing: .02em; }
.reviews-agg span { font-size: .9375rem; color: var(--ink-600); }

.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
/* Three across, scrolling. The cards are all different lengths, so the row
   stretches them to match rather than leaving ragged bottoms. */
.review-grid.carousel-track {
  grid-template-columns: none;
  grid-auto-columns: calc(25% - 13px);
  align-items: stretch;
}
.review-grid.carousel-track .review-card { height: 100%; }
/* Kept next to the rule it overrides. Put in the shared 720px block further
   up the file it lost to the base rule above, which is declared later, and
   a phone got 33% columns — 93px wide. */
@media (max-width: 720px) {
  /* one review at a time, with the next just showing */
  .review-grid.carousel-track { grid-auto-columns: 86%; }
}
/* A tinted panel rather than a bordered white box: the band already sits on a
   tint, so the card reads by being lighter than its ground, not by being
   outlined. */
.review-card {
  margin: 0; padding: 20px;
  background: #f4f8f8; border: 0; border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
}

.review-head { display: flex; align-items: center; gap: 12px; }
/* An initial, not a photograph. See the note in reviews.php. */
.review-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-600); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem;
  line-height: 1;
}
.review-dots {
  display: block; color: var(--green-600);
  font-size: .625rem; letter-spacing: 3px; line-height: 1;
}
.review-who { margin: 3px 0 0; font-size: .8125rem; line-height: 1.3; }
.review-who strong { color: var(--ink-900); font-weight: 700; }
.review-who span { color: var(--ink-600); }

.review-title {
  margin: 0; font-family: var(--font-head); font-weight: 600;
  font-size: 1rem; line-height: 1.3; color: var(--ink-900);
}
.review-card blockquote { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--ink-600); }
/* The tallest card sets the height of the whole row, so this is what really
   governs how deep the band is. Four lines still carries the gist, and the
   rest is one click away and in the DOM either way. */
.review-card blockquote.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card blockquote.is-open { -webkit-line-clamp: unset; overflow: visible; }

/* Action left, provenance right — the reference's arrangement, and the one
   that puts the thing you might press nearest the reading edge. */
.review-foot {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.review-more {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink-900);
}
.review-more:hover { text-decoration: underline; }
.review-src { display: inline-flex; align-items: center; opacity: .55; transition: opacity .18s ease; }
.review-src:hover { opacity: 1; }
.review-src img { height: 14px; width: auto; max-width: 74px; object-fit: contain; }
.review-src span { font-size: .6875rem; font-weight: 700; color: var(--ink-600); }
.reviews-more { margin: 20px 0 0; }

/* The compact pair, for rails and narrow columns. */
.review-strip { display: grid; gap: 14px; }
.review-quote { margin: 0; padding: 16px 18px; background: var(--sand); border-radius: var(--radius-sm); }
.review-quote blockquote { margin: 6px 0 8px; font-size: .875rem; line-height: 1.6; color: var(--ink-600); }
.review-quote figcaption { font-size: .8125rem; font-weight: 700; color: var(--ink-900); }
.review-quote figcaption span { font-weight: 400; color: var(--ink-600); }

/* The live feed sits above the recovered reviews, which stay as the floor when
   a blocker, a consent banner or an outage leaves the widget empty. */
.review-widget { margin-bottom: 28px; min-height: 0; }
.review-widget-head { margin: 0 0 12px; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--green-700); }
.review-widget-note { margin: 0; font-size: .875rem; color: var(--ink-600); }

/* The rail snippet: one review under the sticky enquiry card, so the proof sits
   beside the form rather than waiting at the foot of the page. Set on sand
   rather than white to separate it from the card above — the gold stars are
   already the warm note here and a coloured edge only shouted over them. */
.review-rail {
  margin: 14px 0 0; padding: 16px 18px;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.review-rail .stars { font-size: .875rem; letter-spacing: 1px; }
.review-rail blockquote {
  margin: 8px 0 12px; font-size: .875rem; line-height: 1.6; color: var(--ink-600);
}
.review-rail figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: .8125rem; line-height: 1.4;
}
.review-rail figcaption strong { color: var(--ink-900); }
.review-rail-ctx { color: var(--ink-600); }
/* Given its own line rather than pushed right: the floating WhatsApp button
   sits in that corner and covers anything parked against the right edge. */
.review-rail-src {
  flex-basis: 100%; font-weight: 700; color: var(--green-700);
  text-decoration: none; white-space: nowrap;
}
.review-rail-src:hover { text-decoration: underline; }

/* The designer's running estimate. Sits under the progress bar so it is in
   view at every step, without competing with the question being asked. */
/* What they already told us. Deliberately lighter than the estimate above
   it — a receipt, not a second question. Each chip is a button back to the
   step that owns the answer. */
.designer-summary { margin: -14px 0 30px; }
.designer-summary-label {
  margin: 0 0 8px; font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
}
.designer-summary-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.designer-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.designer-chip:hover {
  border-color: var(--green-600); background: var(--green-50, #f2f8f6);
  box-shadow: 0 4px 12px rgba(13,31,29,.06);
}
.designer-chip:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
/* inline-flex beats the UA sheet, so the hidden attribute alone left the
   route chip on screen showing a dash. Same reason .designer-field needs
   its own rule; scoped rather than global so the no-JS fallback can still
   force a [hidden] step back into view. */
.designer-chip[hidden] { display: none; }
.designer-chip-k {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-600);
}
/* A picked itinerary title can run to 45 characters and was taking 43% of the
   row on its own. Clipped here; the full text stays in the title and the
   aria-label, so nothing is lost to a pointer or a screen reader. */
.designer-chip-v {
  display: inline-block; max-width: 26ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .9375rem; font-weight: 600; color: var(--ink-900);
  vertical-align: bottom;
}
/* The pencil is drawn rather than shipped as an icon: one rule, no request. */
.designer-chip::after {
  content: "Edit"; margin-left: 2px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-700);
}
@media (max-width: 560px) {
  /* Text, not buttons. The card chrome goes entirely and the chips flow as
     words do, several to a line. "Edit" carries an underline because with
     the box gone that is the only thing left saying it can be pressed. */
  /* Has to live here rather than in the 720px block: the base rule for this
     class is declared further down the file and would otherwise win. */
  .designer-summary { margin: -12px 0 10px; }
  .designer-summary-label { margin-bottom: 3px; font-size: .625rem; }
  .designer-summary-chips { gap: 0 12px; }
  .designer-chip {
    gap: 6px; border: 0; border-radius: 0; background: none;
    line-height: 1.3;
    /* Invisible, but it is what a thumb lands on now the padding that used
       to come with the box has gone. Trimmed to the least that still leaves
       a target worth aiming at. */
    padding: 4px 0;
  }
  .designer-chip:hover {
    background: none; box-shadow: none; border-color: transparent;
  }
  .designer-chip-k { font-size: .625rem; letter-spacing: .07em; }
  .designer-chip-v { font-size: .75rem; max-width: 20ch; }
  .designer-chip::after {
    margin-left: 1px; font-size: .625rem;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .designer-chip:focus-visible { outline-offset: 0; }
}

/* The figure is the loud thing here; the box it sits in should not compete. */
.designer-estimate {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0 0 26px; padding: 16px 20px;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.designer-estimate[hidden] { display: none; }
.designer-estimate-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-700);
}
.designer-estimate strong {
  font-family: var(--font-head); font-size: 1.5rem; color: var(--ink-900); margin: 0 4px;
}
.designer-estimate-unit { font-size: .875rem; color: var(--ink-600); }
.designer-estimate-note { flex-basis: 100%; margin: 2px 0 0; font-size: .8125rem; color: var(--ink-600); }

/* ------------------------------------------------- package list filtering --
   A quiet bar above the grid: it is a way into the list, not a feature of the
   page, so it sits on the same paper as everything else and only the range
   fill carries colour. */
.pkg-filter {
  display: grid; grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: 28px; align-items: start;
  padding: 20px 24px; margin: 0 0 28px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2, #f7f5ef);
}
.pkg-filter[hidden] { display: none; }

/* A filtered-out card must actually go. .pkg-card is display:flex, which
   beats the browser default for [hidden] — without this the filter changed
   the counts and left every card on screen. */
.pkg-card[hidden] { display: none; }

.pkg-filter-dur { border: 0; padding: 0; margin: 0; }
.pkg-filter-dur legend,
.pkg-filter-legend {
  padding: 0; margin: 0 0 10px;
  font-size: .8125rem; font-weight: 700; color: var(--ink-900);
}
.pkg-filter-dur label {
  display: inline-flex; align-items: center; gap: 8px;
  margin-right: 18px; font-size: .9375rem; cursor: pointer; white-space: nowrap;
}
.pkg-filter-dur input { width: 17px; height: 17px; accent-color: var(--green-700, #1c7a68); cursor: pointer; }

/* Two range inputs on one track. Both are transparent and unstyled except for
   the thumb; the visible track and the fill are drawn by the wrapper. */
.pkg-range { position: relative; height: 26px; }
.pkg-range::before {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px;
  border-radius: 2px; background: #dcd8cd;
}
.pkg-range-fill {
  position: absolute; top: 11px; height: 4px; border-radius: 2px;
  background: var(--green-600, #1c7a68);
}
.pkg-range input {
  position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0;
  background: none; appearance: none; -webkit-appearance: none;
  pointer-events: none;   /* the track is shared; only the thumbs take clicks */
}
.pkg-range input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%; cursor: grab;
  background: #fff; border: 3px solid var(--green-600, #1c7a68);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pkg-range input::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%; cursor: grab;
  background: #fff; border: 3px solid var(--green-600, #1c7a68);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pkg-range input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--green-600, #1c7a68); outline-offset: 2px; }
.pkg-range input:focus-visible::-moz-range-thumb { outline: 3px solid var(--green-600, #1c7a68); outline-offset: 2px; }

.pkg-range-out {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 6px 0 0; font-size: .875rem; font-weight: 700; color: var(--ink-900);
}

.pkg-filter-reset {
  align-self: center; border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 700; color: var(--green-700, #1c7a68);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.pkg-filter-reset[hidden] { display: none; }

.pkg-filter-empty {
  margin: 0 0 28px; padding: 18px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-600); font-size: .9375rem;
}
.pkg-filter-empty[hidden] { display: none; }

@media (max-width: 860px) {
  .pkg-filter { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px; }
  .pkg-filter-dur label { margin-right: 14px; font-size: .875rem; }
  .pkg-filter-reset { justify-self: start; }
}

/* ==========================================================================
   Safari-style pages (pages/safari-style.php)
   Layout after the owner's timbuktutravel.com reference: tall photograph,
   facts strip, sticky in-page menu, split overview, icon cards, a trips
   column beside a rail of tall photo cards, a planning panel. Colour and
   type stay the site's own.
   ========================================================================== */
.ss-kicker {
  margin: 0 0 14px; font-size: .8125rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green-600);
}
.ss-display {
  font-size: clamp(2rem, 3.4vw, 2.875rem); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.015em; margin: 0 0 20px; color: var(--green-950);
}
.ss-lead { font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.6; color: var(--ink-900); margin: 0 0 18px; }
.ss-body { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-600); margin: 0 0 24px; }
.ss-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; }
.ss-textlink {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-700); text-decoration: none;
}
.ss-textlink:hover { color: var(--green-600); }
.ss-textlink svg { transition: transform .2s ease; }
.ss-textlink:hover svg { transform: translateX(3px); }

/* ---- hero ---- */
.ss-hero {
  position: relative; display: flex; align-items: center;
  min-height: min(88vh, 860px); overflow: hidden; background: var(--green-950); color: #fff;
}
.ss-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-hero-shade {
  position: absolute; inset: 0;
  /* A soft pool of shade behind the centred words, plus the top and bottom
     washes: the photographs are busy, and white type on a white shirt
     disappears without it. */
  background:
    radial-gradient(ellipse 60% 48% at 50% 52%, rgba(9, 23, 21, .42), rgba(9, 23, 21, 0) 72%),
    linear-gradient(180deg, rgba(9, 23, 21, .5) 0%, rgba(9, 23, 21, .18) 35%, rgba(9, 23, 21, .28) 60%, rgba(9, 23, 21, .72) 100%);
}
.ss-hero-inner {
  position: relative; z-index: 1; width: 100%; text-align: center;
  padding-block: 120px 140px; text-shadow: 0 1px 18px rgba(9, 23, 21, .45);
}
.ss-hero-kicker {
  margin: 0 0 18px; font-size: .9375rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: #fff;
}
.ss-hero-title {
  font-size: clamp(2.75rem, 7vw, 5.25rem); font-weight: 500; line-height: 1.02;
  letter-spacing: -0.02em; color: #fff; margin: 0 auto 22px; max-width: 16ch;
}
.ss-hero-sub {
  max-width: 640px; margin: 0 auto 34px; font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6; color: rgba(255, 255, 255, .92);
}
.ss-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ss-hero-actions .btn { text-shadow: none; }
.ss-hero .breadcrumbs {
  position: absolute; top: 24px; left: 20px; right: 20px; margin: 0 auto;
  max-width: calc(var(--container) - 40px); text-align: left; font-size: .8125rem;
}
.ss-hero .breadcrumbs ol { flex-wrap: nowrap; overflow: hidden; }
.ss-hero .breadcrumbs li { white-space: nowrap; }
.ss-hero .breadcrumbs li[aria-current] { overflow: hidden; text-overflow: ellipsis; }
.ss-hero .breadcrumbs, .ss-hero .breadcrumbs a { color: rgba(255, 255, 255, .88); }
.ss-explore {
  position: absolute; left: 50%; bottom: 26px; z-index: 1; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #fff; text-decoration: none; font-size: .75rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; opacity: .9;
}
.ss-explore:hover { color: #fff; opacity: 1; }
.ss-explore svg { animation: ss-nudge 2.4s ease-in-out infinite; }
@keyframes ss-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .ss-explore svg { animation: none; } }

/* ---- facts strip (where the reference has its award band) ---- */
.ss-facts { background: var(--green-100); border-bottom: 1px solid #d3e6e0; }
.ss-facts ul {
  list-style: none; margin: 0 auto; padding-block: 22px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px;
}
.ss-facts li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--green-800); }
.ss-facts svg { flex: none; color: var(--green-600); }

/* ---- sticky in-page menu ---- */
.ss-menu { position: sticky; top: 72px; z-index: 60; background: var(--green-950); }
.ss-menu-inner { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.ss-menu-name {
  flex: none; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: #fff; white-space: nowrap;
}
.ss-menu ul {
  list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.ss-menu ul::-webkit-scrollbar { display: none; }
.ss-menu li a {
  display: block; padding: 18px 14px; white-space: nowrap; text-decoration: none;
  font-size: .9375rem; font-weight: 600; color: rgba(255, 255, 255, .78);
  border-bottom: 3px solid transparent;
}
.ss-menu li a:hover { color: #fff; }
.ss-menu li a[aria-current="true"] { color: #fff; border-bottom-color: var(--green-400); }
.ss-menu-cta {
  flex: none; padding: 9px 18px; border-radius: 999px; background: var(--green-400);
  color: var(--green-950); font-weight: 800; font-size: .8125rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.ss-menu-cta:hover { background: #fff; color: var(--green-950); }
.ss #overview, .ss #trips, .ss #compare, .ss #guide, .ss #faqs, .ss #styles { scroll-margin-top: 132px; }

/* ---- overview ---- */
.ss-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ss-overview-media { position: relative; margin: 0; padding: 0 0 56px; }
.ss-overview-media > img:first-child {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius);
}
.ss-overview-inset {
  position: absolute; right: -28px; bottom: 0; width: 46%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 6px solid var(--sand-50); box-shadow: var(--shadow-card);
}
.ss-overview-text .ss-display { max-width: 18ch; }

/* ---- why cards ---- */
.ss-why { background: var(--sand-100); padding-block: 88px; }
.ss-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.ss-why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: 22px; border-radius: 50%;
  background: #fff; color: var(--green-700);
}
.ss-why-card h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.25; margin: 0 0 12px; }
.ss-why-card p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-600); }

/* ---- trips: intro column beside a rail of tall photo cards ---- */
.ss-trips { overflow: hidden; }
.ss-trips-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.ss-trips-intro .carousel-nav { margin-top: 28px; }
.ss-trip-track { grid-auto-columns: calc(42% - 14px); gap: 24px; }   /* a third card peeks, as in the reference */
.ss-trip {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--radius); background: var(--green-950); color: #fff; text-decoration: none;
}
.ss-trip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ss-trip:hover img { transform: scale(1.04); }
.ss-trip-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 23, 21, .05) 30%, rgba(9, 23, 21, .82) 100%); }
.ss-trip-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.ss-trip-stops { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.ss-trip-title { font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.2; color: #fff; }
.ss-trip-price { font-size: .9375rem; color: rgba(255, 255, 255, .9); }
.ss-trip-price strong { color: #fff; }
.ss-trip-go {
  margin-top: 6px; padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--green-950);
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .2s ease;
}
.ss-trip:hover .ss-trip-go { background: var(--green-400); }

/* ---- planning panel ---- */
.ss-chat { padding-block: 16px 96px; }
.ss-chat-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  padding: 64px; border-radius: var(--radius); background: var(--sand-100);
}
.ss-chat-text .ss-display { max-width: 20ch; }
.ss-chat-call { margin: 18px 0 0; font-size: .9375rem; color: var(--ink-600); }
.ss-chat-call a { font-weight: 700; color: var(--green-700); }
.ss-chat-quote .review-rail { margin: 0; padding: 28px; background: #fff; border: 0; box-shadow: var(--shadow-card); }
.ss-chat-quote .review-rail blockquote { font-size: 1.0625rem; color: var(--ink-900); }

/* ---- comparison table ---- */
.ss-compare { background: var(--sand-50); border-top: 1px solid var(--line); }
.ss-compare-head { max-width: 760px; margin-bottom: 36px; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 1rem; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.ss-table th, .ss-table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ss-table thead th {
  background: var(--green-950); color: #fff; font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; border-bottom: 0;
}
.ss-table tbody th { font-weight: 700; color: var(--green-800); white-space: nowrap; }
.ss-table tbody tr:last-child th, .ss-table tbody tr:last-child td { border-bottom: 0; }
.ss-table td { color: var(--ink-900); line-height: 1.55; }

/* ---- other safaris ---- */
.ss-styles { background: #fff; border-top: 1px solid var(--line); }
.ss-style-track { grid-auto-columns: calc(25% - 18px); gap: 24px; }
.ss-style { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--green-950); }
.ss-style img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
  margin-bottom: 12px; transition: transform .35s ease, box-shadow .35s ease;
}
.ss-style:hover img { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.ss-style-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.ss-style:hover .ss-style-name { color: var(--green-600); }
.ss-style-kicker { font-size: .875rem; color: var(--ink-600); }

/* ---- closer ---- */
.ss-close { text-align: center; background: var(--sand-50); }
.ss-close-inner { max-width: 680px; }
.ss-close-inner .ss-body a { color: var(--green-700); font-weight: 700; }

@media (max-width: 1024px) {
  .ss-overview-grid { gap: 48px; }
  .ss-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
  .ss-trips-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ss-trip-track { grid-auto-columns: calc(42% - 12px); }
  .ss-style-track { grid-auto-columns: calc(33.333% - 16px); }
  .ss-chat-panel { grid-template-columns: minmax(0, 1fr); padding: 48px; gap: 36px; }
  .ss-menu-name { display: none; }
}
@media (max-width: 720px) {
  .ss-hero { min-height: 78vh; }
  .ss-hero-inner { padding-block: 96px 110px; }
  .ss-hero-kicker { font-size: .75rem; letter-spacing: .14em; line-height: 1.6; }
  .ss-hero-shade { background:
    linear-gradient(180deg, rgba(9, 23, 21, .55) 0%, rgba(9, 23, 21, .45) 50%, rgba(9, 23, 21, .75) 100%); }
  .ss-overview-media > img:first-child { aspect-ratio: 4 / 3; }
  .ss-menu { top: 64px; }
  .ss-menu-inner { gap: 12px; min-height: 52px; }
  .ss-menu ul { margin: 0; flex: 1; }
  .ss-menu li a { padding: 15px 10px; font-size: .875rem; }
  .ss-menu-cta { display: none; }
  .ss #overview, .ss #trips, .ss #compare, .ss #guide, .ss #faqs, .ss #styles { scroll-margin-top: 116px; }
  .ss-facts ul { justify-content: flex-start; flex-direction: column; gap: 10px; padding-block: 18px; }
  .ss-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ss-overview-media { padding-bottom: 40px; }
  .ss-overview-inset { right: 12px; width: 50%; }
  .ss-why { padding-block: 64px; }
  .ss-why-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ss-trips-intro .carousel-nav { display: none; }
  .ss-trip-track { grid-auto-columns: 80%; gap: 14px; }
  .ss-style-track { grid-auto-columns: 70%; gap: 14px; }
  .ss-chat { padding-bottom: 64px; }
  .ss-chat-panel { padding: 32px 22px; }
  .ss-table th, .ss-table td { padding: 14px 16px; font-size: .9375rem; }
  .ss-table tbody th { white-space: normal; }
}

/* ==========================================================================
   Country pages (pages/country.php)
   Layout after the owner's yellowzebrasafaris.com/tanzania/ reference: hero
   with a thumbnail strip, pill menu, big intro, photo + checklist split,
   trips rail, pull quote, talk split, dark tabbed parks panel, rails, an
   accent band. The reference's yellow becomes the site's mint and green.
   ========================================================================== */
.cp { background: #fff; }
.cp-kicker {
  display: block; margin: 0 0 18px; font-size: .75rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-600);
}
.cp-display {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 500; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--green-950); margin: 0 0 22px;
}
.cp-display-light { color: #fff; }
.cp-h2 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 22px; }
/* The last word of a heading used to carry a mint highlighter stroke, after
   the reference. Removed at the owner's request; the span stays so it can be
   styled again without touching the template. */
.cp-mark { white-space: nowrap; }
.cp-lede { margin: 0 auto; max-width: 620px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-600); }
.cp-lede-left { margin: 0 0 32px; }
.cp-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 24px;
  border: 1.5px solid var(--green-950); border-radius: 999px; background: transparent;
  color: var(--green-950); font-weight: 700; font-size: .875rem; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cp-pill:hover { background: var(--green-950); color: #fff; }
.cp-pill-light { border-color: rgba(255, 255, 255, .7); color: #fff; }
.cp-pill-light:hover { background: #fff; border-color: #fff; color: var(--green-950); }
.cp-pill-solid { background: #fff; border-color: #fff; }
.cp-pill-solid:hover { background: var(--green-950); border-color: var(--green-950); color: #fff; }
/* A faint organic texture behind some bands, like the reference's paper. */
.cp-textured {
  background-color: var(--sand-50);
  background-image:
    radial-gradient(ellipse 40% 60% at 12% 20%, rgba(227, 222, 211, .55), transparent 70%),
    radial-gradient(ellipse 35% 55% at 88% 80%, rgba(227, 222, 211, .5), transparent 70%);
}

/* ---- hero with thumbnails ---- */
.cp-hero { position: relative; height: min(78vh, 760px); min-height: 460px; overflow: hidden; background: var(--green-950); }
.cp-hero-frames, .cp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-hero-img { object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.cp-hero-img.is-on { opacity: 1; }
.cp-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 23, 21, .15) 0%, rgba(9, 23, 21, 0) 40%, rgba(9, 23, 21, .55) 100%); }
.cp-hero-inner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; padding-bottom: 38px; text-align: center;
}
.cp-hero-title {
  color: #fff; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 500; line-height: 1.02;
  letter-spacing: -0.02em; margin: 0 0 22px; text-shadow: 0 2px 24px rgba(9, 23, 21, .45);
}
.cp-thumbs { display: flex; align-items: center; gap: 12px; max-width: 100%; }
.cp-thumb-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.cp-thumb-row::-webkit-scrollbar { display: none; }
.cp-thumb {
  flex: none; width: 96px; height: 64px; padding: 0; border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 10px; overflow: hidden; cursor: pointer; background: none; opacity: .8;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-thumb:hover { opacity: 1; }
.cp-thumb.is-on { opacity: 1; border-color: #fff; transform: translateY(-3px); }
.cp-thumb-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--green-400); color: var(--green-950); display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.cp-thumb-arrow:hover { background: #fff; }
.cp-crumbs { padding-block: 18px 0; }
.cp-crumbs .breadcrumbs { margin: 0; font-size: .8125rem; color: var(--ink-600); }

/* ---- pill menu ---- */
.cp-tabs { position: sticky; top: 72px; z-index: 60; padding-block: 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); }
.cp-tabs ul {
  list-style: none; margin: 0 auto; padding: 5px; display: flex; gap: 2px; width: fit-content; max-width: calc(100% - 40px);
  border-radius: 999px; background: var(--sand-100); overflow-x: auto; scrollbar-width: none;
}
.cp-tabs ul::-webkit-scrollbar { display: none; }
.cp-tabs a {
  display: block; padding: 11px 18px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  font-size: .875rem; font-weight: 700; color: var(--ink-600); transition: background-color .2s ease, color .2s ease;
}
.cp-tabs a:hover { color: var(--green-950); }
.cp-tabs a[aria-current="true"] { background: var(--green-950); color: #fff; }
.cp #overview, .cp #trips, .cp #parks, .cp #glance, .cp #lodges, .cp #journal, .cp #guide, .cp #faqs { scroll-margin-top: 150px; }

/* ---- intro ---- */
.cp-intro { padding-block: 44px 72px; }
.cp-intro .container > * { max-width: 820px; }
.cp-intro-title { font-size: clamp(2.125rem, 4vw, 3.25rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 22px; }
.cp-intro-copy { font-size: clamp(1.1875rem, 1.8vw, 1.5rem); line-height: 1.55; color: var(--ink-900); margin: 0; }
.cp-intro-more { margin-top: 16px; font-size: 1.125rem; color: var(--ink-600); }
.cp-facts { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cp-facts li { padding: 8px 16px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-weight: 700; font-size: .875rem; }

/* ---- split ---- */
.cp-split { padding-block: 72px; }
.cp-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cp-split-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.cp-checks { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 16px; }
.cp-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 1rem; line-height: 1.6; color: var(--ink-900); }
.cp-check {
  width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--green-400); color: var(--green-950);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- trips ---- */
.cp-trips { padding-block: 80px; overflow: hidden; }
.cp-center-head { text-align: center; margin-bottom: 40px; }
.cp-center-head .cp-display { margin-bottom: 18px; }
.cp-rail-wrap { position: relative; }
.cp-rail-wrap > .carousel-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 18px; }
/* A short row of trips sits centred; `safe` keeps a rail that overflows
   scrollable from its first card. */
.cp-trip-track { grid-auto-columns: calc(25% - 18px); gap: 24px; justify-content: safe center; }
.cp-trip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; text-decoration: none; color: var(--green-950); }
.cp-trip img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-bottom: 12px;
  transition: transform .4s ease;
}
.cp-trip:hover img { transform: scale(1.02); }
.cp-trip-title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 500; line-height: 1.2; }
.cp-trip:hover .cp-trip-title { color: var(--green-600); }
.cp-trip-meta { font-size: .8125rem; color: var(--ink-600); }
.cp-trip-price { font-size: 1rem; color: var(--ink-900); font-weight: 600; }
.cp-trips .pkg-filter { margin-top: 0; }

/* ---- quote ---- */
.cp-quote { padding-block: 72px; }
.cp-quote-inner { max-width: 880px; margin: 0 auto; }
.cp-quote blockquote {
  margin: 0 0 26px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.3; font-weight: 400; color: var(--green-950);
}
.cp-quote figcaption { display: flex; align-items: center; gap: 14px; }
.cp-quote figcaption > span:nth-child(2) { display: flex; flex-direction: column; }
.cp-quote strong { font-size: 1rem; color: var(--ink-900); }
.cp-quote figcaption span span { font-size: .8125rem; color: var(--ink-600); }
.cp-quote-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green-700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.125rem;
}

/* ---- talk ---- */
.cp-talk { padding-block: 88px; }
.cp-talk-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.cp-talk-copy { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-900); max-width: 520px; margin: 0 0 30px; }
.cp-talk-actions, .cp-expert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cp-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-950); text-decoration: none; }
.cp-phone:hover { color: var(--green-600); }
.cp-talk-img { width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }

/* ---- dark tabbed parks ---- */
.cp-reasons {
  padding-block: 88px; color: #fff;
  background-color: var(--green-950);
  background-image:
    radial-gradient(ellipse 30% 50% at 85% 10%, rgba(78, 195, 167, .08), transparent 70%),
    radial-gradient(ellipse 35% 45% at 10% 90%, rgba(78, 195, 167, .07), transparent 70%);
}
.cp-reasons .cp-display { margin-bottom: 44px; }
.cp-reasons-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.cp-reasons-list { display: flex; flex-direction: column; align-items: flex-start; }
.cp-reason-tab {
  border: 0; background: none; padding: 7px 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.2;
  color: rgba(255, 255, 255, .45); transition: color .2s ease;
}
.cp-reason-tab:hover { color: rgba(255, 255, 255, .8); }
.cp-reason-tab[aria-selected="true"] { color: #fff; }
.cp-reason-tab:focus-visible { outline: 2px solid var(--green-400); outline-offset: 4px; border-radius: 4px; }
.cp-reason-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.cp-reason-panel[hidden] { display: none; }
.cp-reason-panel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.cp-reason-text h3 { color: #fff; font-size: 1.75rem; font-weight: 500; margin: 0 0 10px; }
.cp-reason-tagline { font-size: 1.125rem; line-height: 1.55; color: rgba(255, 255, 255, .88); margin: 0 0 22px; }
.cp-reason-text dl { margin: 0 0 28px; display: grid; gap: 4px; }
.cp-reason-text dt { font-size: .6875rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green-400); margin-top: 12px; }
.cp-reason-text dd { margin: 0; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, .85); }

/* ---- table ---- */
.cp-glance { padding-block: 80px; background: var(--sand-50); }
.cp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.cp-table th, .cp-table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.cp-table thead th { background: var(--green-950); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; border: 0; }
.cp-table tbody th { color: var(--green-800); font-weight: 700; }
.cp-table tbody tr:last-child > * { border-bottom: 0; }

/* ---- rails: lodges, journal ---- */
.cp-rail-section { padding-block: 72px 32px; }
.cp-rail-section + .cp-rail-section { padding-top: 32px; }
.cp-rail-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 30px; }
.cp-rail-head .cp-h2 { margin: 0; }
.cp-rail-tools { display: flex; align-items: center; gap: 16px; }
.cp-rail-tools .carousel-nav { display: flex; gap: 10px; }
.cp-card-track { grid-auto-columns: calc(25% - 18px); gap: 24px; }
.cp-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--green-950); }
.cp-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-bottom: 10px; transition: transform .4s ease; }
.cp-card-post img { aspect-ratio: 4 / 5; }
.cp-card:hover img { transform: translateY(-4px); }
.cp-card-meta { font-size: .75rem; color: var(--ink-600); }
.cp-card-name { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }
.cp-card-post .cp-card-name { font-size: 1.375rem; font-weight: 500; }
.cp-card:hover .cp-card-name { color: var(--green-600); }
.cp-card-text {
  font-size: .875rem; line-height: 1.5; color: var(--ink-600);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- accent band ---- */
.cp-expert {
  padding-block: 88px; text-align: center; color: var(--green-950);
  background-color: var(--green-400);
  background-image:
    radial-gradient(ellipse 45% 70% at 15% 30%, rgba(255, 255, 255, .18), transparent 70%),
    radial-gradient(ellipse 40% 60% at 85% 75%, rgba(20, 94, 79, .18), transparent 70%);
}
.cp-expert-inner { max-width: 720px; }
.cp-expert p { font-size: 1.1875rem; line-height: 1.6; margin: 0 0 30px; }
.cp-expert-actions { justify-content: center; }

@media (max-width: 1024px) {
  .cp-trip-track, .cp-card-track { grid-auto-columns: calc(33.333% - 16px); }
  .cp-split-grid, .cp-talk-grid { gap: 40px; }
  .cp-reasons-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cp-reasons-list { flex-direction: row; flex-wrap: wrap; gap: 4px 22px; }
}
@media (max-width: 720px) {
  .cp-hero { height: 70vh; min-height: 420px; }
  .cp-thumb { width: 64px; height: 46px; }
  .cp-thumb-arrow { width: 38px; height: 38px; }
  .cp-tabs { top: 64px; padding-block: 12px; }
  .cp-tabs ul { max-width: calc(100% - 24px); }
  .cp-tabs a { padding: 9px 14px; font-size: .8125rem; }
  .cp #overview, .cp #trips, .cp #parks, .cp #glance, .cp #lodges, .cp #journal, .cp #guide, .cp #faqs { scroll-margin-top: 128px; }
  .cp-intro { padding-block: 28px 48px; }
  .cp-split, .cp-trips, .cp-quote, .cp-talk, .cp-reasons, .cp-glance, .cp-expert { padding-block: 56px; }
  .cp-split-grid, .cp-talk-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-talk-img { max-width: none; aspect-ratio: 4 / 3; }
  .cp-trip-track, .cp-card-track { grid-auto-columns: 72%; gap: 14px; }
  .cp-rail-wrap > .carousel-nav, .cp-rail-tools .carousel-nav { display: none; }
  .cp-reason-panel { grid-template-columns: minmax(0, 1fr); }
  .cp-reason-panel img { aspect-ratio: 4 / 3; }
  .cp-reasons-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .cp-reason-tab { white-space: nowrap; font-size: 1.25rem; }
  .cp-table th, .cp-table td { padding: 14px 16px; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-hero-img { transition: none; }
}
.cp-quote-more { margin-left: auto; font-size: .875rem; font-weight: 700; color: var(--green-700); }
@media (max-width: 720px) { .cp-quote figcaption { flex-wrap: wrap; } .cp-quote-more { margin-left: 66px; } }

/* ---- WeChat popup (partials/footer.php) ----
   Measured from the previous website's Popup Maker "lightbox" theme: white box
   30% of the viewport wide (full width on a phone), 18px padding, an 8px solid
   black border with 3px corners and a 30px dark glow, centred in the window
   over a 60% black overlay; a 26px round black close button with a 2px
   white ring, centred on the top-right corner; a 350ms fade. */
.wechat-dialog {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: 30%; min-width: 300px; max-width: calc(100% - 32px);
  max-height: calc(100vh - 48px); padding: 0; overflow: visible;
  border: 8px solid #000; border-radius: 3px; background: #fff; color: #1e1e1e;
  box-shadow: 0 0 30px #020202;
  opacity: 0; transition: opacity .35s ease;
}
.wechat-dialog.is-open { opacity: 1; }
.wechat-dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background-color .35s ease; }
.wechat-dialog.is-open::backdrop { background: rgba(0, 0, 0, .6); }
/* The box scrolls on a short screen; the close button stays on its corner. */
.wechat-content { max-height: calc(100vh - 64px); overflow-y: auto; padding: 18px; text-align: center; }
.wechat-dialog h3 { margin: 0 0 30px; font-size: 1.375rem; font-weight: 400; line-height: 1.2; color: #1e1e1e; }
.wechat-dialog img { display: block; width: 100%; height: auto; margin: 0 auto 30px; }
.wechat-dialog p { margin: 0; font-size: 1rem; color: #000; }
.wechat-close {
  position: absolute; top: -13px; right: -13px; width: 26px; height: 26px; padding: 0;
  border: 2px solid #fff; border-radius: 26px; background: #000; color: #fff;
  font-family: Arial, sans-serif; font-size: 24px; font-weight: 100; line-height: 20px; cursor: pointer;
  box-shadow: 0 0 15px 1px rgba(2, 2, 2, .75);
}
.wechat-close:focus-visible { outline: 3px solid var(--green-400); outline-offset: 2px; }
/* The page holds still behind it, as it did on the old site. */
html.wechat-open { overflow: hidden; }
@media (max-width: 640px) {
  .wechat-dialog { width: calc(100% - 32px); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wechat-dialog, .wechat-dialog::backdrop { transition: none; }
}

/* ---- header with the Contact Us item ----
   A seventh menu item made the row too long for the 1200px container: the
   logo was squeezed to a sliver and "Contact Us" broke onto two lines. The
   logo no longer shrinks, labels never wrap, and the links sit a little
   closer together. */
@media (min-width: 1025px) {
  .brand { flex-shrink: 0; }
  .header-inner { gap: 20px; }
  .nav-menu > .nav-item > a { white-space: nowrap; padding-inline: 10px; }
  .header-cta { gap: 14px; }
  /* The number is in the Contact Us panel now, and beside seven items it
     pushed Plan My Safari 53px past the container. */
  .header-cta .phone-link { display: none; }
}
@media (min-width: 1025px) and (max-width: 1140px) {
  .header-inner { gap: 12px; }
  .nav-menu > .nav-item > a { padding-inline: 7px; font-size: .875rem; }
  .panel-toggle { margin-left: -8px; }
}

/* Wide comparison tables in a journal article step out of the reading column
   on a desktop, so seven columns are not squeezed into 700px. On a phone they
   keep the column width and scroll sideways inside their wrapper. */
@media (min-width: 900px) {
  /* Only tables of five columns or more; a two-column table reads fine in
     the column and looked stranded when it stepped out. */
  .article-prose .prose-table-wrap:has(th:nth-child(5)) {
    width: min(1060px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%);
  }
  .article-prose .prose-table-wrap:has(th:nth-child(5)) table { width: 100%; font-size: .9375rem; }
  .article-prose .prose-table-wrap:has(th:nth-child(5)) td a { white-space: nowrap; }
  .article-prose .prose-table-wrap table { width: 100%; }
}

/* ==========================================================================
   Kilimanjaro routes guide (pages/routes-guide.php)
   After altezzatravel.com/climbing-kilimanjaro/routes: rounded banner, rating
   and social strip, narrow reading column, tall route photo cards, centred
   section headings with a short rule beneath, contact buttons before the close.
   ========================================================================== */
.rg { padding-top: 28px; background: var(--sand-50); }
.rg-hero {
  position: relative; display: grid; place-items: center; min-height: 420px; overflow: hidden;
  border-radius: 20px; background: var(--green-950); text-align: center; color: #fff;
}
.rg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.rg-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 23, 21, .35), rgba(9, 23, 21, .55)); }
.rg-hero-text { position: relative; z-index: 1; padding: 60px 24px; max-width: 820px; }
.rg-hero-text .breadcrumbs { justify-content: center; margin-bottom: 18px; font-size: .8125rem; }
.rg-hero-text .breadcrumbs ol { justify-content: center; }
.rg-hero-text .breadcrumbs, .rg-hero-text .breadcrumbs a { color: rgba(255, 255, 255, .85); }
.rg-hero h1 {
  color: #fff; margin: 0 0 12px; font-size: clamp(2.125rem, 4.4vw, 3.25rem); line-height: 1.1;
  text-shadow: 0 2px 20px rgba(9, 23, 21, .45);
}
.rg-hero-text > p { margin: 0; font-size: 1.125rem; color: rgba(255, 255, 255, .92); }

/* Rating in a white pill that overlaps the banner's lower edge; social pill beside it. */
.rg-badges {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px; margin: -30px auto 44px;
}
.rg-rating, .rg-social {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 20px;
  background: #fff; border-radius: 999px; box-shadow: 0 8px 24px -10px rgba(13, 31, 29, .3); text-decoration: none;
}
.rg-rating img { width: auto; height: 22px; }
.rg-rating-score { display: flex; flex-direction: column; line-height: 1.15; color: var(--ink-900); }
.rg-rating-score strong { font-size: 1.0625rem; }
.rg-rating-score span { font-size: .75rem; color: var(--ink-600); text-decoration: underline; }
.rg-social { gap: 4px; padding: 10px 14px; }
.rg-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; color: var(--green-800);
}
.rg-social a:hover { background: var(--green-100); color: var(--green-700); }

/* Reading column. */
.rg-column { max-width: 780px; margin-inline: auto; }
.rg-prose { font-size: 1.0625rem; }
.rg-prose h2 {
  margin: 72px 0 26px; text-align: center; font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.rg-prose h2::after {
  content: ""; display: block; width: 64px; height: 3px; margin: 16px auto 0;
  border-radius: 3px; background: var(--green-400);
}
.rg-prose h3 { margin: 38px 0 12px; font-size: 1.3125rem; color: var(--green-950); scroll-margin-top: 96px; }
.rg-prose figure { margin: 30px 0; }
.rg-prose figure img { width: 100%; height: auto; border-radius: 16px; display: block; }
.rg-prose figcaption { margin-top: 8px; font-size: .875rem; font-style: italic; color: var(--ink-600); }
.rg-prose blockquote {
  margin: 34px 0; padding: 26px 30px; border: 0; border-radius: 16px;
  background: var(--sand-100); text-align: center; font-size: 1.0625rem;
}
.rg-prose blockquote p { margin: 0; }
.rg-prose ul { padding-left: 1.2em; }
.rg-prose li { margin-bottom: 6px; }

/* Wide table steps out of the column on a desktop. */
@media (min-width: 900px) {
  .rg-prose .prose-table-wrap { width: min(1100px, calc(100vw - 48px)); position: relative; left: 50%; transform: translateX(-50%); }
  .rg-prose .prose-table-wrap table { width: 100%; font-size: .9375rem; }
  .rg-prose .prose-table-wrap td a { white-space: nowrap; }
}

/* Route cards. */
.rg-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  max-width: 1000px; margin: 48px auto 20px;
}
.rg-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 5 / 7; padding: 22px; overflow: hidden; border-radius: 14px; color: #fff; text-decoration: none;
  background: var(--green-950); box-shadow: 0 14px 30px -18px rgba(13, 31, 29, .6);
}
.rg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.rg-card:hover img { transform: scale(1.05); }
.rg-card-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 23, 21, .55) 0%, rgba(9, 23, 21, 0) 32%, rgba(9, 23, 21, 0) 55%, rgba(9, 23, 21, .75) 100%);
}
.rg-card-top, .rg-card-bottom { position: relative; z-index: 1; }
.rg-card-top { display: flex; flex-direction: column; gap: 2px; }
.rg-card-name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.15; }
.rg-card-days { font-size: .9375rem; color: rgba(255, 255, 255, .9); }
.rg-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.rg-card-price { display: flex; flex-direction: column; line-height: 1.15; }
.rg-card-price span { font-size: .8125rem; font-weight: 700; }
.rg-card-price strong { font-size: 1.625rem; font-weight: 800; }
.rg-card-more {
  flex: none; padding: 8px 18px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 999px;
  font-size: .8125rem; font-weight: 800; transition: background-color .2s ease, color .2s ease;
}
.rg-card:hover .rg-card-more { background: #fff; color: var(--green-950); }

/* Contact pair before the closing words. */
.rg-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 44px auto 0; }
.rg-btn { background: var(--green-600); color: #fff; gap: 8px; }
.rg-btn:hover { background: var(--green-700); color: #fff; }

.rg + .section, .rg .container + aside { margin-top: 72px; }
.rg { padding-bottom: 0; }
.rg > .container { padding-bottom: 80px; }

@media (max-width: 900px) {
  .rg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rg { padding-top: 12px; }
  .rg-hero { min-height: 300px; border-radius: 14px; }
  .rg-badges { margin-top: -26px; }
  .rg-social { display: none; }
  .rg-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rg-card { aspect-ratio: 4 / 3.4; }
  .rg-prose h2 { margin-top: 56px; }
}
.rg-hero-text .breadcrumbs li[aria-current], .rg-hero-text .breadcrumbs li[aria-current] * { color: rgba(255, 255, 255, .72); }
@media (max-width: 560px) { .rg-hero-text .breadcrumbs li[aria-current] { display: none; } }
/* The routes guide went back to the journal hero, so the rating strip no
   longer overlaps a banner: it sits below the hero with ordinary spacing. */
.rg { padding-top: 0; }
.rg .rg-badges { margin: 32px auto 36px; }
/* Rating and social strip removed from the routes guide at the owner's request;
   the intro now opens straight under the hero. */
.rg > .container > .rg-column:first-child { margin-top: 48px; }
/* With 18px base text, the seven menu items no longer fit a 1025–1080px
   window; they step down a size there only. */
@media (min-width: 1025px) and (max-width: 1080px) {
  .nav-menu > .nav-item > a { font-size: .8125rem; padding-inline: 6px; }
  .header-cta .btn { padding-inline: 16px; font-size: .875rem; }
}

/* ---- Booking popup on tour pages (partials/booking-modal.php) ---- */
.booking-dialog {
  width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 40px); padding: 0; overflow-y: auto;
  border: 0; border-radius: var(--radius); background: #fff; color: var(--ink-900);
  box-shadow: 0 30px 80px rgba(9, 23, 21, .4);
}
.booking-dialog::backdrop { background: rgba(9, 23, 21, .6); }
.booking-dialog[open] { animation: booking-in .25s ease; }
@keyframes booking-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.booking-open { overflow: hidden; }
.booking-close {
  position: sticky; top: 12px; float: right; margin: 12px 12px -52px 0; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sand-100);
  color: var(--green-950); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.booking-close:hover { background: var(--green-100); }
.booking-head { padding: 28px 32px 18px; background: var(--sand-50); border-bottom: 1px solid var(--line); }
.booking-kicker { margin: 0 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green-600); }
.booking-head h2 { margin: 0 44px 8px 0; font-size: 1.5rem; line-height: 1.2; }
.booking-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: .875rem; color: var(--ink-600); }
.booking-meta span + span::before { content: "·"; margin-right: 16px; color: var(--line); }
.booking-error { margin: 16px 32px 0; padding: 10px 14px; border-radius: var(--radius-sm); background: #fdecea; color: #b3261e; font-weight: 700; font-size: .9375rem; }
.booking-form { padding: 18px 32px 28px; }
.booking-group { margin: 0 0 18px; padding: 0; border: 0; }
.booking-group legend { margin-bottom: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--green-950); }
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.booking-grid label { display: flex; flex-direction: column; gap: 5px; font-size: .8125rem; font-weight: 700; color: var(--ink-600); }
.booking-grid label b { color: #b3261e; font-weight: 700; }
.booking-grid .booking-wide { grid-column: 1 / -1; }
.booking-grid input:not([type="checkbox"]), .booking-grid select, .booking-grid textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink-900);
}
.booking-grid textarea { min-height: 84px; resize: vertical; }
.booking-grid input:focus, .booking-grid select:focus, .booking-grid textarea:focus { outline: 2px solid var(--green-600); outline-offset: 1px; border-color: var(--green-600); }
.booking-grid .booking-check { flex-direction: row; align-items: center; align-self: end; gap: 8px; min-height: 46px; font-weight: 600; color: var(--ink-900); }
.booking-check input { width: 18px; height: 18px; accent-color: var(--green-600); }
.booking-submit { width: 100%; }
.booking-note { margin: 10px 0 0; text-align: center; font-size: .8125rem; color: var(--ink-600); }
.booking-done { padding: 44px 36px 36px; text-align: center; }
.booking-done-icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 50%; background: var(--green-100); color: var(--green-700); }
.booking-done h2 { margin: 0 0 12px; font-size: 1.5rem; }
.booking-done p { margin: 0 auto 24px; max-width: 46ch; color: var(--ink-600); }
@media (max-width: 560px) {
  .booking-dialog { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; }
  .booking-head { padding: 22px 20px 14px; }
  .booking-form { padding: 16px 20px 24px; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-grid .booking-check { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .booking-dialog[open] { animation: none; } }
@media (max-width: 560px) { .booking-meta span + span::before { content: none; } .booking-meta { gap: 2px 14px; } }

/* ---- header with the emblem logo ----
   The emblem-and-wordmark lockup is wider than the old text wordmark, so the
   menu tightens a little on desktop and phones show the emblem alone. */
.brand picture { display: block; line-height: 0; }
@media (min-width: 1025px) {
  .brand img { height: 44px; }
  .nav-menu > .nav-item > a { font-size: .875rem; padding-inline: 8px; }
  .header-inner { gap: 16px; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
  .brand img { height: 38px; }
  .nav-menu > .nav-item > a { font-size: .8125rem; padding-inline: 6px; }
  .panel-toggle { margin-left: -9px; }
  .header-cta .btn { padding-inline: 14px; font-size: .8125rem; }
}
@media (max-width: 560px) {
  .brand img { height: 44px; width: 44px; }
}