/* ============================================================
   Travel Niche — Main Stylesheet
   Mobile-first, CSS custom properties, no dependencies
   Palette: Kichijoji / Inokashira — soot-black forest green + deep moss
   + warm ochre-rust CTA, on paper cream. Leafy and low-rise.
   (WCAG AA MEASURED, not guessed — every pair below computed with the
    sRGB relative-luminance formula; ratios are in the comments.)
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* Brand Colors — Kichijoji forest green / deep moss / warm ochre-rust.
     Variable names are legacy-semantic; values are the site palette.
     Ratios in parentheses are MEASURED, not estimated. */
  --deep-canal:    #1B2A21;   /* Soot-black green — dark UI + hero overlay
                                 (white on it: 15.00)                     */
  --gold:          #A35A12;   /* Primary CTA fill — warm ochre-rust
                                 (white on it: 5.21 · as text on bg: 4.99) */
  --gold-light:    #B0621A;   /* Lit ochre — CTA gradient end
                                 (white on it: 4.56 — the ceiling; any
                                  lighter and button text fails AA)       */
  --gold-dark:     #7A420C;   /* Pressed state (white on it: 8.04)        */
  --dutch-orange:  #3E6B3A;   /* Deep moss — badges (white on it: 6.23)   */
  --canal-teal:    #2C5C46;   /* Forest — accent / prose links (7.37)     */
  --canal-light:   #E7EEE6;   /* Pale sage — soft panels                  */
  --amber-warm:    #FDFCF7;   /* Paper off-white                          */

  /* Neutrals */
  --marble-white:  #FBFAF4;   /* Paper cream base background             */
  --charcoal:      #171C18;   /* Near-black ink — primary text (16.52)   */
  --slate:         #4A5A4E;   /* Secondary text (7.01 on bg)             */
  --stone:         #59685C;   /* Tertiary text (5.64 on bg)              */
  --silver:        #CDD6CC;   /* Light text / hairlines (10.06 on dark)  */
  --mist:          #E4EBE2;   /* Pale sage wash                          */
  --white:         #FFFFFF;

  /* Gradients */
  /* Hero overlay must hold WHITE body text over ANY tour photo, including the
     bright shopfront and park backgrounds this niche ships. The donor's
     0.92 -> 0.22 -> 0.12 ramp washed out the last two lines of the hero
     subtitle at 390px, so the floor is raised and an extra soot stop is added
     at the bottom. The guarantee for text legibility is the .hero-text scrim
     below, which is what was actually measured. */
  --hero-overlay:    linear-gradient(160deg, rgba(27,42,33,0.94) 0%, rgba(27,42,33,0.80) 45%, rgba(163,90,18,0.30) 75%, rgba(27,42,33,0.72) 100%);
  --gold-shimmer:    linear-gradient(135deg, var(--gold), var(--gold-light));
  --ocean-depth:     linear-gradient(135deg, #1B2A21, #A35A12);

  /* Typography */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  'Playfair Display', Georgia, 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%; }
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(--white);
  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 rgba(163,90,18, 0.34);
  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 rgba(163,90,18, 0.46);
  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;
}

.btn-secondary-dark {
  border-color: var(--deep-canal);
  color: var(--deep-canal);
}
.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);
  white-space: nowrap;
  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-16);
}

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

.section-overline {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.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 {
  background: rgba(27,42,33, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: var(--space-2);
  box-shadow: var(--shadow-lg);
}

/* Pages with no hero photo behind the header (guides, /tours/, tour pages,
   legal). The header's brand and nav links are white by design because they sit
   on the hero image; on a pale page they vanish until JS adds .scrolled. The
   `no-hero` class is emitted by baseof.html for any page that is not the home
   page or a landing spoke. */
body.no-hero .site-header {
  background: var(--deep-canal);
  box-shadow: var(--shadow-md);
}

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

/* Logo
   NOTE: the brand block must be allowed to SHRINK. With flex-shrink:0 a long
   siteName ("COPENHAGEN CHRISTMAS MARKETS") + a letter-spaced tagline overflow
   .nav-inner and push the hamburger clean off the viewport — body's
   overflow-x:hidden then clips it, so scrollWidth still measures clean and the
   bug is invisible to a page-overflow probe. Measure the hamburger's
   getBoundingClientRect().right at 390px, not just document.scrollWidth. */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
}

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

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

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

.logo-tagline {
  font-size: 0.6rem;
  font-weight: 500;
  /* NOT var(--dutch-orange): that brass is tuned for dark-on-light body text
     (5.05:1 on white) and drops to 2.7:1 on the dark header bar. Lighter brass
     reads at 7.1:1 there. */
  color: #D9B85C;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow phones: let a long brand WRAP to two lines rather than ellipsis away
   ("COPENHAGEN CHRISTMAS MA…" reads as a broken header), and drop the
   decorative tagline so the hamburger always has room. */
@media (max-width: 430px) {
  .logo-primary {
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    white-space: normal;
    line-height: 1.15;
  }
  .logo-tagline { display: none; }
}

/* Long CTA labels must wrap on small screens instead of forcing page scroll
   (.btn-primary sets white-space:nowrap for desktop pill buttons). */
@media (max-width: 480px) {
  .btn-lg { white-space: normal; max-width: 100%; }
}

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

.nav-link {
  font-size: 0.9rem;
  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); 
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* REQUIRED — do not delete. The browser UA stylesheet sets
     `button { align-items: flex-start }`, which beats flex's initial `normal`
     (= stretch). Without this line the three .hamburger-line spans are empty
     block children whose cross-size is content-based, so they compute to
     width: 0px and the menu button renders as a blank 36px square. The button
     itself still measures 36x36, so a scrollWidth or bounding-box probe reports
     everything fine — you only catch it by measuring .hamburger-line's width.
     (The earlier `flex-shrink: 0` patch fixed a DIFFERENT symptom — the button
     being squeezed by a long brand name — and does not cover this one.) */
  align-items: stretch;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  border-radius: var(--rounded-md);
  margin-left: auto;
  transition: background var(--transition-fast);
  /* long brand names overflow .nav-inner; without this the button shrinks to
     min-content (= padding only) and the lines collapse to 0 = invisible menu */
  flex-shrink: 0;
}
.hamburger:hover { background: rgba(255,255,255,0.10); }
.hamburger-line {
  display: block;
  /* belt-and-braces against the UA align-items above */
  width: 100%;
  height: 2px;
  flex-shrink: 0;
  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: rgba(27,42,33,0.55);
  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.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* NOT var(--gold): the CTA red is a dark colour and the hero sits on a
     photo, so the overline disappeared into the image. Pale brass reads on
     both a dark overlay and a bright winter photograph. */
  color: #F0D48A;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  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;
  /* Localised text scrim. The full-bleed --hero-overlay alone cannot guarantee
     AA for white text over the bright shopfront / park / sky photos this niche
     ships: measured worst background pixel behind the text box was 2.06:1 on
     /kichijoji/ with the overlay alone. This wash sits behind the text column
     only, so the photograph keeps its brightness everywhere else.
     Re-measured after adding it, worst background pixel behind the text box:
     / 9.57:1 · /ghibli-museum/ 10.32:1 · /kichijoji/ 8.17:1. */
  position: relative;
  padding: var(--space-5);
  border-radius: var(--rounded-lg);
  background: linear-gradient(180deg,
              rgba(27,42,33,0.86) 0%,
              rgba(27,42,33,0.82) 60%,
              rgba(27,42,33,0.74) 100%);
  /* No backdrop-filter here on purpose: a blurred backdrop over a full-height
     hero is expensive to composite (it timed out a full-page screenshot), and
     the opaque gradient above already carries the contrast on its own. */
}

.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 rgba(27,42,33,0.06);
  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(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-4);
  box-shadow: 0 2px 8px rgba(62,107,58,0.32);
}

.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 ──────────────────────────────────────────── */
.gallery-section {
  background: var(--mist);
  padding-bottom: var(--space-6);
}

.gallery-scroll-wrapper {
  width: 100%;
  overflow: hidden;
}

.gallery-scroll {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-5);
  padding: var(--space-4) var(--space-5) var(--space-6);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--silver) transparent;
}
.gallery-scroll::-webkit-scrollbar { height: 4px; }
.gallery-scroll::-webkit-scrollbar-track { background: transparent; }
.gallery-scroll::-webkit-scrollbar-thumb {
  background: var(--silver);
  border-radius: var(--rounded-full);
}

.gallery-item {
  flex-shrink: 0;
  width: min(280px, 75vw);
  scroll-snap-align: start;
  border-radius: var(--rounded-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.gallery-item:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.gallery-caption {
  background: var(--white);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8rem;
  color: var(--slate);
  font-weight: 500;
  border-top: 1px solid var(--mist);
}

.gallery-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--stone);
  font-size: 0.8rem;
  margin-top: var(--space-3);
}

/* ── 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: rgba(231,238,230, 0.45);
  border-radius: var(--rounded-lg);
  border: 1px solid rgba(231,238,230, 0.75);
}
.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 {
  display: inline-block;
  background: var(--gold);
  color: var(--white);
  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(--white);
}

.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: rgba(231,238,230, 0.45); }

.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: rgba(231,238,230, 0.55);
  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);
}

.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(--white);
  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.825rem;
  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: rgba(231,238,230, 0.30);
}

.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-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: 0.9rem;
  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);
}
/* FIX (2026-08-05): this rule was `.faq-answer:not([hidden])`, but main.js strips
   [hidden] from EVERY answer on load so the max-height transition can run — so every
   answer matched it and the accordion rendered FULLY EXPANDED until the first click
   (measured 15/15 open on load here). Drive the open state off the button's
   aria-expanded instead; .faq-answer is the adjacent sibling of .faq-question, so `+`
   reaches it. main.js still sets an exact inline max-height on click, so this rule
   owns only the initial state. */
.faq-question[aria-expanded="true"] + .faq-answer {
  max-height: 1200px;
}
.faq-answer[hidden] { display: block !important; max-height: 0; } /* override hidden for animation */

.faq-answer-inner {
  padding-bottom: var(--space-5);
  font-size: 0.95rem;
  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.875rem;
  line-height: 1.65;
  color: var(--stone);
  max-width: 280px;
}

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

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

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

.footer-address {
  font-size: 0.875rem;
  color: var(--stone);
  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-copy { font-size: 0.8rem; color: var(--stone); }

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

.footer-legal-link {
  font-size: 0.8rem;
  color: var(--stone);
  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);
  }

  .gallery-item { width: 320px; }
  .review-card  { width: 340px; }
}

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

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

  .steps-grid { grid-template-columns: repeat(3, 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: 100px; }

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

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

  .gallery-item { width: 360px; }
}

/* ── 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 rgba(27,42,33,0.06);
}

.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: 0.9rem;
  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 {
  background: var(--canal-light);
  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 {
  color: var(--dutch-orange);
  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);
}

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

.tour-highlights li,
.tour-includes 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(--white);
  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 {
  color: var(--dutch-orange);
  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.75rem; }
.hero-badge { background: rgba(0,0,0,0.55); color: var(--white); border: 1px solid var(--canal-teal); 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). 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;
}

/* Glacial-green glow accent on trust band icons */
.trust-icon-svg { filter: drop-shadow(0 0 6px rgba(163,90,18,0.18)); }

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

/* ── 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.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stone);
  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.78rem;
  color: var(--silver);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.footer-seo-link:hover {
  color: var(--canal-teal);
  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: rgba(231,238,230, 0.40);
}
.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 (kyoto-page spoke/landing pages) ── */
.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 rgba(15,23,42,.12); transition: transform .25s ease, box-shadow .25s ease; }
.editorial-figure a:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,23,42,.18); }
.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; }


/* -- In-prose arithmetic tables (Copenhagen Card break-even, price face-offs) --
   Wrap any wide editorial table in <div class="prose-scroll"> so the TABLE
   scrolls inside its own box at every viewport width instead of pushing the
   page body sideways. The <=640px ".prose table { display:block }" rule is
   reverted inside the wrapper -- the wrapper owns the scroll now. */
.prose-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: var(--space-6) 0;
}
.prose-scroll > table { margin: 0; min-width: 34rem; }
@media (max-width: 640px) {
  .prose-scroll > table { display: table; overflow-x: visible; }
}
.prose-scroll-hint {
  font-size: 0.8rem;
  color: var(--slate);
  font-style: italic;
  margin: 0 0 var(--space-6);
}
.prose-scroll + .prose-scroll-hint { margin-top: calc(var(--space-4) * -1); }
.prose td.num, .prose th.num { text-align: right; white-space: nowrap; }
.prose tr.is-total td, .prose tr.is-total th { font-weight: 700; color: var(--deep-canal); background: rgba(231,238,230, 0.55); }

/* -- In-prose CTA buttons --
   ".prose a" (0,1,1) outranks ".btn-primary" (0,1,0), so an in-body CTA would
   render teal-on-gold with an underline. Re-assert each button's OWN token --
   never a hardcoded colour, so a re-skinned fork keeps working. */
.prose a.btn-primary { color: var(--white); text-decoration: none; }
.prose a.btn-outline { color: var(--canal-teal); text-decoration: none; }
.prose a.btn-outline:hover { color: var(--white); }
.prose .cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}