/* ==========================================================================
   Kingsbury Tours — Design System
   Colors sampled directly from reference/kingsbury-logo.png.
   ========================================================================== */

:root {
  /* ---- Brand colors -------------------------------------------------- */
  --color-primary-900: #082C4E; /* deepest navy — footer, high-contrast text on light */
  --color-primary-700: #0B3C6B; /* wordmark blue — headings, nav, primary buttons */
  --color-primary-500: #12579C; /* icon wave blue — links, interactive states */
  --color-primary-300: #5C8FC4; /* muted blue — borders, secondary UI on dark */
  --color-primary-100: #E6EEF6; /* pale blue wash — section backgrounds */

  --color-secondary-700: #35591E; /* deep leaf green — dark accents */
  --color-secondary-500: #4A7729; /* leaf green — secondary buttons, nature tags */
  --color-secondary-300: #8FB56A; /* light green — subtle accents, tags */
  --color-secondary-100: #EEF4E7; /* pale green wash */

  --color-accent-600: #D98E0A; /* deep gold — accent text on light, hover state */
  --color-accent-500: #F6A623; /* golden yellow — active states, small accents only */
  --color-accent-100: #FDF1DA; /* pale gold wash — sparing use */

  /* ---- Neutrals -------------------------------------------------------- */
  --color-white: #FFFFFF;
  --color-warm-white: #FBF9F5;
  --color-surface: #F5F2EC;
  --color-charcoal: #201F1D;
  --color-ink: #33312D;
  --color-muted: #6E6A63;
  --color-border: #E2DED4;

  /* ---- Semantic aliases -------------------------------------------------- */
  --color-background: var(--color-warm-white);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-muted);
  --color-link: var(--color-primary-500);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-lg: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --text-3xl: clamp(2.75rem, 1.9rem + 4vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---- Spacing (4px base scale) ------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout -------------------------------------------------------- */
  --container-max: 1320px;
  --container-padding: clamp(1.25rem, 3vw, 3rem);
  --nav-height: 84px;

  /* ---- Radius -------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Shadow (used sparingly — never as a decorative default) -------- */
  --shadow-sm: 0 1px 3px rgba(8, 44, 78, 0.08);
  --shadow-md: 0 8px 24px rgba(8, 44, 78, 0.14);
  --shadow-lg: 0 20px 48px rgba(8, 44, 78, 0.22);

  /* ---- Motion -------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-scene: 1400ms;
  /* Shared pace for the hero's coordinated scene change (copy, cards,
     progress) — kept separate from --duration-base so slowing the hero
     doesn't also slow ordinary UI hover/focus feedback elsewhere. */
  --duration-hero: 650ms;
  --autoplay-interval: 6000ms;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-float: 90;
  --z-nav: 100;
  --z-overlay: 200;
  --z-lightbox: 300;
  --z-skip-link: 999;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-primary-700);
  line-height: var(--leading-tight);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}

button {
  font-family: inherit;
}

/* ---- Focus visibility (never removed, only restyled) ------------------- */
:focus-visible {
  outline: 3px solid var(--color-accent-500);
  outline-offset: 2px;
}

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-skip-link);
  background: var(--color-primary-700);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

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

/* Sections that are real in-page navigation targets (footer "Explore"
   links, etc.) need this so a jump doesn't land them partly under the
   fixed header. */
main section[id] {
  scroll-margin-top: var(--nav-height);
}

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

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  min-height: 44px;
}

.btn-primary {
  background: var(--color-accent-500);
  color: var(--color-primary-900);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-600);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--color-white);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.btn-outline-dark {
  background: transparent;
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
  background: var(--color-primary-700);
  color: var(--color-white);
}

/* ==========================================================================
   Site header / navigation
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-5);
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.55) 0%, rgba(8, 20, 38, 0) 100%);
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              padding-block var(--duration-base) var(--ease-standard);
}

.site-header.is-scrolled {
  background: rgba(251, 249, 245, 0.96);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-3);
  backdrop-filter: blur(6px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  box-shadow: var(--shadow-sm);
}

.brand__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.primary-nav ul {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.primary-nav a:hover {
  color: var(--color-accent-500);
}

.site-header.is-scrolled .primary-nav a {
  color: var(--color-primary-700);
}

.nav-cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.site-header.is-scrolled .nav-toggle span {
  background: var(--color-primary-700);
}

.mobile-nav[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .primary-nav,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav:not([hidden]) {
    display: block;
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--color-primary-900);
    z-index: var(--z-overlay);
    padding: var(--space-6) var(--container-padding);
    overflow-y: auto;
  }

  .mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .mobile-nav a {
    color: var(--color-white);
    font-size: var(--text-lg);
    font-family: var(--font-display);
    text-decoration: none;
  }

  .mobile-nav .btn {
    margin-top: var(--space-6);
    width: 100%;
    justify-content: center;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ==========================================================================
   Cinematic destination hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--duration-scene) var(--ease-standard);
}

.hero__image.is-active {
  opacity: 1;
  z-index: 1;
}

.hero__image.is-kenburns {
  animation: heroKenBurns 9s var(--ease-standard) forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1.03); }
  to { transform: scale(1); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* A light, uniform wash across the whole photo (helps the nav and cards
     read clearly against bright skies/water) layered under the existing
     bottom-weighted gradient that keeps the hero copy legible. */
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.2) 0%, rgba(8, 20, 38, 0.05) 32%, rgba(8, 20, 38, 0.72) 100%),
              rgba(8, 20, 38, 0.14);
}

.hero__layout {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: var(--space-9) var(--space-8);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 42rem;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Inherited by every child (eyebrow, title, tagline, description) so text
     stays legible over busy or mid-brightness photo areas the gradient
     scrim alone doesn't darken enough — gold-on-green is the hardest case. */
  text-shadow: 0 1px 3px rgba(8, 20, 38, 0.55), 0 4px 16px rgba(8, 20, 38, 0.3);
  transition: opacity var(--duration-hero) var(--ease-standard),
              transform var(--duration-hero) var(--ease-standard);
}

.hero__copy.is-transitioning {
  opacity: 0;
  transform: translateY(14px);
}

.hero__eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-500);
}

.hero__title {
  font-size: var(--text-3xl);
  color: var(--color-white);
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.94);
  max-width: 32ch;
}

.hero__description {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.84);
  max-width: 52ch;
}

.hero__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero__nav-btn,
.hero__play-toggle {
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(8, 20, 38, 0.3);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.hero__nav-btn {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  line-height: 1;
}

.hero__play-toggle {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
}

.hero__nav-btn:hover,
.hero__nav-btn:focus-visible,
.hero__play-toggle:hover,
.hero__play-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.hero__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.85);
}

.hero__progress-bar {
  position: relative;
  width: 96px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.hero__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 12.5%;
  background: var(--color-accent-500);
  transition: width var(--duration-hero) var(--ease-standard);
}

/* ---- Destination card rail ------------------------------------------- */

.hero__cards {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 540px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow: hidden;
}

.hero__card-item {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  transition: transform var(--duration-hero) var(--ease-emphasized);
}

.hero__card {
  position: relative;
  width: 116px;
  height: 172px;
  border: none;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  outline: 0px solid var(--color-accent-500);
  outline-offset: 3px;
  transition: width var(--duration-hero) var(--ease-emphasized),
              height var(--duration-hero) var(--ease-emphasized),
              box-shadow var(--duration-hero) var(--ease-emphasized),
              outline-width var(--duration-hero) var(--ease-emphasized);
}

.hero__card.is-active {
  width: 140px;
  height: 208px;
  box-shadow: var(--shadow-lg);
  outline-width: 3px;
  z-index: 2;
}

.hero__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}

.hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 42%, rgba(8, 20, 38, 0.78) 100%);
}

.hero__card-label {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  color: var(--color-white);
}

.hero__card-name {
  font-weight: 700;
  font-size: var(--text-sm);
}

.hero__card-location {
  font-size: var(--text-xs);
  opacity: 0.8;
}

/* ==========================================================================
   Responsive breakpoints
   320 / 360 / 390 / 430 / 768 / 1024 / 1280 / 1440
   ========================================================================== */

@media (max-width: 1024px) {
  .hero__content {
    max-width: 34rem;
  }

  .hero__cards {
    max-width: 448px;
  }

  .hero__card {
    width: 94px;
    height: 140px;
  }

  .hero__card.is-active {
    width: 114px;
    height: 170px;
  }
}

@media (max-width: 767px) {
  .hero__layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    padding-block: var(--space-8) var(--space-5);
  }

  .hero__content {
    max-width: none;
  }

  .hero__title {
    font-size: var(--text-2xl);
  }

  .hero__description {
    max-width: none;
  }

  .hero__cards {
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
  }

  .hero__card-item {
    scroll-snap-align: start;
  }

  .hero__card {
    width: 108px;
    height: 150px;
  }

  .hero__card.is-active {
    width: 124px;
    height: 172px;
  }
}

/* ==========================================================================
   Scroll reveal (see js/reveal.js)
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-standard), transform 900ms var(--ease-standard);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Homepage sections — shared heading pattern
   ========================================================================== */

.section-eyebrow {
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary-500);
}

.section-eyebrow--light {
  color: var(--color-accent-500);
}

.section-heading {
  max-width: 42rem;
  margin-bottom: var(--space-7);
}

.section-heading h2 {
  font-size: var(--text-xl);
}

/* Larger, uppercase editorial headline — used for the major section
   headings below the hero so they carry real weight without introducing
   a new type scale. Centered so every major section title reads the same
   way across the page (Destinations, Journeys, Tours, Testimonials). */
.section-heading--display {
  text-align: center;
  margin-inline: auto;
}

.section-heading--display h2 {
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.section-lede {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  margin-top: var(--space-4);
}

/* ---- Minimal text link CTA — "EXPLORE →" / "READ STORY →" pattern ----- */

.text-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
}

.text-cta__arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.text-cta:hover .text-cta__arrow,
.text-cta:focus-visible .text-cta__arrow {
  transform: translateX(4px);
}

/* ---- Glass surface — used sparingly, as a layer over photography only - */

.glass-panel {
  background: rgba(8, 20, 38, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 32px rgba(8, 20, 38, 0.22);
}

.glass-chip {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

/* ---- Reveal variants (paired with js/reveal.js's [data-reveal]) ------- */

[data-reveal].reveal-clip {
  clip-path: inset(6% round var(--radius-lg));
  transform: none;
}

[data-reveal].reveal-clip.is-revealed {
  clip-path: inset(0 round var(--radius-lg));
}

/* ==========================================================================
   Plan your trip — brush-clipped intro photo + checklist
   ========================================================================== */

.trip-intro {
  padding-block: var(--space-9);
  background: var(--color-white);
  overflow: hidden;
}

.trip-intro__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.trip-intro__media {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
}

/* The source photo is already a pre-cut, irregular-edged image on a
   white matte (not CSS-clipped) — it's shown at its natural aspect
   ratio, uncropped, so none of its painted edge is lost. */
.trip-intro__image {
  display: block;
  width: 100%;
  height: auto;
  animation: tripImageBreathe 9s var(--ease-standard) infinite;
}

@keyframes tripImageBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.trip-intro__card {
  position: absolute;
  left: var(--space-4);
  bottom: 8%;
  z-index: 2;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trip-intro__card-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  font-weight: 700;
}

.trip-intro__card-phone {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-700);
  text-decoration: none;
}

.trip-intro__card-phone:hover,
.trip-intro__card-phone:focus-visible {
  color: var(--color-secondary-500);
}

.trip-intro__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-accent-600);
}

.trip-intro__content h2 {
  font-size: var(--text-2xl);
  line-height: 1.1;
  margin: 0 0 var(--space-5);
}

.trip-intro__desc {
  max-width: 52ch;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}

.trip-intro__checklist {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.trip-intro__checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.trip-intro__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary-700);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

/* ==========================================================================
   Section 01 — Featured destinations (asymmetric editorial grid)
   ========================================================================== */

.featured-destinations {
  padding-block: var(--space-10) var(--space-9);
  background: var(--color-warm-white);
}

.featured-destinations__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.featured-destinations__more {
  margin-top: var(--space-7);
  text-align: center;
}

.destination-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
}

.destination-feature__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-standard);
}

.destination-feature:hover .destination-feature__image,
.destination-feature:focus-visible .destination-feature__image {
  transform: scale(1.045);
}

.destination-feature__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 38%, rgba(8, 20, 38, 0.86) 100%);
  transition: opacity var(--duration-base) var(--ease-standard);
}

.destination-feature:hover .destination-feature__scrim,
.destination-feature:focus-visible .destination-feature__scrim {
  opacity: 0.88;
}

.destination-feature__body {
  position: relative;
  z-index: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform var(--duration-base) var(--ease-standard);
}

.destination-feature:hover .destination-feature__body,
.destination-feature:focus-visible .destination-feature__body {
  transform: translateY(-4px);
}

/* Only a couple of accent cards carry a glass panel — the rest sit
   directly on the gradient, so the grid doesn't read as eight identical
   tiles with a glass treatment slapped on every one. */
.destination-feature--accent .destination-feature__body {
  margin: var(--space-4);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.destination-feature__kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent-500);
}

.destination-feature__name {
  font-size: var(--text-lg);
  color: var(--color-white);
}

.destination-feature__desc {
  margin: 0;
  max-width: 32ch;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.86);
}

.destination-feature__cta {
  margin-top: var(--space-2);
  color: var(--color-white);
}

/* ==========================================================================
   Most popular tours — compact card carousel
   ========================================================================== */

.popular-tours {
  padding-block: var(--space-9);
  background: var(--color-white);
}

/* ---- Generic carousel (shared by Tours + Testimonials) ---------------- */

.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-4);
  overflow-x: auto;
  /* Without an explicit value here, setting overflow-x alone makes the
     browser implicitly treat this axis as scrollable too (per spec,
     "visible" on one axis gets force-changed to "auto" when the other
     isn't visible) — that's what let a mouse wheel or trackpad nudge the
     cards up and down. Locking it to hidden keeps this a purely
     horizontal slider. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__item {
  scroll-snap-align: start;
}

.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-2);
}

.carousel__dot {
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.carousel__dot:hover,
.carousel__dot:focus-visible {
  background: var(--color-primary-300);
}

.carousel__dot.is-active {
  background: var(--color-accent-500);
}

/* Exactly 3 full cards fit on desktop — width is a share of the track, not
   a fixed/viewport-relative size, so nothing is ever half-cut at the
   edge. Tablet and mobile show fewer at a time (see media queries below),
   and any tours beyond what's visible are reached via the dots. */
.popular-tours .carousel__item {
  flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
}

.tour-card {
  position: relative;
}

.tour-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tour-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-standard);
}

.tour-card:hover .tour-card__media img {
  transform: scale(1.06);
}

.tour-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.05) 0%, rgba(8, 20, 38, 0) 30%, rgba(8, 20, 38, 0.5) 100%);
}

.tour-card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* The body panel overlaps the photo, floating on its own shadow — a more
   contemporary layered treatment than a flat bordered box under the image. */
.tour-card__body {
  position: relative;
  z-index: 1;
  margin: -32px var(--space-3) 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

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

.tour-card__body h3 {
  font-size: var(--text-md);
  margin: 0 0 var(--space-4);
}

.tour-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.tour-card__duration {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.tour-card__duration-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-100);
  color: var(--color-secondary-500);
}

.tour-card__duration-icon svg {
  width: 14px;
  height: 14px;
}

/* A pill with a circular "cap" the arrow lives in, rather than a plain
   outlined text link — the cap slides and deepens in color on hover. */
.tour-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  padding-left: 14px;
  background: var(--color-primary-700);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.tour-card__cta:hover,
.tour-card__cta:focus-visible {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.tour-card__cta-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
}

.tour-card__cta-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-500);
  color: var(--color-primary-900);
  font-size: 0.85rem;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}

.tour-card__cta:hover .tour-card__cta-icon,
.tour-card__cta:focus-visible .tour-card__cta-icon {
  transform: translateX(3px);
  background: var(--color-accent-600);
}

/* ==========================================================================
   Section 03 — Curated journeys (numbered list + live image preview)
   Deliberately not a card grid — a text-forward list on one side with a
   single shared preview image that crossfades to match whichever journey
   is hovered/focused, echoing the "list with a hairline divider" language
   already used by the Why Kingsbury section rather than the tour-card
   treatment used above.
   ========================================================================== */

.journeys {
  padding-block: var(--space-9);
  background: var(--color-warm-white);
}

.journeys__showcase {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

.journeys__list {
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.journey-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
  padding-inline: 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start var(--duration-base) var(--ease-standard);
}

.journey-row:hover,
.journey-row:focus-visible,
.journey-row.is-active {
  padding-inline-start: var(--space-3);
}

.journey-row__index {
  flex-shrink: 0;
  width: 2.5rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary-300);
  transition: color var(--duration-base) var(--ease-standard);
}

.journey-row:hover .journey-row__index,
.journey-row.is-active .journey-row__index {
  color: var(--color-accent-500);
}

.journey-row__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journey-row__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary-700);
  transition: color var(--duration-base) var(--ease-standard);
}

.journey-row:hover .journey-row__title,
.journey-row.is-active .journey-row__title {
  color: var(--color-secondary-500);
}

.journey-row__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 42ch;
}

.journey-row__tags {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-secondary-500);
}

.journey-row__cta {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-700);
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.journey-row:hover .journey-row__cta,
.journey-row.is-active .journey-row__cta {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: var(--color-white);
  transform: translateX(4px);
}

.journey-row__thumb {
  display: none;
}

.journeys__preview {
  position: relative;
  min-width: 0;
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.journeys__preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-hero) var(--ease-standard);
}

.journeys__preview-image.is-active {
  opacity: 1;
}

/* ==========================================================================
   Section 04 — Guest testimonials (moving carousel)
   Uses the same generic .carousel mechanics as "Most Popular Tours" (see
   carousel.js), with its own quote-card design so the two sections still
   read as visually distinct.
   ========================================================================== */

.testimonials {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.testimonials .carousel__item {
  flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
}

.testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-warm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.testimonial-card__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-accent-500);
  margin-bottom: var(--space-2);
}

.testimonial-card__quote {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-100);
  color: var(--color-secondary-500);
}

.testimonial-card__avatar svg {
  width: 22px;
  height: 22px;
}

.testimonial-card__author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary-700);
}

.testimonial-card__location {
  font-size: var(--text-xs);
  color: var(--color-muted);
}


/* ==========================================================================
   Section 06 — Final conversion banner
   ========================================================================== */

.final-cta {
  padding-block: var(--space-9);
  background: var(--color-warm-white);
}

.final-cta__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-primary-900);
}

.final-cta__media {
  position: relative;
  overflow: hidden;
}

.final-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-cta__decoration {
  position: absolute;
  top: -10%;
  right: -10%;
  width: min(70%, 440px);
  height: auto;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.final-cta__content {
  position: relative;
  z-index: 1;
  padding: var(--space-9) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  color: var(--color-white);
}

.final-cta__content h2 {
  color: var(--color-white);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin: 0;
}

.final-cta__content p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
  margin: 0 0 var(--space-2);
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}

.btn-glass:hover,
.btn-glass:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

/* ==========================================================================
   Section 07 — Trust / proof strip (icon row)
   ========================================================================== */

.proof-strip {
  padding-block: var(--space-8);
  background: var(--color-white);
  border-block: 1px solid var(--color-border);
}

.proof-strip__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

.proof-strip__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* The source PNGs are recoloured via a mask rather than an <img>, so the
   brand colour is controlled entirely in CSS and the original files never
   need editing. */
.proof-strip__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: var(--color-primary-500);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.proof-strip__icon--local {
  -webkit-mask-image: url("../assets/icons/icon-local-expertise.png");
  mask-image: url("../assets/icons/icon-local-expertise.png");
}

.proof-strip__icon--tailor {
  -webkit-mask-image: url("../assets/icons/icon-tailor-made.png");
  mask-image: url("../assets/icons/icon-tailor-made.png");
}

.proof-strip__icon--support {
  -webkit-mask-image: url("../assets/icons/icon-support.png");
  mask-image: url("../assets/icons/icon-support.png");
}

.proof-strip__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proof-strip__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

.proof-strip__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-900);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--space-9) var(--space-5);
}

.site-footer__decoration {
  position: absolute;
  top: -10%;
  right: -4%;
  width: min(60%, 520px);
  height: auto;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.site-footer__top {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr 1.1fr;
  gap: var(--space-6);
  padding-block: 0 var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__brand img {
  width: 168px;
  height: auto;
  margin-bottom: var(--space-4);
  margin-left: -12px;
  /* No background plate — just a thin, crisp light outline (not a soft
     blurred halo) so the logo's navy/green tones read against the dark
     footer without looking like it's glowing. */
  filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.85))
          drop-shadow(0 0 1px rgba(255, 255, 255, 0.6));
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
  max-width: 24ch;
  margin: 0;
}

.site-footer h3 {
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--space-4);
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__nav a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--color-accent-500);
}

.site-footer__newsletter p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  max-width: 30ch;
  margin: 0 0 var(--space-4);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.newsletter-form__field {
  flex: 1 1 auto;
  min-width: 0;
}

.newsletter-form__field label {
  display: block;
}

.newsletter-form__field input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-white);
}

.newsletter-form__field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form__field input:focus-visible {
  outline-offset: 0;
  border-color: var(--color-accent-500);
}

.newsletter-form button {
  justify-content: center;
}

.newsletter-form__status {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-accent-500);
}

.newsletter-form__status:empty {
  display: none;
}

.site-footer__bottom {
  position: relative;
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--color-accent-500);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-accent-500);
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Homepage sections — responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .trip-intro__layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .featured-destinations__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .popular-tours .carousel__item {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }

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

  .journeys__preview {
    display: none;
  }

  .journey-row__thumb {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    order: 2;
  }

  /* The "active" treatment exists to match the shared preview panel,
     which is hidden at this width in favour of each row's own thumbnail
     — without it, only the first row would look permanently selected. */
  .journey-row.is-active {
    padding-inline-start: 0;
  }

  .journey-row.is-active .journey-row__index {
    color: var(--color-primary-300);
  }

  .journey-row.is-active .journey-row__title {
    color: var(--color-primary-700);
  }

  .journey-row.is-active .journey-row__cta {
    background: none;
    border-color: var(--color-border);
    color: var(--color-primary-700);
    transform: none;
  }

  .testimonials .carousel__item {
    flex-basis: calc((100% - var(--space-5)) / 2);
  }

  .final-cta__panel {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .final-cta__media {
    min-height: 320px;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-8);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__newsletter {
    grid-column: 1 / -1;
  }

  .proof-strip__list {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 32rem;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Destinations page — intro
   ========================================================================== */

.destinations-intro {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

.destinations-intro__media {
  position: absolute;
  inset: 0;
}

.destinations-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destinations-intro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.4) 0%, rgba(8, 20, 38, 0.18) 22%, rgba(8, 20, 38, 0.58) 52%, rgba(8, 20, 38, 0.88) 100%);
}

/* Matches .experiences-hero__inner's min-height — see the comment there. */
.destinations-intro__content {
  position: relative;
  z-index: 1;
  min-height: 586px;
  padding-block: var(--space-9) var(--space-8);
}

.destinations-intro__content h1 {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--text-3xl);
  line-height: 1.05;
  color: var(--color-white);
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.destinations-intro__lede {
  max-width: 46ch;
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.destinations-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ---- Destinations overview (two-column editorial, no cards) ------------- */

.destinations-overview {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.destinations-overview__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.destinations-overview__col h2 {
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.destinations-overview__lede {
  max-width: 46ch;
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

@media (max-width: 1024px) {
  .destinations-overview__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ==========================================================================
   Destinations page — interactive map experience
   ========================================================================== */

.map-experience {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.map-experience__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.filter-chip {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
  min-height: 40px;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.filter-chip:hover {
  border-color: var(--color-primary-300);
}

.filter-chip.is-active {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: var(--color-white);
}

.map-experience__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
  gap: var(--space-7);
  align-items: start;
}

/* ---- The map panel itself — the supplied artwork's cartography kept, its
   scattered stock icons and mismatched pins toned into a single warm
   duotone so it reads as a considered background rather than clip art.
   The panel is a light "paper" surface rather than open water — the
   artwork's own place names and legend text sit over transparent sea, and
   were unreadable against a dark background. ---- */

.sl-map {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sl-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 20%, rgba(18, 87, 156, 0.07), transparent 70%);
  pointer-events: none;
}

.sl-map__frame {
  position: relative;
  max-width: 520px;
  margin-inline: auto;
}

.sl-map__image {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) sepia(0.55) saturate(1.6) brightness(1.05) contrast(1.05)
          drop-shadow(0 2px 12px rgba(8, 20, 38, 0.15));
}

.sl-map__hotspots {
  position: absolute;
  inset: 0;
}

.sl-map__hotspot {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  background: none;
  border: none;
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.sl-map__hotspot-pin {
  width: 32px;
  height: 32px;
  /* A drop shadow only for lift — the marker's own contrast against the
     busy map underneath comes from its solid fill plus the crisp white
     outline on .sl-map__hotspot-pin-shape below, not from a soft halo. */
  filter: drop-shadow(0 3px 6px rgba(8, 20, 38, 0.45));
  transition: transform var(--duration-fast) var(--ease-standard);
}

.sl-map__hotspot-pin-shape {
  fill: var(--color-primary-700);
  stroke: var(--color-warm-white);
  stroke-width: 1.75px;
  paint-order: stroke;
  transition: fill var(--duration-fast) var(--ease-standard);
}

.sl-map__hotspot-pin-dot {
  fill: var(--color-warm-white);
}

.sl-map__hotspot-label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  background: var(--color-white);
  color: var(--color-primary-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.sl-map__hotspot:hover .sl-map__hotspot-pin,
.sl-map__hotspot:focus-visible .sl-map__hotspot-pin {
  transform: translateY(-3px);
}

.sl-map__hotspot:hover .sl-map__hotspot-label,
.sl-map__hotspot:focus-visible .sl-map__hotspot-label,
.sl-map__hotspot.is-selected .sl-map__hotspot-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sl-map__hotspot:hover .sl-map__hotspot-pin-shape,
.sl-map__hotspot:focus-visible .sl-map__hotspot-pin-shape {
  fill: var(--color-primary-500);
}

.sl-map__hotspot.is-selected .sl-map__hotspot-pin-shape {
  fill: var(--color-accent-500);
}

.sl-map__hotspot.is-selected .sl-map__hotspot-pin-dot {
  fill: var(--color-primary-900);
}

.sl-map__hotspot.is-filtered-out {
  opacity: 0.28;
  pointer-events: none;
}

/* ---- Cluster marker — pins close enough on screen to collide (mostly a
   mobile concern, where the map renders far narrower than its 520px desktop
   frame) merge into one numbered marker instead of overlapping. ---- */

.sl-map__cluster {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-700);
  border: 2.5px solid var(--color-warm-white);
  box-shadow: 0 3px 6px rgba(8, 20, 38, 0.45);
  color: var(--color-warm-white);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.sl-map__cluster:hover,
.sl-map__cluster:focus-visible {
  background: var(--color-primary-500);
  transform: translate(-50%, -50%) scale(1.08);
}

.sl-map__cluster.is-selected {
  background: var(--color-accent-500);
  color: var(--color-primary-900);
}

.sl-map__cluster-badge {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}

.sl-map__cluster-menu {
  position: fixed;
  z-index: var(--z-overlay);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 24px));
  max-height: 60vh;
  overflow-y: auto;
}

.sl-map__cluster-menu[hidden] {
  display: none;
}

.sl-map__cluster-menu button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  min-height: 40px;
}

.sl-map__cluster-menu button:hover,
.sl-map__cluster-menu button:focus-visible {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.sl-map__cluster-menu-region {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.sl-map__hint {
  position: relative;
  margin: var(--space-6) 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

/* ---- Destination panel — an integrated information surface beside the
   map, not a modal overlay. ---- */

.destination-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: opacity 160ms var(--ease-standard);
}

.destination-panel.is-swapping {
  opacity: 0;
}

.destination-panel__empty {
  margin: auto;
  text-align: center;
  max-width: 30ch;
  margin-inline: auto;
  color: var(--color-text-muted);
}

.destination-panel__empty-pin {
  width: 30px;
  height: 30px;
  color: var(--color-primary-300);
  margin-bottom: var(--space-4);
}

.destination-panel__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.destination-panel__close svg {
  width: 14px;
  height: 14px;
}

.destination-panel__close:hover,
.destination-panel__close:focus-visible {
  background: var(--color-primary-100);
}

.destination-panel__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.destination-panel__region {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary-500);
  margin: 0 0 var(--space-2);
}

.destination-panel__name {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-3);
}

.destination-panel__why {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

.destination-panel__experiences h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-secondary-500);
  margin: 0 0 var(--space-3);
}

.destination-panel__experiences ul {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.destination-panel__experiences li {
  padding-left: var(--space-5);
  position: relative;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.destination-panel__experiences li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-500);
}

.destination-panel__besttime {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.destination-panel__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.destination-panel__actions .btn {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   Destinations page — browse grid
   ========================================================================== */

.destination-browser {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6) var(--space-5);
}

.destination-card__trigger {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.destination-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.destination-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}

.destination-card__trigger:hover .destination-card__media img,
.destination-card__trigger:focus-visible .destination-card__media img {
  transform: scale(1.05);
}

.destination-card__body {
  display: block;
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.destination-card__region {
  display: block;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary-500);
  margin-bottom: var(--space-2);
}

.destination-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
  margin-bottom: var(--space-1);
}

.destination-card__tagline {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.destination-card__trigger.is-selected .destination-card__body {
  border-color: var(--color-accent-500);
}

.destination-card__trigger.is-selected .destination-card__name {
  color: var(--color-accent-600);
}

/* ==========================================================================
   Tours listing page
   ========================================================================== */

.tours-intro {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

.tours-intro__media {
  position: absolute;
  inset: 0;
}

.tours-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tours-intro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.4) 0%, rgba(8, 20, 38, 0.18) 22%, rgba(8, 20, 38, 0.58) 52%, rgba(8, 20, 38, 0.88) 100%);
}

/* Matches .experiences-hero__inner's min-height — see the comment there. */
.tours-intro__content {
  position: relative;
  z-index: 1;
  min-height: 586px;
  padding-block: var(--space-9) var(--space-8);
}

.tours-intro__content h1 {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--text-3xl);
  line-height: 1.05;
  color: var(--color-white);
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.tours-intro__lede {
  max-width: 46ch;
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.tours-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ---- Tours overview (two-column editorial, no cards) -------------------- */

.tours-overview {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.tours-overview__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.tours-overview__col h2 {
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.tours-overview__lede {
  max-width: 46ch;
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

@media (max-width: 1024px) {
  .tours-overview__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.tours-browser {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.tours-browser__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* ---- Featured tour banner — the one asymmetric break from the grid below,
   so the page opens on a single, considered composition rather than five
   equal-weight cards. ---- */

.tour-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-8);
}

.tour-feature[hidden] {
  display: none;
}

.tour-feature__media {
  position: relative;
  min-height: 460px;
}

.tour-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-feature__media .tour-card__tag {
  top: var(--space-4);
  left: var(--space-4);
}

.tour-feature__body {
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tour-feature__body h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-primary-700);
  margin: var(--space-3) 0 var(--space-4);
}

.tour-feature__route {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary-500);
  margin: 0 0 var(--space-4);
}

.tour-feature__desc {
  max-width: 46ch;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}

.tour-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

/* ---- The four remaining tours — the existing .tour-card component,
   reused as-is from the homepage carousel, laid out in a static grid
   instead of a scroller. ---- */

.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
}

.tours-grid .tour-card__body h3 {
  margin-bottom: var(--space-2);
}

.tour-card__route {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

@media (max-width: 1024px) {
  .tour-feature {
    grid-template-columns: 1fr;
  }

  .tour-feature__media {
    min-height: 320px;
  }

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

@media (max-width: 767px) {
  .tours-intro {
    min-height: 86vh;
  }

  .tours-intro__content h1 {
    font-size: var(--text-2xl);
  }

  .tour-feature__body {
    padding: var(--space-6) var(--space-5);
  }

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

@media (max-width: 767px) {
  .section-heading {
    margin-bottom: var(--space-6);
  }

  .section-heading--display h2 {
    font-size: var(--text-xl);
  }

  .trip-intro__content h2 {
    font-size: var(--text-xl);
  }

  .trip-intro__card {
    left: var(--space-3);
    bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .popular-tours .carousel__item {
    flex-basis: 100%;
  }

  .featured-destinations__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .destination-feature {
    min-height: 220px;
  }

  .destination-feature__kicker {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .destination-feature__name {
    font-size: var(--text-md);
  }

  .destination-feature__desc {
    display: none;
  }

  .journey-row {
    gap: var(--space-3);
    padding-block: var(--space-5);
  }

  .journey-row__cta {
    display: none;
  }

  .testimonials .carousel__item {
    flex-basis: 84%;
  }

  .final-cta__content {
    padding: var(--space-7) var(--space-5);
  }

  .final-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta__actions .btn {
    justify-content: center;
  }

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

  .site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .site-footer__brand,
  .site-footer__newsletter {
    grid-column: auto;
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   Destinations page — responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .map-experience__layout {
    grid-template-columns: 1fr;
  }

  .destination-panel {
    min-height: 0;
  }

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

@media (max-width: 767px) {
  .destinations-intro {
    min-height: 86vh;
  }

  .destinations-intro__content h1 {
    font-size: var(--text-2xl);
  }

  .sl-map {
    padding: var(--space-5) var(--space-4) var(--space-4);
  }

  .sl-map__hotspot-pin {
    width: 28px;
    height: 28px;
  }

  .destination-panel {
    padding: var(--space-5);
  }

  .destination-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-4);
  }
}

@media (max-width: 480px) {
  .destination-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Destination detail page (destinations/{id}.html)
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-white);
}

.breadcrumb span[aria-current] {
  color: var(--color-white);
}

.destination-hero {
  position: relative;
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

.destination-hero__media {
  position: absolute;
  inset: 0;
}

.destination-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destination-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.15) 0%, rgba(8, 20, 38, 0.05) 32%, rgba(8, 20, 38, 0.78) 100%),
              rgba(8, 20, 38, 0.1);
}

.destination-hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--nav-height) var(--space-8);
}

.destination-hero__region {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-500);
}

.destination-hero__content h1 {
  color: var(--color-white);
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-3);
}

.destination-hero__tagline {
  max-width: 48ch;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.destination-detail {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.destination-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--space-9);
  align-items: start;
}

.destination-detail__main h2 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-4);
}

.destination-detail__main p {
  color: var(--color-ink);
  max-width: 68ch;
  margin: 0 0 var(--space-5);
}

.destination-detail__main .destination-panel__experiences {
  margin-top: var(--space-7);
}

.destination-detail__main .destination-panel__experiences h4 {
  font-size: var(--text-sm);
}

.destination-detail__sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-5));
}

.destination-detail__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.destination-detail__card dl {
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.destination-detail__card dt {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary-500);
  margin-bottom: 2px;
}

.destination-detail__card dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.destination-detail__card .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.destination-detail__card .text-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  color: var(--color-primary-700);
}

.destination-related {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

@media (max-width: 900px) {
  .destination-detail__layout {
    grid-template-columns: 1fr;
  }

  .destination-detail__sidebar {
    position: static;
  }

  .destination-detail__card {
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .destination-hero {
    min-height: 52vh;
  }

  .destination-hero__content h1 {
    font-size: var(--text-2xl);
  }
}

/* ==========================================================================
   Plan Your Journey — cinematic introduction
   ========================================================================== */

.journey-intro {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

.journey-intro__media {
  position: absolute;
  inset: 0;
}

.journey-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-intro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.35) 0%, rgba(8, 20, 38, 0.15) 40%, rgba(8, 20, 38, 0.82) 100%);
}

/* Matches .experiences-hero__inner's min-height — see the comment there. */
.journey-intro__content {
  position: relative;
  z-index: 1;
  min-height: 586px;
  padding-block: var(--space-9) var(--space-8);
  text-shadow: 0 1px 3px rgba(8, 20, 38, 0.55), 0 4px 16px rgba(8, 20, 38, 0.3);
}

.journey-intro__eyebrow {
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-500);
}

.journey-intro__title {
  font-size: var(--text-2xl);
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: var(--space-4);
}

.journey-intro__lede {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.88);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

.journey-intro__cta {
  color: var(--color-white);
}

/* ==========================================================================
   Plan Your Journey — form section
   ========================================================================== */

.journey-form-section {
  position: relative;
  padding-block: var(--space-9);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-white) 60%);
  overflow: hidden;
}

.journey-form-section__decoration {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 320px;
  height: 280px;
  color: var(--color-primary-300);
  opacity: 0.35;
  pointer-events: none;
}

.journey-form-section__inner {
  position: relative;
  max-width: 780px;
}

/* ---- Progress stepper --------------------------------------------------- */

.journey-progress {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  gap: var(--space-2);
}

.journey-progress__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.journey-progress__step::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 1.5px;
  background: var(--color-border);
  z-index: 0;
}

.journey-progress__step:first-child::before {
  display: none;
}

.journey-progress__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.journey-progress__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  color: var(--color-muted);
}

.journey-progress__step.is-active .journey-progress__num {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: var(--color-white);
}

.journey-progress__step.is-active .journey-progress__label {
  color: var(--color-primary-700);
}

.journey-progress__step.is-complete .journey-progress__num {
  background: var(--color-accent-100);
  border-color: var(--color-accent-500);
  color: var(--color-primary-700);
}

.journey-progress__step.is-complete::before {
  background: var(--color-accent-500);
}

/* ---- Card + step layout -------------------------------------------------- */

.journey-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6);
}

.journey-step__head {
  margin-bottom: var(--space-6);
}

.journey-step__eyebrow {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary-500);
}

.journey-step__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.journey-step__lede {
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Fields --------------------------------------------------------------- */

.journey-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}

.journey-field {
  margin-bottom: var(--space-5);
}

.journey-field label,
.journey-field-group legend {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary-700);
  margin-bottom: var(--space-2);
}

.journey-field-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-6);
  min-width: 0;
}

.journey-required {
  color: var(--color-accent-600);
}

.journey-optional {
  font-weight: 400;
  color: var(--color-muted);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-xs);
}

.journey-field input,
.journey-select,
.journey-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-warm-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.journey-field textarea {
  min-height: 120px;
  resize: vertical;
}

.journey-field input:focus-visible,
.journey-select:focus-visible,
.journey-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary-500);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(18, 87, 156, 0.16);
}

.journey-field input.has-error,
.journey-field textarea.has-error {
  border-color: #B3401F;
}

.journey-field__error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #B3401F;
}

/* ---- Chip groups (checkboxes/radios styled as pills or cards) ----------- */

.journey-chip-row,
.journey-chip-grid,
.journey-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.journey-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.journey-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.journey-chip {
  position: relative;
  min-width: 0;
}

.journey-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.journey-chip label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.journey-chip-row .journey-chip label {
  border-radius: var(--radius-pill);
}

.journey-chip__check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--color-border);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23082C4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.journey-chip-row .journey-chip__check {
  border-radius: 50%;
}

.journey-chip input:checked + label {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: var(--color-white);
}

.journey-chip input:checked + label .journey-chip__check {
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  opacity: 1;
}

.journey-chip input:focus-visible + label {
  outline: 3px solid var(--color-accent-500);
  outline-offset: 2px;
}

.journey-chip input:disabled + label {
  opacity: 0.4;
  cursor: not-allowed;
}

.journey-chip--emphasis label {
  border-style: dashed;
  border-color: var(--color-primary-500);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.journey-chip--emphasis input:checked + label {
  background: var(--color-primary-700);
  border-style: solid;
  color: var(--color-white);
}

.journey-card-grid .journey-chip label {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 84px;
  padding: var(--space-4) var(--space-8) var(--space-3) var(--space-4);
}

.journey-card-grid .journey-chip__check {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.journey-card-grid .journey-chip label span:last-child {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.3;
}

/* ---- Consultation choice cards ------------------------------------------- */

.journey-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.journey-option-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.journey-option-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.journey-option-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  min-height: 140px;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.journey-option-card__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background-color: var(--color-white);
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}

.journey-option-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

.journey-option-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.journey-option-card input:checked + .journey-option-card__body {
  border-color: var(--color-primary-700);
  background: var(--color-primary-100);
  box-shadow: var(--shadow-sm);
}

.journey-option-card input:checked + .journey-option-card__body .journey-option-card__check {
  border-color: var(--color-primary-700);
  background-color: var(--color-primary-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.journey-option-card input:focus-visible + .journey-option-card__body {
  outline: 3px solid var(--color-accent-500);
  outline-offset: 2px;
}

/* ---- Subtle glass accents — appointment panel + review summary --------- */

.journey-panel {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(11, 60, 107, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(11, 60, 107, 0.1);
}

.journey-panel__timezone {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.journey-availability__label,
.journey-availability__loading {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-3);
}

.journey-review__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
}

.journey-review__list dt {
  font-weight: 600;
  color: var(--color-primary-700);
  font-size: var(--text-sm);
}

.journey-review__list dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ---- Honeypot (spam trap — never shown to real travellers) -------------- */

.journey-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Form status / navigation / privacy note ---------------------------- */

.journey-form__status {
  min-height: 1.2em;
  color: #B3401F;
  font-weight: 600;
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}

.journey-form__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.journey-form__back {
  margin-right: auto;
}

/* .btn sets display:inline-flex, which beats the UA `hidden` style — without
   this, Continue stays visible on the last step and Back/Send show too early. */
.journey-form__nav [hidden] {
  display: none;
}

.journey-form__privacy {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---- Confirmation --------------------------------------------------------- */

.journey-confirmation {
  text-align: center;
  padding-block: var(--space-4);
}

.journey-confirmation__icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  color: var(--color-primary-700);
  margin-bottom: var(--space-4);
}

.journey-confirmation h3 {
  font-size: var(--text-xl);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.journey-confirmation > p {
  max-width: 48ch;
  margin-inline: auto;
  color: var(--color-text-muted);
}

.journey-confirmation__appointment {
  text-align: left;
  max-width: 360px;
  margin: var(--space-6) auto 0;
}

.journey-confirmation__appointment dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
}

.journey-confirmation__appointment dt {
  font-weight: 600;
  color: var(--color-primary-700);
  font-size: var(--text-sm);
}

.journey-confirmation__appointment dd {
  margin: 0;
  font-size: var(--text-sm);
}

.journey-confirmation__reference {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.journey-confirmation__reference strong {
  color: var(--color-primary-700);
  letter-spacing: var(--tracking-wide);
}

.journey-confirmation__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.journey-confirmation__home {
  display: inline-flex;
  justify-content: center;
  margin-top: var(--space-6);
  color: var(--color-primary-700);
}

@media (max-width: 900px) {
  .journey-option-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .journey-intro {
    min-height: 86vh;
  }

  .journey-intro__title {
    font-size: var(--text-xl);
  }

  .journey-card {
    padding: var(--space-6) var(--space-4);
  }

  .journey-field-row {
    grid-template-columns: 1fr;
  }

  .journey-progress__label {
    display: none;
  }

  .journey-progress__step.is-active .journey-progress__label {
    display: block;
  }

  .journey-form__nav {
    flex-wrap: wrap;
  }

  .journey-form__back,
  .journey-form__continue,
  .journey-form__submit {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Single tour page — reusable template
   (tours/classic-sri-lanka.html, populated from js/tour-detail-data.js)
   ========================================================================== */

.section-heading--light h2 {
  color: var(--color-white);
}

/* ---- 01 — Tour hero ---------------------------------------------------- */

.tour-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

.tour-hero__media {
  position: absolute;
  inset: 0;
}

.tour-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.25) 0%, rgba(8, 20, 38, 0.05) 35%, rgba(8, 20, 38, 0.85) 100%),
              rgba(8, 20, 38, 0.12);
}

.tour-hero__content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  padding-block: var(--nav-height) var(--space-9);
}

.tour-hero__eyebrow {
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-500);
}

.tour-hero__content h1 {
  color: var(--color-white);
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-5);
}

.tour-hero__meta {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.tour-hero__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent-500);
}

.tour-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

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

.tour-hero__scroll .text-cta__arrow {
  transform: none;
}

/* ---- 02 — Quick overview strip ------------------------------------------ */

.tour-overview {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.tour-overview__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.tour-overview__item {
  text-align: center;
  padding-block: var(--space-6);
  border-right: 1px solid var(--color-border);
}

.tour-overview__item:last-child {
  border-right: none;
}

.tour-overview__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.tour-overview__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

/* ---- 03 — Editorial introduction ---------------------------------------- */

.tour-intro-editorial {
  padding-block: var(--space-9);
  background: var(--color-warm-white);
}

.tour-intro-editorial__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
}

.tour-intro-editorial__heading h2 {
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.tour-intro-editorial__body p {
  color: var(--color-ink);
  max-width: 60ch;
  margin: 0 0 var(--space-5);
}

.tour-intro-editorial__body p:last-child {
  margin-bottom: 0;
}

/* ---- 04 — Highlights ----------------------------------------------------- */

.tour-highlights {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.tour-highlights__list {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
}

.tour-highlights__list li {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border);
}

.tour-highlights__index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent-600);
  margin-bottom: var(--space-3);
}

.tour-highlights__list h3 {
  font-size: var(--text-md);
  margin: 0 0 var(--space-2);
}

.tour-highlights__list p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* ---- 05 — Inclusions / exclusions --------------------------------------- */

.tour-inclusions {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.tour-inclusions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  max-width: 60rem;
  margin-inline: auto;
}

.tour-inclusions__col {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

.tour-inclusions__col--out {
  background: transparent;
  border: 1px dashed var(--color-border);
}

.tour-inclusions__col h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-5);
}

.tour-inclusions__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tour-inclusions__col li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.tour-inclusions__col--in li::before {
  content: "✓";
  color: var(--color-secondary-500);
  font-weight: 700;
  flex-shrink: 0;
}

.tour-inclusions__col--out li::before {
  content: "–";
  color: var(--color-muted);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- 06 — Interactive journey map ---------------------------------------- */

.tour-map {
  padding-block: var(--space-9);
  background: var(--color-primary-900);
}

.tour-map .section-heading--light {
  text-align: center;
  margin-inline: auto;
}

.tour-map__layout {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* Background is a light "paper" surface, not open water — the map artwork's
   own coastal labels (Point Pedro, Pigeon Island, Arugam Bay, etc.) render
   in a pale grey baked into the image, meant to sit on a light background.
   The previous near-transparent frame let the section's deep navy show
   through as "sea", which left those labels essentially unreadable. This
   matches the fix already used on the Destinations page map (.sl-map). */
.tour-map__frame {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-5));
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.tour-map__image-wrap {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
}

.tour-map__image {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) sepia(0.55) saturate(1.6) brightness(1.05) contrast(1.05);
}

.tour-map__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#tourMapRoutePath {
  stroke: var(--color-accent-500);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tour-map__markers {
  position: absolute;
  inset: 0;
}

.tour-map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-700);
  border: 2px solid var(--color-white);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.tour-map__marker:hover,
.tour-map__marker:focus-visible {
  transform: translate(-50%, -50%) scale(1.12);
}

.tour-map__marker.is-active {
  background: var(--color-accent-500);
  color: var(--color-primary-900);
  box-shadow: 0 0 0 6px rgba(246, 166, 35, 0.28);
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 2;
}

.tour-map__marker-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--color-white);
  color: var(--color-primary-700);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.tour-map__marker.is-active .tour-map__marker-label,
.tour-map__marker:hover .tour-map__marker-label,
.tour-map__marker:focus-visible .tour-map__marker-label {
  opacity: 1;
}

.tour-map__itinerary {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 640px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tour-map__day {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  text-align: left;
  background: transparent;
  border: none;
  border-left: 2px solid rgba(255, 255, 255, 0.16);
  padding: var(--space-4) var(--space-5);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.tour-map__day:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tour-map__day.is-active {
  border-color: var(--color-accent-500);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
}

.tour-map__day-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.5);
}

.tour-map__day.is-active .tour-map__day-num {
  color: var(--color-accent-500);
}

.tour-map__day-body {
  min-width: 0;
}

.tour-map__day-name {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
}

.tour-map__day-title {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

/* ---- 07 — Day-by-day itinerary detail ------------------------------------ */

.tour-days {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.tour-days__list {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
}

.tour-day {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
  align-items: start;
  scroll-margin-top: var(--nav-height);
}

.tour-day:first-child {
  border-top: none;
}

.tour-day__num {
  order: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-accent-600);
  line-height: 1;
  white-space: nowrap;
}

.tour-day__num--range {
  font-size: var(--text-lg);
}

.tour-day__content {
  order: 1;
}

.tour-day__media {
  order: 2;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  background: none;
  border: none;
  padding: 0;
  display: block;
  width: 100%;
}

.tour-day:nth-child(even) .tour-day__content {
  order: 2;
}

.tour-day:nth-child(even) .tour-day__media {
  order: 1;
}

.tour-day--no-media .tour-day__content {
  grid-column: 2 / -1;
}

.tour-day__content h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-1);
}

.tour-day__place {
  display: block;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary-500);
  margin-bottom: var(--space-3);
}

.tour-day__content p {
  color: var(--color-ink);
  max-width: 56ch;
  margin: 0 0 var(--space-4);
}

.tour-day__experiences {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tour-day__experiences li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.tour-day__experiences li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-500);
}

.tour-day__overnight {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary-500);
}

.tour-day__link {
  margin-top: var(--space-4);
}

.tour-day__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}

.tour-day__media:hover img,
.tour-day__media:focus-visible img {
  transform: scale(1.06);
}

/* ---- 09 — What to expect --------------------------------------------------- */

.tour-expect {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.tour-expect__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.tour-expect__card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tour-expect__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-expect__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 40%, rgba(8, 20, 38, 0.85) 100%);
}

.tour-expect__card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-5);
  color: var(--color-white);
}

.tour-expect__card-body h3 {
  font-size: var(--text-sm);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-2);
}

.tour-expect__card-body p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ---- 10 — Accommodation --------------------------------------------------- */

.tour-stays {
  padding-block: var(--space-9);
  background: var(--color-white);
  text-align: center;
}

.tour-stays__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.tour-stays__note {
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-6);
}

.tour-stays__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.tour-stays__list li {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary-700);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
}

/* ---- 11 — Tour information ------------------------------------------------ */

.tour-info {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.tour-info__grid {
  max-width: 56rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
}

.tour-info__grid > div {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.tour-info__grid dt {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-secondary-500);
  margin-bottom: var(--space-1);
}

.tour-info__grid dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

/* ---- 12 — FAQ -------------------------------------------------------------- */

.tour-faq {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.tour-faq__inner {
  max-width: 48rem;
  margin-inline: auto;
}

.tour-faq__list {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.tour-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.tour-faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

.tour-faq__item summary::-webkit-details-marker {
  display: none;
}

.tour-faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--color-accent-600);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.tour-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.tour-faq__item p {
  color: var(--color-text-muted);
  max-width: 60ch;
  padding: 0 0 var(--space-5);
  margin: 0;
}

/* ---- Sticky journey CTA ----------------------------------------------------- */

.tour-sticky-cta {
  position: fixed;
  z-index: 90;
  right: var(--space-6);
  bottom: var(--space-6);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.tour-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tour-sticky-cta__label-mobile {
  display: none;
}

/* ---- Image lightbox ---------------------------------------------------------- */

.tour-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(8, 20, 38, 0.92);
}

.tour-lightbox[hidden] {
  display: none;
}

.tour-lightbox img {
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.tour-lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tour-lightbox__close svg {
  width: 20px;
  height: 20px;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .tour-overview__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .tour-overview__item:nth-child(3) {
    border-right: none;
  }

  .tour-intro-editorial__layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .tour-highlights__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .tour-inclusions__grid {
    grid-template-columns: 1fr;
  }

  .tour-map__layout {
    grid-template-columns: 1fr;
  }

  .tour-map__frame {
    position: static;
  }

  .tour-map__itinerary {
    max-height: none;
  }

  .tour-day {
    grid-template-columns: 80px 1fr;
  }

  .tour-day__media {
    grid-column: 1 / -1;
  }

  .tour-day:nth-child(even) .tour-day__content,
  .tour-day:nth-child(even) .tour-day__media {
    order: initial;
  }

  .tour-expect__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tour-info__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .tour-hero {
    min-height: 78vh;
  }

  .tour-hero__content h1 {
    font-size: var(--text-2xl);
  }

  .tour-overview__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .tour-overview__item:nth-child(3) {
    border-right: 1px solid var(--color-border);
  }

  .tour-overview__item:nth-child(even) {
    border-right: none;
  }

  .tour-highlights__list {
    grid-template-columns: 1fr;
  }

  .tour-day {
    grid-template-columns: 1fr;
  }

  .tour-day__num {
    font-size: var(--text-xl);
  }

  .tour-expect__grid {
    grid-template-columns: 1fr;
  }

  .tour-sticky-cta {
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    box-shadow: 0 -4px 16px rgba(8, 20, 38, 0.16);
    transform: none;
  }

  .tour-sticky-cta.is-visible {
    transform: none;
  }

  .tour-sticky-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .tour-sticky-cta__label-desktop {
    display: none;
  }

  .tour-sticky-cta__label-mobile {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-day__media img {
    transition: none;
  }
}

/* ==========================================================================
   Experiences page
   ========================================================================== */

/* ---- Section 01 — Experiences hero ------------------------------------- */

.experiences-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.experiences-hero__media {
  position: absolute;
  inset: 0;
}

.experiences-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experiences-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.4) 0%, rgba(8, 20, 38, 0.18) 22%, rgba(8, 20, 38, 0.58) 52%, rgba(8, 20, 38, 0.88) 100%);
}

/* min-height is shared (identical value) with .tours-intro__content,
   .destinations-intro__content and .journey-intro__content — all four
   hero sections bottom-anchor their text (align-items: flex-end on the
   parent), so without a matched height here, whichever page has the
   shortest copy ends up with visibly less space above the eyebrow than
   the others. Matching this to the tallest of the four (this one) keeps
   the top gap identical across every page's opening hero regardless of
   how long each page's own heading/lede happens to be. */
.experiences-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 586px;
  padding-block: var(--space-9) var(--space-8);
}

/* The gold eyebrow reads poorly against bright green jungle canopy without
   its own shadow — the scrim alone can't guarantee contrast at every crop,
   since it darkens top-to-bottom while the hero image varies left-to-right
   too. Signature Spotlight uses the same eyebrow treatment over photography
   for the same reason. */
.experiences-hero .section-eyebrow--light,
.signature-spotlight .section-eyebrow--light,
.tours-intro .section-eyebrow--light,
.destinations-intro .section-eyebrow--light,
.about-hero .section-eyebrow--light,
.about-your-story .section-eyebrow--light,
.cinematic-close .section-eyebrow--light,
.faq-hero .section-eyebrow--light,
.legal-hero .section-eyebrow--light {
  text-shadow: 0 1px 3px rgba(8, 20, 38, 0.85), 0 2px 16px rgba(8, 20, 38, 0.6);
}

.experiences-hero__inner h1 {
  font-size: var(--text-3xl);
  color: var(--color-white);
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.experiences-hero__lede {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.experiences-hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ---- Section 02 — Introduction (two-column editorial, no cards) -------- */

.experiences-intro {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.experiences-intro__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.experiences-intro__col h2 {
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.experiences-intro__lede {
  max-width: 46ch;
  margin: 0 0 var(--space-5);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

/* ---- Section 03 — Featured experiences (asymmetric editorial grid) ----- */

.experiences-featured {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.experience-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  grid-auto-flow: dense;
  gap: var(--space-4);
}

.experience-card--hero {
  grid-column: span 4;
  grid-row: span 2;
}

.experience-card--wide {
  grid-column: span 2;
  grid-row: span 1;
}

.experience-card--tall {
  grid-column: span 1;
  grid-row: span 2;
}

.experience-card--standard {
  grid-column: span 1;
  grid-row: span 1;
}

.experience-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.experience-card:hover,
.experience-card:focus-visible {
  border-color: rgba(246, 166, 35, 0.55);
  box-shadow: var(--shadow-lg);
}

.experience-card__media {
  position: absolute;
  inset: 0;
}

.experience-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-standard);
}

.experience-card:hover .experience-card__media img,
.experience-card:focus-visible .experience-card__media img {
  transform: scale(1.035);
}

.experience-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 35%, rgba(8, 20, 38, 0.88) 100%);
  transition: opacity var(--duration-base) var(--ease-standard);
}

.experience-card:hover .experience-card__scrim,
.experience-card:focus-visible .experience-card__scrim {
  opacity: 0.94;
}

.experience-card__body {
  position: relative;
  z-index: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--duration-base) var(--ease-standard);
}

.experience-card:hover .experience-card__body,
.experience-card:focus-visible .experience-card__body {
  transform: translateY(-4px);
}

.experience-card__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-accent-500);
}

.experience-card__title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-white);
}

.experience-card--hero .experience-card__title {
  font-size: var(--text-2xl);
}

.experience-card__desc {
  margin: 0;
  max-width: 38ch;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.86);
}

.experience-card--hero .experience-card__desc {
  max-width: 52ch;
  font-size: var(--text-base);
}

.experience-card__cta {
  margin-top: 4px;
  color: var(--color-white);
}

/* ---- Section 04 — Experience story feature ------------------------------ */

.experience-story {
  padding-block: var(--space-9);
  background: var(--color-white);
  overflow: hidden;
}

.experience-story__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}

.experience-story__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.experience-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-story__body h2 {
  font-size: var(--text-2xl);
}

.experience-story__body p {
  max-width: 48ch;
  margin: var(--space-5) 0 var(--space-6);
  color: var(--color-text-muted);
}

/* ---- Section 05 — Interactive experience selector ----------------------- */

.experience-selector {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.experience-selector__chips {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.experience-selector__results {
  margin-top: var(--space-8);
}

.experience-selector__results-inner {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}

.experience-selector__results-label {
  margin: 0 0 var(--space-6);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-secondary-500);
}

.experience-selector__results-grid {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  text-align: left;
}

.experience-selector__results-heading {
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
}

.experience-selector__destination-list,
.experience-selector__tour-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.experience-selector__destination-list a,
.experience-selector__tour-list a {
  font-family: var(--font-display);
  color: var(--color-primary-700);
  text-decoration: none;
}

.experience-selector__destination-list a:hover,
.experience-selector__tour-list a:hover {
  color: var(--color-secondary-500);
}

.experience-selector__tour-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---- Section 06 — Signature experience spotlight ------------------------ */

.signature-spotlight {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.signature-spotlight__media {
  position: absolute;
  inset: 0;
}

.signature-spotlight__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signature-spotlight__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.15) 0%, rgba(8, 20, 38, 0.1) 40%, rgba(8, 20, 38, 0.86) 100%);
}

.signature-spotlight__content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  padding-block: var(--space-9);
}

.signature-spotlight__content h2 {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-2xl);
  color: var(--color-white);
}

.signature-spotlight__route {
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-500);
}

.signature-spotlight__desc {
  max-width: 48ch;
  margin: 0 0 var(--space-6);
  color: rgba(255, 255, 255, 0.86);
}

/* ---- Section 07 — Experience + destination connection ------------------- */

.experience-map-section {
  padding-block: var(--space-9);
  background: var(--color-warm-white);
}

.experience-map {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
}

.experience-map__group {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-border);
}

.experience-map__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

.experience-map__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.experience-map__list a {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
}

.experience-map__list a:hover,
.experience-map__list a:focus-visible {
  color: var(--color-secondary-500);
  text-decoration: underline;
}

/* ---- Section 08 — Related journeys --------------------------------------- */

.related-journeys {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.related-journeys__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
}

.related-journeys__tags {
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary-500);
}

/* ---- Section 09 — Custom experience CTA ---------------------------------- */

.experience-cta {
  padding-block: var(--space-9);
  background: var(--color-primary-100);
  text-align: center;
}

.experience-cta__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.experience-cta__inner h2 {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-2xl);
}

.experience-cta__lede {
  margin: 0 0 var(--space-7);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.experience-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* ---- Section 10 — Final cinematic CTA ------------------------------------ */

.cinematic-close {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  overflow: hidden;
  text-align: center;
}

.cinematic-close__media {
  position: absolute;
  inset: 0;
}

.cinematic-close__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinematic-close__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.55) 0%, rgba(8, 20, 38, 0.3) 45%, rgba(8, 20, 38, 0.72) 100%);
}

.cinematic-close__content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  padding-block: var(--space-9);
}

.cinematic-close__content h2 {
  font-size: var(--text-3xl);
  color: var(--color-white);
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.cinematic-close__content p {
  margin: var(--space-5) 0 var(--space-7);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Experiences page — responsive ---------------------------------------- */

@media (max-width: 1024px) {
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }

  .experience-card--hero {
    grid-column: span 2;
  }

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

  .experience-story__layout {
    grid-template-columns: 1fr;
  }

  .experience-story__media {
    aspect-ratio: 16 / 10;
  }

  .experience-map {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-journeys__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .experiences-hero__inner h1 {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 767px) {
  .experiences-hero {
    min-height: 86vh;
  }

  .experience-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .experience-card,
  .experience-card--hero,
  .experience-card--wide,
  .experience-card--tall,
  .experience-card--standard {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 340px;
  }

  .experience-map {
    grid-template-columns: 1fr;
  }

  .related-journeys__grid {
    grid-template-columns: 1fr;
  }

  .experience-selector__results-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .experience-selector__results-inner {
    padding: var(--space-6) var(--space-5);
  }

  .signature-spotlight {
    min-height: 520px;
  }

  .cinematic-close {
    min-height: 60vh;
  }
}

/* ==========================================================================
   About page
   ========================================================================== */

/* ---- Section 01 — About hero -------------------------------------------- */

.about-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.about-hero__media {
  position: absolute;
  inset: 0;
}

.about-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.4) 0%, rgba(8, 20, 38, 0.18) 22%, rgba(8, 20, 38, 0.58) 52%, rgba(8, 20, 38, 0.88) 100%);
}

/* min-height matches the other page-opening heroes (Experiences, Tours,
   Destinations, Plan Your Journey) so the top gap above the eyebrow reads
   identically across every page regardless of how long each one's own
   heading/lede happens to be — see the comment on .experiences-hero__inner. */
.about-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 586px;
  padding-block: var(--space-9) var(--space-8);
}

.about-hero__inner h1 {
  font-size: var(--text-3xl);
  color: var(--color-white);
  max-width: 20ch;
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.about-hero__lede {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.about-hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ---- Section 02 — Our philosophy (asymmetric editorial, no cards) ------- */

.about-philosophy {
  padding-block: var(--space-9);
  background: var(--color-white);
  overflow: hidden;
}

.about-philosophy__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-9);
  align-items: center;
}

.about-philosophy__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-philosophy__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-philosophy__body h2 {
  max-width: 18ch;
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.about-philosophy__body p {
  max-width: 52ch;
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.about-philosophy__body p:last-child {
  margin-bottom: 0;
}

/* ---- Section 03 — Every experience tells a story (editorial mosaic) ----- */

.about-stories {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.about-mosaic {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: repeat(2, 280px);
  gap: var(--space-4);
}

.about-mosaic__tile {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
}

.about-mosaic__tile--dominant {
  grid-row: span 2;
}

.about-mosaic__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-standard);
}

.about-mosaic__tile:hover img,
.about-mosaic__tile:focus-visible img {
  transform: scale(1.045);
}

.about-mosaic__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 55%, rgba(8, 20, 38, 0.8) 100%);
  transition: opacity var(--duration-base) var(--ease-standard);
}

.about-mosaic__tile:hover::after,
.about-mosaic__tile:focus-visible::after {
  opacity: 0.9;
}

.about-mosaic__label {
  position: absolute;
  z-index: 1;
  left: var(--space-4);
  bottom: var(--space-4);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---- Section 04 — Your journey should begin with your story ------------- */

.about-your-story {
  position: relative;
  padding-block: var(--space-9);
  background: var(--color-primary-900);
  color: var(--color-white);
  overflow: hidden;
}

.about-your-story__decoration {
  position: absolute;
  top: -10%;
  right: -5%;
  width: min(60%, 420px);
  height: auto;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.about-your-story__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.about-your-story__col h2 {
  max-width: 16ch;
  color: var(--color-white);
  font-size: var(--text-2xl);
}

.about-your-story__col p {
  max-width: 48ch;
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, 0.82);
}

.about-your-story__statement {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-accent-500);
}

/* ---- Section 05 — Designed around you (horizontal photographic strip) --- */

.about-tailored {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.about-tailored__track {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--container-padding) var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.about-tailored__track::-webkit-scrollbar {
  display: none;
}

.about-tailored__tile {
  position: relative;
  flex: 0 0 220px;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  scroll-snap-align: start;
}

.about-tailored__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-standard);
}

.about-tailored__tile:hover img,
.about-tailored__tile:focus-visible img {
  transform: scale(1.06);
}

.about-tailored__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 50%, rgba(8, 20, 38, 0.82) 100%);
}

.about-tailored__label {
  position: absolute;
  z-index: 1;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-white);
}

.about-tailored__footer {
  margin-top: var(--space-3);
  text-align: center;
}

/* ---- Section 06 — The moments that matter (cinematic gallery) ----------- */

.about-moments {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.about-moments__track {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-5);
  padding: var(--space-2) var(--container-padding) var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.about-moments__track::-webkit-scrollbar {
  display: none;
}

.about-moments__item {
  position: relative;
  flex: 0 0 320px;
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
}

.about-moments__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-moments__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 45%, rgba(8, 20, 38, 0.82) 100%);
}

.about-moments__item figcaption {
  position: absolute;
  z-index: 1;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-white);
}

/* ---- Section 07 — Local knowledge, personal care (typographic list) ----- */

.about-trust {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.about-trust__inner {
  max-width: 860px;
  margin-inline: auto;
}

.about-trust__list {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.about-trust__list li {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.about-trust__list h3 {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

.about-trust__list p {
  max-width: 52ch;
  margin: 0;
  color: var(--color-text-muted);
}

/* ---- Section 08 — How we create your journey (process timeline) --------- */

.about-process {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.about-process__list {
  position: relative;
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}

.about-process__list::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}

.about-process__step {
  position: relative;
  z-index: 1;
  padding-inline: var(--space-2);
  text-align: center;
}

.about-process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-primary-700);
  color: var(--color-primary-700);
  font-family: var(--font-display);
  font-weight: 700;
}

.about-process__step h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-primary-700);
}

.about-process__step p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

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

/* ---- Section 09 — Brand manifesto (text-only, dark) ---------------------- */

.about-manifesto {
  padding-block: var(--space-10);
  background: var(--color-primary-900);
  text-align: center;
}

.about-manifesto__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.about-manifesto__inner h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-white);
}

.about-manifesto__lines {
  margin: 0 0 var(--space-7);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.about-manifesto__signature {
  margin: 0;
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-500);
}

/* ---- Section 10 — Final cinematic CTA reuses .cinematic-close (see the
   Experiences page section) — only the two-button action row is new. ----- */

.cinematic-close__actions {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* ---- About page — responsive --------------------------------------------- */

@media (max-width: 1024px) {
  .about-philosophy__layout {
    grid-template-columns: 1fr;
  }

  .about-philosophy__media {
    aspect-ratio: 16 / 10;
  }

  .about-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 220px);
  }

  .about-mosaic__tile--dominant {
    grid-column: span 2;
    grid-row: span 1;
  }

  .about-your-story__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-trust__list li {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

@media (max-width: 767px) {
  .about-hero {
    min-height: 86vh;
  }

  .about-hero__inner h1 {
    font-size: var(--text-2xl);
  }

  .about-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .about-mosaic__tile,
  .about-mosaic__tile--dominant {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }

  .about-tailored__tile {
    flex-basis: 170px;
  }

  .about-moments__item {
    flex-basis: 260px;
  }

  .about-process__list {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: left;
  }

  .about-process__list::before {
    display: none;
  }

  .about-process__step {
    text-align: left;
    padding-inline: 0;
  }
}

/* ==========================================================================
   FAQ page
   ========================================================================== */

/* ---- Hero — mirrors .about-hero / .experiences-hero exactly so the top
   gap above the eyebrow matches every other page-opening hero. ------------ */

.faq-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.faq-hero__media {
  position: absolute;
  inset: 0;
}

.faq-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.4) 0%, rgba(8, 20, 38, 0.18) 22%, rgba(8, 20, 38, 0.58) 52%, rgba(8, 20, 38, 0.88) 100%);
}

.faq-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 586px;
  padding-block: var(--space-9) var(--space-8);
}

.faq-hero__inner h1 {
  font-size: var(--text-3xl);
  color: var(--color-white);
  max-width: 18ch;
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.faq-hero__lede {
  margin: var(--space-5) 0 0;
  max-width: 50ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.faq-hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ---- Search --------------------------------------------------------------- */

.faq-search {
  padding-block: var(--space-8);
  background: var(--color-warm-white);
  border-bottom: 1px solid var(--color-border);
}

.faq-search__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.faq-search__inner h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-xl);
}

.faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-search__icon {
  position: absolute;
  left: var(--space-5);
  width: 20px;
  height: 20px;
  color: var(--color-muted);
  pointer-events: none;
}

.faq-search__field input[type="search"] {
  width: 100%;
  padding: var(--space-4) var(--space-8) var(--space-4) calc(var(--space-5) + 28px);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  min-height: 44px;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.faq-search__field input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.faq-search__field input:focus-visible {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(18, 87, 156, 0.15);
}

.faq-search__clear {
  position: absolute;
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.faq-search__clear svg {
  width: 16px;
  height: 16px;
}

.faq-search__clear:hover,
.faq-search__clear:focus-visible {
  color: var(--color-primary-700);
  background: var(--color-surface);
}

.faq-search__status {
  margin: var(--space-4) 0 0;
  min-height: 1.2em;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-secondary-500);
}

/* ---- Category navigation --------------------------------------------------- */

.faq-categories {
  padding-block: var(--space-5);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.faq-categories__track {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}

.faq-categories__track::-webkit-scrollbar {
  display: none;
}

.faq-categories__track a {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.faq-categories__track a:hover,
.faq-categories__track a:focus-visible {
  color: var(--color-primary-700);
  border-color: var(--color-accent-500);
}

.faq-categories__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-accent-600);
}

/* ---- Empty state ------------------------------------------------------------ */

.faq-empty-state {
  max-width: 32rem;
  margin: var(--space-8) auto;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.faq-empty-state__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

.faq-empty-state__lede {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

/* ---- Category sections ------------------------------------------------------ */

.faq-section {
  padding-block: var(--space-8);
}

.faq-category:nth-of-type(odd) {
  background: var(--color-white);
}

.faq-category:nth-of-type(even) {
  background: var(--color-surface);
}

.faq-section__heading {
  max-width: 42rem;
  margin-bottom: var(--space-7);
}

.faq-section__heading .section-eyebrow {
  margin-bottom: var(--space-2);
}

.faq-section__heading h2 {
  font-size: var(--text-2xl);
}

.faq-section__inner--split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-9);
  align-items: start;
}

.faq-section__inner--reverse {
  grid-template-columns: 1.15fr 0.85fr;
}

.faq-section__media {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Accordion ---------------------------------------------------------- */

.faq-list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
  margin: 0;
  font-size: inherit;
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary-700);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.faq-item__trigger span:first-child {
  flex: 1;
}

.faq-item__trigger:hover,
.faq-item__trigger:focus-visible {
  color: var(--color-secondary-500);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.faq-item__icon::before {
  width: 14px;
  height: 1.5px;
}

.faq-item__icon::after {
  width: 1.5px;
  height: 14px;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-standard);
}

.faq-item__panel.is-open {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item__panel-inner p {
  max-width: 68ch;
  margin: 0;
  padding-bottom: var(--space-5);
  color: var(--color-text-muted);
}

.faq-item__panel-inner a {
  color: var(--color-primary-500);
}

/* ---- FAQ page — responsive ------------------------------------------------ */

@media (max-width: 1024px) {
  .faq-section__inner--split,
  .faq-section__inner--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .faq-section__inner--reverse .faq-section__media {
    order: -1;
  }

  .faq-section__media {
    position: static;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .faq-hero {
    min-height: 86vh;
  }

  .faq-hero__inner h1 {
    font-size: var(--text-2xl);
  }

  .faq-search__inner h2 {
    font-size: var(--text-lg);
  }

  .faq-item__trigger {
    align-items: flex-start;
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   Privacy Policy page (and other legal pages sharing the same layout)
   ========================================================================== */

/* ---- Quiet hero — deliberately not the cinematic 92vh pattern used on
   every other page this session: a legal reference page should read as
   calm and text-first, not editorial/inspirational. ------------------- */

.legal-hero {
  position: relative;
  min-height: clamp(280px, 34vh, 380px);
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.legal-hero__media {
  position: absolute;
  inset: 0;
}

.legal-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legal-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.55) 0%, rgba(8, 20, 38, 0.35) 40%, rgba(8, 20, 38, 0.82) 100%);
}

.legal-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  padding-block: calc(var(--nav-height) + var(--space-6)) var(--space-7);
}

.legal-hero__inner h1 {
  font-size: var(--text-2xl);
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(8, 20, 38, 0.4);
}

.legal-hero__lede {
  margin: var(--space-4) 0 0;
  max-width: 60ch;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Policy metadata strip ------------------------------------------------ */

.legal-meta {
  padding-block: var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.legal-meta__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}

/* Terms & Conditions only shows two metadata fields (dates) rather than
   Privacy Policy's five (dates + business identity) — a fixed 2-column
   track instead of the 5-column one, so the fields don't stretch thin
   across the full row. */
.legal-meta__grid--compact {
  grid-template-columns: repeat(2, minmax(0, 200px));
}

.legal-meta__grid dt {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
}

.legal-meta__grid dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.legal-meta__note {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ---- Placeholder marker — deliberately conspicuous so it can't be
   mistaken for a real, confirmed value and accidentally published. ------ */

.legal-todo {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-accent-600);
  background: var(--color-accent-100);
  color: var(--color-accent-600);
  font-size: 0.85em;
  font-weight: 700;
  white-space: normal;
}

/* ---- Callout — a short highlighted note inside the reading column, e.g. the
   "this is a draft pending legal review" notice or a cross-reference between
   website terms and booking-specific terms. Not a placeholder (see
   .legal-todo above), so it gets its own, calmer treatment. ---------------- */

.legal-callout {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary-100);
  border-left: 3px solid var(--color-primary-500);
  color: var(--color-ink);
}

.legal-callout p {
  margin: 0;
}

.legal-callout p + p {
  margin-top: var(--space-3);
}

.legal-callout--draft {
  background: var(--color-accent-100);
  border-left-color: var(--color-accent-600);
}

/* ---- Table of contents + content layout ----------------------------------- */

.legal-layout {
  padding-block: var(--space-8) var(--space-9);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-9);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}

.legal-toc__label {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 2px solid var(--color-border);
}

.legal-toc a {
  display: block;
  margin-left: -2px;
  padding: 4px var(--space-4);
  border-left: 2px solid transparent;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--color-primary-700);
  border-color: var(--color-accent-500);
}

.legal-content {
  max-width: 68ch;
}

.legal-section {
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--color-border);
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-section h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
}

.legal-section h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--color-primary-700);
}

.legal-section h3:first-of-type {
  margin-top: 0;
}

.legal-section p {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  line-height: var(--leading-normal);
}

.legal-section ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.2em;
  color: var(--color-ink);
}

.legal-section ul li {
  margin-bottom: var(--space-2);
}

.legal-section p:last-child,
.legal-section ul:last-child {
  margin-bottom: 0;
}

.legal-section a {
  color: var(--color-primary-500);
}

.legal-section--contact {
  margin-inline: calc(var(--space-6) * -1);
  padding-inline: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border-bottom: none;
}

.legal-contact-card {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.legal-contact-card dt {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
}

.legal-contact-card dd {
  margin: 0;
}

/* ---- Privacy Policy — responsive ------------------------------------------ */

@media (max-width: 1024px) {
  .legal-layout {
    /* minmax(0, 1fr), not a bare 1fr — the TOC's horizontally-scrolling
       <ol> below has non-wrapping links with real intrinsic width, and a
       bare 1fr grid track won't shrink a child below its content's natural
       size. Without the minmax, that pushes this whole grid track (and the
       page) wider than the viewport instead of scrolling internally. */
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-toc {
    position: static;
    min-width: 0;
  }

  .legal-toc ol {
    flex-direction: row;
    gap: var(--space-5);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none;
  }

  .legal-toc ol::-webkit-scrollbar {
    display: none;
  }

  .legal-toc a {
    margin-left: 0;
    padding: 4px 0;
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
  }

  .legal-toc a:hover,
  .legal-toc a:focus-visible {
    border-color: var(--color-accent-500);
  }

  .legal-meta__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .legal-hero__inner h1 {
    font-size: var(--text-xl);
  }

  .legal-meta__grid {
    grid-template-columns: 1fr;
  }

  .legal-contact-card {
    grid-template-columns: 1fr;
  }

  .legal-section--contact {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* ---- Section 01 — Contact hero — mirrors the shared page-hero pattern --- */

.contact-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.contact-hero__media {
  position: absolute;
  inset: 0;
}

.contact-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.4) 0%, rgba(8, 20, 38, 0.18) 22%, rgba(8, 20, 38, 0.58) 52%, rgba(8, 20, 38, 0.88) 100%);
}

.contact-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 586px;
  padding-block: var(--space-9) var(--space-8);
}

.contact-hero__inner h1 {
  font-size: var(--text-3xl);
  color: var(--color-white);
  max-width: 18ch;
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.contact-hero__lede {
  margin: var(--space-5) 0 0;
  max-width: 48ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.contact-hero__actions {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.contact-hero .section-eyebrow--light {
  text-shadow: 0 1px 3px rgba(8, 20, 38, 0.85), 0 2px 16px rgba(8, 20, 38, 0.6);
}

/* ---- Section 02 — Contact methods (editorial, not icon cards) ----------- */

.contact-methods {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.contact-methods__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.contact-method {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border);
  text-align: center;
}

.contact-method__label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary-500);
}

.contact-method__value {
  display: block;
  margin: var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary-700);
  text-decoration: none;
}

a.contact-method__value:hover,
a.contact-method__value:focus-visible {
  color: var(--color-secondary-500);
}

.contact-method__value--static {
  font-size: var(--text-md);
}

.contact-method__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-method__whatsapp {
  color: var(--color-secondary-500);
}

/* ---- Section 03 — Main enquiry ------------------------------------------- */

.contact-enquiry {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.contact-enquiry__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-9);
  align-items: start;
}

.contact-enquiry__lede {
  max-width: 46ch;
  margin: var(--space-5) 0 var(--space-6);
  color: var(--color-text-muted);
}

.contact-enquiry__divider {
  position: relative;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.contact-enquiry__divider span {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
}

.contact-enquiry__form-wrap {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
}

.contact-form__status {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-secondary-700);
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status--error {
  color: #B3401F;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.contact-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.contact-form__privacy {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.contact-form__confirmation {
  padding: var(--space-6) 0;
  text-align: center;
}

.contact-form__confirmation-eyebrow {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-secondary-500);
}

.contact-form__confirmation h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
}

.contact-form__confirmation p {
  max-width: 40ch;
  margin: 0 auto var(--space-4);
  color: var(--color-text-muted);
}

.contact-form__confirmation-next {
  font-weight: 600;
  color: var(--color-ink) !important;
}

/* ---- Section 04 — Why talk to Kingsbury (asymmetric editorial) ---------- */

.contact-philosophy {
  padding-block: var(--space-9);
  background: var(--color-white);
  overflow: hidden;
}

.contact-philosophy__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-9);
  align-items: center;
}

.contact-philosophy__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.contact-philosophy__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-philosophy__body h2 {
  max-width: 18ch;
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.contact-philosophy__body p {
  max-width: 52ch;
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}

.contact-philosophy__tags {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contact-philosophy__tags li {
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-700);
}

/* ---- Section 06 — Where we are -------------------------------------------- */

.contact-location {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.contact-location__panel {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.contact-location__map {
  position: relative;
  min-height: 360px;
}

.contact-location__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.25) contrast(1.05);
}

.contact-location__details {
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

.contact-location__address {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-primary-700);
}

.contact-summary__divider {
  color: rgba(255, 255, 255, 0.4);
}

/* ---- Contact page — responsive --------------------------------------------- */

@media (max-width: 1024px) {
  .contact-methods__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

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

  .contact-philosophy__layout {
    grid-template-columns: 1fr;
  }

  .contact-philosophy__media {
    aspect-ratio: 16 / 10;
  }

  .contact-location__panel {
    grid-template-columns: 1fr;
  }

  .contact-location__map {
    min-height: 300px;
  }
}

@media (max-width: 767px) {
  .contact-hero {
    min-height: 86vh;
  }

  .contact-hero__inner h1 {
    font-size: var(--text-2xl);
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-enquiry__form-wrap {
    padding: var(--space-5);
  }
}

/* ==========================================================================
   Gallery page
   ========================================================================== */

/* ---- Section 01 — Cinematic gallery hero -------------------------------- */

.gallery-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}

.gallery-hero__media {
  position: absolute;
  inset: 0;
}

.gallery-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.42) 0%, rgba(8, 20, 38, 0.16) 26%, rgba(8, 20, 38, 0.6) 58%, rgba(8, 20, 38, 0.9) 100%);
}

.gallery-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 586px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: var(--space-9) var(--space-8);
}

.gallery-hero .section-eyebrow--light {
  text-shadow: 0 1px 3px rgba(8, 20, 38, 0.85), 0 2px 16px rgba(8, 20, 38, 0.6);
}

.gallery-hero__inner h1 {
  font-size: var(--text-3xl);
  color: var(--color-white);
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(8, 20, 38, 0.4);
}

.gallery-hero__lede {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.9);
}

.gallery-hero__scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.gallery-hero__scroll-line {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

.gallery-hero__scroll-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent-500);
  transform: translateY(-100%);
  animation: galleryScrollDrip 2200ms var(--ease-standard) infinite;
}

@keyframes galleryScrollDrip {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

.gallery-hero__scroll-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ---- Section 02 — Introduction (two-column editorial, matches
   .experiences-intro / .destinations-intro elsewhere on the site) --------- */

.gallery-intro {
  padding-block: var(--space-9) var(--space-8);
  background: var(--color-white);
}

.gallery-intro__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.gallery-intro__col h2 {
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.gallery-intro__lede {
  max-width: 46ch;
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

/* ---- Section 03 — Main visual gallery ------------------------------------ */

.gallery-main {
  padding-block: var(--space-9);
  background: var(--color-surface);
}

.gallery-results-count {
  margin: var(--space-7) 0 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.gallery-grid {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  grid-auto-flow: dense;
  gap: var(--space-4);
}

.gallery-item--xl { grid-column: span 2; grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; grid-row: span 1; }
.gallery-item--tall { grid-column: span 1; grid-row: span 2; }
.gallery-item--square,
.gallery-item--standard { grid-column: span 1; grid-row: span 1; }

.gallery-item__trigger {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--color-border);
}

.gallery-item__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-scene) var(--ease-standard);
}

.gallery-item__trigger:hover .gallery-item__image,
.gallery-item__trigger:focus-visible .gallery-item__image {
  transform: scale(1.035);
}

.gallery-item__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0) 45%, rgba(8, 20, 38, 0.82) 100%);
  opacity: 0.7;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.gallery-item__trigger:hover .gallery-item__scrim,
.gallery-item__trigger:focus-visible .gallery-item__scrim {
  opacity: 1;
}

.gallery-item__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-white);
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.gallery-item__destination {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-500);
}

.gallery-item__caption {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.gallery-item__view {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(251, 249, 245, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-white);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.gallery-item__view svg {
  width: 16px;
  height: 16px;
}

/* Hover-capable devices only get the "hidden until hover/focus" treatment —
   touch devices show the caption and destination permanently (see below),
   since nothing on a touch screen can hover before the tap that already
   opens the lightbox. */
@media (hover: hover) {
  .gallery-item__meta,
  .gallery-item__view {
    opacity: 0;
  }

  .gallery-item__trigger:hover .gallery-item__meta,
  .gallery-item__trigger:focus-visible .gallery-item__meta {
    transform: translateY(0);
    opacity: 1;
  }

  .gallery-item__trigger:hover .gallery-item__view,
  .gallery-item__trigger:focus-visible .gallery-item__view {
    opacity: 1;
    transform: scale(1);
  }
}

@media (hover: none) {
  .gallery-item__meta {
    transform: translateY(0);
    opacity: 1;
    background: linear-gradient(180deg, rgba(8, 20, 38, 0) 0%, rgba(8, 20, 38, 0.75) 60%);
  }
}

/* ---- Fullscreen lightbox --------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(8, 20, 38, 0.94);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__dialog {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
}

.lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  cursor: pointer;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  cursor: pointer;
  z-index: 1;
}

.lightbox__nav:hover,
.lightbox__nav:focus-visible,
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__nav--prev { left: -8px; }
.lightbox__nav--next { right: -8px; }

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.lightbox__image {
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.lightbox__caption {
  margin-top: var(--space-4);
  color: var(--color-white);
  text-align: center;
}

.lightbox__caption-text {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
}

.lightbox__meta {
  margin-top: var(--space-2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.lightbox__destination:not(:empty) {
  color: var(--color-accent-500);
}

.lightbox__destination:empty {
  display: none;
}

/* ---- Section 10 — Experience connection ------------------------------------ */

.gallery-experience-links {
  padding-block: var(--space-9);
  background: var(--color-white);
  text-align: center;
}

.gallery-experience-links__list {
  margin: var(--space-7) 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.gallery-experience-links__list a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  color: var(--color-primary-700);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

.gallery-experience-links__list a:hover,
.gallery-experience-links__list a:focus-visible {
  border-color: var(--color-primary-700);
  background: var(--color-primary-100);
}

.gallery-experience-links__more {
  margin: 0;
}

/* ---- Section 11 — Guest photo CTA (future-ready) --------------------------- */

.share-journey {
  padding-block: var(--space-9);
  background: var(--color-primary-100);
  text-align: center;
}

.share-journey__inner {
  max-width: 40rem;
  margin-inline: auto;
}

.share-journey__inner h2 {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-2xl);
}

.share-journey__lede {
  margin: 0 0 var(--space-6);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.share-journey__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ---- Gallery page — responsive --------------------------------------------- */

@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }

  .gallery-item--xl { grid-column: span 2; grid-row: span 2; }
  .gallery-item--wide { grid-column: span 2; grid-row: span 1; }
  .gallery-item--tall { grid-column: span 1; grid-row: span 2; }

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

@media (max-width: 767px) {
  .gallery-hero {
    min-height: 86vh;
  }

  .gallery-hero__inner {
    min-height: 0;
  }

  .gallery-hero__inner h1 {
    font-size: var(--text-2xl);
  }

  /* Mobile gets an intentional single-column composition rather than a
     shrunk version of the desktop rhythm — every card gets equal weight
     and a comfortable 4:5 reading height instead of squeezed grid spans. */
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: unset;
  }

  .gallery-item--xl,
  .gallery-item--wide,
  .gallery-item--tall,
  .gallery-item--square,
  .gallery-item--standard {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }

  .lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .lightbox__nav--prev { left: 0; }
  .lightbox__nav--next { right: 0; }

  .lightbox__image {
    max-height: 62vh;
  }

  .lightbox__close {
    top: -44px;
  }
}

/* ==========================================================================
   Casual copy/inspection deterrents (see js/anti-inspect.js) — not a real
   security control, just discourages casual right-click/selection. Contact
   links and form fields stay selectable so visitors can still copy them.
   ========================================================================== */
body {
  -webkit-user-select: none;
  user-select: none;
}

a[href^="tel:"],
a[href^="mailto:"],
a[href^="https://wa.me/"],
.contact-method__value--static,
input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
}

/* ==========================================================================
   Floating actions — WhatsApp + scroll-to-top
   Site-wide, injected by js/floating-actions.js (see that file for why
   this isn't duplicated as markup across every page).
   ========================================================================== */

.whatsapp-fab {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  padding-right: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(8, 44, 78, 0.28);
}

.whatsapp-fab__icon {
  flex: 0 0 auto;
  display: flex;
  width: 44px;
  height: 44px;
}

.whatsapp-fab__icon svg {
  width: 100%;
  height: 100%;
}

.whatsapp-fab__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.scroll-top-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-float);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary-700);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              visibility 0s linear var(--duration-fast);
}

.scroll-top-fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.scroll-top-fab:hover,
.scroll-top-fab:focus-visible {
  background: var(--color-primary-500);
}

.scroll-top-fab svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .whatsapp-fab {
    left: var(--space-4);
    bottom: var(--space-4);
    padding: 0;
    width: 52px;
    height: 52px;
    justify-content: center;
  }

  .whatsapp-fab__icon {
    width: 52px;
    height: 52px;
  }

  .whatsapp-fab__label {
    display: none;
  }

  .scroll-top-fab {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

/* ==========================================================================
   Storage / privacy notice — bottom-left, so it never collides with the
   WhatsApp floating button (bottom-right, see .whatsapp-fab above).
   ========================================================================== */

.storage-notice {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-overlay);
  max-width: 360px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(8, 44, 78, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}

.storage-notice p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.88);
}

.storage-notice a {
  color: var(--color-accent-500);
  text-decoration: underline;
}

.storage-notice__dismiss {
  background: var(--color-accent-500);
  color: var(--color-primary-900);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  min-height: 40px;
}

.storage-notice__dismiss:hover,
.storage-notice__dismiss:focus-visible {
  background: var(--color-accent-600);
}

@media (max-width: 480px) {
  .storage-notice {
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }
}