/* ============================================================
   Travel Niche — Main Stylesheet
   Mobile-first, CSS custom properties, no dependencies
   Coastal / Arctic aesthetic
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* Brand Colors — remap the VALUES per niche, keep the NAMES.
     Comments describe each token's ROLE, not a motif: a niche-flavoured comment
     ships verbatim in public/css/main.css and trips _audit_rendered.py's own
     scaffold-leak scan. (Codified 2026-08-21, niagarariverjetboat.) */
  --deep-canal:    #0B4A7A;   /* Dark surface + display headings   */
  --gold:          #C9812A;   /* Primary CTA — proven gold         */
  --gold-light:    #E8B268;   /* Gold gradient end                 */
  --gold-dark:     #A56A18;   /* Gold pressed state                */
  /* Darkened gold for TEXT on a light background: --gold-dark measures 3.16:1
     on --marble-white (fails 4.5:1 AA); this clears 4.70:1. Used by
     .section-overline. Recompute if a niche remaps these tokens.
     (/final-check, 2026-07-11)
     WARNING — do NOT fold this note back onto the declaration line, and never
     open a second comment inside an open one. CSS comments do NOT nest: an
     unclosed opener on a declaration line gets closed by the NEXT terminator,
     and any leftover prose after that ends in a DANGLING terminator. The
     parser's error recovery then swallows the following declaration whole.
     That is exactly how --dutch-orange computed to EMPTY on every clone of this
     scaffold until 2026-08-16. The stylesheet still reads correctly in source and
     Hugo reports no error; only a computed-style read in a real browser catches
     it. Detector: strip all comments, then assert no terminator survives.
     (picoarierosunrisetours.com 2026-08-16) */
  --gold-text:     #9A5F14;

  /* Accent text + halo — auto-derive from --gold so a palette swap is safe.
     Set --on-accent to #FFFFFF when --gold is a DARK colour (white text),
     or var(--charcoal) when --gold is LIGHT (dark text). Halo follows --gold. */
  --on-accent:          var(--charcoal);
  /* Accent ink for anything drawn ON the dark --deep-canal surface (the fixed
     header, the tour-page body, a hero scrim). --dutch-orange and --canal-teal are
     BRIGHT in this scaffold's own palette, so inking them there reads fine here --
     but a niche that remaps either to a dark colour drops those rules to ~2:1 and
     nothing greps for it (no geo token, no build error, correct-looking source).
     Route every accent-on-dark use through this token instead of a raw accent.
     (buenosairestangoshows.com 2026-08-25.) */
  --accent-on-dark:     var(--gold-light);
  --accent-halo:        color-mix(in srgb, var(--gold) 40%, transparent);
  --accent-halo-strong: color-mix(in srgb, var(--gold) 55%, transparent);

  /* Surface / scrim / hairline tints — DERIVED, so a palette swap reaches them.
     These used to be hardcoded rgba() literals (a pale blue #D4EEF8 wash, a navy
     scrim, a slate shadow, a food-tour-red glow). No :root remap could touch
     them, so on a warm-cream niche the comparison table's highlight column
     rendered PALE BLUE and the trust icons glowed red. Never reintroduce a
     literal rgba() for a tint — add a token here instead.
     (Reported on waiotapu-tickets.com 2026-08-24.) */
  --tint-surface:        color-mix(in srgb, var(--canal-light) 30%, transparent);
  --tint-surface-soft:   color-mix(in srgb, var(--canal-light) 15%, transparent);
  --tint-surface-faint:  color-mix(in srgb, var(--canal-light) 6%,  transparent);
  --tint-surface-strong: color-mix(in srgb, var(--canal-light) 60%, transparent);
  --scrim-dark:          color-mix(in srgb, var(--deep-canal) 55%, transparent);
  --hairline:            color-mix(in srgb, var(--deep-canal) 6%,  transparent);
  --shadow-tint:         color-mix(in srgb, var(--deep-canal) 12%, transparent);
  --shadow-tint-strong:  color-mix(in srgb, var(--deep-canal) 18%, transparent);

  --dutch-orange:  #B8721F;   /* Urgency / badges only             */
  --canal-teal:    #0B6875;   /* Secondary accent — links, icons   */
  --canal-light:   #EBF1F3;   /* Pale tint — SURFACE role (rule 45)*/
  --amber-warm:    #F6EFE1;   /* Warm tint — SURFACE role (rule 45)*/

  /* Neutrals */
  --marble-white:  #FAF8F3;   /* Warm off-white base background    */
  --charcoal:      #12181C;   /* Near-black primary text           */
  --slate:         #3E4C56;   /* Secondary text */
  /* Darkened from #94A3B8: measured 2.43:1 on marble-white here (fails 4.5:1
     AA) — this clears 5.95:1. Only used as text color sitewide. Recompute
     if a niche remaps marble-white. (/final-check, 2026-07-11) */
  --stone:         #58616E;   /* Tertiary text  */
  --silver:        #D8DFE2;   /* Light text     */
  --mist:          #F6EFE1;   /* Warm cream mist                   */
  --white:         #FFFFFF;

  /* Gradients */
  /* Diagonal darken over the text side + a bottom vignette, so hero copy/CTA stay
     legible over bright photos. Stops are color-mix on --deep-canal, NOT hardcoded
     rgba(): the old literal navy survived every palette swap and left a navy scrim
     over a green/warm hero photo. (waiotapu-tickets.com 2026-08-24) */
  /* Hero scrim (Marina, 2026-08-26): a straight left-to-right gradient — solid
     Cave Blue at the left edge, fully transparent at the right — so the copy
     column on the left sits on dark and the photo shows through on the right.
     No bottom vignette. Stops are color-mix on --deep-canal, never a literal. */
  /* Scrim ink (Marina, 2026-08-26): Cave Blue pulled most of the way to black —
     "darker, closer to black" than the brand blue, but still derived from it so a
     palette swap keeps the tint. The overlay gradients below use this, not
     --deep-canal directly. */
  --hero-scrim:      color-mix(in srgb, var(--deep-canal) 30%, #000000);
  --hero-overlay:    linear-gradient(90deg,
                       color-mix(in srgb, var(--hero-scrim) 96%, transparent) 0%,
                       color-mix(in srgb, var(--hero-scrim) 92%, transparent) 30%,
                       color-mix(in srgb, var(--hero-scrim) 70%, transparent) 60%,
                       color-mix(in srgb, var(--hero-scrim) 0%,  transparent) 100%);
  --gold-shimmer:    linear-gradient(135deg, var(--gold), var(--gold-light));
  --ocean-depth:     linear-gradient(135deg, #0B4A7A, #0B6875);

  /* Typography */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  'Outfit', system-ui, -apple-system, sans-serif;

  /* Spacing (8px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radii */
  --rounded-sm:   4px;
  --rounded-md:   8px;
  --rounded-lg:   12px;
  --rounded-xl:   16px;
  --rounded-2xl:  24px;
  --rounded-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--marble-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
/* Guide-article hook image: honour its 1200x630 ratio. HTML width/height attrs
   (e.g. <img class="hook-image" width="1200" height="630">) set the rendered
   height literally UNLESS the global rule above carries height:auto — without it
   the image squishes to container-width x 630px in .container-narrow.
   (Reported on milancomodaytrip 2026-07-17.) */
.hook-image { width: 100%; height: auto; border-radius: var(--rounded-lg); margin: 0 0 var(--space-6); }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
address { font-style: normal; }

/* ── 3. Utilities ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container-narrow {
  max-width: 768px;
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.w-full { width: 100%; }

/* ── 4. Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--gold-shimmer);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--rounded-md);
  box-shadow: 0 4px 18px var(--accent-halo);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px var(--accent-halo-strong);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-primary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--rounded-md);
  border: 1.5px solid rgba(255,255,255,0.55);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.85);
}
.btn-secondary:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* Ghost button for LIGHT backgrounds. It is used STANDALONE (layouts/404.html),
   NOT as a `.btn-secondary` modifier, so it must carry the whole button box
   itself. With only border-color + color it inherited no display, padding,
   border-width or radius and rendered as bare unstyled text — which is exactly
   how both 404 secondary CTAs shipped on every clone of this scaffold. The 404
   is easy to miss in review because nothing links to it.
   white-space is deliberately `normal`: this button carries the long
   `tourBackLinkText` label, which overflowed the viewport at 320px when nowrap
   stopped it wrapping. (Reported on waiotapu-tickets.com 2026-08-24.) */
.btn-secondary-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  border: 1.5px solid var(--deep-canal);
  border-radius: var(--rounded-md);
  color: var(--deep-canal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  text-align: center;
  white-space: normal;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-secondary-dark:hover {
  background: var(--deep-canal);
  color: var(--white);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--canal-teal);
  border-radius: var(--rounded-lg);
  background: transparent;
  color: var(--canal-teal);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  /* `normal`, NOT `nowrap`: this is the class /404.html actually uses for its
     two secondary CTAs, and one of them carries the long `tourBackLinkText`
     label. The identical fix was written for this exact 320px overflow and
     applied to `.btn-secondary-dark` (see its comment above) — the class the
     404 used BEFORE the same repair moved it here, so the defect outlived its
     own fix. `max-width` is the other half: white-space cannot save a button
     whose longest single word already exceeds the container.
     (waiotapu-tickets.com 2026-08-24; recurred rotoruamaorivillage.com
     2026-08-25 at 328px in a 320px viewport.) */
  white-space: normal;
  max-width: 100%;
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--canal-teal);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.btn-outline:active { transform: translateY(0); }

.btn-sm  { padding: var(--space-2) var(--space-4); font-size: 0.875rem; }
.btn-lg  { padding: var(--space-4) var(--space-8); font-size: 1rem; }

/* ── 5. Section base ──────────────────────────────────────── */
.section {
  padding-block: var(--space-12); /* tightened section rhythm */
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-overline {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-3);
}
/* Dark sections (gallery, cta-band) need a lighter tint for AA contrast —
   var(--gold-dark) reads too dark on the dark surface, var(--gold-light)
   passes ~7:1. Recompute per-palette if a niche remaps these tokens. */
.gallery-section .section-overline,
.cta-band .section-overline {
  color: var(--gold-light);
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--deep-canal);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.section-subtitle {
  font-size: 1rem;
  color: var(--slate);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.65;
}

/* ── 6. Header & Navigation ───────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding-block: var(--space-3);
  transition: background var(--transition-slow), padding var(--transition-slow), box-shadow var(--transition-slow), transform 0.3s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.site-header.scrolled {
  /* color-mix on the token (not a hardcoded rgba) so a palette/token swap
     re-colors the header with zero edits */
  /* Opaque token fallback for browsers without color-mix — a fallback cannot
     itself use color-mix, so it must be a plain token rather than a hardcoded
     rgba() that a palette swap would leave navy. The line below re-adds the
     transparency wherever color-mix is supported. */
  background: var(--deep-canal);
  background: color-mix(in srgb, var(--deep-canal) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: var(--space-2);
  box-shadow: var(--shadow-lg);
}

/* Pages without a dark hero (tour pages, guides, legal, 404): the white
   logo/nav would merge with the light body — keep the header solid always.
   Paired with the `site-header--solid` conditional in partials/header.html. */
.site-header--solid {
  /* Opaque token fallback for browsers without color-mix — a fallback cannot
     itself use color-mix, so it must be a plain token rather than a hardcoded
     rgba() that a palette swap would leave navy. The line below re-adds the
     transparency wherever color-mix is supported. */
  background: var(--deep-canal);
  background: color-mix(in srgb, var(--deep-canal) 97%, transparent);
  box-shadow: var(--shadow-md);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon {
  color: var(--white);
  opacity: 0.95;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-primary {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
}

.logo-tagline {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--accent-on-dark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Desktop nav */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.nav-link {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--rounded-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.10);
}

.nav-cta { 
  display: none; /* Hidden on mobile */
  margin-left: var(--space-2); 
  font-size: 1rem; /* balance with enlarged .nav-link (1.05rem) */
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  border-radius: var(--rounded-md);
  margin-left: auto;
  transition: background var(--transition-fast);
}
.hamburger:hover { background: rgba(255,255,255,0.10); }
.hamburger-line {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* Mobile menu backdrop */
.mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--scrim-dark);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.mobile-backdrop.open { opacity: 1; pointer-events: all; }

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  z-index: 1002;
  width: min(80vw, 320px);
  height: 100dvh;
  background: var(--white);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--silver);
}

.mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--rounded-md);
  color: var(--slate);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-close:hover { background: var(--mist); color: var(--charcoal); }

.mobile-nav-list {
  flex: 1;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
  color: var(--charcoal);
  border-radius: var(--rounded-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-link:hover { background: var(--canal-light); color: var(--deep-canal); }

.mobile-menu-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--silver);
}

/* ── 7. Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 0;
}

/* ── Hero extras ── */
.hero-overline {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: var(--space-4);
  display: block;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.hero-badge {
  display: inline-block;
  background: var(--dutch-orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--rounded-sm);
}

.price-free-cancel {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-2);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: calc(var(--space-20) + 60px); /* clear fixed header */
  padding-bottom: var(--space-20);
}

.hero-text {
  max-width: 680px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: rgba(255,255,255,0.90);
  line-height: 1.65;
  margin-bottom: var(--space-8);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 380px;
}

/* Price badge */
.hero-price-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--rounded-xl);
  padding: var(--space-4) var(--space-6);
  color: var(--white);
  min-width: 110px;
}
.price-from  { font-size: 0.75rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.06em; }
.price-amount { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.price-per   { font-size: 0.75rem; opacity: 0.8; }

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.65);
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── 8. Trust Band ────────────────────────────────────────── */
.trust-band {
  background: var(--white);
  padding-block: var(--space-6);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-8);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trust-icon { font-size: 1.5rem; line-height: 1; }

.trust-icon-svg {
  color: var(--canal-teal);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rounded-md);
  background: var(--canal-light);
}

.trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.trust-metric {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--deep-canal);
}

.trust-label {
  font-size: 0.75rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 9. How It Works ──────────────────────────────────────── */
.how-it-works { background: var(--marble-white); }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.step-card {
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--hairline);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
  counter-increment: steps;
}
.step-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--rounded-md);
  background: var(--gold-shimmer);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-4);
  box-shadow: 0 2px 8px var(--accent-halo);
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--deep-canal);
  margin-bottom: var(--space-3);
}

.step-body { color: var(--slate); line-height: 1.65; }

.steps-cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* ── 10. Gallery — full-width horizontal scroll, dark theatre ── */
/* Pattern codified 2026-07 (apachetrailtour.com build) — see
   site-builder CLAUDE.md "Gallery pattern" for the full contract and the
   img width/height-vs-aspect-ratio gotcha this replaced. */
.gallery-section {
  background: var(--deep-canal);
  padding-bottom: var(--space-8);
}
.gallery-section .section-title { color: var(--white); }
.gallery-section .section-subtitle { color: rgba(255,255,255,0.72); }

.gallery-wrapper {
  position: relative;
  margin-top: var(--space-6);
}
.gallery-wrapper--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.gallery-wrapper::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 14px; width: 60px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--deep-canal) 100%);
  z-index: 2;
}

.gallery-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-5) var(--space-4);
  padding-left: max(var(--space-5), calc((100vw - 1200px) / 2));
  padding-right: max(var(--space-5), calc((100vw - 1200px) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255,255,255,0.15);
}
.gallery-scroll::-webkit-scrollbar { height: 8px; }
.gallery-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.12); border-radius: var(--rounded-full); }
.gallery-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: var(--rounded-full); }

.gallery-item {
  flex: 0 0 78vw;
  max-width: 480px;
  scroll-snap-align: start;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
@media (min-width: 720px)  { .gallery-item { flex-basis: 44vw; } }
@media (min-width: 1080px) { .gallery-item { flex-basis: 29vw; } }
.gallery-item:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}
.gallery-item img {
  width: 100%;
  height: auto; /* MUST be set — see gotcha note below */
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}
/* GOTCHA (found on apachetrailtour.com build): the <img width="800"
   height="533"> HTML attributes are read by browsers as literal pixel
   dimensions (a presentational-hint height), not just an intrinsic-ratio
   hint. Without `height: auto` here, that 533px hint wins over
   `aspect-ratio` once the container is narrower than ~800px (i.e. on
   every gallery card), producing a mismatched near-portrait box. Always
   keep `height: auto` on any <img> that also carries HTML width/height
   attributes AND a CSS aspect-ratio. */

.gallery-caption {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  background: rgba(255,255,255,0.06);
}

.gallery-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: var(--rounded-full);
  border: 0;
  cursor: pointer;
  background: var(--white);
  color: var(--deep-canal);
  box-shadow: var(--shadow-md);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.gallery-arrow:hover { background: var(--gold); color: var(--on-accent); }
.gallery-arrow--prev { left: max(var(--space-4), calc((100vw - 1200px) / 2)); }
.gallery-arrow--next { right: max(var(--space-4), calc((100vw - 1200px) / 2)); }
@media (min-width: 1080px) { .gallery-arrow { display: flex; } }

/* ── 11. Booking Widget ───────────────────────────────────── */
.booking-section { background: var(--white); }

.booking-widget-wrapper {
  max-width: 800px;
  margin-inline: auto;
  background: var(--mist);
  border-radius: var(--rounded-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.widget-fallback {
  display: none; /* Hidden when real GYG widget loads */
}

/* Show fallback if widget script hasn't loaded (no gyg elements present) */
.booking-widget-wrapper:not(:has([data-gyg-href] iframe)) .widget-fallback {
  display: block;
}

.widget-fallback-inner {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: var(--white);
  border-radius: var(--rounded-xl);
  border: 1px solid var(--silver);
  box-shadow: var(--shadow-md);
}

.widget-fallback-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--rounded-xl);
  background: var(--canal-light);
  color: var(--canal-teal);
  margin: 0 auto var(--space-5);
}

.widget-fallback-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-3);
}

.widget-fallback-body {
  color: var(--slate);
  margin-bottom: var(--space-6);
}

.widget-fallback-inner .btn-primary { margin-inline: auto; }

.widget-trust-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.widget-trust-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--stone);
}

.widget-trust-list svg { color: var(--canal-teal); flex-shrink: 0; }

.booking-social-proof {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--tint-surface);
  border-radius: var(--rounded-lg);
  border: 1px solid var(--tint-surface-strong);
}
.social-proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.825rem;
  color: var(--slate);
}
.social-proof-item strong {
  color: var(--deep-canal);
}
.social-proof-star {
  color: var(--gold);
}
.social-proof-item svg:not(.social-proof-star) {
  color: var(--canal-teal);
}

/* ── 12. Comparison Table ─────────────────────────────────── */
.comparison-section { background: var(--mist); }

.comparison-wrapper {
  overflow-x: auto;
  border-radius: var(--rounded-xl);
  box-shadow: var(--shadow-lg);
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--rounded-xl);
  overflow: hidden;
}

.comparison-table thead {
  background: var(--deep-canal);
  color: var(--white);
}

.comparison-col,
.comparison-label-col {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
}

.comparison-label-col {
  text-align: left;
  width: 30%;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}

.comparison-col--highlight {
  background: var(--deep-canal);
  color: var(--white);
  border-bottom: 3px solid var(--gold);
}

.comparison-badge {
  /* block + fit-content so the badge stacks on its own line ABOVE the column
     label (inline-block rendered it beside/wrapped with the label) */
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--rounded-sm);
  margin-bottom: var(--space-2);
}
.comparison-col--highlight .comparison-badge {
  background: var(--gold);
  color: var(--on-accent);
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--mist);
  transition: background var(--transition-fast);
}
.comparison-table tbody tr:last-child { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--tint-surface); }

.comparison-row-label {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
}

.comparison-cell {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: 0.875rem;
  color: var(--charcoal);
}

.comparison-cell--highlight {
  background: var(--tint-surface);
  font-weight: 600;
  color: var(--deep-canal);
}

.comparison-cta {
  text-align: center;
  margin-top: var(--space-8);
}

.comparison-cta-row { border-bottom: none !important; }
.comparison-cta-row:hover { background: transparent !important; }
.comparison-cta-cell { padding-top: var(--space-5) !important; padding-bottom: var(--space-6) !important; }
.comparison-btn { width: 100%; max-width: 180px; font-size: 0.8rem; }

/* ── 12b. More Experiences ────────────────────────────────── */
.experiences-section { background: var(--white); }

.experiences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

/* Homepage "Explore More" section only (scoped by #experiences) — balanced
   2-row grid computed from the actual card count (top row gets the extra
   card when odd), instead of the shared auto-fill wrap used on /tours/. */
#experiences .experiences-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  #experiences .experiences-grid { grid-template-columns: repeat(var(--experiences-cols, 3), 1fr); }
}

.experience-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--rounded-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--charcoal);
  transition: all var(--transition-normal);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.experience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--canal-teal);
}

.experience-image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mist);
}
.experience-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.experience-card:hover .experience-image img {
  transform: scale(1.06);
}

.experience-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--rounded-sm);
  z-index: 1;
}

.experience-content {
  padding: var(--space-5) var(--space-5) var(--space-3);
  flex: 1;
}

.experience-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.experience-desc {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.experience-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: var(--slate);
}

.experience-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--gold);
  font-weight: 600;
}
.experience-review-count {
  color: var(--slate);
  font-weight: 400;
}

.experience-duration {
  color: var(--canal-teal);
  font-weight: 500;
}

.experience-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--mist);
  background: var(--tint-surface-soft);
}

.experience-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-canal);
}
.experience-price-from {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--slate);
  margin-right: 2px;
}

.experience-cta-text {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--canal-teal);
  transition: color var(--transition-fast);
}
.experience-card:hover .experience-cta-text {
  color: var(--deep-canal);
}

/* ── 13. Reviews ──────────────────────────────────────────── */
.reviews-section { background: var(--canal-light); }

.reviews-aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.aggregate-stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
}

.aggregate-score {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-canal);
}

.aggregate-count {
  font-size: 0.85rem;
  color: var(--slate);
}

.reviews-disclaimer {
  font-size: 0.8rem;
  color: var(--stone);
  max-width: 560px;
  margin: var(--space-3) auto 0;
  text-align: center;
}

.reviews-scroll-wrapper { overflow: hidden; }

.reviews-scroll {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-4) var(--space-5) var(--space-8);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--silver) transparent;
}

.review-card {
  flex-shrink: 0;
  width: min(320px, 85vw);
  scroll-snap-align: start;
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.review-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }

.review-stars {
  display: flex;
  gap: 3px;
  color: var(--gold);
}

.review-text {
  flex: 1;
  font-size: 1rem;
  color: var(--charcoal);
  line-height: 1.65;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--stone);
  padding-top: var(--space-3);
  border-top: 1px solid var(--mist);
}

.review-name { font-weight: 600; color: var(--charcoal); }
.review-separator { color: var(--silver); }

/* ── 14. FAQ ──────────────────────────────────────────────── */
.faq-section { background: var(--marble-white); }

.faq-list { display: flex; flex-direction: column; }

.faq-item {
  border-bottom: 1px solid var(--silver);
}
.faq-item:first-child { border-top: 1px solid var(--silver); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.faq-question:hover { color: var(--deep-canal); }
.faq-question:focus-visible {
  outline: 2px solid var(--dutch-orange);
  outline-offset: 2px;
  border-radius: var(--rounded-sm);
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--stone);
  transition: transform var(--transition-normal), color var(--transition-fast);
}
.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
}
.faq-answer:not([hidden]) {
  max-height: 500px;
}
.faq-answer[hidden] { display: block !important; max-height: 0; } /* override hidden for animation */

.faq-answer-inner {
  padding-bottom: var(--space-5);
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.7;
}

.faq-contact {
  text-align: center;
  margin-top: var(--space-10);
  font-size: 0.95rem;
  color: var(--slate);
}

.faq-contact-link {
  color: var(--canal-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.faq-contact-link:hover { color: var(--deep-canal); }

.faq-answer-inner a {
  color: var(--canal-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.faq-answer-inner a:hover { color: var(--deep-canal); }

/* ── 15. CTA Band ─────────────────────────────────────────── */
.cta-band {
  background: var(--ocean-depth);
  padding-block: var(--space-16);
  text-align: center;
}

.cta-band-inner { max-width: 640px; margin-inline: auto; }

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-5);
}

.cta-body {
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-8);
  line-height: 1.65;
}

/* ── 16. Footer ───────────────────────────────────────────── */
.site-footer {
  background: var(--deep-canal);
  color: var(--silver);
  padding-top: var(--space-16);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-brand-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--silver);
  max-width: 280px;
}

.footer-col-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-light);
  margin-bottom: var(--space-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-link {
  font-size: 0.9375rem;
  color: var(--silver);
  transition: color var(--transition-fast);
}
.footer-link:hover { color: var(--white); }

.footer-address {
  font-size: 0.9375rem;
  color: var(--silver);
  line-height: 1.65;
}

.footer-bottom {
  padding-block: var(--space-6);
}

.footer-bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer-disclosure {
  font-size: 0.8rem;
  color: var(--silver);
  max-width: 620px;
}

.footer-copy { font-size: 0.875rem; color: var(--silver); }

.footer-legal {
  display: flex;
  gap: var(--space-5);
}

.footer-legal-link {
  font-size: 0.875rem;
  color: var(--silver);
  transition: color var(--transition-fast);
}
.footer-legal-link:hover { color: var(--white); }

/* ── 17. Sticky CTA (mobile) ──────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--white);
  border-top: 1px solid var(--silver);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  transform: translateY(100%);
  transition: transform var(--transition-normal);
  pointer-events: none;
}
.sticky-cta.visible {
  transform: translateY(0);
  pointer-events: all;
}

.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  max-width: 480px;
  margin-inline: auto;
}

.sticky-cta-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.sticky-price-from   { font-size: 0.75rem; color: var(--stone); }
.sticky-price-amount {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--deep-canal);
}
.sticky-price-per    { font-size: 0.75rem; color: var(--stone); }

.sticky-cta-btn { flex-shrink: 0; }

/* ── 18. Single Page Prose ────────────────────────────────── */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-8);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.prose p { color: var(--slate); line-height: 1.75; margin-bottom: var(--space-4); }
.prose ul { list-style: disc; padding-left: var(--space-6); color: var(--slate); }
.prose li { margin-bottom: var(--space-2); line-height: 1.65; }
.prose strong { color: var(--charcoal); }
.prose a { color: var(--canal-teal); text-decoration: underline; text-underline-offset: 2px; }

/* ── 19. Fade-Up Animation ────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.steps-grid .fade-up:nth-child(2) { transition-delay: 0.1s; }
.steps-grid .fade-up:nth-child(3) { transition-delay: 0.2s; }
.trust-grid .fade-up:nth-child(2) { transition-delay: 0.05s; }
.trust-grid .fade-up:nth-child(3) { transition-delay: 0.10s; }
.trust-grid .fade-up:nth-child(4) { transition-delay: 0.15s; }
.trust-grid .fade-up:nth-child(5) { transition-delay: 0.20s; }

/* ── 20. Accessibility ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

/* ── 21. Responsive — sm (640px) ──────────────────────────── */
@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    max-width: none;
  }

  .trust-grid {
    gap: var(--space-5) var(--space-10);
  }

  .review-card  { width: 340px; }
}

/* ── 22. Responsive — md (768px) ──────────────────────────── */
@media (min-width: 768px) {
  .section { padding-block: 56px; }

  .section-title { font-size: 2.25rem; }

  .steps-grid { grid-template-columns: repeat(var(--steps-cols, 2), 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .footer-bottom .container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── 23. Responsive — lg (1024px) ─────────────────────────── */
@media (min-width: 1024px) {
  /* Show desktop nav, hide hamburger */
  .nav-links  { display: flex; }
  .nav-cta    { display: block; }
  .hamburger  { display: none; }

  /* Hide sticky mobile CTA */
  .sticky-cta { display: none; }

  .section { padding-block: 72px; }

  .section-title { font-size: 2.5rem; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ── 24. Responsive — xl (1280px) ─────────────────────────── */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-8); }
}

/* ── 25. Highlights Section ───────────────────────────────── */
.highlights-section { background: var(--amber-warm); }

.highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 960px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .highlights-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

.highlights-col {
  background: var(--white);
  border-radius: var(--rounded-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--hairline);
}

.highlights-col-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--canal-light);
}

.highlights-col-title svg { color: var(--gold); flex-shrink: 0; }

.highlights-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 1rem;
  color: var(--slate);
  line-height: 1.55;
}

.highlight-check {
  flex-shrink: 0;
  color: var(--canal-teal);
  margin-top: 2px;
}

.highlight-check--gold { color: var(--gold); }

.highlights-cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* ── 26. Review Extras ────────────────────────────────────── */
.review-photos {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.review-photos img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--rounded-md);
  border: 1px solid var(--mist);
}

.review-card--cta {
  /* Lighter than the reviews-section background (--canal-light) so the CTA card
     lifts off the section instead of blending into it. Token-relative wash +
     subtle border survive any palette remap. (Reported on milancomodaytrip 2026-07-17.) */
  background: color-mix(in srgb, var(--white) 62%, var(--canal-light));
  border: 1px solid color-mix(in srgb, var(--canal-teal) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.review-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.review-cta-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-canal);
  max-width: 220px;
  line-height: 1.4;
}

/* ── Tour Detail Pages ──────────────────────────────────────── */
.tour-page {
  padding-top: 100px;
  padding-bottom: var(--space-8);
  background: var(--deep-canal);
  min-height: 100vh;
}

/* Guide article — clear the fixed header (first child is the breadcrumb) */
.guide-article {
  padding-top: 100px;
}

.tour-breadcrumb {
  font-size: 0.9rem;
  color: var(--mist);
  margin-bottom: var(--space-4);
}

.tour-breadcrumb a {
  /* gold-light, not dutch-orange: the accent token can be dark (rosewood) and
     vanish against the deep-canal tour-page background */
  color: var(--gold-light);
  text-decoration: none;
}

.tour-breadcrumb a:hover {
  text-decoration: underline;
}

.tour-hero {
  margin-bottom: var(--space-6);
}

.tour-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.tour-rating-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tour-stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
}

.tour-rating-text {
  font-size: 0.95rem;
  color: var(--mist);
}

.tour-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  border-radius: var(--rounded-lg);
  overflow: hidden;
}

.tour-gallery-main img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.tour-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.tour-gallery-grid img {
  width: 100%;
  height: calc(200px - var(--space-3) / 2);
  object-fit: cover;
}

.tour-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

.tour-main-content {
  color: var(--white);
}

.tour-section {
  margin-bottom: var(--space-8);
}

.tour-section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.tour-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--mist);
  /* fullDescription is an ARRAY — tour/single.html emits one <p> per
     element. Without this, every paragraph of an enriched tour page
     butts against the next. (mikumidaysafarifromzanzibar 2026-08-15) */
  margin-bottom: var(--space-4);
}
.tour-description:last-child { margin-bottom: 0; }

.tour-highlights,
.tour-includes,
.tour-excludes {
  list-style: none;
  padding: 0;
}

.tour-highlights li,
.tour-includes li,
.tour-excludes li {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--rounded-md);
  color: var(--mist);
}

.tour-info-content {
  color: var(--mist);
  line-height: 1.7;
}

.tour-sidebar {
  position: sticky;
  top: 100px;
}

.tour-booking-card {
  background: var(--white);
  padding: var(--space-6);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-xl);
  margin-bottom: var(--space-4);
}

.tour-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--mist);
}

.tour-price-label {
  font-size: 0.85rem;
  color: var(--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tour-price-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--deep-canal);
  line-height: 1;
  margin-block: var(--space-1);
}

.tour-price-unit {
  font-size: 0.9rem;
  color: var(--charcoal);
}

.tour-detail-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--charcoal);
  font-size: 0.95rem;
}

.tour-detail-item svg {
  flex-shrink: 0;
  color: var(--deep-canal);
}

.tour-booking-note {
  font-size: 0.8rem;
  color: var(--charcoal);
  text-align: center;
  margin-top: var(--space-3);
  opacity: 0.7;
}

.tour-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tour-badge {
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--rounded-sm);
}

.tour-back-link {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-back-link a {
  /* gold-light for contrast on the dark tour-page background (see breadcrumb) */
  color: var(--gold-light);
  text-decoration: none;
  font-weight: 600;
}

.tour-back-link a:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .tour-title {
    font-size: 1.75rem;
  }
  
  .tour-gallery {
    grid-template-columns: 1fr;
  }
  
  .tour-gallery-main img {
    height: 300px;
  }
  
  .tour-content-wrapper {
    grid-template-columns: 1fr;
  }
  
  .tour-sidebar {
    position: static;
  }
}

.review-cta-inner .aggregate-stars { color: var(--gold); }

/* ── Related Tours Section ──────────────────────────────────── */
.related-tours {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.related-tours-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-6);
  text-align: center;
}

.related-tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.related-tour-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  text-decoration: none;
  display: block;
}

.related-tour-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.related-tour-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.related-tour-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  padding: var(--space-4) var(--space-4) var(--space-2);
  line-height: 1.3;
}

.related-tour-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  padding: 0 var(--space-4) var(--space-4);
}

/* Site-specific overrides */
.faq-question:hover { color: var(--canal-teal); }
.hero-overline { letter-spacing: 0.35em; text-transform: uppercase; font-size: 0.8125rem; }
.hero-badge { background: rgba(0,0,0,0.55); color: var(--white); border: 1px solid var(--accent-on-dark); backdrop-filter: blur(4px); }
.btn-secondary { backdrop-filter: blur(6px); background: rgba(255,255,255,0.12); }
.btn-secondary:hover { background: rgba(255,255,255,0.22); }
.comparison-col--highlight { border-color: var(--canal-teal); }

/* Visually mute the last comparison column (a deliberately weaker
   alternative comparison variant). MUST be scoped to
   exclude highlighted cells — otherwise, on any site where
   `highlight_column` points to the last column, this rule fades the
   very header/cells that should stand out. Body cells are rescued by
   `.comparison-cell--highlight { opacity: 1 !important }`, but the
   header has no analogous rescue, producing an inconsistent 55%-faded
   badge + label on top of a fully-opaque column body. */
.comparison-table th:last-child:not(.comparison-col--highlight),
.comparison-table td:last-child:not(.comparison-cta-cell):not(.comparison-cell--highlight) {
  opacity: 0.55;
  font-style: italic;
}
.comparison-table th:last-child:not(.comparison-col--highlight) {
  font-style: normal;
}

/* Neon glow accent on trust band icons */
.trust-icon-svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--canal-teal) 15%, transparent)); }

/* Gold accent for highlight check marks */
.highlight-check--gold { stroke: var(--gold); }

/* ── Footer SEO Links ── */
.footer-seo-links {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-8) 0;
}
.footer-seo-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  margin-bottom: var(--space-4);
}
.footer-seo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-seo-link {
  font-size: 0.8125rem;
  color: var(--silver);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.footer-seo-link:hover {
  color: var(--canal-light);
  text-decoration: underline;
}

/* ── Guide / Article Pages ─────────────────────────────────── */

/* Breadcrumb */
.breadcrumb {
  background: var(--mist);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--silver);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--stone);
}
.breadcrumb-list li:not(:last-child)::after {
  content: "›";
  margin-left: var(--space-2);
  color: var(--silver);
}
.breadcrumb-list a {
  color: var(--canal-teal);
  text-decoration: none;
}
.breadcrumb-list a:hover {
  text-decoration: underline;
}
.breadcrumb-list [aria-current="page"] {
  color: var(--slate);
  font-weight: 500;
}

/* Guide Header */
.guide-header {
  padding: var(--space-12) 0 var(--space-8);
  text-align: center;
}
.guide-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}
.guide-subtitle {
  font-size: 1.05rem;
  color: var(--slate);
  max-width: 640px;
  margin: 0 auto var(--space-3);
  line-height: 1.6;
}
.guide-meta {
  font-size: 0.85rem;
  color: var(--stone);
}

/* Guide Body */
.guide-body {
  padding-bottom: var(--space-16);
}

/* Prose extensions for article content */
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 0.92rem;
}
.prose thead {
  background: var(--deep-canal);
  color: var(--white);
}
.prose th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
}
.prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--silver);
  color: var(--slate);
  line-height: 1.5;
}
.prose tbody tr:hover {
  background: var(--tint-surface-soft);
}
.prose ol {
  list-style: decimal;
  padding-left: var(--space-6);
  color: var(--slate);
}
.prose ol li {
  margin-bottom: var(--space-2);
  line-height: 1.65;
}

/* Guide Listing Cards */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.guide-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--rounded-lg);
  padding: var(--space-6);
  text-decoration: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.guide-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--deep-canal);
  margin-bottom: var(--space-2);
}
.guide-card-desc {
  font-size: 0.92rem;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.guide-card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--canal-teal);
}

/* Responsive table scroll on mobile */
@media (max-width: 640px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Editorial section + figure (homepage index.html + kyoto-page spoke/landing pages) ── */
.editorial-section { background: var(--mist); }
.editorial-prose { margin-top: 1.5rem; }
.editorial-figure { margin: 0 0 2rem; }
.editorial-figure a { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px var(--shadow-tint); transition: transform .25s ease, box-shadow .25s ease; }
.editorial-figure a:hover { transform: translateY(-3px); box-shadow: 0 16px 40px var(--shadow-tint-strong); }
.editorial-figure img { display: block; width: 100%; height: auto; }
.editorial-figure figcaption { margin-top: .75rem; font-size: .85rem; color: var(--slate, #475569); text-align: center; font-style: italic; line-height: 1.5; }
/* ── Tour page: enriched content sections (Norway build) ───── */
.tour-to-bring { list-style: none; padding: 0; }
.tour-to-bring li {
  position: relative; padding: var(--space-3) var(--space-3) var(--space-3) 2.2rem;
  margin-bottom: var(--space-2); background: rgba(255,255,255,0.05);
  border-radius: var(--rounded-md); color: var(--mist);
}
.tour-to-bring li::before {
  content: ""; position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; background: var(--canal-teal);
}
/* Good to know / caveats — amber left-accent to read as "note" */
.tour-good-to-know { list-style: none; padding: 0; }
.tour-good-to-know li {
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
  background: var(--tint-surface-faint); border-left: 3px solid var(--accent-on-dark);
  color: var(--mist); line-height: 1.55;
}
/* Not suitable for */
.tour-not-suitable ul { list-style: none; padding: 0; }
.tour-not-suitable li {
  position: relative; padding: var(--space-2) var(--space-3) var(--space-2) 2.2rem;
  margin-bottom: var(--space-2); color: var(--mist);
}
.tour-not-suitable li::before {
  content: "\00d7"; position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  color: var(--accent-on-dark); font-weight: 700; font-size: 1.1rem;
}
/* Traveler reviews */
.tour-reviews-summary { color: var(--mist); font-size: 1.05rem; margin-bottom: var(--space-4); }
.tour-reviews-summary strong { color: var(--white); }
.tour-reviews-list { display: grid; gap: var(--space-4); }
.tour-review {
  margin: 0; padding: var(--space-5); background: rgba(255,255,255,0.05);
  border-radius: var(--rounded-lg); border: 1px solid rgba(255,255,255,0.08);
}
.tour-review-stars { color: #E8C06B; display: flex; gap: 2px; margin-bottom: var(--space-2); }
.tour-review p { color: var(--mist); font-style: italic; line-height: 1.6; margin: 0 0 var(--space-2); }
.tour-review cite { color: rgba(255,255,255,0.7); font-style: normal; font-weight: 600; font-size: 0.9rem; }
/* FAQ accordion */
.tour-faq-list { display: grid; gap: var(--space-2); }
.tour-faq-item {
  background: rgba(255,255,255,0.05); border-radius: var(--rounded-md);
  border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
}
.tour-faq-item summary {
  cursor: pointer; padding: var(--space-4); font-family: var(--font-display);
  font-weight: 600; color: var(--white); list-style: none; position: relative; padding-right: 2.5rem;
}
.tour-faq-item summary::-webkit-details-marker { display: none; }
.tour-faq-item summary::after {
  content: "+"; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  color: var(--canal-light); font-size: 1.4rem; font-weight: 400; transition: var(--transition-fast);
}
.tour-faq-item[open] summary::after { content: "\2212"; }
.tour-faq-answer { padding: 0 var(--space-4) var(--space-4); }
.tour-faq-answer p { color: var(--mist); line-height: 1.6; margin: 0; }

/* Excludes read as the negative of includes — same card, muted left rule
   and a x marker so the two lists are never confused at a glance. The
   scaffold shipped NO .tour-excludes rule, so these <li>s rendered as bare
   unstyled text beside card-styled siblings.
   (mikumidaysafarifromzanzibar 2026-08-15) */
.tour-excludes li {
  position: relative;
  padding-left: var(--space-8);
  border-left: 3px solid var(--stone);
  color: var(--silver);
}
.tour-excludes li::before {
  content: "\00d7";
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-light);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

/* ── Key-takeaways / explore-hub in-body links (HOMEPAGE-CONVERSION-PATTERNS
   §8) ── DEFAULT, not opt-in. The global reset (`a { color: inherit;
   text-decoration: none; }`) makes any link inside .highlights-list invisible
   without an override. Colour + weight carry the affordance at rest,
   underline only on hover, so a 4-8 link list doesn't turn into visual
   noise. --gold-text, not --gold — the latter is the CTA/button colour and
   fails contrast as small body text on the pale section backgrounds. */
#explore .highlight-item a {
  color: var(--gold-text);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
}
#explore .highlight-item a:hover {
  color: var(--gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
#explore .highlight-item a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Narrative itinerary (HOMEPAGE-CONVERSION-PATTERNS §4) ── DEFAULT, not
   opt-in. Written against existing tokens so a palette swap re-colours it
   with zero edits. Header is CENTRED (matches every other .section-header
   on this page — a left-aligned block is the one thing off the page's
   centre axis). The stops stay LEFT-aligned inside a centred <ol> — a
   sequence on a connector line needs a common left edge. */
.itinerary-header {
  text-align: center;
  margin-inline: auto;
  max-width: 780px;
  margin-bottom: var(--space-6);
}
.itinerary-narrative {
  max-width: 700px;
  margin: 0 auto var(--space-10);
  text-align: center;
  color: var(--slate);
  line-height: 1.7;
  font-size: 1.05rem;
}
.itinerary-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  text-align: left;
}
.itinerary-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
}
.itinerary-item:last-child { padding-bottom: 0; }
.itinerary-item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--silver);
}
.itinerary-item:last-child::before { display: none; }
.itinerary-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-md);
  background: var(--gold-shimmer);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.itinerary-body {
  padding-top: var(--space-1);
  color: var(--slate);
  line-height: 1.65;
}
.itinerary-body strong {
  color: var(--charcoal);
  font-family: var(--font-display);
}
@media (max-width: 640px) {
  .itinerary-body strong { display: block; margin-bottom: var(--space-1); }
  .itinerary-sep { display: none; }
}
/* ── Guide-page widget top spacing ────────────────────────────────────────
   Both guide widgets (.guide-availability right after the intro paragraph,
   .guide-auto-widget after the required separator section — see
   layouts/guides/single.html) inherit the shared .section padding-block
   (48/56/72px responsive) on top AND bottom by default, so each widget opens
   with as much air above it as a full new section — fighting the "reads as
   immediately following the paragraph above it" placement contract in
   memory/reference_guide_widget_placement.md. Scoped to these two guide-only
   classes; placed after the .section responsive breakpoint rules above so it
   wins by source order without !important (CLAUDE.md rule #42: edit
   site-local CSS at the source, don't fight it with specificity tricks).
   Bottom padding is untouched, so spacing below each widget still scales
   normally with viewport. (Codified 2026-08-21, niagarariverjetboat.com —
   reported as a per-site fix, then generalized: the underlying markup and
   .section rule are scaffold-wide, so every future guide page would have
   shipped with this same oversized gap.) */
.guide-body-intro,
.guide-body-section1 {
  /* The FACING EDGE. .guide-body carries padding-bottom: var(--space-16) (64px),
     and the two blocks that sit directly above a widget pay it straight into the
     widget's seam. The trailing .guide-body keeps its padding — it still needs
     the gap before the CTA band. (2026-08-21, champagnedaytoursfromparis.com:
     the 2026-08-21 padding-top fix below, shipped alone, removed 24px of a 172px
     stack and the complaint came back within days. Fix the seam, not one term.) */
  padding-bottom: 0;
}

/* Generic widget sections FIRST: .alt-tours-section and .guide-auto-widget are
   both single-class selectors, so they tie on specificity and SOURCE ORDER
   decides. With this rule last, a guide's auto widget silently takes the
   homepage's value instead of the guide's. */
.booking-section,
.alt-tours-section {
  padding-top: var(--space-8);
}

.guide-availability,
.guide-auto-widget {
  padding-top: var(--space-6);
}

/* NOT trimmed on purpose: .booking-widget-wrapper's own padding is the card's
   symmetric inset. Trimming only its top renders the card lopsided.
   Gate: python _audit_widget_spacing.py <site-dir>  (measures getComputedStyle;
   a source grep cannot see a class that was never defined, a specificity tie,
   or a token that computes to 0). */

/* ── Fixed-header clearance ───────────────────────────────────────────────────
   The header is position:fixed and ~60px (mobile) / ~66px (desktop) tall. Any
   page whose first section starts at the very top of <main> has its opening
   line rendered UNDERNEATH it: the default .section padding-block is only 48px
   at mobile. /404.html and /guides/ shipped clipped at <=768px on every clone.
   The recipe was already codified (memory/reference_fixed_header_traps.md,
   Trap 1) but had never been baked into the scaffold.

   MUST stay at the END of this file. .section's padding-block is redefined
   inside later @media blocks; placed earlier, this rule loses on source order
   and the clip returns at exactly the breakpoints the media queries cover — it
   passed at 390px and 1440px while still failing at 768px.
   (Reported on waiotapu-tickets.com 2026-08-24.) */
.clears-header { padding-top: calc(66px + var(--space-8)); }
@media (min-width: 768px) { .clears-header { padding-top: calc(66px + var(--space-10)); } }


/* ── Button labels can never widen the page ───────────────────────────────
   Every button class in this scaffold sets `white-space: nowrap`, and several
   carry per-site labels from hugo.toml (`tourBackLinkText`,
   `toursListBottomCTAButton`, `ctaButton`, `heroCTAPrimary`). A long one blows
   past a 320px viewport and the WHOLE PAGE gains a horizontal scrollbar.

   This was first fixed on `.btn-secondary-dark`, then re-fixed on `.btn-outline`
   when the 404 changed class — and a portfolio sweep on 2026-08-25 found the
   identical defect a third time on `.btn-primary`: waitomocavestour.com's
   /tours/ hub measured 463px inside 320px (a 143px overflow) from its bottom-CTA
   label alone. 20 of 31 sites showed some form of it. Fixing one selector at a
   time is what let it survive twice, so this rule covers the family.

   Desktop appearance is unchanged: `max-width` only bites when the button would
   otherwise overflow, and the wrap is scoped to narrow viewports.
   (rotoruamaorivillage.com 2026-08-25 — see checklist V.) */
.btn-primary, .btn-secondary, .btn-secondary-dark, .btn-outline, .btn-sm, .btn-lg {
  max-width: 100%;
}
@media (max-width: 480px) {
  .btn-primary, .btn-secondary, .btn-secondary-dark, .btn-outline {
    white-space: normal;
  }
  .btn-lg { padding: var(--space-3) var(--space-5); }
}


/* ══════════════════════════════════════════════════════════════════════
   Map embed (/location/) — appended at the END of main.css on purpose:
   these rules are order-sensitive and must win over the .prose defaults.
   ══════════════════════════════════════════════════════════════════════ */
.map-embed {
  margin: var(--space-8) 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
  overflow: hidden;
  background: var(--canal-light);
  box-shadow: 0 2px 10px -4px var(--shadow-tint);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
@media (max-width: 600px) {
  .map-embed iframe { height: 300px; }
}
.map-caption {
  font-size: 0.875rem;
  color: var(--stone);
  margin-top: 0;
  margin-bottom: var(--space-8);
}

/* Wide tables inside guide prose must scroll in their own box, never push the
   page sideways. The guides here carry several comparison tables. */
.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}


/* Hero scrim, narrow viewports. Same left-to-right direction, but below 768px
   the copy spans the full width and sits over the gradient's right end — so it
   eases to a still-dark 70% rather than to transparent. Measured, not
   eyeballed: a fully transparent right edge puts the brightest pixel behind
   the headline under 4.5:1 against white text. */
@media (max-width: 768px) {
  :root {
    --hero-overlay:  linear-gradient(90deg,
                       color-mix(in srgb, var(--hero-scrim) 96%, transparent) 0%,
                       color-mix(in srgb, var(--hero-scrim) 88%, transparent) 45%,
                       color-mix(in srgb, var(--hero-scrim) 70%, transparent) 100%);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   Entity homepage (layouts/index.html) — appended at the END on purpose.
   ══════════════════════════════════════════════════════════════════════ */
.aka-strip {
  background: var(--amber-warm);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-5);
}
.aka-line {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal);
}
.aka-line strong { color: var(--deep-canal); margin-right: var(--space-2); }
/* Each name is one inline-block so it never breaks mid-name, and the line
   wraps BETWEEN names (nowrap on the whole run pushed the strip to 736px at
   320). The separator is a ::before on every name but the first, so it wraps
   WITH its name and can never start a line. */
.aka-name { display: inline; }
/* Comma separators, not dots: a comma sits at the END of a name, so when the
   line wraps the break happens at the space after it and the comma stays with
   the previous line. A "·" via ::before wrapped WITH the next name and
   ended up leading every wrapped line. */
.aka-name + .aka-name::before { content: ", "; color: var(--slate); }
.aka-greek { font-style: italic; color: var(--slate); }

.entity-nav {
  background: var(--canal-light);
  padding-block: var(--space-6);
}
.entity-nav-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 var(--space-3);
}
.entity-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-6);
  counter-reset: entity;
}
.entity-nav-list li { counter-increment: entity; font-size: 0.95rem; line-height: 1.5; }
.entity-nav-list li::before {
  content: counter(entity, decimal-leading-zero) " ";
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-1);
}
.entity-nav-list a { color: var(--deep-canal); text-decoration: none; }
.entity-nav-list a:hover { text-decoration: underline; }
@media (min-width: 600px)  { .entity-nav-list { grid-template-columns: 1fr 1fr; } }

.entity-article { padding-block: var(--space-12) var(--space-8); }
.entity-prose h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--deep-canal);
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  scroll-margin-top: 96px;         /* clear the fixed header on anchor jumps */
}
.entity-prose h2:first-child { margin-top: 0; }
@media (min-width: 768px)  { .entity-article { padding-block: var(--space-16) var(--space-12); } }

/* The one commercial block. Breaks out of the narrow prose column to the
   normal container width so three cards sit side by side. */
.home-tours {
  --_w: min(1100px, calc(100vw - 3rem));
  width: var(--_w);
  margin-inline: calc(50% - var(--_w) / 2);
  margin-block: var(--space-8) var(--space-6);
}
.home-tours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px)  { .home-tours-grid { grid-template-columns: repeat(3, 1fr); } }
.home-tour-card { text-decoration: none; }
.home-tour-card .experience-title { font-size: 1.05rem; }
.home-tours-all {
  text-align: center;
  margin: var(--space-6) auto 0;
  max-width: 680px;
  color: var(--slate);
}
.home-tours-widget {
  max-width: 760px;
  margin: var(--space-10) auto 0;
  padding: var(--space-6);
  background: var(--amber-warm);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-xl);
  scroll-margin-top: 96px;
}
.home-tours-widget .section-overline { margin-bottom: var(--space-2); }
.home-tours-widget-lede { color: var(--slate); margin: 0 0 var(--space-5); font-size: 0.95rem; }


/* Gallery dropped into the entity article (home-gallery shortcode). The
   section was inheriting the 704px article column, so its dark background was
   a narrow block while the photo strip broke out to 100vw and hung outside it.
   Make the SECTION full-bleed too, and undo the article's h2/p rhythm inside. */
.entity-prose .gallery-section {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--space-10) 0;
}
.entity-prose .gallery-section .section-header { max-width: 680px; margin-inline: auto; }
.entity-prose .gallery-section h2 { margin-top: 0; margin-bottom: var(--space-3); scroll-margin-top: 0; }
.entity-prose .gallery-section p  { margin-bottom: 0; }
.entity-prose .gallery-section figure { margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   REFERENCE LAYOUT — stairwaytoheavenmadeira.com
   ══════════════════════════════════════════════════════════════════════════
   Marina, 2026-08-26: "make all the sections have the same layout as that
   site — keep our own colours and fonts."

   Measured off the reference and adopted here:
     container      820px, prose column capped at 680px
     rhythm         one uniform 51px padding-block on EVERY section
     bands          none — every section shares the page background
     alignment      left, everywhere (the scaffold centred its section headers)
     scale          h1 61px / h2 34px / body 20.4px-1.55 / eyebrow 12.75px
     components     tinted boxes with a thick LEFT accent rule; bordered cards
                    at 8px radius; 2-up grids; borderless FAQ rows
   Deliberately NOT adopted: its serif (Newsreader) and its palette. Every
   colour below is a Poseidon token; every font stays Outfit/Inter.

   Appended at the END of main.css because these rules are order-sensitive —
   they must beat the scaffold's centred, banded, wide-container defaults.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Content width reverted to the pre-reference values (Marina, 2026-08-26):
     .container 1200px / .container-narrow 768px, as before. Only the WIDTH is
     reverted — the reference's rhythm, left alignment, type scale and
     component language all stay. The prose measure follows the narrow column
     so body copy fills it rather than stopping short of the edge. */
  --ref-measure:   768px;   /* prose line length = the narrow column */
  --ref-container: 1200px;  /* wide sections */
  --ref-narrow:    768px;   /* article / prose column */
  --ref-rhythm:    51px;    /* uniform section padding-block */
}

/* ── 1. Container + rhythm ────────────────────────────────────────────── */
.container {
  max-width: var(--ref-container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container-narrow { max-width: var(--ref-narrow); }
.section { padding-block: var(--ref-rhythm); }

/* No alternating bands: every section sits on the page background. */
.section,
.how-it-works,
.highlights-section,
.experiences-section,
.comparison-section,
.faq-section,
.explore-section,
.editorial-section,
.entity-article,
.alt-tours-section,
.guides-listing { background: var(--marble-white); }

/* ── 2. Section header: left-aligned eyebrow → title → deck ───────────── */
.section-header { text-align: left; margin-bottom: var(--space-6); }
.section-overline {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-2);
}
.section-title {
  font-size: clamp(1.6rem, 3.6vw, 2.125rem);   /* 34px at full size */
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
.section-subtitle {
  font-size: 1.0625rem;
  max-width: var(--ref-measure);
  margin-inline: 0;
  color: var(--slate);
}

/* ── 3. Prose: one measure, one rhythm ────────────────────────────────── */
.prose,
.entity-prose,
.guide-body .prose { max-width: none; }
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote { max-width: var(--ref-measure); }
.prose p {
  font-size: 1.275rem;      /* 20.4px */
  line-height: 1.55;
  color: var(--slate);
  margin-bottom: var(--space-5);
}
.prose li { font-size: 1.0625rem; line-height: 1.6; }
.prose h2,
.entity-prose h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.125rem);
  line-height: 1.2;
  margin-top: calc(var(--ref-rhythm) + 9px);
  margin-bottom: var(--space-4);
}
.prose h3 { font-size: 1.25rem; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose table { font-size: 1rem; }

/* ── 4. Hero: reference proportions, left-aligned; our photo is kept ──── */
.hero-content { align-items: flex-start; }
.hero-text { max-width: var(--ref-measure); }
.hero-overline { font-size: 0.8rem; letter-spacing: 0.14em; }
.hero-title {
  font-size: clamp(2.25rem, 6.2vw, 3.825rem);   /* 61.2px at full size */
  line-height: 1.15;
  margin-bottom: var(--space-5);
}
.hero-subtitle {
  font-size: clamp(1.05rem, 2.4vw, 1.275rem);
  line-height: 1.55;
  max-width: var(--ref-measure);
}
.hero-byline {
  font-size: 0.83rem;
  color: rgb(255 255 255 / 0.72);
  margin-top: var(--space-5);
}

/* ── 5. Facts bar — the reference's dark stat strip under the hero ────── */
.trust-band {
  background: var(--deep-canal);
  box-shadow: none;
  padding-block: 1.2rem;
}
.trust-grid {
  justify-content: flex-start;
  gap: var(--space-5) var(--space-10);
  max-width: var(--ref-narrow);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.trust-item { display: block; }
.trust-icon-svg { display: none; }
.trust-text { display: block; }
.trust-metric {
  display: block;
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--white);
}
.trust-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--silver);
  margin-top: 2px;
}

/* ── 6. Tinted callouts with a thick left rule (the .infobox pattern) ─── */
.aka-strip {
  background: var(--canal-light);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--deep-canal);
  border-radius: 0;
  padding: 1.15rem 1.5rem;
  max-width: var(--ref-narrow);
  margin: var(--ref-rhythm) auto 0;
}
.aka-line { font-size: 0.95rem; }

/* ── 7. On-this-page list ─────────────────────────────────────────────── */
.entity-nav { background: transparent; padding-block: var(--space-8) 0; }
.entity-nav .container,
.entity-nav .container-narrow {
  border: 1px solid var(--hairline);
  background: var(--amber-warm);
  padding: 1.25rem 1.5rem;
}
.entity-nav-list li { font-size: 0.95rem; }

/* ── 8. Cards: light fill, hairline border, 8px radius ────────────────── */
.experience-card,
.guide-card,
.step-card,
.review-card,
.tour-booking-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: none;
}
.experience-card:hover,
.guide-card:hover,
.step-card:hover {
  box-shadow: 0 2px 10px -4px var(--shadow-tint);
  transform: none;
}

/* Two-up grids, like the reference's .card-grid / .season-grid. */
.guides-grid,
.steps-grid { grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 700px) {
  .guides-grid,
  .steps-grid { grid-template-columns: 1fr 1fr; }
}

/* The three homepage tour cards sit THREE IN A ROW (Marina, 2026-08-26) and
   are allowed to break out wider than the 768px prose column to do it — they
   are a comparison set, and stacking or wrapping them breaks the read. The
   block is centred on the column it breaks out of, capped so it never exceeds
   the page container, and collapses to one column on narrow screens. */
.home-tours {
  --_w: min(1080px, calc(100vw - 3rem));
  width: var(--_w);
  margin-inline: calc(50% - var(--_w) / 2);
}
/* The cards live INSIDE .entity-prose, whose link styling underlines every
   anchor — and each card IS an anchor, so title, description, rating and price
   all rendered underlined. Card anchors opt out; real inline prose links keep
   their underline. */
.home-tour-card,
.home-tour-card:hover,
.home-tour-card * { text-decoration: none; }
.entity-prose .home-tours a.experience-card { text-decoration: none; }

.home-tours-grid { grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 700px)  { .home-tours-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .home-tours-grid { grid-template-columns: repeat(3, 1fr); } }
#experiences .experiences-grid { grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 700px) {
  #experiences .experiences-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 9. Gallery — the scaffold's dark full-bleed theatre, RESTORED ────────
   Reverted on request (Marina, 2026-08-26): the reference-layout pass had
   re-skinned the photo strip as a contained, light, hairline-bordered grid.

   Re-asserted rather than merely deleted, because §1's blanket
   `.section { background: var(--marble-white) }` matches `.gallery-section`
   too (its class list is `section gallery-section`) and silently repainted
   the theatre light even after the override block was removed. Removing an
   override is not the same as restoring the original when a LATER rule of
   equal specificity is still standing. */
.gallery-section {
  background: var(--deep-canal);
  padding-bottom: var(--space-8);
}
.gallery-section .section-title    { color: var(--white); }
.gallery-section .section-subtitle { color: rgb(255 255 255 / 0.72); }
.gallery-section .section-header   { text-align: center; margin-inline: auto; }

/* ── 9b. Explore hub header centred (Marina, 2026-08-26) ──────────────────
   §2 left-aligns every section header; this one reads better centred. */
.explore-section .section-header { text-align: center; }
.explore-section .section-subtitle { margin-inline: auto; }

/* ── 10. FAQ: borderless rows separated by hairlines ──────────────────── */
.faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}
.faq-question { padding-inline: 0; font-size: 1.0625rem; }
.faq-answer-inner { padding-inline: 0; max-width: var(--ref-measure); }

/* ── 11. Comparison table ─────────────────────────────────────────────── */
.comparison-table { font-size: 0.95rem; }
.comparison-wrapper { border: 1px solid var(--hairline); border-radius: 8px; }

/* ── 12. Widget blocks read as callouts, not hero panels ──────────────── */
.booking-widget-wrapper,
.home-tours-widget {
  background: var(--amber-warm);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold);
  border-radius: 0;
}
.guide-availability .booking-widget-wrapper,
.alt-tours-section .booking-widget-wrapper { padding: 1.25rem 1.5rem; }

/* ── 13. Buttons: reference proportions ───────────────────────────────── */
.btn-primary, .btn-secondary, .btn-outline { border-radius: 6px; }
.btn-lg { font-size: 1.01rem; padding: 0.71rem 1.41rem; }

/* ── 14. Guide article header matches a section header ────────────────── */
.guide-header { padding-block: var(--ref-rhythm) var(--space-6); }
.guide-title { font-size: clamp(1.9rem, 5vw, 2.75rem); line-height: 1.18; }
.guide-subtitle { font-size: 1.275rem; line-height: 1.55; max-width: var(--ref-measure); }
.guide-meta { font-size: 0.83rem; color: var(--stone); }
.guide-body { padding-block: 0; }

/* ── 15. CTA band: tinted panel, not a dark full-bleed slab ───────────── */
.cta-band { background: var(--marble-white); padding-block: var(--ref-rhythm); }
.cta-band-inner {
  background: var(--canal-light);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  text-align: left;
  max-width: var(--ref-narrow);
  margin-inline: auto;
}
.cta-title { color: var(--deep-canal); font-size: 1.5rem; }
.cta-body { color: var(--slate); max-width: var(--ref-measure); margin-inline: 0; }
.cta-band .section-overline { color: var(--gold-text); }

@media (max-width: 600px) {
  :root { --ref-rhythm: 38px; }
  .prose p, .hero-subtitle, .guide-subtitle { font-size: 1.0625rem; }
}


/* ── REFERENCE LAYOUT, part 2 ─────────────────────────────────────────────
   Header + facts bar, measured off stairwaytoheavenmadeira.com.

   The header deliberately uses a WIDER inner (1120px) than the 820px content
   column — the reference does the same, and it is why its seven nav items fit
   on one line. Narrowing the shared .container to 820px in part 1 wrapped
   "How to Visit" onto three lines; the fix is the reference's own combination
   of a wider header inner AND compact uppercase nav links (13.6px/600), not
   a wider content column.
   ──────────────────────────────────────────────────────────────────────── */

.site-header .container { max-width: 1120px; }

.nav-links { gap: 0 1.6rem; }
.nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-cta {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-primary { font-size: 1.0625rem; letter-spacing: 0.01em; }
.logo-tagline { font-size: 0.6rem; }

/* ── Facts bar (partials/facts-bar.html) ──────────────────────────────────
   Dark full-bleed strip under the hero: big value, small letterspaced label.
   Values are entity facts, not a tour's rating. */
.facts-bar {
  background: var(--deep-canal);
  border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}
.facts-grid {
  max-width: 1120px;
  margin-inline: auto;
  padding: 1.15rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.75rem;
}
.facts-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
}
.facts-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 3px;
}

@media (max-width: 600px) {
  .facts-grid { gap: 0.9rem 1.75rem; }
  .facts-value { font-size: 1.25rem; }
}


/* ── REFERENCE LAYOUT, part 3: left-align the remaining centred blocks ────
   The reference is left-aligned throughout — there is no centred text on the
   page. The scaffold centres a dozen blocks by default; these are the ones
   that still read as centred after parts 1–2. Buttons and the footer legal
   row keep their own alignment.
   ──────────────────────────────────────────────────────────────────────── */

.guide-header,
.itinerary-header,
.itinerary-narrative,
.related-tours-title,
.reviews-disclaimer,
.faq-contact,
.home-tours-all,
.highlights-cta,
.steps-cta,
.tour-booking-note { text-align: left; }

.guide-title,
.guide-subtitle,
.guide-meta { margin-inline: 0; }

.itinerary-narrative,
.reviews-disclaimer,
.faq-contact { max-width: var(--ref-measure); margin-inline: 0; }

/* The breadcrumb sits on the page background, not its own tinted band. */
.breadcrumb { background: var(--marble-white); border-bottom: 1px solid var(--hairline); }



/* ── REFERENCE LAYOUT, part 4: restore fixed-header clearance ─────────────
   `.clears-header` is declared ~400 lines above this block, so part 1's
   `.section { padding-block: var(--ref-rhythm) }` overrode its padding-top on
   every `section.section.clears-header` — the 404 and the guides hub then had
   their first heading clipped under the fixed header at 320/390px. Same
   source-order trap the kit warns about: append order-sensitive rules at the
   END, and re-declare anything the new rules outrank. Caught by
   _audit_viewport.py, not by eye.
   ──────────────────────────────────────────────────────────────────────── */
.clears-header { padding-top: calc(66px + var(--space-8)); }
@media (min-width: 768px) {
  .clears-header { padding-top: calc(66px + var(--space-10)); }
}
/* The hero already clears the header via .hero-content's own padding-top, and
   guide/tour pages open with a breadcrumb, so only these two need it. */