/* ============================================================================
   altezza.css — the page-level composition, modelled on altezzatravel.com.

   The reference's grammar, in order of how much it defines the look:
     1. a thin utility bar above a white header with centred uppercase nav
     2. full-bleed hero photography with a floating white booking card
     3. centred section headings, each underlined by a short gold rule
     4. photo cards whose title sits over the image, not under it
     5. deep navy feature cards as the one dark note on a white page
     6. grass-green pill buttons and soft, low, cool-grey shadows

   Loaded after components.css so it builds on the shared button, card and
   form primitives rather than restating them.
   ========================================================================= */

/* ================================================================ BANDS == */
.band { background: var(--surface-0); }
.band-alt { background: var(--surface-2); }
.band-navy { background: var(--navy-900); color: var(--on-dark-1); }
.band-navy .sec-title,
.band-navy h2,
.band-navy h3 { color: var(--on-dark-1); }
.band-navy .sec-sub,
.band-navy p { color: var(--on-dark-2); }

/* ====================================================== SECTION HEADINGS
   Centred, with a short gold rule beneath — the reference's most repeated
   device, used on nearly every section. */
.sec-head-c {
  text-align: center;
  max-width: 62rem;
  margin-inline: auto;
  margin-bottom: var(--sp-xl);
}
.sec-title {
  /* The reference sets every section heading at 30px / 600 centred, which is
     markedly smaller than a typical editorial h2 and is part of why its pages
     read as calm rather than shouty. Ours was running to ~42px at 1440.
     Measured off altezzatravel.com, not estimated. */
  font-size: clamp(1.5rem, 1.18rem + 1.05vw, 1.95rem);
  font-weight: var(--w-head);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.sec-head-c .sec-title { text-wrap: balance; }
/* The rule belongs to the heading, not the block: on the reference it sits
   immediately under the title and above any standfirst. */
.sec-head-c .sec-title::after,
.rule-gold {
  content: '';
  display: block;
  inline-size: 72px;
  block-size: 2px;
  margin: 1.1rem auto 0;
  background: var(--rule);
  border: 0;
  border-radius: 2px;
}
.sec-head-c.has-sub .sec-title::after { margin-bottom: 1.25rem; }
.sec-sub {
  color: var(--text-2);
  max-width: 60ch;
  margin-inline: auto;
  line-height: var(--lh-loose);
}
.band-navy .sec-head-c .sec-title::after { background: var(--gold-500); }

/* Left-aligned variant, for pages needing a heading with an action beside it */
.sec-head { display: grid; gap: var(--sp-s); margin-bottom: var(--sp-l); }
@media (width >= 60rem) {
  .sec-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-l); }
}

/* ========================================================== UTILITY BAR == */
.utility-bar {
  block-size: var(--bar-h);
  background: var(--surface-bar);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--text-2);
}
.utility-inner {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-m);
}
.utility-rating { display: flex; align-items: center; gap: 0.45rem; }
/* Sizes the direct icon as well as the old star row. Without the first
   selector an <svg> placed straight into .utility-rating inherits the sprite's
   intrinsic size and renders enormous. */
.utility-rating > svg { inline-size: 0.95rem; block-size: 0.95rem; color: var(--accent); flex: none; }
.utility-rating .stars svg { inline-size: 0.85rem; block-size: 0.85rem; }
.utility-sep { inline-size: 1px; block-size: 16px; background: var(--line); flex: none; }
.utility-bar a { color: var(--text-2); text-decoration: none; }
.utility-bar a:hover { color: var(--accent); }
@media (width < 56rem) { .utility-bar { display: none; } }

/* ================================================================ HERO == */
.hero-a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-block-size: min(76svh, 42rem);
  padding-block: var(--sp-2xl);
}
.hero-a .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-a .hero-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* A light, even veil rather than a heavy gradient: the reference keeps its
   hero photography bright and relies on weight and shadow for legibility. */
.hero-a .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, rgb(18 20 18 / 58%) 0%, rgb(18 20 18 / 34%) 42%, rgb(18 20 18 / 10%) 72%, transparent 100%),
    linear-gradient(180deg, rgb(18 20 18 / 22%) 0%, transparent 34%, rgb(18 20 18 / 26%) 100%);
}

.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--sp-l); align-items: center; }
@media (width >= 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 25rem; gap: var(--sp-2xl); }
}

.hero-copy { color: #fff; }
.hero-a h1 {
  font-size: var(--t-4xl);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 14ch;
  color: #fff;
  text-shadow: 0 2px 26px rgb(0 0 0 / 42%);
}
.hero-a .hero-lede {
  margin-top: var(--sp-s);
  max-width: 44ch;
  color: #eceae4;
  font-size: var(--t-md);
  text-shadow: 0 1px 12px rgb(0 0 0 / 55%);
}

/* -- award badges, bottom-left of the hero */
.awards { display: flex; flex-wrap: wrap; gap: var(--sp-m) var(--sp-xl); margin-top: var(--sp-xl); }
.award { display: flex; align-items: center; gap: 0.7rem; color: #fff; max-inline-size: 22rem; }
.award svg {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  color: var(--gold-300);
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 55%));
}
.award b {
  display: block;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--gold-300);
  text-shadow: 0 1px 8px rgb(0 0 0 / 65%);
}
.award span span { font-size: var(--t-xs); color: #e8e4dc; text-shadow: 0 1px 8px rgb(0 0 0 / 65%); }

/* ======================================================== BOOKING CARD ==
   The floating white panel on the right of the hero. */
.booking { background: #fff; border-radius: var(--r-l); padding: var(--sp-m); box-shadow: var(--shadow-card); }
.booking h2 { font-size: var(--t-md); font-weight: var(--w-head); color: var(--text-1); margin-bottom: 0.7rem; }
.booking-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--text-2);
  margin: 0.9rem 0 0.4rem;
}
.booking-note {
  display: block;
  text-align: center;
  margin-top: 0.6rem;
  font-size: var(--t-xs);
  color: var(--text-3);
}

/* the Safari / Kilimanjaro style segmented switch */
.switcher {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-m);
  background: var(--surface-3);
}
.switcher button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--r-s);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-soft),
              color var(--d-fast) var(--e-soft),
              box-shadow var(--d-fast) var(--e-soft);
}
.switcher button svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.switcher button:hover { color: var(--text-1); }
.switcher button[aria-pressed='true'] { background: #fff; color: var(--text-1); box-shadow: var(--shadow-1); }
.switcher button[aria-pressed='true'] svg { color: var(--accent); }

/* ========================================================= PROOF STRIP == */
.proof {
  display: grid;
  gap: 1px;
  background: var(--line);
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--line);
}
@media (width >= 56rem) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof-item {
  background: var(--surface-0);
  padding: var(--sp-m) var(--sp-s);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}
.proof-item svg { inline-size: 1.6rem; block-size: 1.6rem; color: var(--accent); flex: none; }
.proof-item b { display: block; font-size: var(--t-sm); font-weight: 750; line-height: 1.25; }
.proof-item span { font-size: var(--t-xs); color: var(--text-3); }

/* =================================================== DUO — the two cards
   Big photo panels with the title over the image and a ghost pill at the
   foot, as the reference introduces its two product lines. */
.duo { display: grid; gap: var(--sp-m); grid-template-columns: 1fr; }
@media (width >= 50rem) { .duo { grid-template-columns: 1fr 1fr; } }

.panel {
  position: relative;
  display: grid;
  align-content: space-between;
  min-block-size: 20rem;
  padding: var(--sp-l) var(--sp-m);
  border-radius: var(--r-l);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff;
  transition: box-shadow var(--d-base) var(--e-out), translate var(--d-base) var(--e-out);
}
.panel:hover { box-shadow: var(--shadow-3); translate: 0 -4px; }
.panel:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.panel .panel-media { position: absolute; inset: 0; z-index: -2; }
.panel .panel-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--d-epic) var(--e-out);
}
.panel:hover .panel-media img { scale: 1.06; }
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(10 14 18 / 58%) 0%, rgb(10 14 18 / 18%) 42%, rgb(10 14 18 / 48%) 100%);
}
.panel h3 { font-size: var(--t-xl); font-weight: var(--w-head); color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / 45%); }
.panel p { margin-top: 0.3rem; color: #e8e4dc; font-size: var(--t-base); text-shadow: 0 1px 12px rgb(0 0 0 / 55%); }
.panel .btn-on-photo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid rgb(255 255 255 / 70%);
  background: rgb(255 255 255 / 14%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.panel .btn-on-photo::before { content: ''; position: absolute; inset: 0; }
.panel:hover .btn-on-photo { background: #fff; color: var(--text-1); border-color: #fff; }

/* ======================================================= FEATURE CARDS ==
   Deep navy, with a large watermark glyph and an uppercase title — the one
   dark note on a white page. */
.features { display: grid; gap: var(--sp-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.feature {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.4rem;
  min-block-size: 13.5rem;
  padding: var(--sp-m);
  border-radius: var(--r-m);
  background: linear-gradient(155deg, var(--navy-700) 0%, var(--navy-900) 62%);
  color: var(--on-dark-1);
  overflow: hidden;
  isolation: isolate;
  transition: translate var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.feature:hover { translate: 0 -4px; box-shadow: var(--shadow-3); }
.feature-mark {
  position: absolute;
  inset: -1.2rem -1.2rem auto auto;
  z-index: -1;
  inline-size: 8.5rem;
  block-size: 8.5rem;
  color: #fff;
  opacity: 0.1;
}
.feature h3 {
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.3;
  color: #fff;
}
.feature p { font-size: var(--t-xs); color: var(--on-dark-2); line-height: 1.5; }
.feature a { color: var(--gold-300); font-weight: 700; font-size: var(--t-xs); }

/* ================================================================ TABS == */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: var(--sp-l); }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.35rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-0);
  font-size: var(--t-sm);
  font-weight: 650;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--e-soft),
              color var(--d-fast) var(--e-soft),
              border-color var(--d-fast) var(--e-soft);
}
.tab svg { inline-size: 1.05em; block-size: 1.05em; }
.tab:hover { border-color: var(--accent); color: var(--text-1); }
.tab[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ========================================================== TOUR CARDS ==
   Photo-led, with the title over the image and the price beneath. */
.tours { display: grid; gap: var(--sp-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }

/* ---------------------------------------------------------------------------
   TRIP RAIL — the homepage variant, as on the reference: one horizontal row
   that runs off the right edge so it is visibly incomplete, inviting a scroll.
   journeys.html keeps the grid, because that page is the full collection and a
   rail would hide most of it behind a gesture.

   Built on native overflow with scroll-snap, so it works with no JavaScript at
   all: touch, trackpad, shift-wheel and the arrow keys all scroll it. The
   buttons are an enhancement that home.js adds behaviour to; if the script
   never runs they are hidden rather than left dead.
   --------------------------------------------------------------------------- */
.rail-wrap { position: relative; }

.tours.is-rail {
  display: flex;
  grid-template-columns: none;
  gap: var(--sp-m);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* bleed to both viewport edges, then pad back in so the first card still
     lines up with the shell and the last one can reach the middle */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: 0.35rem;
  scroll-padding-inline-start: var(--gutter);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: no-preference) {
  .tours.is-rail { scroll-behavior: smooth; }
}

.tours.is-rail > .tour {
  flex: 0 0 clamp(15.5rem, 74vw, 19rem);
  scroll-snap-align: start;
}

/* A focusable scroll container must show that it has focus. */
.tours.is-rail:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-m); }

.rail-nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 4;
  inline-size: 44px;
  block-size: 44px;
  display: none; /* shown by home.js once it can drive them */
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgb(255 255 255 / 96%);
  color: var(--text-1);
  box-shadow: var(--shadow-m);
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.rail-wrap[data-rail-ready='true'] .rail-nav { display: grid; }
.rail-nav:hover { background: #fff; }
.rail-nav[disabled] { opacity: 0.35; cursor: default; }
.rail-nav svg { inline-size: 18px; block-size: 18px; }
.rail-prev { inset-inline-start: calc(var(--gutter) * -1 + 0.25rem); }
.rail-next { inset-inline-end: calc(var(--gutter) * -1 + 0.25rem); }

/* On narrow screens the buttons would sit on top of the cards; touch scrolling
   is the natural gesture there anyway. */
@media (width < 60rem) {
  .rail-wrap[data-rail-ready='true'] .rail-nav { display: none; }
}

/* ---------------------------------------------------------------------------
   TRIP CARD — full-bleed overlay, as on the reference.

   The whole card is one portrait photograph. Title and chips sit over the top,
   price and action over the bottom, and there is no white body panel. A single
   line of access copy is kept between them: on this site that line is the
   product, so it earns its place where the reference has none.

   The card is a flex column with the media absolutely behind it, so the top
   block and the bottom block position themselves without magic offsets and a
   two-line title cannot collide with the chips below it.
   --------------------------------------------------------------------------- */
.tour {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-m);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: var(--sp-s);
  transition: box-shadow var(--d-base) var(--e-out), translate var(--d-base) var(--e-out);
}
.tour:hover { box-shadow: var(--shadow-l); translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) { .tour:hover { translate: none; } }

/* `.tour > .tour-media` rather than `.tour-media`: the element also carries
   .img-wrap, whose `position: relative` lives in animations.css — loaded after
   this file — and wins at equal specificity. At one class it collapsed the
   media to zero height and the card rendered empty. */
.tour > .tour-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--surface-2); }
/* <picture> is inline and auto-height by default, so a percentage height on the
   <img> inside it resolves to auto and the photograph sits at its natural
   aspect instead of filling the card. */
.tour > .tour-media picture { display: block; inline-size: 100%; block-size: 100%; }
.tour > .tour-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--d-epic) var(--e-out); }
.tour:hover .tour-media img { scale: 1.06; }
@media (prefers-reduced-motion: reduce) { .tour:hover .tour-media img { scale: 1; } }

/* Two scrims rather than one flat wash: a flat overlay mutes the whole
   photograph to protect text that only sits at the two ends. */
.tour-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(10 16 22 / 66%) 0%, rgb(10 16 22 / 14%) 34%),
    /* The lower stop carries three lines of white text over whatever the
       photograph happens to be doing — a pale sky, a waterhole, bright sand.
       It is deliberately heavy: on an access-led site, text that is only
       readable over the dark photographs is text that fails half the time. */
    linear-gradient(to top, rgb(10 16 22 / 93%) 0%, rgb(10 16 22 / 80%) 26%, rgb(10 16 22 / 38%) 52%, transparent 74%);
}

.tour-head { position: relative; z-index: 2; display: grid; gap: 0.5rem; padding-inline-end: 2.9rem; }
.tour-over { position: static; color: #fff; }
.tour-over h2,
.tour-over h3 {
  font-size: var(--t-base);
  font-weight: 750;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 10px rgb(0 0 0 / 60%);
}
.tour-over h2 a, .tour-over h3 a { text-decoration: none; color: inherit; }
/* the whole card is one link; the save button sits above it on z-index */
.tour-over h2 a::before, .tour-over h3 a::before { content: ''; position: absolute; inset: 0; z-index: 3; }
.tour-over p { font-size: var(--t-xs); color: #e6e2da; margin-top: 0.15rem; text-shadow: 0 1px 8px rgb(0 0 0 / 65%); }

.tour-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

.tour-dur {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 92%);
  color: var(--text-1);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
}
/* em-sized, or the sprite renders at its own intrinsic size and swamps the card */
.tour-dur svg { inline-size: 0.95em; block-size: 0.95em; flex: none; }

.tour-flag {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-s);
  background: rgb(255 255 255 / 92%);
  color: var(--accent);
}
.tour-flag svg { inline-size: 16px; block-size: 16px; }
.tour-flag[data-level='partial'] { color: var(--gold); }

.tour-body { position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; }
.tour-body > p {
  font-size: var(--t-xs);
  color: #e8e5df;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgb(0 0 0 / 70%);
  /* two lines; the detail page carries the rest */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tour-foot { padding-top: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-s); }
.price > span { display: block; font-size: var(--t-xs); color: var(--text-3); line-height: 1.3; }
/* Access icons now ride in the chip row beside the duration, not pinned to a
   corner of the photograph. */
.tour-flags { position: static; z-index: 2; display: flex; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }

/* The price block sits over the photograph, so it takes the light treatment
   and a shadow rather than the card's ink colours. */
.tour .price > span { color: #d9d5cd; text-shadow: 0 1px 8px rgb(0 0 0 / 70%); }
.tour .price > b { color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 65%); }
.tour .price > small { color: #d9d5cd; text-shadow: 0 1px 8px rgb(0 0 0 / 70%); }

/* An outlined white pill, as the reference uses, instead of a green text link
   that would be unreadable against a photograph. */
.tour .tour-go {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--r-pill);
  background: rgb(14 20 26 / 30%);
  color: #fff;
  backdrop-filter: blur(3px);
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.tour:hover .tour-go { background: rgb(255 255 255 / 95%); border-color: #fff; color: var(--text-1); }

.price > b {
  display: block;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
}
.price > small { display: block; font-size: var(--t-xs); color: var(--text-3); line-height: 1.3; }
.tour-go { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--t-sm); font-weight: 700; color: var(--accent); white-space: nowrap; }
.tour-go svg { inline-size: 1em; block-size: 1em; transition: translate var(--d-fast) var(--e-out); }
.tour:hover .tour-go svg { translate: 0.25em 0; }
.tour[hidden] { display: none; }

/* ============================================================== REASONS == */
.reasons { display: grid; gap: var(--sp-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.reason {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: var(--sp-m);
  border-radius: var(--r-m);
  background: var(--surface-1);
  border: 1px solid var(--line);
  transition: border-color var(--d-base) var(--e-soft),
              box-shadow var(--d-base) var(--e-out),
              translate var(--d-base) var(--e-out);
}
.reason:hover { border-color: var(--rule); box-shadow: var(--shadow-2); translate: 0 -3px; }
.reason-i {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
  margin-bottom: 0.2rem;
}
.reason-i svg { inline-size: 22px; block-size: 22px; }
.reason h3 { font-size: var(--t-base); font-weight: 750; line-height: 1.3; }
.reason p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; }
.reason a { color: var(--accent); font-weight: 700; font-size: var(--t-sm); }

/* ============================================================ CHECKLIST == */
.checks { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.check {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: var(--sp-s) var(--sp-m);
  border-radius: var(--r-m);
  background: var(--surface-1);
  border: 1px solid var(--line);
}
.check svg { inline-size: 1.35rem; block-size: 1.35rem; flex: none; color: var(--accent); margin-top: 0.1rem; }
.check.is-not svg { color: var(--text-3); }
.check p { font-size: var(--t-sm); line-height: 1.55; }
.check b { font-weight: 750; }

/* ============================================================== REVIEWS == */
.reviews { display: grid; gap: var(--sp-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.review {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: var(--sp-m);
  border-radius: var(--r-m);
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.stars { display: flex; gap: 0.1rem; color: var(--star); }
.stars svg { inline-size: 1.05rem; block-size: 1.05rem; }
.review p { font-size: var(--t-sm); line-height: 1.65; color: var(--text-2); }
.review-by { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.2rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.avatar {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 800;
  font-size: var(--t-sm);
}
.review-by b { display: block; font-size: var(--t-sm); font-weight: 750; }
.review-by span { font-size: var(--t-xs); color: var(--text-3); }

/* =============================================================== IMPACT == */
.impact { display: grid; gap: var(--sp-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (width >= 48rem) { .impact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (width >= 78rem) { .impact { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.impact-item { text-align: center; padding: var(--sp-m) var(--sp-s); display: grid; gap: 0.3rem; align-content: start; }
/* Direct-child selectors only: the figure holds a nested <span class="count">,
   and a descendant `span` rule would shrink the number to caption size. */
.impact-item > b {
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.impact-item > strong { font-size: var(--t-sm); font-weight: 750; }
.impact-item > span { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }
.band-navy .impact-item > b { color: var(--gold-300); }
.band-navy .impact-item > strong { color: #fff; }
.band-navy .impact-item > span { color: var(--on-dark-2); }

/* ========================================================= ACCREDITATION */
.certs { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
@media (width >= 62rem) { .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r-m);
  background: var(--surface-1);
  border: 1px solid var(--line);
  transition: border-color var(--d-fast) var(--e-soft);
}
.cert:hover { border-color: var(--rule); }
.cert svg { inline-size: 1.7rem; block-size: 1.7rem; color: var(--gold); flex: none; }
.cert b { display: block; font-size: var(--t-sm); font-weight: 750; line-height: 1.25; }
.cert span { font-size: var(--t-xs); color: var(--text-3); }

/* ============================================================== CONSULT == */
.consult {
  display: grid;
  gap: var(--sp-l);
  align-items: center;
  padding: var(--sp-l);
  border-radius: var(--r-l);
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (width >= 54rem) { .consult { grid-template-columns: auto minmax(0, 1fr) auto; text-align: left; } }
.consult::before { content: ''; position: absolute; inset: 0 0 auto 0; block-size: 3px; background: var(--spectrum); }
.consult-face {
  inline-size: 86px;
  block-size: 86px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  justify-self: center;
  border: 2px solid var(--surface-2);
  background: var(--surface-2);
}
.consult-face img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.consult h2 { font-size: var(--t-xl); font-weight: var(--w-head); line-height: 1.15; }
.consult p { color: var(--text-2); font-size: var(--t-sm); margin-top: 0.35rem; max-width: 52ch; }
.consult-langs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; justify-content: center; }
@media (width >= 54rem) { .consult-langs { justify-content: flex-start; } }

/* ============================================================= ARTICLES == */
.articles { display: grid; gap: var(--sp-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.article {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-soft),
              box-shadow var(--d-base) var(--e-out),
              translate var(--d-base) var(--e-out);
}
.article:hover { border-color: transparent; box-shadow: var(--shadow-2); translate: 0 -3px; }
.article-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.article-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--d-epic) var(--e-out); }
.article:hover .article-media img { scale: 1.05; }
.article-body { padding: 0 var(--sp-m) var(--sp-m); display: grid; gap: 0.45rem; }
.article h3 { font-size: var(--t-base); font-weight: 750; line-height: 1.35; }
.article h3 a { text-decoration: none; }
.article h3 a::before { content: ''; position: absolute; inset: 0; }
.article p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; font-size: var(--t-xs); color: var(--text-3); }

/* ============================================================ SEARCHBAR == */
.searchbar {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 42px;
  padding: 0.25rem 0.3rem 0.25rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
}
.searchbar input { flex: 1; min-inline-size: 0; border: 0; background: none; font-size: var(--t-sm); outline: none; }
.searchbar input::placeholder { color: var(--text-3); }
.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.searchbar button {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  flex: none;
}
.searchbar button svg { inline-size: 16px; block-size: 16px; }

/* =============================================== HEADER FIT & NAV STYLE ==
   The reference centres an uppercase nav between the lockup and a single
   green action. Each part is given explicit shrink behaviour so the button
   can never be pushed off the edge. */
.header-inner { gap: clamp(0.6rem, 1.4vw, 1.75rem); }
.brand { flex: 0 0 auto; min-inline-size: 0; }
.brand img { max-inline-size: 210px; block-size: 34px; }
@media (width >= 30rem) { .brand img { block-size: 38px; } }
.brand-sub { display: none; }
@media (width >= 86rem) { .brand-sub { display: block; } }

.nav-main { flex: 1 1 auto; justify-content: center; gap: clamp(0.5rem, 1.5vw, 1.7rem); }
.nav-link {
  font-size: var(--t-xs);
  font-weight: var(--w-nav);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-1);
}
.nav-link:hover { color: var(--accent); }
.header-actions { flex: 0 0 auto; }

/* ================================================= DOCK ON SMALL SCREENS */
@media (width < 34rem) {
  .access-dock { inset: auto auto 0.85rem 0.85rem; }
  .access-fab { inline-size: 48px; block-size: 48px; }
  .access-fab svg { inline-size: 22px; block-size: 22px; }
}

/* ================================================================ FOOTER
   Deep navy, as the one closing dark block. */
.site-footer { background: var(--navy-900); color: var(--on-dark-2); border-top: 0; }
.site-footer h3 { color: var(--gold-300); }
.site-footer .footer-list a { color: var(--on-dark-2); }
.site-footer .footer-list a:hover { color: #fff; }
.site-footer .footer-bottom { color: #9fb0bd; border-top-color: rgb(255 255 255 / 14%); }
.site-footer .footer-bottom a,
.site-footer .notice a { color: var(--gold-300); }
.site-footer .muted { color: var(--on-dark-2); }
.site-footer .notice {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 16%);
  color: var(--on-dark-2);
}
.site-footer .notice svg { color: var(--gold-300); }
.site-footer .chip { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 18%); color: #fff; }

/* ====================================================== HERO LEGIBILITY ==
   The award badges sit low-left, which on this frame falls across sunlit
   grass. A corner wash gives them a dark ground to sit on without muddying
   the centre of the photograph. */
.hero-a .hero-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 95% at 0% 100%,
    rgb(12 16 14 / 72%) 0%,
    rgb(12 16 14 / 42%) 34%,
    transparent 62%
  );
}
.award b { color: #f6e3bb; }
.award span span { color: #f0ece3; }
.award svg { color: #f3d79a; }

/* ------------------------------------------------------- utility clock --
   Guide section 2.1 wants the Moshi clock in the utility row. Same shape as
   .utility-rating, which is the row's other icon+text pair. */
.utility-clock { display: flex; align-items: center; gap: 0.45rem; }
.utility-clock > svg { inline-size: 0.95rem; block-size: 0.95rem; color: var(--accent); flex: none; }
.utility-clock [data-local-time] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- drawer note --
   The utility row is hidden below 56rem, so the phone and the clock would
   otherwise be unreachable on a phone. They go at the foot of the drawer. */
.drawer-note {
  margin-top: 1.5rem;
  font-size: var(--t-xs);
  color: var(--on-dark-2, var(--text-2));
}
.drawer-note a { color: inherit; }

/* ------------------------------------------------- footer newsletter ---- */
.foot-news { margin-top: 1.75rem; display: grid; gap: 0.7rem; }
.foot-news-h {
  font-family: var(--f-display, inherit);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dark-1, inherit);
  margin: 0;
}
.foot-news-p,
.foot-news-note { font-size: var(--t-xs); color: var(--on-dark-2, var(--text-2)); margin: 0; line-height: 1.55; }
.foot-news-note { opacity: 0.85; }
.foot-news .field > label { color: var(--on-dark-2, var(--text-2)); }
.check-inline {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--on-dark-2, var(--text-2));
  cursor: pointer;
}
.check-inline input { flex: none; margin-block-start: 0.15em; }

/* ===================================================== GROUPED FILTERS ==
   Guide section 8.2 asks for four filter questions rather than one list, so
   the chips are labelled per group. Each row keeps its own heading visible:
   an unlabelled wall of twenty chips tells the visitor nothing about which
   ones combine. */
.filter-grid { display: grid; gap: var(--sp-m); margin-bottom: var(--sp-l); }
.filter-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.35rem var(--sp-m);
  align-items: baseline;
}
.filter-legend {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.filter-row .tabs { margin: 0; justify-content: flex-start; }
@media (width < 44rem) {
  .filter-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- card chips --
   `request` is the third level the twelve journeys need: not built in, not
   partially there, but something we will plan and cost and have not yet
   checked on the ground. It reads as an outline so it cannot be mistaken at
   a glance for the solid "confirmed" state. */
.tour-flag[data-level='request'] {
  background: rgb(255 255 255 / 20%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%);
  color: #fff;
}

.tour-cat {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.3rem;
  text-shadow: 0 1px 8px rgb(0 0 0 / 70%);
}

/* Footer contact column: plain facts rather than links, so the list items
   need the muted treatment the links get for free. */
.footer-contact li { color: var(--on-dark-2, var(--text-2)); line-height: 1.55; }
.footer-reply {
  margin-top: 1rem;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--on-dark-2, var(--text-2));
  opacity: 0.9;
}

/* Legal links in the bottom bar (guide 7.3). A wrapping inline list rather
   than a column, so it does not compete with the four content columns. */
.footer-legal {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: var(--t-xs);
}
.footer-legal li { display: flex; align-items: center; gap: 1rem; }
.footer-legal li:not(:last-child)::after {
  content: '';
  inline-size: 1px;
  block-size: 11px;
  background: currentColor;
  opacity: 0.3;
}

/* Three-up variant of the brand-introduction chooser. The two-card version
   told a first-time visitor that accessible and LGBTQ+ travel were the only
   two things on offer; the third card is the private safaris that are the
   main business. */
@media (width >= 50rem) { .duo.duo-3 { grid-template-columns: repeat(3, 1fr); } }

/* Guide section 2.4 puts a reassurance line under every enquiry button:
   free, no obligation, and a stated reply window. */
.cta-reassure {
  margin: 1.5rem auto 0;
  max-width: 44ch;
  text-align: center;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: #e8e5df;
}

/* Twenty of the thirty-two journeys have no price at all. The card still
   needs a price block of the same height or the grid goes ragged, so it
   carries the words instead of a figure, in the muted treatment. */
.price-req > b { font-size: 1.05rem; letter-spacing: 0.01em; }
.price-req > small { color: #cfcac1; }