/* ===== Reset & Variables ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Translation loading overlay (anti-FOUC on sister-language domains) =====
   A synchronous <head> snippet injects #lwXlate before first paint when the
   page will be translated; common.js applyLanguage() fades it out once the
   DOM is translated. Hides the brief English flash while translations.js loads. */
#lwXlate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--sand, #f5f0e8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.55s ease;
}
.lw-xlate-ring {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(91, 63, 110, 0.15);
  border-top-color: var(--green, #5B3F6E);
  border-radius: 50%;
  animation: lwXlateSpin 0.8s linear infinite;
}
@keyframes lwXlateSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lw-xlate-ring { animation-duration: 1.8s; }
}

:root {
  --green: #5B3F6E;
  --green-light: #8A6FA0;
  --sand: #f5f0e8;
  --sand-dark: #e8dfd2;
  --terracotta: #C8963E;   /* West Highland Way accent (decorative); text uses --terracotta-text */
  --terracotta-text: #8E6219;   /* AA terracotta for text-on-light: >=4.5:1 on white(#fff) & sand(#f5f0e8) */
  --terracotta-light: #E8D3A8;
  --ocean: #1a6b7a;
  --text: #1c1c1c;
  --text-muted: #5f6368;
  --text-light: #63676c; /* darkened from #80868b for WCAG AA: ~5.7:1 on white */;
  --white: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.1);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--sand);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Clip stray horizontal overflow (e.g. the footer promo's animated shimmer
     leaks past its overflow:hidden parent on iOS Safari) so phones don't get
     a blank strip to the right. Header is position:fixed, so this is safe. */
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

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

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border: none;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.02em;
}

.btn-primary {
  /* The estate's primary button carries a white label, so its fill is the AA
     text-grade accent — the same treatment .mp-cta-primary and .lwp-btn-next
     already get. var(--terracotta) measured 4.16:1 here on the #8E6219
     brands, 2.67:1 on cappadocia and 2.13:1 on southwestcoast, against a
     4.5:1 floor. The :hover below has always been a dark #a8512d, so the
     base was the odd one out. */
  background: var(--terracotta-text);
  color: var(--white);
}

.btn-primary:hover {
  background: #a8512d;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(192, 98, 58, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.5);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--white);
}

.btn-dark {
  background: var(--green);
  color: var(--white);
  padding: 12px 28px;
  font-size: 0.88rem;
}

.btn-dark:hover {
  background: var(--green-light);
  transform: translateY(-2px);
}

.btn-full {
  width: 100%;
  text-align: center;
}

/* ===== Navbar =====
   Default state is opaque cream. Previously transparent over hero
   images, which left the menu links rendering white-on-cream on every
   non-photo page (account, marketplace, tours, etc.) and invisible at
   the top of the viewport. The navbar now always carries its scrolled
   appearance; the .scrolled class is retained as a hook for any future
   scroll-state styling but renders identically to the default. */
.navbar {
  position: fixed;
  top: var(--announcement-h);
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: rgba(245, 240, 232, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  transition: var(--transition);
}

.navbar.scrolled {
  /* Identical to the default. Kept as a class hook so any future
     scroll-state CSS (e.g. shadow strengthening) can target it. */
  background: rgba(245, 240, 232, 0.97);
  backdrop-filter: blur(20px);
  padding: 12px 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

/* Solid green navbar for pages without hero backgrounds (provider dashboard, etc.) */
.navbar.navbar-solid,
.navbar.navbar-solid.scrolled {
  background: var(--green);
  padding: 12px 0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
  top: 0;
}
.navbar.navbar-solid .logo,
.navbar.navbar-solid.scrolled .logo {
  color: var(--white);
}
.navbar.navbar-solid .nav-links a,
.navbar.navbar-solid.scrolled .nav-links a {
  color: rgba(255,255,255,0.85);
}
.navbar.navbar-solid .nav-links a:hover,
.navbar.navbar-solid.scrolled .nav-links a:hover {
  color: #fff;
}
.navbar.navbar-solid .menu-toggle span,
.navbar.navbar-solid.scrolled .menu-toggle span {
  background: var(--white);
}
.navbar.navbar-solid .lang-current,
.navbar.navbar-solid.scrolled .lang-current {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}
/* The Audio Guides pill keeps its sand background on the solid bar, so the
   generic white link colour above made its label unreadable. */
.navbar.navbar-solid .nav-links > li.nav-feature > a,
.navbar.navbar-solid.scrolled .nav-links > li.nav-feature > a { color: var(--green); }
.navbar.navbar-solid .nav-links > li.nav-feature > a:hover,
.navbar.navbar-solid.scrolled .nav-links > li.nav-feature > a:hover { color: #fff; }
/* --terracotta-text is tuned for text on sand; on the solid bar it vanishes. */
.navbar.navbar-solid .logo span,
.navbar.navbar-solid.scrolled .logo span { color: var(--terracotta-text); }
.navbar.navbar-solid .lang-current:hover,
.navbar.navbar-solid.scrolled .lang-current:hover {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.navbar.scrolled .logo {
  color: var(--text);
}

.logo span {
  color: var(--terracotta-text);
}

/* ===== App Download Banner ===== */
:root {
  --announcement-h: 0px;
}

.app-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  /* A real size, not var(--announcement-h). That variable is now an
     OUTPUT: LW.syncAnnouncementHeight() measures this banner and publishes
     its height so the fixed navbar (top: var(--announcement-h)) lands
     directly below it. Reading the variable here as well would make the
     banner size itself from its own measurement — a feedback loop, and
     with min-height a ratchet that never shrinks again. 72px stays the
     familiar one-row height; a wrapped row is free to be taller. */
  min-height: 72px;
  height: auto;
  background: linear-gradient(135deg, #2A1D33 0%, #5B3F6E 30%, #6E5185 55%, #7E5715 80%, #8E6219 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: banner-slide-down 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

@keyframes banner-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.app-banner--dismissing {
  animation: banner-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes banner-slide-up {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}

.app-banner--hidden {
  display: none !important;
}

/* Animated shimmer sweep */
.app-banner__shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.1) 45%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.1) 55%,
    rgba(255,255,255,0.04) 70%,
    transparent 100%
  );
  animation: shimmer-sweep 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer-sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Soft ambient glow that pulses */
.app-banner__glow {
  position: absolute;
  top: -50%;
  right: 10%;
  width: 300px;
  height: 200%;
  background: radial-gradient(ellipse, rgba(192,98,58,0.25) 0%, transparent 70%);
  animation: glow-pulse 3s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes glow-pulse {
  0% { opacity: 0.4; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* Content layout */
.app-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,0.95);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

/* Phone icon with float animation */
.app-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  flex-shrink: 0;
  animation: icon-float 3s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Pulsing NEW badge */
.app-banner__badge {
  background: #e85d3a;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 4px;
  animation: badge-glow 2s ease-in-out infinite;
  flex-shrink: 0;
  text-transform: uppercase;
}

@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(232,93,58,0.4); }
  50% { box-shadow: 0 0 18px rgba(232,93,58,0.9), 0 0 36px rgba(232,93,58,0.3); }
}

/* Text content */
.app-banner__text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-banner__headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
}

.app-banner__sep {
  color: rgba(255,255,255,0.3);
  font-weight: 300;
}

.app-banner__features {
  color: rgba(255,255,255,0.7);
  font-size: 0.74rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Store buttons */
.app-banner__stores {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.app-banner__store-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.13);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.22);
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  animation: btn-pulse 3s ease-in-out infinite;
}

.app-banner__store-btn:nth-child(2) {
  animation-delay: 0.3s;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 12px 2px rgba(255,255,255,0.08); }
}

.app-banner__store-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.app-banner__store-btn svg {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Close / dismiss button */
.app-banner__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: all 0.2s;
  margin-left: 4px;
  flex-shrink: 0;
  border-radius: 4px;
  /* Target size. Measured 19x23 on a 375px phone — under the 24x24 minimum,
     on a control that sits over every page until it is dismissed. The glyph
     stays where it was; only the hit area grows around it. */
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-banner__close:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.1);
}

/* ---- Mobile responsive ---- */
/* The headline and the feature line are both white-space:nowrap, so this
   row cannot shrink: with the feature strip it wants ~1480px against a
   1200px .container, overflows, and — the banner being overflow:hidden —
   the app icon and the NEW badge are sliced off the left edge. Measured on
   the live site: 133px of overflow at 1280 and at 1366, icon at x=-57.
   Drop the decorative feature strip before that happens, which is what
   this rule always did (at 900px) — just at the width where it matters.
   Below 768px the stacked layout brings it back as a wrapped line. */
@media (max-width: 1500px) {
  .app-banner__features { display: none; }
  .app-banner__sep { display: none; }
}

@media (max-width: 768px) {
  /* NOTE: do not force --announcement-h here. It defaults to 0px, and the
     app-download banner exists only on index.html, where index.js sets
     --announcement-h to 72px (inline) when the banner is actually shown.
     Forcing 72px globally pushed the fixed navbar 72px down on every other
     page (no banner present), leaving a gap at the top and hiding the start
     of the content behind the navbar on mobile. */
  .app-banner {
    height: auto;
    /* No floor tied to the announcement variable — see the note on
       .app-banner. The banner sizes to its copy; the variable follows. */
    min-height: 0;
    padding: 10px 0;
  }
  .app-banner__content {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 8px;
    justify-content: center;
  }
  .app-banner__icon { display: none; }
  .app-banner__text {
    flex-direction: column;
    gap: 2px;
    text-align: center;
    width: 100%;
    order: -1;
  }
  .app-banner__headline { font-size: 0.85rem; }
  .app-banner__features { display: block; font-size: 0.65rem; white-space: normal; }
  .app-banner__sep { display: none; }
  .app-banner__badge {
    /* In the flow, on its own centred row. Absolutely positioned over the
       top-left corner, this ~100px pill sat on top of the centred headline
       and hid its first word (measured 8-108px vs a headline starting at
       53px on a 375px phone). */
    position: static;
    order: -3;
    align-self: center;
    font-size: 0.5rem;
    padding: 2px 6px;
  }
  .app-banner__stores { gap: 6px; }
  .app-banner__store-btn {
    font-size: 0.65rem;
    padding: 5px 12px;
  }
  .app-banner__close {
    /* In the flow, sharing the first row with the badge and pushed to the
       right edge. Absolutely positioned it overlaid the centred copy: the
       feature line ran to 365px underneath a control at 329-369px, and
       enlarging the hit area to a tappable 40px only buried more of it.
       In the flow it displaces text instead of covering it, so no gutter
       has to be reserved and the copy keeps the full width. */
    position: static;
    order: -2;
    margin-left: auto;
    font-size: 1.2rem;
    padding: 2px 4px;
  }
}

@media (max-width: 380px) {
  .app-banner__store-btn span { display: none; }
  .app-banner__store-btn { padding: 6px 10px; border-radius: 50%; }
}

/* The wordmark "West Highland Way Walk" is 343px wide at 1.6rem with its mark,
   so beside the 32px menu button it needs a 423px screen. It pushed the button
   partly off 361-398px screens, and off 320-345px ones at the 1.3rem it had
   below 361px; the page clips sideways overflow, so at 375px 8px of the button
   showed and its centre was off the screen (2026-10-02). Up to 440px the
   wordmark takes the size that leaves 12px before the button: its text is at
   most 11.9 times its font size, and 138px = the two 24px gutters, the 36px
   mark and its 10px gap, the button and the 12px. On the legal pages,
   how-it-works and the footer it has no button beside it, so there it only
   steps down for a 320px screen. */
@media (max-width: 440px) {
  .navbar .logo, #navbar .logo { font-size: clamp(0.75rem, calc((100vw - 138px) / 11.9), 1.6rem); }
}
@media (max-width: 360px) {
  .legal-header .logo, .hiw-header .logo { font-size: 1.2rem; }
}

/* Below 1025px the navbar holds only the wordmark and the menu button. The
   button keeps its size and stays on screen whatever the wordmark does: on a
   page without the web font, with enlarged text or a longer name, the wordmark
   is clipped instead of pushing the button off the edge. */
@media (max-width: 1024px) {
  .nav-container > .logo { min-width: 0; overflow: hidden; }
  .nav-container > .menu-toggle { flex-shrink: 0; }
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 20px;
}

.nav-links > li {
  display: flex;
  align-items: center;
}

.nav-links a {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1.4;
  padding: 4px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--terracotta);
  transition: var(--transition);
}

.nav-links a:hover::after {
  width: 100%;
}

.navbar.scrolled .nav-links a {
  color: var(--text);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: var(--transition);
}

.navbar.scrolled .menu-toggle span {
  background: var(--text);
}

.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}









/* ===== Hero badges — capability strip under the H1 =====
   Three categories, each with its own subtle accent tint on hover so
   the visitor can scan by intent (find / plan / meta) while
   keeping the at-rest look uniform glass-on-photo.

   .hero-badges escapes its parent .container's 780px cap via negative
   horizontal margins so 3 long badges fit per row on wide screens
   instead of wrapping a single badge alone onto the next line. Caps
   reapply under 1024px to prevent overflow on tablets. */
.hero-badges {
  margin: 36px -140px 0;
}
.hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(20, 28, 14, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.005em;
  white-space: nowrap;
  position: relative;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.18s ease,
    box-shadow 0.25s ease,
    color 0.18s ease;
}
.hero-badge:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}
a.hero-badge::after {
  /* Subtle right-arrow that appears on hover only for clickable badges */
  content: " →";
  margin-left: -2px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  font-weight: 600;
}
a.hero-badge:hover::after { opacity: 0.85; transform: translateX(0); }

/* Category tints — hover-only so the at-rest row stays calm. */
.hb-find:hover    { background: rgba(192, 98, 58, 0.85); border-color: rgba(255,255,255,0.45); }
.hb-plan:hover    { background: rgba(91, 63, 110, 0.92);  border-color: rgba(255,255,255,0.45); }
.hb-meta:hover    { background: rgba(80, 60, 40, 0.9);   border-color: rgba(255,255,255,0.45); }

/* "Free for hikers" gets a brighter green at rest so it pops as a value prop */
.hb-free {
  background: linear-gradient(135deg, rgba(91, 63, 110,0.85), rgba(74,122,53,0.85));
  border-color: rgba(255,255,255,0.35);
}
.hb-free:hover { background: linear-gradient(135deg, rgba(91, 63, 110,0.95), rgba(74,122,53,0.95)); }

/* Language badge with stacked flags — wider, with the flag row inline */
.hb-langs { gap: 10px; padding: 7px 14px 7px 16px; }
.hb-langs-label { display: inline-flex; align-items: center; gap: 6px; }
.hb-flag-row {
  display: inline-flex;
  gap: 3px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
}
.hb-flag {
  font-size: 0.9rem;
  line-height: 1;
  filter: saturate(110%);
}

/* iPhone / Android app variants — slightly more solid since they're CTAs */
.hb-app {
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.3);
}
.hb-app:hover { background: rgba(0,0,0,0.78); }

/* Apps-only bottom row. The app downloads sit on their own line by
   design (per UX request) so they read as the final call-to-action
   rather than getting lost in the capability badges above. */
.hero-badges-row-apps {
  margin-top: 6px;
  padding-top: 6px;
}

@media (max-width: 1024px) {
  .hero-badges { margin-left: 0; margin-right: 0; }
  .hero-badges-row { gap: 8px; margin-bottom: 8px; }
  .hero-badge { padding: 7px 14px; font-size: 0.78rem; }
  .hb-flag { font-size: 0.82rem; }
}
@media (max-width: 768px) {
  .hero-badges { margin-top: 28px; }
  .hero-badges-row { gap: 6px; margin-bottom: 6px; }
  .hero-badge { padding: 6px 12px; font-size: 0.74rem; gap: 6px; }
  .hb-flag-row { padding: 2px 6px; gap: 2px; }
  .hb-flag { font-size: 0.78rem; }
  /* On narrow screens the language row would overflow; allow wrapping */
  .hb-langs { white-space: normal; }
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.3);
  margin: 12px auto 0;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.3); }
}

/* ===== Sections ===== */
.section {
  padding: 100px 0;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  text-align: center;
  margin-bottom: 12px;
  color: var(--green);
}

.section-title.left-align {
  text-align: left;
}

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 56px;
}

/* ===== Press Recognition ===== */
.press-recognition {
  background: var(--green);
  color: var(--white);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.press-recognition::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}

.press-recognition::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
}

.press-badge {
  text-align: center;
  margin-bottom: 48px;
}

.press-award-icon {
  display: inline-block;
  font-size: 2.4rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}

.press-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.25;
}

.press-headline em {
  color: var(--terracotta-light);
  font-style: italic;
}

.press-intro {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.press-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

.press-card {
  background: rgba(0,0,0,0.04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: var(--white);
}

.press-card:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

.press-card-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.press-source-name {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--terracotta-light);
}

.press-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin-bottom: 10px;
}

.press-card-excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  flex: 1;
  margin-bottom: 16px;
}

.press-card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--terracotta-light);
  transition: var(--transition);
}

.press-card:hover .press-card-link {
  color: #f0a87e;
  letter-spacing: 0.5px;
}

@media (max-width: 900px) {
  .press-articles {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .press-recognition {
    padding: 48px 0;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .press-articles {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .press-card-title {
    font-size: 1.05rem;
  }
}

/* ===== Features / Why CoastToCoast ===== */
.features {
  background: var(--sand);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  transition: transform 0.25s, box-shadow 0.25s;
  border-bottom: 3px solid transparent;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--terracotta);
}
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
}
.feature-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--green);
  margin-bottom: 8px;
}
.feature-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
a.feature-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.feature-card-link:hover {
  text-decoration: none;
  color: inherit;
}
.features-cta {
  text-align: center;
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.features-cta-link {
  color: var(--terracotta-text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
}
.features-cta-link:hover {
  color: #a8512d;
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 540px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .feature-card {
    padding: 24px;
  }
}

/* ===== About ===== */
.about {
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-text p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.about-stat {
  padding: 20px;
  background: var(--sand);
  border-radius: var(--radius-sm);
  text-align: center;
}

.about-stat-number {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 4px;
}

.about-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.about-image {
  position: relative;
}

.about-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius);
}

.about-image-accent {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--terracotta);
  border-radius: var(--radius);
  z-index: -1;
}

/* ===== Routes ===== */
.routes {
  background: var(--sand);
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.route-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.route-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.route-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.route-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.route-card:hover .route-image img {
  transform: scale(1.06);
}

.route-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--green);
  color: var(--white);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.route-badge.accent {
  background: var(--terracotta);
}

/* ===== Stay cover overlays — type pill + stage label + region color ===== */
.route-card.has-stage-color { position: relative; }
.route-card.has-stage-color::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--stage-color, var(--green));
  z-index: 3;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.route-image::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 80%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.stay-overlay-type {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.stay-overlay-stage {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.stay-overlay-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--stage-color, #fff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 8px rgba(0, 0, 0, 0.4);
}

/* ===== Marketplace positioning strip ===== */
.marketplace-strip {
  /* White "stage" so this section reads distinct from the green press band
     directly below it. The planner itself is the green "plan card" (.lwp);
     the faint warm radials keep the white from feeling clinical. */
  background:
    radial-gradient(circle at 12% 16%, rgba(192, 98, 58, 0.05), transparent 46%),
    radial-gradient(circle at 88% 90%, rgba(91, 63, 110, 0.055), transparent 50%),
    #ffffff;
  padding: 78px 0 88px;
  text-align: center;
  position: relative;
}
.marketplace-strip .container { max-width: 1100px; }

.ms-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(91, 63, 110, 0.07);
  border: 1px solid rgba(91, 63, 110, 0.20);
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.ms-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 700;
  color: var(--green);
  margin: 0 0 16px;
  line-height: 1.12;
}
.ms-subhead {
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--text-light);
  font-size: 1.05rem;
  line-height: 1.6;
}

.ms-services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.ms-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 18px;
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ms-service:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 8px 24px rgba(91, 63, 110, 0.1);
}
.ms-service .ms-service-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 6px;
}
.ms-service strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green);
}
.ms-service > span:last-child {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .ms-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .marketplace-strip { padding: 48px 0; }
  .ms-services { grid-template-columns: 1fr; gap: 12px; }
  .ms-service { flex-direction: row; text-align: left; padding: 16px 18px; gap: 14px; }
  .ms-service .ms-service-icon { margin-bottom: 0; }
  .ms-service > div, .ms-service-text-wrap { display: flex; flex-direction: column; }
}

/* ===== Stays filter UI ===== */
.stays-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin: 8px 0 28px;
}
.stays-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.stay-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #e5dccd;
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
  outline: none;
}
.stay-chip:hover {
  border-color: var(--green);
  color: var(--green);
}
.stay-chip:active { transform: scale(0.97); }
.stay-chip:focus-visible {
  box-shadow: 0 0 0 4px rgba(91, 63, 110, 0.15);
}
.stay-chip.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}
.stays-stage-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-light);
  font-weight: 500;
}
.stays-stage-picker select {
  padding: 8px 36px 8px 14px;
  border: 1.5px solid #e5dccd;
  border-radius: 999px;
  background-color: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232D5016' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stays-stage-picker select:hover { border-color: var(--green); }
.stays-stage-picker select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(91, 63, 110, 0.12); }
@media (max-width: 640px) {
  .stays-filters { flex-direction: column; align-items: stretch; }
  .stays-chip-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .stay-chip { flex-shrink: 0; }
  .stays-stage-picker { justify-content: space-between; }
  .stays-stage-picker select { flex: 1; max-width: 240px; }
}


.route-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.route-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.route-duration,
.route-difficulty {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.route-duration {
  background: var(--sand);
  color: var(--text-muted);
}

.route-difficulty.easy {
  background: #e8f5e9;
  color: #2e7d32;
}

.route-difficulty.moderate {
  background: #fff3e0;
  color: #e65100;
}

.route-difficulty.hard {
  background: #fce4ec;
  color: #c62828;
}

.route-body h3 {
  font-size: 1.35rem;
  margin-bottom: 10px;
  color: var(--text);
}

.route-body > p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.route-highlights {
  list-style: none;
  margin-bottom: 24px;
  flex: 1;
}

.route-highlights li {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 5px 0;
  padding-left: 20px;
  position: relative;
}

.route-highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green-light);
  font-weight: 700;
}

.route-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #f0ede6;
}

.route-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-from {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.price-amount {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: var(--green);
}

.price-per {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Custom card */
.custom-card {
  background: linear-gradient(135deg, var(--green) 0%, #3a6b1f 100%);
  color: var(--white);
}

.custom-card h3 {
  color: var(--white);
}

.custom-card p {
  color: rgba(255,255,255,0.8) !important;
}

.custom-card .route-highlights li {
  color: rgba(255,255,255,0.75);
}

.custom-card .route-highlights li::before {
  color: var(--terracotta-light);
}

.custom-card .route-footer {
  border-top-color: rgba(255, 255, 255, 0.61);
}

.custom-card .price-from,
.custom-card .price-per {
  color: rgba(255,255,255,0.6);
}

.custom-card .price-amount {
  color: var(--white);
}

.custom-card .btn-dark {
  background: var(--terracotta);
}

.custom-card .btn-dark:hover {
  background: var(--terracotta-light);
}

.custom-card .route-duration {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}

.custom-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: var(--terracotta-light);
}

/* Dynamic tour card links */
.route-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.route-card-link:hover { text-decoration: none; color: inherit; }

/* ===== No-photo tour cards (Choose Your Adventure) ===== */
.route-card.no-photo {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(192, 98, 58, 0.06), transparent 60%),
    radial-gradient(80% 50% at 0% 100%, rgba(91, 63, 110, 0.05), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  border: 1px solid #ecebe3;
  position: relative;
  overflow: hidden;
}
.route-card.no-photo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  z-index: 1;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%);
}
.route-card.no-photo.np-easy::before {
  background: linear-gradient(90deg, #66bb6a 0%, #2e7d32 100%);
}
.route-card.no-photo.np-moderate::before {
  background: linear-gradient(90deg, #ffa726 0%, #e65100 100%);
}
.route-card.no-photo.np-hard::before {
  background: linear-gradient(90deg, #ef5350 0%, #c62828 100%);
}
.route-card.no-photo .route-card-link {
  padding: 30px 26px 24px;
}

.np-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.np-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.np-duration,
.np-difficulty {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.np-duration {
  background: var(--sand);
  color: var(--text);
}
.np-difficulty.easy { background: #e8f5e9; color: #2e7d32; }
.np-difficulty.moderate { background: #fff3e0; color: #c04400; }
.np-difficulty.hard { background: #fce4ec; color: #c62828; }

.np-rating {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.np-rating small { color: var(--text-muted); font-weight: 500; }

.np-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.np-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  line-height: 1.22;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.012em;
  font-weight: 700;
}
.np-provider {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-weight: 600;
}
.np-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-route {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
  background: rgba(91, 63, 110, 0.04);
  border: 1px dashed rgba(91, 63, 110, 0.15);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
}
.np-route-start,
.np-route-end {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-route-end { text-align: right; }
.np-arrow {
  color: var(--terracotta-text);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}
/* Hub-based tour: start_location == end_location. The town name reads as the
   anchor + a small chip explains the day-hike format, so it doesn't look like
   "Milngavie → Milngavie" (which reads as a typo). */
.np-route-hub .np-route-start { flex: 0 0 auto; }
.np-route-hub-tag {
  margin-left: auto;
  background: rgba(192, 98, 58, 0.10);
  color: var(--terracotta-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.np-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.np-stat { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.np-stat-icon { opacity: 0.85; font-size: 0.9rem; }

.np-chips {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.np-chips li {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 11px;
  background: #f3f1e9;
  color: var(--text);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.np-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #f0ede6;
}
.np-price { display: flex; align-items: baseline; gap: 5px; }
.np-price-from {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.np-price-amount {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.np-price-per { font-size: 0.75rem; color: var(--text-muted); }

.np-cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.01em;
  transition: color 0.18s, transform 0.18s;
}
.route-card.no-photo:hover .np-cta {
  color: var(--terracotta-text);
  transform: translateX(2px);
}

/* ===== Stay variant of no-photo card (Where to Stay home strip) ===== */
.route-card.no-photo.stay-card::before {
  /* Top accent uses the stage's regional color so the strip remains coherent
     with the Trail Map legend — each stay still tells you which stretch of
     trail it sits on, even without the cover image. */
  background: linear-gradient(90deg, var(--stage-color, var(--green)) 0%, var(--stage-color, var(--green-light)) 100%);
}

.stay-card .stay-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.stay-card .stay-type-icon { font-size: 0.95rem; line-height: 1; }

.stay-card .np-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: 0.08em;
  color: #fff;
}
.stay-card .np-badge-pro { background: var(--green); }
.stay-card .np-badge-featured { background: var(--terracotta); }

.stay-card .stay-stage-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--text);
}
.stay-card .stay-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stage-color, var(--green));
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}
.stay-card .stay-stage-num {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  color: var(--text);
}
.stay-card .stay-stage-name {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-style: italic;
}

.stay-card .stay-amenities {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stay-card .stay-amenities li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 11px;
  background: #f3f1e9;
  color: var(--text);
  border-radius: 999px;
}
.stay-card .stay-amenity-icon { font-size: 0.85rem; line-height: 1; opacity: 0.9; }
.stay-card .stay-spacer { flex: 1; min-height: 4px; margin-bottom: 16px; }

.stay-card .stay-price-amount {
  /* When the price is a range it gets long — give it room without breaking layout. */
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.stay-card .stay-price-tba {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Stay-card footer: let the price block keep its line and push CTA below
   on narrow columns when the price is a long range. */
.stay-card .np-footer {
  flex-wrap: wrap;
  row-gap: 8px;
}
.stay-card .np-price {
  flex-wrap: wrap;
  row-gap: 0;
  column-gap: 4px;
}
.tour-card-provider {
  font-size: 0.85rem;
  color: #888;
  margin: -4px 0 8px 0;
  font-style: italic;
}
.tour-card-rating {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}
.tour-card-rating small {
  font-weight: 400;
  opacity: 0.9;
}

/* ===== Destinations ===== */
.destinations {
  background: var(--sand);
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.destination-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}

a.destination-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.destination-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.destination-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.destination-card:hover .destination-image img {
  transform: scale(1.06);
}

.destination-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
}

.destination-tag {
  background: rgba(91, 63, 110, 0.9);
  color: var(--white);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.destination-body {
  padding: 24px;
}

.destination-body h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--green);
}

.destination-body p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.destination-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.destination-highlights span {
  background: var(--white);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid #e0dbd2;
}

/* ===== Ancient Sites (Timeline) ===== */
.ancient-sites {
  background: var(--white);
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--terracotta), var(--green));
}

.timeline-item {
  position: relative;
  margin-bottom: 48px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -33px;
  top: 24px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 3px solid var(--white);
  z-index: 1;
}

.timeline-content {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  background: var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.timeline-content:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.timeline-image {
  height: 100%;
  min-height: 200px;
}

.timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-text {
  padding: 24px 28px 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeline-badge {
  display: inline-block;
  background: rgba(192, 98, 58, 0.12);
  color: #974d2e;  /* 4.73:1 on this tint; the token is 3.99 */
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  width: fit-content;
}

.timeline-text h3 {
  font-size: 1.3rem;
  color: var(--green);
  margin-bottom: 8px;
}

.timeline-text p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 12px;
}

.timeline-detail {
  font-size: 0.78rem;
  color: var(--terracotta-text);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ===== Experiences ===== */
.experiences {
  background: var(--sand);
}

.experiences-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.experience-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}

a.experience-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.experience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--terracotta);
}

.experience-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  width: 56px;
  height: 56px;
  background: rgba(192, 98, 58, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.experience-card h3 {
  font-size: 1.15rem;
  color: var(--green);
  margin-bottom: 10px;
}

.experience-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.experience-meta {
  font-size: 0.78rem;
  color: var(--terracotta-text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===== Gallery ===== */
.gallery {
  background: var(--white);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
}

.gallery-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.gallery-item a {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
  opacity: 0;
  transition: var(--transition);
}

.gallery-item:hover::after {
  opacity: 1;
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item.wide {
  grid-column: span 2;
}

/* ===== Testimonials ===== */
.testimonials {
  background: var(--white);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

.testimonial-card {
  background: var(--white);
  padding: 36px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
  border-left: 4px solid var(--terracotta);
}

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

.stars {
  color: var(--terracotta-text);
  font-size: 1.1rem;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

/* Rating summary */
.rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  padding: 20px;
  background: var(--sand);
  border-radius: var(--radius);
}

.rating-score {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}

.rating-detail {
  text-align: left;
}

.stars-large {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.rating-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.testimonial-card > p {
  color: var(--text);
  font-size: 0.93rem;
  line-height: 1.8;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

.testimonial-author strong {
  display: block;
  font-size: 0.92rem;
}

.testimonial-author span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ===== FAQ ===== */
.faq {
  background: var(--white);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #e8e4dc;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--green);
}

.faq-icon {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--terracotta-text);
  transition: var(--transition);
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  padding-bottom: 24px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.8;
}

/* ===== Contact ===== */
.contact {
  background: var(--sand);
}

.contact-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.contact-header h2 {
  font-size: 2.4rem;
  margin: 0 0 14px;
  color: var(--green);
  line-height: 1.15;
}
.contact-header > p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: stretch;
}

.contact-info h2 {
  font-size: 2.2rem;
  margin-bottom: 16px;
  color: var(--green);
}

.contact-info > p {
  color: var(--text-muted);
  margin-bottom: 36px;
  line-height: 1.7;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-icon {
  font-size: 1.1rem;
  width: 48px;
  height: 48px;
  background: rgba(192, 98, 58, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.contact-item span {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  padding: 36px;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(91, 63, 110, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0eadf;
  position: relative;
}

@media (max-width: 640px) {
  .contact-form { padding: 24px 20px; border-radius: 16px; }
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid #e5dccd;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  background: #faf8f4;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #a89f8e;
  opacity: 1;
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
  border-color: #d4c8b4;
  background: #fff;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(91, 63, 110, 0.1);
}

.contact-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232D5016' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px;
  padding-right: 44px;
  cursor: pointer;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

.contact-form .btn-primary {
  margin-top: 6px;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(192, 98, 58, 0.28);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.contact-form .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(192, 98, 58, 0.36);
}
.contact-form .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(192, 98, 58, 0.3);
}

.contact-faq-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(192, 98, 58, 0.08), rgba(91, 63, 110, 0.05));
  border: 1px solid rgba(192, 98, 58, 0.18);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
}

/* Routing banner — distinguishes lead-board service requests from
   community Q&A. Sits at the top of the contact form so visitors decide
   the right channel before typing. */
.contact-routing-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 8px;
  padding: 14px 16px;
  background: #fbf8f1;
  border: 1px solid #ece4d2;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.contact-routing-banner .routing-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.contact-routing-banner .routing-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.contact-routing-banner .routing-row-yes .routing-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.contact-routing-banner .routing-row-no .routing-icon {
  background: rgba(192, 98, 58, 0.12);
  color: #974d2e;  /* 4.73:1 on this tint; the token is 3.99 */
}
.contact-routing-banner em { font-style: normal; font-weight: 600; color: var(--green); }
.contact-routing-banner strong { font-weight: 700; }
.contact-routing-banner a {
  color: var(--terracotta-text);
  font-weight: 600;
  text-decoration: none;
}
.contact-routing-banner a:hover { text-decoration: underline; }

/* ── Contact: step 1 (choose intent) cards → step 2 (booking form) ── */
.contact-step { display: flex; flex-direction: column; gap: 12px; }
.contact-step[hidden] { display: none; }  /* class selector would otherwise beat [hidden] */
.contact-misroute-hint[hidden] { display: none; }  /* pre-existing: the flex rule was overriding [hidden], so this nudge always showed */
/* Form header (relocated here): green pulse + "Message to West Highland Way Guides" */
.contact-form-head { margin-bottom: 4px; }
.contact-form-head h3 {
  margin: 0; font-family: 'Playfair Display', serif; font-size: 1.3rem;
  font-weight: 700; color: var(--text); letter-spacing: -0.01em;
}
/* Left feed box header — promoted from the old sub-line */
.leads-feed-title {
  margin: 0 0 14px; font-family: 'Playfair Display', serif; font-size: 1.12rem;
  line-height: 1.45; font-weight: 700; color: var(--text);
}
/* Small hint under the form header */
.contact-choose-hint {
  margin: 0 0 4px; font-size: 0.85rem; color: var(--text-light);
}
/* Each option reads as a tappable card: icon · title+sub · chevron */
.contact-choice {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; border: 1.5px solid #e2dccf; border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left; color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s;
}
.contact-choice:hover,
.contact-choice:focus-visible {
  border-color: var(--green);
  box-shadow: 0 12px 28px rgba(91, 63, 110, 0.14);
  transform: translateY(-2px);
  background: #fcfdfb;
  outline: none;
}
.contact-choice.routing-row-no:hover,
.contact-choice.routing-row-no:focus-visible {
  border-color: var(--terracotta);
  box-shadow: 0 12px 28px rgba(192, 98, 58, 0.14);
}
.contact-choice .routing-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1;
}
.contact-choice.routing-row-yes .routing-icon { background: rgba(91, 63, 110, 0.10); }
.contact-choice.routing-row-no  .routing-icon { background: rgba(192, 98, 58, 0.10); }
.contact-choice .choice-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-choice .choice-body strong { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--text); }
.contact-choice .choice-body strong + span { display: block; font-weight: 400; font-size: 0.85rem; line-height: 1.4; color: var(--text-light); }
.contact-choice .choice-chevron {
  flex-shrink: 0; margin-left: 4px; font-size: 1.7rem; line-height: 1; color: #9f8b62;
  transition: transform 0.18s, color 0.18s;
}
.contact-choice:hover .choice-chevron,
.contact-choice:focus-visible .choice-chevron { transform: translateX(4px); }
.contact-choice.routing-row-yes:hover .choice-chevron,
.contact-choice.routing-row-yes:focus-visible .choice-chevron { color: var(--green); }
.contact-choice.routing-row-no:hover .choice-chevron,
.contact-choice.routing-row-no:focus-visible .choice-chevron { color: var(--terracotta); }
.contact-back {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--text-light); font-weight: 600; font-size: 0.85rem;
  padding: 4px 2px; margin: 0 0 6px; font-family: inherit;
}
.contact-back:hover { color: var(--green); }

/* Success panel — shown after a lead is sent, then returns to the options */
.contact-success {
  align-items: center; text-align: center; gap: 8px; padding: 20px 16px 24px;
}
.contact-success .success-check {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(91, 63, 110, 0.10); color: var(--green);
  font-size: 2.1rem; font-weight: 800; line-height: 1; margin-bottom: 4px;
  animation: successPop 0.34s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
@keyframes successPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.contact-success h3 {
  margin: 0; font-family: 'Playfair Display', serif; font-size: 1.5rem;
  font-weight: 700; color: var(--text);
}
.contact-success p {
  margin: 0; max-width: 40ch; font-size: 0.95rem; line-height: 1.55; color: var(--text-light);
}
.contact-success-back {
  margin-top: 12px; background: var(--green); color: #fff; border: none;
  border-radius: 10px; padding: 11px 22px; font-weight: 600; font-size: 0.92rem;
  cursor: pointer; font-family: inherit; transition: background 0.18s, transform 0.18s;
}
.contact-success-back:hover { background: #234010; transform: translateY(-1px); }

/* Soft inline nudge — fires when the textarea contents look like community
   Q&A rather than a service request. Never blocks; just suggests a better
   home for the question. */
.contact-misroute-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  padding: 10px 14px;
  background: rgba(255, 235, 204, 0.55);
  border: 1px dashed #e0c896;
  border-radius: 10px;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--text);
  animation: misrouteFade 0.2s ease-out;
}
.contact-misroute-hint > span:first-child {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.contact-misroute-hint a {
  color: var(--terracotta-text);
  font-weight: 600;
  text-decoration: none;
}
.contact-misroute-hint a:hover { text-decoration: underline; }
@keyframes misrouteFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-faq-hint > span:first-child {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}
.contact-faq-hint a {
  color: var(--terracotta-text);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.contact-faq-hint a:hover {
  text-decoration: underline;
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  cursor: pointer;
  padding: 4px 0;
  margin: 4px 0 0;
}
.contact-consent input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 1px 0 0;
  padding: 0;
  border: 2px solid #d4c8b4;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
}
.contact-consent input[type="checkbox"]:hover {
  border-color: var(--green);
}
.contact-consent input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}
.contact-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.contact-consent input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(91, 63, 110, 0.18);
}
.contact-consent a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
}

.contact-reply-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0 2px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}
.contact-reply-note > span:first-child {
  font-size: 1rem;
  opacity: 0.7;
  line-height: 1;
}

/* Live enquiries feed (left column of contact section) */
.contact-leads-feed {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
  border: 1px solid #ece4d2;
  border-radius: 20px;
  padding: 28px 28px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(91, 63, 110, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
}
.contact-leads-feed::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green) 0%, var(--terracotta) 100%);
}

.leads-feed-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.leads-feed-head h3 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.leads-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: leadsPulse 2s ease-out infinite;
}
@keyframes leadsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.leads-feed-sub {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.5;
}

.leads-feed-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
  margin: 0 -6px 0 0;
  scrollbar-width: thin;
  scrollbar-color: #d4c8b4 transparent;
}
.leads-feed-list::-webkit-scrollbar {
  width: 6px;
}
.leads-feed-list::-webkit-scrollbar-track {
  background: transparent;
}
.leads-feed-list::-webkit-scrollbar-thumb {
  background: #d4c8b4;
  border-radius: 3px;
}
/* Lead cards inside the live-enquiries feed. Style here (not inline in
   the JS renderer) so :hover, responsive tweaks, and CSP-strict pages
   work without resorting to !important to fight inline styles. */
.lead-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.lead-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 63, 110, 0.06);
  border-left-color: var(--terracotta);
}
.lead-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--text-light);
}
.lead-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 8px;
}
.lead-card-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  margin-right: 6px;
}
.lead-card-badge-stage {
  background: #eef4f0;
  color: var(--green);
  font-weight: 600;
}
.lead-card-badge-trip {
  background: #f3f4f6;
  color: var(--text);
  font-weight: 500;
}

.leads-feed-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #e5dccd;
  text-align: center;
}
.leads-feed-link {
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.leads-feed-link:hover {
  color: var(--terracotta-text);
  text-decoration: underline;
}

/* Slim footer band — reply time, location, bug-mailto */
.contact-meta-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #ece4d2;
  border-radius: 14px;
}
.contact-meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  min-width: 0;
}
.contact-meta-item strong {
  color: var(--text);
  font-weight: 600;
}
.contact-meta-icon {
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(192, 98, 58, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a4f2f;  /* 4.68:1 on this tint; the token is 4.09 */
}
.contact-meta-item a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}
.contact-meta-item a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .contact-header h2 { font-size: 1.9rem; }
  .contact-header { margin-bottom: 32px; }
  .contact-leads-feed { padding: 22px 20px 18px; border-radius: 16px; }
  .leads-feed-list { max-height: 380px; }
  .contact-meta-bar {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 20px;
  }
}

/* ===== Footer ===== */
.footer {
  background: var(--green);
  padding: 48px 0 32px;
}

.footer-content {
  text-align: center;
}

.footer-brand {
  margin-bottom: 24px;
}

.footer .logo {
  color: var(--white);
  font-size: 1.4rem;
}

/* At 1.4rem the wordmark and its mark are 307px wide: past the edge of a
   320px screen (2026-10-02; see the navbar wordmark above). */
@media (max-width: 360px) {
  .footer .logo { font-size: 1.1rem; }
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.61);
  font-size: 0.85rem;
  margin-top: 8px;
}

.footer-email {
  margin-top: 10px !important;
  font-size: 0.88rem !important;
}
.footer-email a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 1px;
}
.footer-email a:hover {
  color: var(--terracotta-light, #d68869) !important;
  border-bottom-color: var(--terracotta-light, #d68869);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.61);
  font-size: 0.88rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--terracotta-light);
}

/* ── Footer dropdown ──
   Mirrors the navbar Contact dropdown pattern but opens UPWARD (the
   footer sits at the bottom of the page, so a top:100% menu would
   render below the viewport). Hover-triggered with an invisible bridge
   so the cursor can travel from the trigger into the menu without
   losing hover state. Light-on-cream rather than the navbar's
   dark-on-cream so it stays legible against the green footer.        */
.footer-dropdown {
  position: relative;
  display: inline-block;
}
.footer-dropdown > a {
  /* The trigger inherits .footer-links a styling — no overrides
     needed. We just sit it on a relatively-positioned shell so the
     submenu can absolute-position relative to it. */
}
.footer-dropdown-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  padding: 8px 0;
  margin-bottom: 12px;
  list-style: none;
  z-index: 100;
}
.footer-dropdown-menu::before {
  /* Speech-bubble arrow pointing DOWN toward the trigger */
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
}
/* Invisible hover bridge between trigger and menu so the cursor can
   traverse the gap without the menu closing. */
.footer-dropdown-menu::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.footer-dropdown:hover .footer-dropdown-menu,
.footer-dropdown:focus-within .footer-dropdown-menu {
  display: block;
}
.footer-dropdown-menu li { padding: 0; }
.footer-dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 0.86rem;
  color: var(--text) !important;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.footer-dropdown-menu li a:hover,
.footer-dropdown-menu li a:focus {
  background: var(--sand);
  color: var(--terracotta) !important;
}

/* Footer App Promo */
.footer-app-promo {
  position: relative;
  margin: 32px 0 24px;
  padding: 24px 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(42,78,54,0.6) 0%, rgba(58,109,75,0.4) 40%, rgba(183,101,67,0.3) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}

.footer-app-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(183,101,67,0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: footerGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

.footer-app-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  animation: footerShimmer 5s ease-in-out infinite;
  pointer-events: none;
}

.footer-app-promo-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 1;
}

.footer-app-phone {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--forest), var(--terracotta));
  border-radius: 14px;
  color: white;
  animation: footerPhoneFloat 3s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(183,101,67,0.3);
}

.footer-app-live-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--dark);
  animation: footerLivePulse 2s ease-in-out infinite;
}

.footer-app-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-app-headline {
  color: rgba(255,255,255,0.95);
  font-size: 1.05rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-app-new-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  animation: footerBadgePulse 2s ease-in-out infinite;
}

.footer-app-features {
  color: rgba(255, 255, 255, 0.61);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.footer-app-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.footer-app-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.footer-app-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255, 255, 255, 0.61);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  color: white;
}

@keyframes footerGlowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

@keyframes footerShimmer {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

@keyframes footerPhoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes footerLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

@keyframes footerBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (max-width: 768px) {
  .footer-app-promo {
    padding: 20px 16px;
  }
  .footer-app-promo-inner {
    flex-direction: column;
    text-align: center;
  }
  .footer-app-text {
    align-items: center;
  }
  .footer-app-headline {
    flex-direction: column;
    gap: 6px;
  }
  .footer-app-buttons {
    flex-direction: column;
    width: 100%;
  }
  .footer-app-btn {
    justify-content: center;
  }
}

.store-badge:hover {
  opacity: 0.8;
}

.footer-legal {
  display: flex;
  /* Wrap, never overflow: five links are wider than a phone, and a centred
     no-wrap flex row spills off BOTH edges (Privacy Policy began at x=-7 on a
     375px screen, 2026-09-25). tests/e2e/footer-fit.spec.mjs holds it. */
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 16px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.61);
  font-size: 0.8rem;
  text-decoration: none;
}

.footer-legal a:hover {
  color: rgba(255,255,255,0.8);
}

.footer-copy {
  color: rgba(255, 255, 255, 0.61);
  font-size: 0.8rem;
  padding-top: 12px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer-grid .logo {
  color: var(--white);
  font-size: 1.4rem;
}
.footer-grid p {
  color: rgba(255, 255, 255, 0.61);
  font-size: 0.85rem;
  margin-top: 6px;
}
.footer-grid a {
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  transition: var(--transition);
}
.footer-grid a:hover {
  color: var(--terracotta-light);
}
@media (max-width: 600px) {
  .footer-grid {
    flex-direction: column;
    text-align: center;
  }
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: var(--transition);
  position: relative;
}

.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--green);
  color: var(--white);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--terracotta);
}

.modal h2 {
  font-size: 1.3rem;
  margin-bottom: 24px;
  color: var(--green);
}

.modal form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal input,
.modal select,
.modal textarea {
  width: 100%;
  padding: 12px 18px;
  border: 2px solid #e0dbd2;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  border-color: var(--green);
}

/* ===== Departure Date Picker (inside modal) ===== */
.date-picker-section {
  margin-bottom: 16px;
}

.date-picker-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.date-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.date-card {
  background: var(--white);
  border: 2px solid var(--sand-dark);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.date-card:hover:not(.date-card--full) {
  border-color: var(--green);
}

.date-card.selected {
  border-color: var(--green);
  background: rgba(91, 63, 110, 0.06);
}

.date-card--full {
  opacity: 0.5;
  cursor: default;
}

.date-card__date {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.date-card__spots {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.date-card--full .date-card__spots {
  color: #c0392b;
}

.date-card__waitlist {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--terracotta-text);
  font-weight: 500;
  cursor: pointer;
}

.date-card__waitlist:hover {
  text-decoration: underline;
}

.date-picker-loading {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ===== Deposit Summary (inside modal) ===== */
.deposit-summary {
  background: var(--sand);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}

.deposit-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.deposit-breakdown {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.deposit-label {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}

.deposit-amount {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  color: var(--green);
}

.deposit-detail {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
}

.deposit-discount {
  margin-top: 8px;
  text-align: right;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.deposit-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #e8f5e2;
  color: var(--green);
}

.deposit-policy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #e0dbd2;
  font-size: 0.78rem;
  color: var(--terracotta-text);
  line-height: 1.5;
}

.deposit-policy-icon {
  flex-shrink: 0;
  font-size: 0.95rem;
  margin-top: 1px;
}

.stripe-badge {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.stripe-lock-icon {
  opacity: 0.5;
}

/* ===== Success Page ===== */
.success-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--sand);
}

.success-content {
  max-width: 560px;
  width: 100%;
  text-align: center;
}

.success-checkmark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: checkPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.success-content h1 {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 8px;
}

.success-content > p {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 32px;
}

.success-details {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 32px;
  text-align: left;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}

.success-details h3 {
  font-size: 1.1rem;
  color: var(--green);
  margin-bottom: 16px;
}

.success-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #f0ede6;
  font-size: 0.9rem;
}

.success-detail-row:last-child {
  border-bottom: none;
}

.success-detail-label {
  color: var(--text-muted);
}

.success-detail-value {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.success-next {
  text-align: left;
  margin-bottom: 32px;
}

.success-next h3 {
  font-size: 1.1rem;
  color: var(--green);
  margin-bottom: 20px;
  text-align: center;
}

.success-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.success-step:last-child {
  margin-bottom: 0;
}

.success-step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.success-step p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding-top: 4px;
}

.success-loading {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}

.success-loading .spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e0dbd2;
  border-top-color: var(--green);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.success-error {
  text-align: center;
  padding: 60px 24px;
}

.success-error h1 {
  color: var(--text);
  margin-bottom: 12px;
}

.success-error p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ===== Scroll Animations ===== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .route-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .timeline-content {
    grid-template-columns: 160px 1fr;
  }

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

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

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(245, 240, 232, 0.98);
    backdrop-filter: blur(20px);
    padding: 24px;
    gap: 20px;
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    color: var(--text) !important;
    font-size: 1rem;
  }

  .menu-toggle {
    display: flex;
  }

  .hero h1 {
    font-size: 2.4rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-image {
    order: -1;
  }

  .about-image-accent {
    display: none;
  }

  .section-title.left-align {
    text-align: center;
  }

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

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

  .timeline {
    padding-left: 32px;
  }

  .timeline-content {
    grid-template-columns: 1fr;
  }

  .timeline-image {
    min-height: 180px;
    max-height: 200px;
  }

  .timeline-text {
    padding: 20px 24px;
  }

  .timeline-marker {
    left: -25px;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .section {
    padding: 64px 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  .gallery-item.wide {
    grid-column: span 1;
  }
}

/* TABLET NAV (2026-09-03): between 769 and 1024px the desktop nav no longer fits —
   the wordmark wrapped to three lines and the fixed navbar grew, hiding every
   page's heading behind it. Use the mobile nav (hamburger) on tablets too. */
@media (min-width: 769px) and (max-width: 1024px) {

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(245, 240, 232, 0.98);
    backdrop-filter: blur(20px);
    padding: 24px;
    gap: 20px;
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    color: var(--text) !important;
    font-size: 1rem;
  }

  .menu-toggle {
    display: flex;
  }
}
.logo { white-space: nowrap; }


@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

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

  .modal {
    padding: 24px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Language Switcher ===== */
.lang-switcher {
  position: relative;
  margin-left: 16px;
  z-index: 1001;
}

.lang-current {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  transition: var(--transition);
}

.navbar.scrolled .lang-current {
  color: var(--text);
  border-color: rgba(0,0,0,0.15);
}

.lang-current:hover {
  border-color: var(--green);
}

.navbar.scrolled .lang-current:hover {
  border-color: var(--green);
  color: var(--green);
}

.lang-flag {
  font-size: 1rem;
  line-height: 1;
}

.lang-code {
  font-weight: 600;
  letter-spacing: 0.5px;
}

.lang-arrow {
  font-size: 0.65rem;
  transition: transform var(--transition);
}

.lang-switcher.open .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  list-style: none;
  min-width: 170px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  overflow: hidden;
}

.lang-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  transition: background 0.15s ease;
}

.lang-dropdown li:hover {
  background: var(--sand);
}

.lang-dropdown li.active {
  background: var(--sand);
  font-weight: 600;
  color: var(--green);
}

.lang-dropdown li .lang-flag {
  font-size: 1.15rem;
}

/* Language switcher responsive */
@media (max-width: 768px) {
  .lang-switcher {
    position: absolute;
    top: 14px;
    right: 60px;
  }

  .lang-current {
    padding: 5px 8px;
    font-size: 0.75rem;
  }

  .lang-dropdown {
    right: -10px;
  }
}

/* ===== Cookie Consent Banner ===== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #fff;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  border-top: 3px solid var(--green);
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cookie-content p {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin: 0;
  flex: 1;
}

.cookie-content a {
  color: var(--green);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.cookie-btn:hover { opacity: 0.85; }

.cookie-btn--accept {
  background: var(--green);
  color: #fff;
}

.cookie-btn--essential {
  background: #e8e3d9;
  color: #555;
}

@media (max-width: 640px) {
  .cookie-content {
    flex-direction: column;
    text-align: center;
  }
  .cookie-actions {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Currency Selector ===== */
.currency-select {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 8px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #555;
  cursor: pointer;
  vertical-align: middle;
}
.currency-select:focus {
  outline: none;
  border-color: #5B3F6E;
}

/* ===== WhatsApp Floating Button ===== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 999;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.whatsapp-float svg {
  margin-top: 1px;
}

/* Push WhatsApp button up when cookie banner is visible */
.cookie-banner[style*="display: block"] ~ .whatsapp-float,
.cookie-banner[style*="display:block"] ~ .whatsapp-float {
  bottom: 100px;
}

@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
  }
}

/* ===== Trail Map ===== */
#trailMap {
  height: 500px;
  border-radius: var(--radius);
  z-index: 1;
}
.map-container {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.map-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  background: var(--white);
  border-top: 1px solid var(--sand-dark);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.legend-line {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.legend-full { background: var(--green); }
.legend-highlights { background: var(--terracotta); }
.legend-weekend { background: var(--ocean); }
.trail-marker { background: transparent !important; border: none !important; }
@media (max-width: 768px) {
  #trailMap { height: 350px; }
  .map-legend { gap: 12px; flex-wrap: wrap; padding: 12px; }
  .legend-item { font-size: 13px; }
}

/* ===== Trail Dashboard ===== */
.trail-dashboard {
  background: var(--cream, #f9f6f1);
}

.trail-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 20px;
  font-size: 0.95rem;     /* a touch smaller than the subtitle above it */
  font-weight: 500;       /* not bold, so it doesn't read as larger */
  color: #166534;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* Routes & guides — progressive "Load more" disclosure */
.guides-more { text-align: center; margin-top: 24px; }
.guides-load-more {
  display: inline-block; padding: 11px 28px;
  border: 1.5px solid var(--green, #5B3F6E); background: #fff; color: var(--green, #5B3F6E);
  border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  font-family: inherit; transition: background 0.15s, color 0.15s, transform 0.15s;
}
.guides-load-more:hover { background: var(--green, #5B3F6E); color: #fff; transform: translateY(-1px); }

.trail-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.trail-legend > span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Every Leaflet map is its own stacking context (2026-09-28). Leaflet gives
   its panes z-index 400-700 and its controls (.leaflet-top/.leaflet-bottom)
   z-index 1000. Without a context on the container those compete with the
   fixed .navbar (z-index 1000) at the root, and win because the map comes
   later in the DOM: the +/- buttons drew over the logo while scrolling and,
   with the phone menu open, the zoom buttons and the attribution box sat on
   top of the menu items, so a tap on 'Sign In' followed an OGL link instead.
   z-index 0 + isolation keeps everything Leaflet paints inside the map. */
.leaflet-container {
  isolation: isolate;
  z-index: 0;
}

.trail-map-container {
  position: relative;
}

.trail-stage-panel {
  position: relative;
  margin-top: 16px;
  padding: 20px 24px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--green);
  animation: panelSlideIn 0.3s ease-out;
}

@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.trail-panel-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.trail-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  padding-right: 36px; /* room for the absolute-positioned close button */
}

.trail-panel-title {
  flex: 1;
  text-align: center;
  line-height: 1.3;
}

/* Prev / next arrows inside the stage panel header. Keeps the user
   inside the panel rather than forcing a click on a different marker. */
.trail-panel-nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--sand-dark, #d6c8b0);
  background: #fff;
  color: var(--green);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.trail-panel-nav:not(:disabled):hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.trail-panel-nav:not(:disabled):active {
  transform: translateY(1px);
}
.trail-panel-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.trail-panel-weather {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trail-panel-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.trail-panel-tips {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 12px;
}

.trail-panel-actions {
  display: flex;
  gap: 10px;
}

.trail-panel-actions a {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

/* Stage number labels on map */
.stage-number-label {
  background: var(--green);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
  .trail-map-container {
    height: 350px !important;
  }
  .trail-panel-stats {
    flex-direction: column;
    gap: 4px;
  }
  .trail-legend {
    gap: 8px;
    font-size: 0.75rem;
  }
}

/* ===== Itinerary Download Button ===== */
.btn-itinerary {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--green);
  background: transparent;
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-itinerary:hover {
  background: var(--sand);
  border-color: var(--green);
}
.route-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* ===== Promo Code (Booking Modal) ===== */
.promo-section {
  margin-bottom: 12px;
}
.promo-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.promo-input-row input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  text-transform: uppercase;
}
.promo-status {
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}
.promo-status.success { color: var(--green); }
.promo-status.error { color: #c0392b; }
.promo-discount-badge {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* ===== Nav Dropdown Menus ===== */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a::after {
  display: none;
}

.nav-dropdown > a {
  gap: 4px;
}

.nav-dropdown > a::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--terracotta);
  transition: var(--transition);
}

.nav-dropdown:hover > a::before {
  width: 100%;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  margin-top: 12px;
  list-style: none;
  z-index: 100;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: var(--white);
  border-top: 0;
}

/* Invisible bridge so hover doesn't break between link and dropdown */
.nav-dropdown-menu::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 0.82rem;
  color: var(--text) !important;
  white-space: nowrap;
  transition: background 0.2s;
}

.nav-dropdown-menu li a::after {
  display: none;
}

.nav-dropdown-menu li a:hover {
  background: var(--sand);
  color: var(--terracotta-text) !important;
}

/* Mobile dropdown accordion */
@media (max-width: 768px) {
  .nav-dropdown-menu {
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: none;
    padding-left: 16px;
    border-left: 2px solid var(--terracotta);
    margin-top: 8px;
  }

  .nav-dropdown-menu::before,
  .nav-dropdown-menu::after {
    display: none;
  }

  .nav-dropdown.dropdown-open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown.dropdown-open:hover .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu li a {
    padding: 8px 12px;
    font-size: 0.92rem;
    color: var(--text-muted) !important;
  }

  .nav-dropdown-menu li a:hover {
    color: var(--terracotta) !important;
    background: transparent;
  }
}

/* ===== Shared Sub-page Styles ===== */
.page-header {
  background: linear-gradient(160deg, rgba(91, 63, 110, 0.88), rgba(28, 28, 28, 0.5)),
    url('images/stage-mountain-valley.jpg?v=20260616') center/cover;
  padding: 140px 0 60px;
  color: var(--white);
  text-align: center;
}

.page-header h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--white);
  margin-bottom: 12px;
}

.page-header p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== Stage Cards (list view) ===== */
.stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 0;
}

.stage-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

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

.stage-card-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.stage-card-number {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--green);
  color: var(--white);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.stage-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-easy { background: #e8f5e9; color: #2e7d32; }
.badge-moderate { background: #fff3e0; color: #e65100; }
.badge-hard { background: #fce4ec; color: #c62828; }
.badge-very-hard { background: #f3e5f5; color: #6a1b9a; }

.stage-card-body {
  padding: 20px;
}

.stage-card-body h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--green);
}

.stage-card-location {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.stage-card-stats {
  display: flex;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stage-card-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== Stage Detail View ===== */
.stage-detail {
  padding: 40px 0 80px;
}

.stage-hero {
  position: relative;
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
}

.stage-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
}

.stage-hero-info {
  position: absolute;
  bottom: 24px;
  left: 24px;
  color: var(--white);
}

.stage-hero-info h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--white);
  margin-bottom: 4px;
}

.stage-hero-info p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.8);
}

.stage-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.stage-stat {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stage-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green);
  font-family: 'Playfair Display', serif;
}

.stage-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.stage-section {
  margin-bottom: 40px;
}

.stage-section h2 {
  font-size: 1.4rem;
  color: var(--green);
  margin-bottom: 16px;
}

.stage-map-container {
  height: 450px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 32px;
}

.stage-elevation-canvas {
  width: 100%;
  height: 200px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* Waypoint list */
.waypoint-list {
  list-style: none;
  display: grid;
  gap: 12px;
}

.waypoint-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.waypoint-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.waypoint-info h4 {
  font-size: 0.92rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  margin-bottom: 2px;
}

.waypoint-info p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.waypoint-meta {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Trail conditions */
.condition-card {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.condition-card.severity-high {
  background: #fce4ec;
  border-left-color: #c62828;
}

.condition-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.condition-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.condition-card-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Highlights / best months / warnings */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--sand-dark);
  color: var(--text-muted);
}

.tag-green {
  background: #e8f5e9;
  color: #2e7d32;
}

.tag-amber {
  background: #fff3e0;
  color: #e65100;
}

.tag-red {
  background: #fce4ec;
  color: #c62828;
}

.warning-box {
  background: #fce4ec;
  border-left: 4px solid #c62828;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.warning-box p {
  font-size: 0.88rem;
  color: #c62828;
}

/* Stage detail mobile */
@media (max-width: 768px) {
  .stage-hero {
    height: 280px;
    border-radius: 0;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 24px;
  }

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

  .stage-map-container {
    height: 320px;
  }

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

/* ===== Nav CTA Buttons ===== */
.nav-cta-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 8px !important;
  padding-left: 12px !important;
  border-left: 1px solid rgba(255,255,255,0.15) !important;
}

.nav-cta-free {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  color: var(--white) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  transition: all 0.3s ease !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}
.nav-cta-free:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(22,163,74,0.4) !important;
  color: var(--white) !important;
}

.nav-cta-list {
  background: linear-gradient(135deg, var(--terracotta), #c67a52) !important;
  color: var(--white) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  transition: all 0.3s ease !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(183,101,67,0.3);
}
.nav-cta-list:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(183,101,67,0.4) !important;
  color: var(--white) !important;
}

@media (max-width: 1024px) {
  .nav-cta-group {
    flex-direction: column !important;
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    width: 100%;
  }
  .nav-cta-free,
  .nav-cta-list {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ===== Account/Login Button ===== */
.nav-account {
  margin-left: 8px !important;
}
.nav-account-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green) !important;
  color: var(--white) !important;
  font-size: 1.1rem;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-account-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 63, 110,0.3);
}
.nav-login-btn {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 9px 24px !important;
  border-radius: 8px !important;
  background: var(--green) !important;
  color: var(--white) !important;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(91, 63, 110,0.25);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.nav-login-btn:hover {
  background: #1e3f0f !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(91, 63, 110,0.35);
}
@keyframes loginPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(91, 63, 110,0.25); }
  50% { box-shadow: 0 2px 16px rgba(91, 63, 110,0.45); }
}
.nav-user-btn {
  width: auto !important;
  padding: 5px 14px 5px 5px !important;
  border-radius: 24px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  gap: 8px;
}
.nav-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.nav-user-name { white-space: nowrap; }

/* ===== Hiker Account Dropdown ===== */
.nav-hiker-menu {
  position: relative;
  display: inline-flex;
}
.nav-hiker-toggle {
  cursor: pointer;
  border: none;
  outline: none;
}
.nav-hiker-arrow {
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s;
}
.nav-hiker-toggle[aria-expanded="true"] .nav-hiker-arrow {
  transform: rotate(180deg);
}
.nav-hiker-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  max-height: min(78vh, 620px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  z-index: 2000;
  animation: hikerDropFade 0.15s ease-out;
}
.nav-hiker-dropdown.open {
  display: block;
}
@keyframes hikerDropFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-hiker-header {
  padding: 10px 16px 8px;
  border-bottom: 1px solid #f0ece4;
  margin-bottom: 4px;
}
.nav-hiker-greeting {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green);
}
/* Collapsible submenus inside the account dropdown */
.nav-hiker-sub { list-style: none; }
.nav-hiker-subtoggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-hiker-subtoggle:hover { background: #f5f3ee; color: var(--green); }
.nav-hiker-sub-label { flex: 1; white-space: nowrap; }
.nav-hiker-sub-arrow {
  font-size: 0.7rem;
  color: #9a8f7d;
  transition: transform 0.15s ease;
}
.nav-hiker-sub.open > .nav-hiker-subtoggle .nav-hiker-sub-arrow { transform: rotate(180deg); }
.nav-hiker-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
.nav-hiker-sub.open > .nav-hiker-submenu { display: block; }
.nav-hiker-submenu li a {
  padding-left: 38px;
  font-weight: 500;
  background: #faf8f4;
}
.nav-hiker-submenu li a:hover { background: #f0ece4; }

/* Desktop (mouse): open each submenu on HOVER as a flyout panel to the left of
   the dropdown — no click needed, and (unlike an inline expand) the other rows
   don't shift as you move down the menu. Touch / narrow screens don't match
   this query, so they keep the inline click accordion above. */
@media (hover: hover) and (min-width: 769px) {
  /* let the flyout escape the dropdown box (no scroll clip); the dropdown
     itself stays short because submenus no longer expand inline here */
  .nav-hiker-dropdown { overflow: visible; max-height: none; }
  .nav-hiker-sub { position: relative; }
  .nav-hiker-submenu {
    position: absolute;
    top: -8px;
    right: 100%;
    min-width: 210px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    padding: 8px 0;
  }
  .nav-hiker-sub:hover > .nav-hiker-submenu { display: block; }
  .nav-hiker-sub:hover > .nav-hiker-subtoggle { background: #f5f3ee; color: var(--green); }
  .nav-hiker-submenu li a { padding-left: 16px; background: #fff; }
  .nav-hiker-submenu li a:hover { background: #f5f3ee; }
  /* arrow points left, toward where the flyout appears */
  .nav-hiker-sub > .nav-hiker-subtoggle .nav-hiker-sub-arrow { transform: rotate(90deg); }
}
.nav-hiker-dropdown li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333 !important;
  text-decoration: none !important;
  transition: background 0.15s;
  white-space: nowrap;
}
.nav-hiker-dropdown li a:hover {
  background: #f5f3ee;
  color: var(--green) !important;
}
.nav-hiker-divider {
  height: 1px;
  background: #f0ece4;
  margin: 4px 0;
}

/* Mobile: hiker dropdown inside hamburger */
@media (max-width: 768px) {
  .nav-hiker-menu {
    display: block;
    width: 100%;
  }
  .nav-hiker-toggle {
    width: 100%;
    justify-content: center;
  }
  .nav-hiker-dropdown {
    position: static;
    box-shadow: none;
    border-radius: 0;
    background: rgba(255,255,255,0.05);
    animation: none;
    max-height: none;
    overflow: visible;
  }
  .nav-hiker-subtoggle {
    color: #fff;
    padding: 10px 24px;
  }
  .nav-hiker-subtoggle:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
  }
  .nav-hiker-sub-arrow { color: rgba(255,255,255,0.6); }
  .nav-hiker-submenu li a {
    padding-left: 46px;
    background: rgba(255,255,255,0.04);
  }
  .nav-hiker-submenu li a:hover { background: rgba(255,255,255,0.1); }
  .nav-hiker-dropdown li a {
    color: #fff !important;
    padding: 10px 24px;
  }
  .nav-hiker-dropdown li a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
  }
  .nav-hiker-header {
    border-bottom-color: rgba(255,255,255,0.1);
  }
  .nav-hiker-greeting {
    color: #a3d977;
  }
  .nav-hiker-divider {
    background: rgba(255,255,255,0.1);
  }
}

/* ===== Dashboard Sidebar ===== */
.dash-sidebar {
  position: fixed;
  top: 56px; left: 0; bottom: 0;
  width: 260px;
  background: #fff;
  border-right: 1px solid var(--sand-dark);
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.3s ease;
}
.dash-sidebar-header {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--sand-dark);
}
.dash-sidebar-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
}
.dash-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--sand-dark);
}
.dash-sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.dash-sidebar-avatar-img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dash-sidebar-user-info {
  min-width: 0;
}
.dash-sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sidebar-user-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sidebar-section {
  padding: 10px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.dash-sidebar-nav {
  padding: 2px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dash-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
  background: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
}
.dash-sidebar-item:hover {
  background: var(--sand);
  color: var(--text);
}
.dash-sidebar-item.active {
  background: var(--sand);
  color: var(--green);
  border-left-color: var(--green);
  font-weight: 600;
}
.dash-sidebar-item .item-icon {
  width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}
.dash-sidebar-item .item-label {
  flex: 1;
}
.dash-sidebar-item .item-badge {
  background: var(--terracotta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}
.dash-sidebar-footer {
  border-top: 1px solid var(--sand-dark);
  padding: 8px 0;
  margin-top: auto;
}
.dash-sidebar-item.logout {
  color: #c62828 !important;
}
.dash-sidebar-item.logout:hover {
  background: #ffebee;
}

/* Push main content right when sidebar is present */
.has-sidebar .profile-hero { margin-left: 260px; }
.has-sidebar .container,
.has-sidebar .page-wrap { margin-left: 260px; }
.has-sidebar .navbar .nav-container { margin-left: 0; }
.has-sidebar .footer { margin-left: 260px; }

/* Mobile toggle button */
.dash-sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1002;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

@media (max-width: 768px) {
  .dash-sidebar {
    transform: translateX(-100%);
  }
  .dash-sidebar.open {
    transform: translateX(0);
  }
  .dash-sidebar-toggle {
    display: flex;
  }
  .has-sidebar .profile-hero,
  .has-sidebar .container,
  .has-sidebar .page-wrap,
  .has-sidebar .footer {
    margin-left: 0;
  }
}

/* ===== Accommodation Advertising Styles ===== */
.acc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  z-index: 2;
}
.acc-badge-featured {
  background: #16a34a;
  color: #fff;
}
.acc-badge-pro {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #fff;
}
.dir-card.acc-featured {
  border: 2px solid #16a34a;
}
.dir-card.acc-pro {
  border: 2px solid #d97706;
  box-shadow: 0 4px 24px rgba(217, 119, 6, 0.12);
}
.acc-availability {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.acc-availability.available {
  background: #dcfce7;
  color: #166534;
}
.acc-availability.full {
  background: #fee2e2;
  color: #991b1b;
}
.acc-external-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.acc-external-link:hover {
  background: var(--terracotta-light);
  transform: translateY(-1px);
}

/* Where to Stay section on stage detail */
.stage-acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.stage-acc-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
}
.stage-acc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.stage-acc-card.acc-featured {
  border: 2px solid #16a34a;
}
.stage-acc-card.acc-pro {
  border: 2px solid #d97706;
  box-shadow: 0 4px 24px rgba(217, 119, 6, 0.12);
}
.stage-acc-card-img {
  height: 130px;
  background: var(--sand-dark) center/cover no-repeat;
  position: relative;
}
.stage-acc-card-body {
  padding: 12px 14px;
}
.stage-acc-card-body h4 {
  font-size: 0.92rem;
  font-family: 'Playfair Display', serif;
  color: var(--green);
  margin-bottom: 4px;
}
.stage-acc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stage-acc-meta span {
  display: flex;
  align-items: center;
  gap: 2px;
}
.stage-acc-amenities {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.stage-acc-amenity {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--sand);
  color: var(--text-muted);
}

/* Map accommodation popup */
.acc-map-popup h4 {
  font-size: 0.9rem;
  color: var(--green);
  margin-bottom: 4px;
}
.acc-map-popup p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.acc-map-popup .acc-external-link {
  font-size: 0.72rem;
  padding: 4px 10px;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .stage-acc-grid {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   Weather Comfort Colors
   ============================== */
.comfort-green { border-left: 4px solid #22c55e; }
.comfort-yellow { border-left: 4px solid #f59e0b; }
.comfort-orange { border-left: 4px solid #f97316; }
.comfort-red { border-left: 4px solid #ef4444; }

.comfort-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.comfort-dot-green { background: #22c55e; }
.comfort-dot-yellow { background: #f59e0b; }
.comfort-dot-orange { background: #f97316; }
.comfort-dot-red { background: #ef4444; }

.comfort-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  margin-left: 8px;
}
.comfort-badge-green { background: #22c55e; }
.comfort-badge-yellow { background: #f59e0b; }
.comfort-badge-orange { background: #f97316; }
.comfort-badge-red { background: #ef4444; }

.comfort-tips {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #fefce8;
  border: 1px solid #fde68a;
}
.comfort-tips.tips-orange {
  background: #fff7ed;
  border-color: #fed7aa;
}
.comfort-tips.tips-red {
  background: #fef2f2;
  border-color: #fecaca;
}
.comfort-tips p {
  margin: 4px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.weather-forecast-card {
  flex: 1;
  min-width: 100px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
}
.weather-forecast-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.weather-forecast-card .weather-emoji {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 4px;
}
.weather-forecast-card .weather-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}
.weather-forecast-card .weather-temp {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 4px 0;
}
.weather-forecast-card .weather-condition {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* Weather Legend */
.weather-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.weather-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Climate Grid */
.climate-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.climate-month {
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 0.8rem;
  transition: var(--transition);
}
.climate-month .month-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.climate-month .month-temp {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.climate-month.best {
  background: #f0fdf4;
  border-color: #86efac;
}
.climate-month.hot {
  background: #fff7ed;
  border-color: #fdba74;
}
.climate-month.cool {
  background: #eff6ff;
  border-color: #93c5fd;
}
.climate-month.current {
  border: 2px solid var(--terracotta);
  font-weight: 600;
}

@media (max-width: 768px) {
  .climate-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .weather-legend {
    flex-direction: column;
    gap: 8px;
  }
}

/* ===== Language Suggestion Banner ===== */
.lang-suggest-banner {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-bottom: 1px solid #93c5fd;
  padding: 10px 20px;
  text-align: center;
  font-size: 0.88rem;
  color: #1e3a5f;
  animation: langBannerSlide 0.4s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 90;
  position: relative;
}
.lang-suggest-banner.lang-suggest-hiding {
  animation: langBannerFade 0.4s ease-in forwards;
}
.lang-suggest-text {
  display: inline;
}
.lang-suggest-actions {
  display: inline-flex;
  gap: 8px;
}
.lang-suggest-yes {
  background: var(--green);
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lang-suggest-yes:hover { opacity: 0.85; }
.lang-suggest-no {
  background: transparent;
  color: #64748b;
  border: 1px solid #cbd5e1;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lang-suggest-no:hover { opacity: 0.7; }

@keyframes langBannerSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes langBannerFade {
  from { opacity: 1; max-height: 60px; padding: 10px 20px; }
  to { opacity: 0; max-height: 0; padding: 0 20px; overflow: hidden; }
}

@media (max-width: 480px) {
  .lang-suggest-banner {
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
  }
  .lang-suggest-actions {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Trail Tip Banner ===== */
.trail-tip-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #713f12;
  animation: tipSlideIn 0.3s ease-out;
}
@keyframes tipSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.trail-tip-banner.trail-tip-hiding {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.3s;
}
.trail-tip-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.trail-tip-text {
  flex: 1;
}
.trail-tip-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #a16207;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.trail-tip-close:hover {
  opacity: 1;
}

/* ===== Form Select (referral dropdown) ===== */
.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23667085' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.form-select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(91, 63, 110,0.1);
}


/* Small hover lift — replaces inline onmouseover/onmouseout handlers. */
.hover-lift:hover { transform: translateY(-2px); }

/* =====================================================================
   Dashboard buddy cards (account.html → Suggestions + My Requests tabs)
   ===================================================================== */
.dash-buddy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.dash-buddy-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #ede6d2;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.dash-buddy-card:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.dash-buddy-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-buddy-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dash-buddy-avatar-initial {
  background: linear-gradient(135deg, var(--green) 0%, #4a7a35 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.2rem;
}
.dash-buddy-head-text { flex: 1; min-width: 0; }
.dash-buddy-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.2;
}
.dash-buddy-dates {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.dash-buddy-match {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  background: #e8f5e9;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.dash-buddy-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-buddy-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  background: #f3f1e9;
  color: var(--text);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-buddy-tag-urgent { background: #fce4ec; color: #c62828; }
.dash-buddy-stages {
  font-size: 0.82rem;
  color: var(--text);
  background: rgba(91, 63, 110,0.05);
  border-radius: 8px;
  padding: 8px 12px;
}
.dash-buddy-desc {
  font-size: 0.88rem;
  color: #5a5246;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-buddy-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #ede6d2;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.dash-buddy-interest { font-weight: 600; }
.dash-buddy-status { font-weight: 700; color: var(--text); }


/* =====================================================================
   CULTURE / Historical site detail (culture.html?slug=...)
   Prefix .cs-  ("culture site")
   ===================================================================== */

/* On this detail view the navbar must always be opaque — the hero photo
   sits behind it and would otherwise eat the logo / links. */
body.cs-detail-page nav.navbar { background: rgba(245, 240, 232, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid #ede6d2; }

.cs-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(192,98,58,0.18) 0%, transparent 55%),
    radial-gradient(100% 60% at 0% 100%, rgba(91, 63, 110,0.16) 0%, transparent 55%),
    linear-gradient(180deg,#f6efe1 0%,#ebe1c8 100%);
  border-bottom: 1px solid #e2dccf;
  margin-top: 64px;
}
.cs-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(91, 63, 110,.08) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: .45;
  pointer-events: none;
}
.cs-hero::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--green) 0%, var(--terracotta) 100%);
  z-index: 2;
}
.cs-hero.cs-era-norman::after { background: linear-gradient(90deg, #a98a5c 0%, #6b4f2a 100%); }
.cs-hero.cs-era-medieval::after { background: linear-gradient(90deg, #6a8a5f 0%, #3a5a32 100%); }
.cs-hero.cs-era-tudor::after { background: linear-gradient(90deg, #b06a6a 0%, #7a3030 100%); }
.cs-hero.cs-era-georgian::after { background: linear-gradient(90deg, #5b7da6 0%, #2c4a6b 100%); }
.cs-hero.cs-era-victorian::after { background: linear-gradient(90deg, #8a6a9b 0%, #5a3a6b 100%); }
.cs-hero.cs-era-industrial::after { background: linear-gradient(90deg, #9a9a9a 0%, #555555 100%); }

.cs-hero-inner {
  position: relative; z-index: 1;
  padding: 32px 24px 48px;
  max-width: 1180px;
  margin: 0 auto;
}

.cs-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 24px;
}
.cs-breadcrumb a { color: var(--text-light); text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--terracotta-text); }
.cs-crumb-sep { margin: 0 8px; opacity: 0.5; }

.cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.cs-hero-body { min-width: 0; }
.cs-era-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cs-era-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: rgba(255,255,255,0.6);
}
.cs-era-badge.cs-era-norman { color: #6b4f2a; }
.cs-era-badge.cs-era-medieval { color: #3a5a32; }
.cs-era-badge.cs-era-tudor { color: #7a3030; }
.cs-era-badge.cs-era-georgian { color: #2c4a6b; }
.cs-era-badge.cs-era-victorian { color: #5a3a6b; }
.cs-era-badge.cs-era-industrial { color: #555555; }

.cs-hero-body h1,
.cs-hero-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.012em;
}
.cs-lede {
  font-size: 1.05rem;
  color: #5a5246;
  margin: 0 0 18px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(91, 63, 110,0.15);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.cs-pill a { color: inherit; text-decoration: none; }
.cs-pill a:hover { color: var(--green); }

.cs-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-cta-primary,
.cs-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s, border-color 0.18s;
}
.cs-cta-primary {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(192,98,58,0.32);
}
.cs-cta-primary:hover { background: #a8512d; transform: translateY(-2px); color: #fff; }
.cs-cta-secondary {
  background: rgba(255,255,255,0.7);
  color: var(--text);
  border: 1.5px solid rgba(91, 63, 110,0.18);
}
.cs-cta-secondary:hover { border-color: var(--green); color: var(--green); }

.cs-hero-photo {
  border-radius: 22px;
  overflow: hidden;
  height: 380px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.15), 0 0 0 6px rgba(255,255,255,0.55);
}

/* Main body */
.cs-main { background: #fbfaf5; }
.cs-main-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.cs-content { min-width: 0; }
.cs-sidebar { position: sticky; top: 96px; }

.cs-section { margin-bottom: 38px; }
.cs-section:last-child { margin-bottom: 0; }
.cs-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 8px;
  position: relative;
}
.cs-section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  background: var(--terracotta);
  border-radius: 3px;
}

.cs-prose { font-size: 1.03rem; line-height: 1.75; color: #5a5246; margin: 0; }

.cs-quote {
  margin: 0;
  padding: 22px 26px;
  background: rgba(192, 98, 58, 0.06);
  border-left: 4px solid var(--terracotta);
  border-radius: 0 14px 14px 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.7;
  color: #5a4a3f;
}
.cs-quote p { margin: 0; }

.cs-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.cs-photos .photo-item {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.cs-photos .photo-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }

/* ──────────────────────────────────────────────────────────────────
   Audio guide player on culture-site detail pages
   - Card layout matches the cs-* design language
   - Custom play button + scrubber (skinning native <audio>)
   - "Recording coming soon" placeholder for guides whose MP3 isn't
     uploaded yet — transcript still renders so visitors can read it
   - Collapsible transcript via native <details>
   ────────────────────────────────────────────────────────────────── */
.cs-audio-list { display: flex; flex-direction: column; gap: 14px; }
.cs-audio-card {
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(91, 63, 110, 0.04);
}
.cs-audio-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ece4d2;
}
.cs-audio-tab {
  padding: 6px 14px;
  border: 1px solid #d9cfb8;
  border-radius: 999px;
  background: var(--sand);
  font: inherit; font-size: 0.84rem; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.cs-audio-tab:hover { border-color: var(--green); color: var(--green); }
.cs-audio-tab-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.cs-audio-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.cs-audio-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--green);
  margin: 0;
  line-height: 1.3;
  display: flex; align-items: center; gap: 8px;
}
.cs-audio-headicon { font-size: 1.2rem; }
.cs-audio-voice {
  font-size: 0.76rem;
  color: var(--text-muted);
  background: var(--sand);
  border: 1px solid #ece4d2;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Native <audio> kept off-screen — we drive it via JS, render our own UI */
#csAudioEl { display: none; }

.cs-audio-controls {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f7f3eb, #fbf8f1);
  border-radius: 14px;
}
.cs-audio-play {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 6px 18px rgba(192, 98, 58, 0.32);
}
.cs-audio-play:hover { background: #a5522f; box-shadow: 0 8px 22px rgba(192, 98, 58, 0.4); }
.cs-audio-play:active { transform: scale(0.95); }
.cs-audio-bar { flex: 1; min-width: 0; }
.cs-audio-progress {
  width: 100%; height: 8px;
  background: #e6dec9;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.cs-audio-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--green);
  border-radius: 999px;
  transition: width 0.1s linear;
}
.cs-audio-times {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* "Recording coming soon" placeholder for guides without uploaded audio */
.cs-audio-soon {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: rgba(218, 165, 32, 0.08);
  border: 1px dashed rgba(184, 134, 11, 0.45);
  border-radius: 14px;
  color: var(--text);
}
.cs-audio-soon-icon { font-size: 1.6rem; flex-shrink: 0; }
.cs-audio-soon-copy { flex: 1 1 auto; min-width: 0; }
/* Scoped to the copy column, not the whole block: the QR caption is a <span>
   inside .cs-audio-soon too, and the old descendant selector restyled it. */
.cs-audio-soon-copy strong { display: block; font-size: 0.96rem; color: var(--green); margin-bottom: 2px; }
.cs-audio-soon-copy span { display: block; font-size: 0.84rem; color: var(--text-muted); }

/* The get-app affordance is the shared .lw-getapp component (see below). */
@media (max-width: 640px) {
  /* Row -> stack. The QR is hidden at this width (a phone cannot scan its own
     screen), which leaves the tap-through button — nowrap, ~240px — in the
     row beside the copy: at 375px the copy column was squeezed to 3px (one
     letter per line) on westhighlandway and southwestcoast and 90px on
     cappadocia. flex-basis 0 lets the copy share the first line with the icon
     and take all of it; the button wraps to its own full-width line. Pinned
     by tests/contract/culture-page-layout.test.mjs. */
  .cs-audio-soon { flex-wrap: wrap; align-items: flex-start; }
  .cs-audio-soon-copy { flex: 1 1 0; min-width: 0; }
  .cs-audio-soon .lw-getapp { width: 100%; }
  .cs-audio-soon .lw-getapp-btn { width: 100%; justify-content: center; }
}

/* Collapsible transcript (uses native <details>) */
.cs-audio-transcript {
  margin-top: 14px;
  border-top: 1px solid #ece4d2;
  padding-top: 12px;
}
.cs-audio-transcript summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 700;
  font-size: 0.92rem;
  list-style: none;
  user-select: none;
  padding: 4px 0;
}
.cs-audio-transcript summary::-webkit-details-marker { display: none; }
.cs-audio-transcript summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s;
  color: var(--terracotta-text);
}
.cs-audio-transcript[open] summary::before { transform: rotate(90deg); }
.cs-audio-transcript-body {
  margin-top: 12px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text);
  white-space: normal;
}
.cs-audio-transcript-body p {
  margin: 0 0 12px;
}
.cs-audio-transcript-body p:last-child { margin-bottom: 0; }

.cs-map {
  height: 380px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #ede6d2;
}

.cs-routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cs-routes .route-link-card {
  display: block;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ede6d2;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.cs-routes .route-link-card:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
}
.cs-routes h4 {
  font-family: 'Playfair Display', serif;
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--text);
}
.cs-routes .route-meta {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Sidebar cards */
.cs-side-card {
  background: #fff;
  border: 1px solid #ede6d2;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.cs-side-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
}
.cs-side-cta {
  background: linear-gradient(155deg, var(--green) 0%, #4a7a35 100%);
  border: none;
  color: #fff;
}
.cs-side-cta .cs-side-title { color: #fff; }
.cs-side-cta p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  margin: 0 0 16px;
}
.cs-side-btn {
  display: block;
  text-align: center;
  width: 100%;
  background: var(--terracotta);
  color: #fff;
  padding: 13px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 0.18s, background 0.18s;
  box-sizing: border-box;
}
.cs-side-btn:hover { background: #a8512d; transform: translateY(-1px); color: #fff; }

.cs-side-list { list-style: none; margin: 0; padding: 0; }
.cs-side-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed #ede6d2;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.45;
}
.cs-side-list li:last-child { border-bottom: none; }
.cs-side-list li strong {
  display: inline-block;
  min-width: 92px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cs-back-row { text-align: center; padding: 16px 0 48px; background: #fbfaf5; }
.cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.cs-back-link:hover { color: var(--terracotta-text); }

@media (max-width: 1024px) {
  .cs-main-inner { grid-template-columns: 1fr; }
  .cs-sidebar { position: static; }
  .cs-hero-photo { height: 280px; }
}
@media (max-width: 768px) {
  .cs-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .cs-hero-photo { height: 220px; order: -1; }
  .cs-hero-cta { flex-direction: column; }
  .cs-hero-cta .cs-cta-primary,
  .cs-hero-cta .cs-cta-secondary { width: 100%; justify-content: center; }
  .cs-audio-card { padding: 18px 16px; border-radius: 14px; }
  .cs-audio-controls { padding: 12px 12px; gap: 12px; }
  .cs-audio-play { width: 44px; height: 44px; }
}


/* =====================================================================
   STAGE DETAIL pages (/stages/<slug>.html)
   Prefix .sg-  ("stage")
   ===================================================================== */

/* ===== Hero ===== */
.sg-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(192,98,58,0.18) 0%, transparent 55%),
    radial-gradient(100% 60% at 0% 100%, rgba(91, 63, 110,0.16) 0%, transparent 55%),
    linear-gradient(180deg,#f6efe1 0%,#ebe1c8 100%);
  border-bottom: 1px solid #e2dccf;
}
.sg-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(91, 63, 110,.08) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: .45;
  pointer-events: none;
}
.sg-hero::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%);
  z-index: 2;
}
.sg-hero.sg-diff-easy::after { background: linear-gradient(90deg, #66bb6a 0%, #2e7d32 100%); }
.sg-hero.sg-diff-moderate::after { background: linear-gradient(90deg, #ffa726 0%, #e65100 100%); }
.sg-hero.sg-diff-hard::after { background: linear-gradient(90deg, #ef5350 0%, #c62828 100%); }
.sg-hero.sg-diff-very-hard::after { background: linear-gradient(90deg, #ab47bc 0%, #6a1b9a 100%); }

.sg-hero-inner {
  position: relative; z-index: 1;
  padding: 28px 24px 48px;
  max-width: 1180px;
  margin: 0 auto;
}

.sg-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 24px;
}
.sg-breadcrumb a {
  color: var(--text-light);
  text-decoration: none;
}
.sg-breadcrumb a:hover { color: var(--terracotta-text); }
.sg-breadcrumb .sg-crumb-sep { margin: 0 8px; opacity: 0.5; }

.sg-hero-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}

.sg-stage-numeral {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--green) 0%, #4a7a35 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 14px 34px rgba(91, 63, 110,.22), 0 0 0 5px rgba(255,255,255,.55);
}
.sg-hero.sg-diff-easy .sg-stage-numeral { background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%); }
.sg-hero.sg-diff-moderate .sg-stage-numeral { background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%); }
.sg-hero.sg-diff-hard .sg-stage-numeral { background: linear-gradient(135deg, #e53935 0%, #c62828 100%); }
.sg-hero.sg-diff-very-hard .sg-stage-numeral { background: linear-gradient(135deg, #8e24aa 0%, #6a1b9a 100%); }

.sg-stage-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 2px;
}
.sg-stage-num {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.sg-hero-body { min-width: 0; }
.sg-hero-body h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -0.012em;
}
.sg-lede {
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 18px;
  line-height: 1.5;
  max-width: 700px;
}

.sg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.sg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(91, 63, 110,0.15);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.sg-pill-diff.easy { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.sg-pill-diff.moderate { background: #fff3e0; color: #e65100; border-color: #ffe0b2; }
.sg-pill-diff.hard { background: #fce4ec; color: #c62828; border-color: #f8bbd0; }
.sg-pill-diff.very-hard { background: #f3e5f5; color: #6a1b9a; border-color: #e1bee7; }

.sg-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sg-cta-primary,
.sg-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s, border-color 0.18s;
  font-family: 'Inter', sans-serif;
}
.sg-cta-primary {
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(192,98,58,0.32);
  border: none;
}
.sg-cta-primary:hover { background: #a8512d; transform: translateY(-2px); color: #fff; }
.sg-cta-secondary {
  background: rgba(255,255,255,0.7);
  color: var(--text);
  border: 1.5px solid rgba(91, 63, 110,0.18);
}
.sg-cta-secondary:hover { border-color: var(--green); color: var(--green); }

/* ===== Quick stats strip ===== */
.sg-stats-strip {
  background: #fff;
  border-bottom: 1px solid #ede6d2;
}
.sg-stats-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.sg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  background: #fbfaf5;
  border: 1px solid #ede6d2;
  border-radius: 14px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.sg-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.sg-stat-icon {
  font-size: 1.4rem;
  margin-bottom: 6px;
  line-height: 1;
}
.sg-stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.sg-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.sg-stat-up { color: var(--green); }
.sg-stat-up .sg-stat-value { color: var(--green); }
.sg-stat-down { color: var(--terracotta-text); }
.sg-stat-down .sg-stat-value { color: var(--terracotta-text); }

/* ===== Main two-column body ===== */
.sg-main {
  background: #fbfaf5;
}
.sg-main-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 24px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.sg-content { min-width: 0; }
.sg-sidebar {
  position: sticky;
  top: 96px;
}

.sg-section { margin-bottom: 38px; }
.sg-section:last-child { margin-bottom: 0; }
.sg-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 8px;
  position: relative;
}
.sg-section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  background: var(--terracotta);
  border-radius: 3px;
}

.sg-prose { font-size: 1.03rem; line-height: 1.75; color: #5a5246; margin: 0; }
.sg-prose p + p { margin-top: 14px; }

/* Highlights as chips */
.sg-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-highlights li,
.sg-highlight {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ede6d2;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  list-style: none;
}
.sg-highlights li::before { content: "✦"; color: var(--terracotta-text); font-weight: 700; margin-right: 4px; }

/* Sidebar cards */
.sg-side-card {
  background: #fff;
  border: 1px solid #ede6d2;
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.sg-side-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
}
.sg-side-cta {
  background: linear-gradient(155deg, var(--green) 0%, #4a7a35 100%);
  border: none;
  color: #fff;
}
.sg-side-cta .sg-side-title { color: #fff; }
.sg-side-cta p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  margin: 0 0 16px;
}
.sg-side-btn {
  display: block;
  text-align: center;
  width: 100%;
  background: var(--terracotta);
  color: #fff;
  padding: 13px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 0.18s, background 0.18s;
  box-sizing: border-box;
}
.sg-side-btn:hover { background: #a8512d; transform: translateY(-1px); color: #fff; }

.sg-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-side-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed #ede6d2;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.45;
}
.sg-side-list li:last-child { border-bottom: none; }
.sg-side-list li strong {
  display: inline-block;
  min-width: 70px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Elevation profile SVG strip */
.sg-elevation {
  background: #fff;
  border: 1px solid #ede6d2;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 18px;
}
.sg-elevation-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.sg-elevation-label strong { color: var(--text); }
.sg-elevation svg { width: 100%; height: 60px; display: block; }

/* Prev/next nav cards */
.sg-nav {
  background: #fff;
  border-top: 1px solid #ede6d2;
}
.sg-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sg-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: #fbfaf5;
  border: 1px solid #ede6d2;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  min-width: 0;
}
.sg-nav-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.05); }
.sg-nav-prev { justify-content: flex-start; }
.sg-nav-next { justify-content: flex-end; text-align: right; }
.sg-nav-arrow {
  font-size: 1.6rem;
  color: var(--terracotta-text);
  flex-shrink: 0;
  line-height: 1;
}
.sg-nav-prev .sg-nav-arrow { order: -1; }
.sg-nav-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.sg-nav-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.sg-nav-card.sg-nav-stub {
  background: transparent;
  border-style: dashed;
  pointer-events: none;
  opacity: 0.4;
}

.sg-all-stages {
  text-align: center;
  margin: 24px 0 0;
}
.sg-all-stages a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.sg-all-stages a:hover { color: var(--terracotta-text); }

/* Community widget container — restyle around it */
.sg-community {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px;
  border-top: 1px solid #ede6d2;
  background: #fbfaf5;
}

@media (max-width: 1024px) {
  .sg-stats-inner { grid-template-columns: repeat(3, 1fr); }
  .sg-main-inner { grid-template-columns: 1fr; }
  .sg-sidebar { position: static; }
}
@media (max-width: 768px) {
  .sg-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .sg-stage-numeral { width: 100px; height: 100px; align-self: flex-start; }
  .sg-stage-num { font-size: 3.2rem; }
  .sg-hero-cta { flex-direction: column; }
  .sg-hero-cta .sg-cta-primary,
  .sg-hero-cta .sg-cta-secondary { width: 100%; justify-content: center; }
  .sg-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sg-nav-inner { grid-template-columns: 1fr; }
  .sg-nav-next { justify-content: flex-start; text-align: left; }
}


/* =====================================================================
   West Highland Way Trip Planner (homepage section, .lwp-*)
   Three colored sections (Timing → Style → Services) so the form reads
   as a structured 3-step planner rather than a wall of fields.
   ===================================================================== */
.lwp {
  text-align: left;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  /* Transparent wrapper — each step is its own green "plan card" floating on
     the white section (the form fields are white, the card is green). */
}

.lwp-section {
  --accent: #ead9b0;
  border-radius: 18px;
  padding: 30px 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
  /* GREEN "plan card" — the form step itself is green, floating on the white
     section, with white inputs + light text on it. Inset top bar = a warm step
     accent (no overflow:hidden, so focus rings are never clipped). */
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 255, 255, 0.10), transparent 46%),
    radial-gradient(circle at 92% 96%, rgba(0, 0, 0, 0.20), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, #356119 0%, var(--green) 55%, #233f0e 100%);
  box-shadow:
    inset 0 4px 0 0 var(--accent),
    0 20px 44px rgba(18, 36, 8, 0.24),
    0 4px 12px rgba(18, 36, 8, 0.14);
  transition: box-shadow 0.25s, transform 0.25s;
}
.lwp-section:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 4px 0 0 var(--accent),
    0 28px 56px rgba(18, 36, 8, 0.30),
    0 6px 16px rgba(18, 36, 8, 0.16);
}
.lwp-section[data-section="when"]     { --accent: #ead9b0; }
.lwp-section[data-section="style"]    { --accent: var(--terracotta-light); }
.lwp-section[data-section="services"] { --accent: #8fc7c7; }

/* ── Recolor the step-card internals for the green background ───────────── */
.lwp-section .lwp-section-title,
.lwp-section .lwp-output { color: #ffffff; }
.lwp-section .lwp-section-sub,
.lwp-section .lwp-hint,
.lwp-section .lwp-label-hint,
.lwp-section .lwp-flex,
.lwp-section .lwp-dates-arrow { color: rgba(255, 255, 255, 0.80); }
.lwp-section .lwp-label { color: rgba(255, 255, 255, 0.92); }
.lwp-section .lwp-section-step {
  background: #f5f0e8; color: var(--green);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.lwp-section .lwp-flex input { accent-color: var(--terracotta); }
.lwp-section .lwp-input:focus { outline-color: #ffffff; }
.lwp-section .lwp-chip:hover,
.lwp-section .lwp-svc:hover { border-color: var(--terracotta); }
.lwp-section .lwp-services-readout { background: var(--terracotta); }
/* Selected chips/services → terracotta (a green fill would vanish on green) */
.lwp-section .lwp-chip:has(input:checked) {
  background: var(--terracotta); border-color: var(--terracotta); color: #fff;
}
.lwp-section .lwp-svc:has(input:checked) {
  background: var(--terracotta); border-color: var(--terracotta);
  box-shadow: 0 4px 14px rgba(192, 98, 58, 0.30);
}
.lwp-section .lwp-svc:has(input:checked)::after { background: #ffffff; color: var(--terracotta-text); }

.lwp-section-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 22px;
}
.lwp-section-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800; font-size: 1.05rem;
  font-family: 'Playfair Display', serif;
  box-shadow: 0 4px 10px rgba(91, 63, 110, 0.28);
}
/* Step badge + title stay the same green across all three sections —
   the section TINTS still differentiate them visually, but the headers
   should read as a uniform 1-2-3 series, not three different things. */
.lwp-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green);
  margin: 0;
  line-height: 1.2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.lwp-section-sub {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 4px 0 0;
  line-height: 1.5;
  max-width: 580px;
}
.lwp-section-body {
  display: grid;
  gap: 22px;
}
.lwp-section-body-2col {
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}

.lwp-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lwp-field-full { grid-column: 1 / -1; }
.lwp-label {
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lwp-label-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
  font-size: 0.78rem;
  margin-left: 6px;
}
.lwp-hint {
  font-size: 0.78rem;
  color: var(--text-light);
}
.lwp-input {
  border: 1px solid #d9cfb8;
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--sand);
  font: inherit;
  color: var(--text);
  min-width: 0;
}
.lwp-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.lwp-dates { display: flex; align-items: center; gap: 8px; }
.lwp-dates .lwp-input { flex: 1; min-width: 0; }
.lwp-dates-arrow { color: var(--text-light); font-weight: 700; }
.lwp-flex {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-light);
  cursor: pointer;
}
.lwp-flex input { accent-color: var(--green); }
.lwp-slider-row { display: flex; align-items: center; gap: 14px; }
.lwp-slider { flex: 1; accent-color: var(--terracotta); cursor: pointer; }
.lwp-output {
  font-weight: 700;
  color: var(--green);
  font-size: 1rem;
  min-width: 78px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lwp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lwp-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid #d9cfb8;
  border-radius: 999px;
  background: var(--sand);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  transition: all 0.15s;
  user-select: none;
}
.lwp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lwp-chip:hover { border-color: var(--green); }
.lwp-chip:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.lwp-chip:focus-within { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.lwp-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lwp-svc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 38px 12px 14px; /* extra right pad for ✓ badge */
  border: 2px solid #d9cfb8;
  border-radius: 12px;
  background: var(--sand);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.lwp-svc input { position: absolute; opacity: 0; pointer-events: none; }
.lwp-svc:hover { border-color: var(--green); transform: translateY(-1px); }
/* SELECTED — solid green fill + white text + terracotta ✓ badge */
.lwp-svc:has(input:checked) {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(91, 63, 110, 0.25);
}
.lwp-svc:has(input:checked) .lwp-svc-text strong { color: #fff; }
.lwp-svc:has(input:checked) .lwp-svc-text em    { color: rgba(255,255,255,0.85); }
.lwp-svc:has(input:checked)::after {
  content: '✓';
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  font-weight: 800; font-size: 0.78rem;
  line-height: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.lwp-svc:focus-within { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.lwp-svc-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.lwp-svc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lwp-svc-text strong {
  font-size: 0.9rem;
  color: var(--green);
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.15s;
}
.lwp-svc-text em {
  font-style: normal;
  font-size: 0.76rem;
  color: var(--text-light);
  line-height: 1.3;
  transition: color 0.15s;
}

/* Live readout pill next to "(pick any)" — updates as you tick services */
.lwp-services-readout {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 10px;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.lwp-services-readout:empty { display: none; }
.lwp-services-readout-icons {
  margin-left: 6px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
.lwp-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 32px auto 12px;
  padding: 14px 34px;
  background: var(--terracotta);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.02rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 8px 24px rgba(192, 98, 58, 0.28);
}
.lwp-submit:hover { background: #a5522f; box-shadow: 0 12px 32px rgba(192, 98, 58, 0.36); }
.lwp-submit:active { transform: scale(0.98); }
.lwp-submit-arrow { display: inline-block; transition: transform 0.2s; }
.lwp-submit:hover .lwp-submit-arrow { transform: translateX(4px); }

/* ---- Trip-planner step wizard (one question per screen, find-charter style) ---- */
.lwp-progress { max-width: 620px; margin: 0 auto 24px; }
.lwp-progress-track {
  height: 7px; background: rgba(0,0,0,0.08);
  border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.lwp-progress-fill {
  display: block; height: 100%; width: 20%;
  background: linear-gradient(90deg, var(--terracotta-light), var(--terracotta));
  border-radius: 999px;
  transition: width 0.35s ease;
}
.lwp-progress-text {
  margin-top: 9px; text-align: center;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-light);
}
.lwp-nav {
  display: flex; align-items: center; gap: 12px;
  max-width: 620px; margin: 8px auto 14px;
}
.lwp-btn {
  font-family: inherit; font-weight: 700; font-size: 1rem;
  padding: 13px 28px; border-radius: 999px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}
.lwp-btn-back {
  background: #fff; border: 1.5px solid rgba(0,0,0,0.15); color: var(--text);
}
.lwp-btn-back:hover { border-color: var(--green); color: var(--green); }
.lwp-btn-next {
  /* white label, so it takes the AA text-grade accent as its fill — same
     treatment as .mp-cta-primary. var(--terracotta) measured 4.16:1 here. */
  margin-left: auto; background: var(--terracotta-text);
  border: 1.5px solid var(--terracotta-text); color: #fff;
  box-shadow: 0 8px 22px rgba(192, 98, 58, 0.34);
}
.lwp-btn-next:hover { background: #a5522f; border-color: #a5522f; box-shadow: 0 12px 28px rgba(192, 98, 58, 0.42); }
.lwp-btn:active { transform: scale(0.98); }
/* In the wizard nav the submit sits at the right (not the standalone centered button) */
.lwp-nav .lwp-submit { margin: 0 0 0 auto; }
/* The [hidden] attribute must win even though .lwp-submit/.lwp-btn set their own
   display — otherwise the submit (display:inline-flex) shows on every step. */
.lwp-submit[hidden], .lwp-btn[hidden] { display: none !important; }
.lwp-foot {
  font-size: 0.82rem;
  color: var(--text-light);
  text-align: center;
  margin: 0;
}
.lwp-preview {
  width: 100%;
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--sand);
  border: 1px solid var(--sand-dark);
  border-radius: 14px;
  box-shadow:
    inset 0 4px 0 0 var(--green),
    0 8px 22px rgba(91, 63, 110, 0.10);
}
.lwp-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.lwp-preview-head strong { color: var(--green); font-size: 0.95rem; }
.lwp-preview-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--text-light);
  padding: 0 6px;
}
.lwp-preview-body {
  font-size: 0.86rem; color: var(--text); margin: 4px 0 12px;
  line-height: 1.55;
}
.lwp-preview-foot {
  font-size: 0.82rem; color: var(--text-light); margin: 0 0 10px;
}
.lwp-preview-cta {
  display: inline-block;
  color: var(--terracotta-text);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.lwp-preview-cta:hover { text-decoration: underline; }

/* Inside the tinted sections, chips + inputs need a brighter (white) base
   so the colour contrast vs. the cream/terracotta/teal tint stays strong. */
.lwp-section .lwp-input,
.lwp-section .lwp-chip,
.lwp-section .lwp-svc { background: #fff; }
.lwp-section[data-section="services"] .lwp-svc:has(input:checked) {
  /* keep the selected fill terracotta here too (beats the data-section rule) */
  background: var(--terracotta);
}

@media (max-width: 760px) {
  .lwp-section { padding: 22px 18px; border-radius: 14px; }
  .lwp-section-body-2col { grid-template-columns: 1fr; gap: 22px; }
  .lwp-services { grid-template-columns: 1fr; }
  .lwp-section-title { font-size: 1.18rem; }
  .lwp-section-step { width: 32px; height: 32px; font-size: 0.92rem; }
}

/* =====================================================================
   /plan — Trip Plan results page (.plan-*)
   ===================================================================== */
.plan-hero {
  padding: 160px 0 36px;
  background:
    radial-gradient(circle at 15% 25%, rgba(192,98,58,0.07), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(91, 63, 110,0.08), transparent 55%),
    var(--sand);
  border-bottom: 1px solid #ece4d2;
}
/* Copy on the left, a compact photo card on the right: the plan summary stays
   readable in one glance instead of being pushed down by a full-bleed image. */
.plan-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 36%, 420px);
  gap: 40px;
  align-items: center;
}
.plan-hero-copy { min-width: 0; }
.plan-hero-media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ece4d2;
  box-shadow: 0 12px 28px rgba(91, 63, 110,0.13);
}
.plan-hero-media img {
  display: block;
  width: 100%;
  height: 236px;
  object-fit: cover;
  object-position: center 62%;
}
.plan-back {
  display: inline-block;
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.plan-back:hover { color: var(--green); }
.plan-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--green);
  margin: 0 0 14px;
  line-height: 1.1;
}
.plan-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px;
}
.plan-chip {
  display: inline-block;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid #d9cfb8;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--green);
}
.plan-sub {
  max-width: 640px;
  color: var(--text-light);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- Sticky save-plan banner ---- */
.plan-savebar {
  position: sticky;
  top: 64px; /* sits just below the navbar */
  z-index: 40;
  background: linear-gradient(120deg, #5B3F6E 0%, #6E5185 100%);
  color: #fff;
  padding: 12px 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.plan-savebar[hidden] { display: none; }
.plan-savebar-inner {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.plan-savebar-icon { font-size: 1.4rem; }
.plan-savebar-text {
  display: flex; flex-direction: column; line-height: 1.3;
  flex: 1; min-width: 0;
}
.plan-savebar-text strong { font-size: 0.94rem; }
.plan-savebar-text span { font-size: 0.78rem; opacity: 0.85; }
.plan-savebar-form {
  display: flex; gap: 6px;
}
.plan-savebar-form input[type="email"] {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  background: rgba(255,255,255,0.96);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  min-width: 220px;
  outline: none;
}
.plan-savebar-form input[type="email"]:focus { border-color: var(--terracotta); }
.plan-savebar-form button {
  padding: 8px 16px;
  background: var(--terracotta);
  color: #fff;
  border: none; border-radius: 8px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
}
.plan-savebar-form button:hover { background: #a5522f; }
.plan-savebar-close {
  background: transparent; border: none; color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  padding: 0 6px; opacity: 0.7;
}
.plan-savebar-close:hover { opacity: 1; }
.plan-savebar-ok { font-weight: 700; font-size: 0.92rem; }

.plan-main {
  max-width: 1100px;
  padding: 40px 20px 80px;
}

/* ---- Section + sub-section heading ---- */
.plan-section {
  margin-bottom: 60px;
}
.plan-section[hidden] { display: none; }
.plan-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ece4d2;
}
.plan-section-eyebrow {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta-text);
  background: rgba(192,98,58,0.1);
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 8px;
}
.plan-section-eyebrow-alt {
  color: var(--green);
  background: rgba(91, 63, 110,0.1);
}
.plan-section-eyebrow-buddy {
  color: #1a6b7a;
  background: rgba(26,107,122,0.1);
}
.plan-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--green);
  margin: 0 0 4px;
  line-height: 1.2;
}
.plan-section-sub {
  font-size: 0.92rem; color: var(--text-light);
  margin: 0; max-width: 640px;
}
.plan-section-count {
  font-size: 0.84rem; font-weight: 600;
  color: var(--text-light); white-space: nowrap;
}

.plan-subsection {
  margin-bottom: 36px;
}
.plan-subsection[hidden] { display: none; }
.plan-subsection-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.plan-subsection-head h3 {
  font-size: 1.08rem;
  color: var(--green);
  margin: 0;
  font-weight: 700;
}
.plan-subsection-count {
  font-size: 0.78rem; color: var(--text-light); font-weight: 500;
}
.plan-subsection-more {
  display: inline-block; margin-top: 10px;
  color: var(--terracotta-text);
  font-size: 0.86rem; font-weight: 700;
  text-decoration: none;
}
.plan-subsection-more:hover { text-decoration: underline; }

/* ---- Cards: large tour package ---- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.plan-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.plan-card {
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
/* Subtle hairline accent at top to give each card its own identity now that
   the cover image is gone. */
.plan-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, #80a060 100%);
  opacity: 0.35;
  transition: opacity 0.2s;
}
.plan-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 12px 32px rgba(91, 63, 110,0.1);
}
.plan-card:hover::before { opacity: 0.7; }

/* Featured (Best-match) card: prominent terracotta accent stripe so it stands
   out without needing a hero image. */
.plan-card-featured {
  border-color: var(--terracotta);
  box-shadow: 0 8px 24px rgba(192,98,58,0.12);
}
.plan-card-featured::before {
  height: 4px;
  background: linear-gradient(90deg, var(--terracotta) 0%, #d4845e 100%);
  opacity: 1;
}

/* Topline row sits above the title and holds the Best-match chip (and could
   hold other meta in future). Inline, not overlaid. */
.plan-card-topline {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.plan-card-badge {
  display: inline-flex; align-items: center;
  background: rgba(192,98,58,0.10);
  color: var(--terracotta-text);
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan-card-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 20px 18px;
  flex: 1;
}
.plan-card-name {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--green);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.plan-card-by {
  font-size: 0.82rem;
  color: var(--text-light);
}
.plan-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 0.82rem;
  color: var(--text-light);
}
.plan-card-rating {
  color: var(--text);
  font-weight: 600;
}
.plan-card-rating small {
  font-weight: 400; color: var(--text-light);
}
.plan-card-dot { opacity: 0.5; }
.plan-card-desc {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  margin: 4px 0 8px;
}
.plan-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 8px;
  flex-wrap: wrap;
  gap: 10px;
}
.plan-card-price {
  font-size: 0.86rem;
  color: var(--text-light);
}
.plan-card-price strong {
  font-size: 1.1rem;
  color: var(--green);
}
.plan-card-cta {
  display: flex; gap: 8px;
}

/* ---- Cards: mini (guide/stay/transfer/buddy) ---- */
.plan-card-mini {
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 14px;
  padding: 16px;
  display: flex; gap: 14px;
  align-items: flex-start;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.plan-card-mini:hover {
  border-color: var(--green);
  box-shadow: 0 8px 20px rgba(91, 63, 110,0.08);
  transform: translateY(-2px);
}
.plan-card-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.plan-card-avatar-sq {
  border-radius: 10px;
  font-size: 0.94rem;
}
.plan-card-mini-thumb {
  width: 64px; height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  background-size: cover; background-position: center;
}
.plan-card-mini-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.plan-card-mini-body h4 {
  font-size: 0.98rem; font-weight: 700;
  color: var(--green); margin: 0;
}
.plan-card-mini-meta {
  font-size: 0.78rem; color: var(--text-light);
}
.plan-card-mini-body p {
  font-size: 0.84rem; color: var(--text);
  line-height: 1.45;
  margin: 4px 0 6px;
}
.plan-card-mini-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-card-buddy { background: linear-gradient(135deg, #f9f6ef, #fff); }

/* ---- Buttons ---- */
.btn-ghost {
  padding: 7px 14px;
  border: 1px solid #d9cfb8;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-ghost-sm { padding: 5px 10px; font-size: 0.8rem; }

.btn-message {
  padding: 8px 16px;
  background: var(--terracotta);
  color: #fff;
  border: none; border-radius: 8px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.btn-message:hover { background: #a5522f; }
.btn-message:active { transform: scale(0.97); }
.btn-message-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ---- "Message top 3" closing CTA ---- */
.plan-msgall {
  margin-top: 30px;
  background: linear-gradient(120deg, var(--green) 0%, #6E5185 100%);
  border-radius: 20px;
  color: #fff;
  padding: 28px 32px;
}
.plan-msgall-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.plan-msgall h3 {
  font-size: 1.2rem;
  margin: 0 0 6px;
  line-height: 1.3;
}
.plan-msgall p {
  margin: 0; font-size: 0.9rem; opacity: 0.85;
  max-width: 560px;
}
.btn-msgall {
  padding: 14px 26px;
  background: var(--terracotta);
  color: #fff;
  border: none; border-radius: 999px;
  font: inherit;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(192,98,58,0.36);
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}
.btn-msgall:hover { background: #a5522f; }
.btn-msgall:active { transform: scale(0.98); }

/* ---- Login modal ---- */
.plan-modal {
  position: fixed; inset: 0;
  background: rgba(28,28,28,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.plan-modal[hidden] { display: none; }
.plan-modal-card {
  background: #fff;
  border-radius: 20px;
  max-width: 440px;
  width: 100%;
  padding: 36px 32px 28px;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.plan-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--text-light);
  padding: 4px 10px;
}
.plan-modal-close:hover { color: var(--text); }
.plan-modal-icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
}
.plan-modal-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--green);
  margin: 0 0 8px;
  line-height: 1.3;
}
.plan-modal-card h2 span {
  font-style: italic;
  color: var(--terracotta-text);
}
.plan-modal-body {
  color: var(--text-light);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 22px;
}
.plan-modal-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.plan-modal-btn {
  padding: 11px 16px;
  border: 1px solid #d9cfb8;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.plan-modal-btn:hover { border-color: var(--green); }
.plan-modal-btn-google { background: #fff; }
.plan-modal-btn-apple { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }
.plan-modal-btn-apple:hover { background: #000; border-color: #000; }
.plan-modal-btn-email { background: var(--green); color: #fff; border-color: var(--green); }
.plan-modal-btn-email:hover { background: #234012; border-color: #234012; }
.plan-modal-foot {
  font-size: 0.84rem;
  color: var(--text-light);
  margin: 0;
}
.plan-modal-foot a { color: var(--terracotta-text); font-weight: 700; text-decoration: none; }
.plan-modal-foot a:hover { text-decoration: underline; }

/* ---- Modal step machine (auth → message → sending → success) ---- */
.plan-modal-step[hidden] { display: none; }
.plan-modal-step-center { text-align: center; padding: 14px 0; }
.plan-modal-body-sm { font-size: 0.86rem; margin-bottom: 14px; }
.plan-modal-provider-inline {
  font-style: italic; color: var(--terracotta-text); font-weight: 700;
}

/* Forms inside the modal */
.plan-modal-form {
  display: flex; flex-direction: column; gap: 10px;
  margin: 16px 0 14px;
  text-align: left;
}
.plan-modal-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--green);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.plan-modal-form input,
.plan-modal-form textarea {
  font: inherit; font-size: 0.96rem;
  padding: 10px 12px;
  border: 1px solid #d9cfb8;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-transform: none; letter-spacing: 0;
  font-weight: 400;
  outline: none;
}
.plan-modal-form input:focus,
.plan-modal-form textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(91, 63, 110, 0.15);
}
.plan-modal-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.plan-form-row { display: flex; gap: 10px; }
.plan-form-row label { flex: 1; min-width: 0; }
.plan-modal-form button[type="submit"] { margin-top: 4px; }
.plan-form-consent a { color: inherit; text-decoration: underline; font-weight: 600; }

.plan-form-error {
  font-size: 0.82rem;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0;
}
.plan-form-error[hidden] { display: none; }

/* How-many-of-you stepper on the message step */
.plan-group-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
  font-size: 0.84rem;
}
.plan-group-row > label {
  font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.74rem;
  margin: 0;
}
.plan-group-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid #d9cfb8; border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.plan-group-btn {
  background: var(--sand); border: none; cursor: pointer;
  width: 32px; height: 32px;
  font-size: 1.05rem; font-weight: 700; color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.plan-group-btn:hover { background: var(--green); color: #fff; }
.plan-group-btn:active { transform: scale(0.95); }
.plan-group-stepper input[type="number"] {
  width: 48px; text-align: center;
  border: none; outline: none;
  font: inherit; font-size: 0.96rem; font-weight: 700;
  color: var(--text);
  text-transform: none; letter-spacing: 0;
  background: transparent;
  /* hide native +/- spinners on number inputs */
  -moz-appearance: textfield;
  appearance: textfield;
}
.plan-group-stepper input[type="number"]::-webkit-outer-spin-button,
.plan-group-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.plan-group-hint {
  color: var(--text-light); font-size: 0.82rem;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* Spinner for sending step */
.plan-modal-spinner {
  width: 44px; height: 44px;
  border: 4px solid #ece4d2;
  border-top-color: var(--terracotta);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: lwSpin 0.8s linear infinite;
}
@keyframes lwSpin { to { transform: rotate(360deg); } }

/* Success state icon (green circle with checkmark) */
.plan-modal-icon-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--green); color: #fff;
  border-radius: 50%;
  font-size: 2rem; font-weight: 800;
  margin: 0 auto 10px;
  box-shadow: 0 8px 20px rgba(91, 63, 110, 0.3);
}

/* In-flight button state (disabled-looking, no pointer events) */
.plan-modal-btn[disabled] {
  opacity: 0.6; cursor: not-allowed;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .plan-grid-3, .plan-grid-2 { grid-template-columns: 1fr 1fr; }
  /* Stack, with the photo below the summary so the title and chips stay first. */
  .plan-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .plan-hero-media img { height: 180px; object-position: center 66%; }
}
@media (max-width: 640px) {
  .plan-hero { padding-top: 130px; }
  .plan-hero-media img { height: 150px; }
  .plan-savebar { top: 56px; }
  .plan-savebar-inner { flex-wrap: wrap; gap: 10px; }
  .plan-savebar-text { width: calc(100% - 80px); }
  .plan-savebar-form { width: 100%; }
  .plan-savebar-form input[type="email"] { flex: 1; min-width: 0; }
  .plan-grid-3, .plan-grid-2 { grid-template-columns: 1fr; }
  .plan-msgall { padding: 22px 20px; border-radius: 16px; }
  .plan-msgall-inner { flex-direction: column; align-items: flex-start; }
  .btn-msgall { width: 100%; text-align: center; }
}

/* =====================================================================
   West Highland Way Marketplace trust strip (.mp-trust-*)
   Sits directly below the planner; reinforces the marketplace model
   (verified, all stages, no commissions) that the old card-grid used to
   communicate before the planner replaced it.
   ===================================================================== */
.marketplace-trust {
  padding: 56px 0 64px;
  background:
    radial-gradient(circle at 88% 100%, rgba(91, 63, 110, 0.05), transparent 55%),
    var(--sand);
  border-top: 1px solid #ece4d2;
}
.mp-trust-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.mp-trust-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--green);
  margin: 0 0 10px;
  line-height: 1.15;
}
.mp-trust-sub {
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
.mp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .mp-trust-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; }
}
.mp-trust-card {
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 16px;
  padding: 26px 24px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mp-trust-card:hover {
  border-color: var(--green);
  box-shadow: 0 8px 22px rgba(91, 63, 110, 0.08);
  transform: translateY(-2px);
}
.mp-trust-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 6px;
}
.mp-trust-card strong {
  font-size: 1.05rem;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 2px;
}
.mp-trust-card span {
  color: var(--text-light);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .marketplace-trust { padding: 40px 0 48px; }
  .mp-trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .mp-trust-head { margin-bottom: 24px; }
}

/* =====================================================================
   Marketplace + Apps section (#marketplace, .mp-apps)
   Two-sided: free app for hikers / subscription for providers
   ===================================================================== */
.mp-apps { padding: 64px 0; background: var(--sand); }
.mp-apps-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.mp-apps-eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta-text); margin-bottom: 12px;
}
.mp-apps-headline {
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2;
  color: var(--text); margin-bottom: 12px;
}
.mp-apps-sub { font-size: 1.02rem; line-height: 1.6; color: var(--text-muted); }

.mp-apps-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 980px; margin: 0 auto 24px; align-items: stretch;
}

.mp-lane {
  background: var(--white); border-radius: var(--radius); padding: 28px 26px;
  border: 1px solid var(--sand-dark); display: flex; flex-direction: column;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
}
.mp-lane-hiker { border-top: 4px solid var(--green-light); }
.mp-lane-pro { border-top: 4px solid var(--ocean); }

.mp-lane-tag {
  display: inline-block; align-self: flex-start; font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px;
  background: #eaf3e3; color: var(--green); margin-bottom: 14px;
}
.mp-lane-tag-pro { background: #e2f0f3; color: var(--ocean); }
.mp-lane-title { font-size: 1.3rem; line-height: 1.25; color: var(--text); margin-bottom: 10px; }
.mp-lane-body { font-size: 0.97rem; line-height: 1.55; color: var(--text-muted); margin-bottom: 16px; }

.mp-lane-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.mp-lane-list li {
  position: relative; padding-left: 26px; font-size: 0.94rem;
  line-height: 1.4; color: var(--text);
}
.mp-lane-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--green-light); font-weight: 700;
}
.mp-lane-list-pro li::before { color: var(--ocean); }

.mp-store-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.mp-store-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: #1c1c1c; color: #fff; border-radius: 12px;
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.mp-store-btn:hover { background: #000; transform: translateY(-2px); }
.mp-store-btn svg { flex-shrink: 0; }
.mp-lane-micro { display: block; margin-top: 12px; font-size: 0.82rem; color: var(--text-light); }

.mp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; align-items: center; }
.mp-cta-primary::after { content: " \2192"; }
/* .btn-outline is white-on-transparent (for dark/hero backgrounds); recolour
   it for the white provider card so "See plans" is visible. */
.mp-cta-row .btn-outline {
  color: var(--green);
  border: 2px solid var(--green);
}
.mp-cta-row .btn-outline:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.mp-trustbar {
  list-style: none; margin: 0 auto; padding: 18px 18px 0; max-width: 980px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
  border-top: 1px solid var(--sand-dark);
}
.mp-trustbar li {
  font-size: 0.9rem; color: var(--text-muted); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.mp-trustbar a {
  color: var(--terracotta-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.mp-trustbar a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .mp-apps { padding: 44px 0; }
  .mp-apps-grid { grid-template-columns: 1fr; gap: 16px; }
  .mp-store-row, .mp-cta-row { flex-direction: column; }
  .mp-store-btn, .mp-cta-row .btn { justify-content: center; text-align: center; width: 100%; }
}

/* =====================================================================
   /audio-guides — Audio Guide catalogue landing page (.ag-*)
   ===================================================================== */
.ag-hero {
  background:
    radial-gradient(circle at 18% 22%, rgba(192, 98, 58, 0.08), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(91, 63, 110, 0.08), transparent 55%),
    var(--sand);
  padding: 160px 0 56px;
  border-bottom: 1px solid #ece4d2;
}
.ag-hero .container { max-width: 980px; text-align: center; }
.ag-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a4f2f;  /* 4.68:1 on this tint; the token is 4.09 */
  background: rgba(192, 98, 58, 0.1);
  border: 1px solid rgba(192, 98, 58, 0.25);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.ag-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--green);
  margin: 0 0 14px;
  line-height: 1.12;
}
.ag-sub {
  max-width: 720px;
  margin: 0 auto 28px;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.65;
}
.ag-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-top: 24px;
}
.ag-stat {
  display: flex; flex-direction: column; align-items: center;
}
.ag-stat strong {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: var(--green);
  font-weight: 700;
  line-height: 1;
}
.ag-stat span {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 6px;
  font-weight: 600;
}

/* ---- Section scaffolding ---- */
.ag-section {
  padding: 56px 0;
}
.ag-section .container { max-width: 1100px; }
.ag-section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  color: var(--green);
  margin: 0 0 8px;
  text-align: center;
  font-weight: 700;
}
.ag-section-sub {
  text-align: center;
  color: var(--text-light);
  font-size: 0.96rem;
  margin: 0 auto 32px;
  max-width: 600px;
  line-height: 1.55;
}

/* ---- Map ---- */
.ag-map-section { background: #fff; }
.ag-map {
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ece4d2;
  box-shadow: 0 4px 20px rgba(91, 63, 110, 0.06);
}
.ag-pin {
  width: 32px; height: 32px;
  background: var(--terracotta);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(192, 98, 58, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.ag-pin-inner {
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ag-popup {
  font-family: 'Inter', sans-serif;
  min-width: 220px;
}
.ag-popup strong { font-size: 1rem; color: var(--green); }
.ag-popup-meta { font-size: 0.78rem; color: var(--text-light); margin-top: 2px; }
.ag-popup-link { color: var(--terracotta-text); font-weight: 700; font-size: 0.84rem; text-decoration: none; }
.ag-popup-link:hover { text-decoration: underline; }

/* ---- Filters ---- */
.ag-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  align-items: center;
}
.ag-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.ag-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-right: 4px;
}
.ag-chip {
  padding: 7px 14px;
  border: 1px solid #d9cfb8;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ag-chip:hover { border-color: var(--green); color: var(--green); }
.ag-chip-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* ---- Card grid ---- */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.ag-loading,
.ag-empty {
  text-align: center;
  color: var(--text-light);
  font-size: 0.92rem;
  padding: 40px 20px;
}
.ag-card {
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ag-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 12px 32px rgba(91, 63, 110, 0.1);
}
.ag-card-thumb {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: #d9cfb8;
  position: relative;
}
.ag-card-stage,
.ag-card-duration {
  position: absolute;
  top: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--green);
}
.ag-card-stage { left: 10px; }
.ag-card-duration { right: 10px; color: var(--terracotta); }
.ag-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ag-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  margin: 0;
  color: var(--green);
  font-weight: 700;
  line-height: 1.25;
}
.ag-card-meta {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-light);
}
.ag-card-era { font-weight: 600; }
.ag-card-dot { opacity: 0.5; }
.ag-card-blurb {
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.5;
  margin: 4px 0 0;
}
.ag-card-cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--terracotta-text);
}

/* ---- Narrative arcs ---- */
.ag-arcs {
  background: var(--sand);
  border-top: 1px solid #ece4d2;
  border-bottom: 1px solid #ece4d2;
}
.ag-arcs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.ag-arc {
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
}
.ag-arc-icon { font-size: 2rem; margin-bottom: 8px; display: inline-block; }
.ag-arc h3 {
  font-size: 1.05rem;
  color: var(--green);
  margin: 4px 0 8px;
  font-weight: 700;
}
.ag-arc p {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 14px;
}
.ag-arc-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ag-arc-links a {
  color: var(--terracotta-text);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
}
.ag-arc-links a:hover { text-decoration: underline; }

/* ---- App pitch + Plan pitch ---- */
.ag-app-pitch { background: #fff; }
.ag-pitch {
  background: linear-gradient(120deg, rgba(91, 63, 110, 0.06), rgba(26, 107, 122, 0.06));
  border: 1px solid #ece4d2;
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.ag-pitch-text { flex: 1; min-width: 240px; }
.ag-pitch h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--green);
  margin: 0 0 6px;
}
.ag-pitch p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.55;
  max-width: 560px;
}
.ag-pitch-btn {
  display: inline-block;
  padding: 12px 22px;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
}
.ag-pitch-btn:hover { background: #234012; }

.ag-plan-pitch {
  text-align: center;
  background: linear-gradient(160deg, rgba(91, 63, 110, 0.08), rgba(192, 98, 58, 0.08)), var(--sand);
  border-top: 1px solid #ece4d2;
}
.ag-plan-pitch h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--green);
  margin: 0 0 10px;
}
.ag-plan-pitch p {
  max-width: 580px;
  margin: 0 auto 22px;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.6;
}
.ag-plan-btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--terracotta);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(192, 98, 58, 0.3);
  transition: background 0.2s, transform 0.1s;
}
.ag-plan-btn:hover { background: #a5522f; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .ag-hero { padding: 130px 0 40px; }
  .ag-section { padding: 40px 0; }
  .ag-map { height: 320px; }
  .ag-pitch { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .ag-stats { gap: 18px 24px; }
  .ag-stat strong { font-size: 1.8rem; }
}

/* =====================================================================
   Stage detail page — Audio guide cards (.stage-audio-*)
   ===================================================================== */
.stage-audio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stage-audio-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.stage-audio-card:hover {
  border-color: var(--green);
  box-shadow: 0 6px 18px rgba(91, 63, 110, 0.08);
  transform: translateY(-1px);
}
.stage-audio-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.stage-audio-name {
  flex: 1;
  font-weight: 700;
  color: var(--green);
  font-size: 0.96rem;
  min-width: 0;
}
.stage-audio-dur {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--sand);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.stage-audio-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--terracotta-text);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .stage-audio-card { flex-wrap: wrap; }
  .stage-audio-cta { width: 100%; text-align: right; }
}

/* =====================================================================
   Phase 2: Convert CTAs on culture-site detail pages (.cs-convert-*)
   ===================================================================== */
.cs-convert-section {
  background: linear-gradient(160deg, rgba(91, 63, 110, 0.05), rgba(192, 98, 58, 0.05));
  border-radius: 18px;
  padding: 28px 28px 32px;
}
.cs-convert-section h2 {
  font-family: 'Playfair Display', serif;
  color: var(--green);
  margin: 0 0 6px;
}
.cs-convert-sub {
  color: var(--text-light);
  font-size: 0.92rem;
  margin: 0 0 22px;
}
.cs-convert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cs-convert-card {
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 14px;
  padding: 22px 20px 18px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.cs-convert-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 12px 30px rgba(91, 63, 110, 0.1);
}
.cs-convert-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 4px;
}
.cs-convert-card strong {
  font-size: 1.02rem;
  color: var(--green);
  font-weight: 700;
  line-height: 1.3;
}
.cs-convert-card span {
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.5;
}
.cs-convert-cta {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  color: var(--terracotta-text);
  font-size: 0.86rem;
}

/* Distinct accent stripes per CTA */
.cs-convert-plan  { border-top: 4px solid var(--terracotta); }
.cs-convert-guide { border-top: 4px solid var(--green); }
.cs-convert-stay  { border-top: 4px solid #1a6b7a; }

@media (max-width: 760px) {
  .cs-convert-grid { grid-template-columns: 1fr; gap: 12px; }
  .cs-convert-section { padding: 22px 18px 24px; }
}

/* Phase 2: Preset-stage acknowledgement on the homepage planner.
   Shows when a hiker arrived from a culture-site CTA with ?stages=N */
.lwp-preset-stage {
  text-align: center;
  margin: -8px 0 18px;
  font-size: 0.86rem;
}
.lwp-preset-stage-pill {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.84rem;
  margin-right: 6px;
}
.lwp-preset-stage-clear {
  color: var(--text-light);
  text-decoration: underline;
  font-size: 0.82rem;
}
.lwp-preset-stage-clear:hover { color: var(--terracotta-text); }

/* Phase 2: extra "Stage N only" chip in /plan header for deep-linked plans */
.plan-chip-stage {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}

/* Phase 2: marketplace-guides "Coming from Stage X" deep-link banner */
.mp-stage-banner {
  background: rgba(91, 63, 110, 0.08);
  border-left: 4px solid var(--green);
  color: var(--text);
  padding: 14px 20px;
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: 0 8px 8px 0;
}
.mp-stage-banner strong { color: var(--green); }

/* =====================================================================
   "Walk Through 3,000 Years of History" timeline cards — audio CTAs
   ===================================================================== */
.timeline-audio-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--terracotta) 0%, #d4845e 100%);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(192, 98, 58, 0.28);
  transition: transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
}
.timeline-audio-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(192, 98, 58, 0.4);
  color: #fff;
}
.timeline-audio-cta:active {
  transform: scale(0.98);
}
.timeline-audio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.timeline-audio-row .timeline-audio-cta {
  margin-top: 0;
}

/* Bottom CTA row on the Ancient Sites section */
.ancient-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}
.btn-audio-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--terracotta) 0%, #d4845e 100%);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(192, 98, 58, 0.36);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-audio-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(192, 98, 58, 0.45);
  background: linear-gradient(135deg, #a5522f 0%, #8E6219 100%);
  color: #fff;
}
.btn-audio-all:active { transform: scale(0.98); }

@media (max-width: 520px) {
  .btn-audio-all { padding: 12px 20px; font-size: 0.88rem; }
}

/* Marketplace trust strip — 4th audio-guides card (clickable, highlighted) */
.mp-trust-card-audio {
  background: linear-gradient(160deg, #fff 0%, #fff7f3 100%);
  border-color: rgba(192, 98, 58, 0.35) !important;
  text-decoration: none;
  color: var(--text);
  position: relative;
}
.mp-trust-card-audio:hover {
  border-color: var(--terracotta) !important;
  box-shadow: 0 12px 32px rgba(192, 98, 58, 0.15) !important;
  color: var(--text);
}
.mp-trust-card-audio strong { color: var(--terracotta-text) !important; }
.mp-trust-card-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--terracotta-text) !important;
}

/* Hero badge highlight — terracotta accent for the audio-guides badge so it
   visually pops out of the otherwise-uniform row. */
.hero-badge.hb-highlight {
  background: linear-gradient(135deg, var(--terracotta), #d4845e) !important;
  color: #fff !important;
  border-color: var(--terracotta) !important;
  box-shadow: 0 4px 14px rgba(192, 98, 58, 0.32);
}
.hero-badge.hb-highlight:hover {
  background: linear-gradient(135deg, #a5522f, var(--terracotta)) !important;
  box-shadow: 0 8px 20px rgba(192, 98, 58, 0.42);
  transform: translateY(-1px);
}

/* =====================================================================
   Sticky "audio guides on this stage" bar — bottom of stage detail pages
   ===================================================================== */
.lw-stage-audio-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 12px 18px;
  background: linear-gradient(135deg, var(--terracotta), #d4845e);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(192, 98, 58, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-width: calc(100vw - 24px);
  font-family: 'Inter', sans-serif;
  transition: opacity 0.3s, transform 0.3s;
}
.lw-stage-audio-bar-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}
.lw-stage-audio-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.lw-stage-audio-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.lw-stage-audio-text strong { font-size: 0.92rem; font-weight: 700; }
.lw-stage-audio-text span {
  font-size: 0.78rem;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lw-stage-audio-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--terracotta-text);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.84rem;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.lw-stage-audio-btn:hover { background: #fff; transform: translateY(-1px); color: var(--terracotta-text); }
.lw-stage-audio-btn:active { transform: scale(0.97); }
.lw-stage-audio-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  background: #fff;
  color: var(--text);
  border: none;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.lw-stage-audio-close:hover { background: #f5f0e8; }

@media (max-width: 560px) {
  .lw-stage-audio-bar {
    bottom: 14px;
    padding: 10px 14px 10px 14px;
    gap: 10px;
  }
  .lw-stage-audio-text strong { font-size: 0.86rem; }
  .lw-stage-audio-text span { font-size: 0.72rem; max-width: 140px; }
  .lw-stage-audio-btn { padding: 7px 12px; font-size: 0.8rem; }
}

/* ============================================================
   Topic / Destination landing pages
   ------------------------------------------------------------
   Applies to the destination + topic landing pages
   (getting-there, water-sources, training, wild-camping, etc.).
   They originally shipped with a bespoke off-brand mini-template;
   after wiring them into the site navbar/footer, this stylesheet
   gives them a refined editorial design that matches the rest
   of the site.

   Markup pattern (after the orphan-template conversion):
     <body class="topic-page">
       <nav.navbar>
       <div.breadcrumb>
       <main>
         <h1>, <p.lead>, <h2>, <h3>, <p>, <ul>, <ol>
         .card-grid, .card (with optional .price)
         .compare-table  (with thead > th)
         .callout
       </main>
       <footer.footer>
     </body>
   ============================================================ */

.topic-page {
  background:
    radial-gradient(1100px 380px at 50% -180px, rgba(192, 98, 58, 0.06), transparent 65%),
    radial-gradient(900px 340px at 100% 220px, rgba(91, 63, 110, 0.05), transparent 70%),
    var(--sand, #F5F0E8);
}

/* Breadcrumb — sits below the fixed navbar */
.topic-page .breadcrumb {
  max-width: 960px;
  margin: 0 auto;
  padding: 88px 1.5rem 0;
  font-size: 0.84rem;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.01em;
}
.topic-page .breadcrumb a {
  color: var(--text-muted, #6b7280);
  text-decoration: none;
  border-bottom: none;
  transition: color .15s;
}
.topic-page .breadcrumb a:hover {
  color: var(--green, #5B3F6E);
}

/* ── Main container ── */
.topic-page main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 5rem;
  position: relative;
}

/* ── H1: editorial display ── */
.topic-page main h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--green, #5B3F6E);
  line-height: 1.1;
  margin: 0.25rem 0 1.2rem;
  position: relative;
  padding-bottom: 1.25rem;
}
.topic-page main h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 96px;
  height: 4px;
  background: linear-gradient(90deg, var(--terracotta, #8E6219), var(--green-light, #4a7c32));
  border-radius: 2px;
}

/* ── Lead paragraph ── refined serif italic */
.topic-page main p.lead,
.topic-page main .lead {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  color: var(--text, #1a2332);
  max-width: 780px;
  margin: 0 0 2.75rem;
}

/* ── Section headings (h2) ── */
.topic-page main h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--green, #5B3F6E);
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 3.25rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--sand-dark, #e0dbd2);
  position: relative;
  display: flex;
  align-items: center;
}
.topic-page main h2::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--terracotta, #8E6219);
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 14px;
  transform: translateY(1px);
}

/* ── Subsection headings (h3) ── */
.topic-page main h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--green, #5B3F6E);
  margin: 1.75rem 0 0.5rem;
  letter-spacing: -0.005em;
}

/* ── Body paragraphs ── */
.topic-page main p {
  font-size: 1rem;
  line-height: 1.72;
  margin-bottom: 1.1rem;
  color: var(--text, #1a2332);
}
.topic-page main p strong {
  color: var(--green, #5B3F6E);
  font-weight: 600;
}

/* ── Lists with custom bullets ── */
.topic-page main > ul,
.topic-page main > ol {
  margin: 0 0 1.75rem;
  padding-left: 0;
  list-style: none;
}
.topic-page main > ul > li,
.topic-page main > ol > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  line-height: 1.65;
  font-size: 1rem;
  color: var(--text, #1a2332);
}
.topic-page main > ul > li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.7rem;
  width: 6px;
  height: 6px;
  background: var(--terracotta, #8E6219);
  border-radius: 50%;
}
.topic-page main > ol {
  counter-reset: tp-ol;
}
.topic-page main > ol > li {
  counter-increment: tp-ol;
}
.topic-page main > ol > li::before {
  content: counter(tp-ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--terracotta, #8E6219);
  font-weight: 700;
  font-size: 0.95rem;
}
.topic-page main li strong {
  color: var(--green, #5B3F6E);
  font-weight: 600;
}

/* ── Body links (only inside <main>, breadcrumb already covered) ── */
.topic-page main a {
  color: var(--green, #5B3F6E);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 63, 110, 0.28);
  font-weight: 500;
  transition: color .15s, border-color .15s, background .15s;
  padding: 0 1px;
}
.topic-page main a:hover {
  color: var(--terracotta, #8E6219);
  border-bottom-color: var(--terracotta, #8E6219);
}

/* ── Cards ── */
.topic-page main .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}
.topic-page main .card {
  background: #fff;
  border: 1px solid var(--sand-dark, #e0dbd2);
  border-top: 3px solid var(--terracotta, #8E6219);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.topic-page main .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.topic-page main .card h3 {
  margin: 0 0 .35rem;
  color: var(--green, #5B3F6E);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.topic-page main .card .price {
  display: inline-block;
  color: var(--terracotta, #8E6219);
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topic-page main .card p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 0;
}

/* ── Compare tables ── */
.topic-page main .compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2.5rem;
  font-size: 0.95rem;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid var(--sand-dark, #e0dbd2);
}
.topic-page main .compare-table th {
  background: var(--green, #5B3F6E);
  color: #fff;
  padding: 0.85rem 1.05rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
}
.topic-page main .compare-table td {
  padding: 0.9rem 1.05rem;
  text-align: left;
  border-bottom: 1px solid var(--sand, #f5f0e8);
  vertical-align: top;
  color: var(--text, #1a2332);
}
.topic-page main .compare-table tbody tr:nth-child(even) td {
  background: #faf7f2;
}
.topic-page main .compare-table tbody tr:last-child td {
  border-bottom: none;
}
.topic-page main .compare-table td strong {
  color: var(--green, #5B3F6E);
  font-weight: 600;
}

/* ── Callouts ── */
.topic-page main .callout {
  background: linear-gradient(180deg, #faf7f2, #f5f0e8);
  border-left: 4px solid var(--terracotta, #8E6219);
  padding: 1.25rem 1.5rem;
  border-radius: 0 10px 10px 0;
  margin: 1.75rem 0 2rem;
  font-size: 0.97rem;
  line-height: 1.65;
}
.topic-page main .callout strong {
  color: var(--green, #5B3F6E);
}

/* ── Decorative section divider ── (optional) */
.topic-page main hr.section-divider {
  border: 0;
  text-align: center;
  margin: 3.5rem 0;
  overflow: visible;
}
.topic-page main hr.section-divider::after {
  content: '◇  ◇  ◇';
  display: inline-block;
  color: var(--terracotta, #8E6219);
  font-size: 0.95rem;
  letter-spacing: 0.4em;
  opacity: 0.7;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .topic-page .breadcrumb { padding-top: 80px; padding-left: 1.25rem; padding-right: 1.25rem; }
  .topic-page main { padding: 1rem 1.25rem 3rem; }
  .topic-page main h1 { font-size: 1.9rem; }
  .topic-page main .lead { font-size: 1.1rem; }
  .topic-page main h2 { font-size: 1.4rem; margin-top: 2.5rem; }
  .topic-page main h2::before { width: 6px; height: 6px; margin-right: 10px; }
  .topic-page main .card { padding: 1.25rem 1.25rem 1.1rem; }
  .topic-page main .compare-table { font-size: 0.88rem; }
  .topic-page main .compare-table th,
  .topic-page main .compare-table td { padding: 0.7rem 0.8rem; }
}


/* Footer sits on --green: the accent must be the light variant.
   --terracotta-text is tuned for light backgrounds and measures
   ~1.1:1 here. Added by scripts/fix-contrast-dark.py. */
.footer .logo span { color: var(--terracotta-light); }
/* White label on --terracotta measured 2.12:1; use the dark
   text-grade accent as the fill so the label is legible. */
.mp-cta-row .btn-primary, .mp-cta-primary { background: var(--terracotta-text); border-color: var(--terracotta-text); }

/* Company disclosure (injected by common-brand-ui.js). It is appended INTO the
   footer on most pages, but falls back to <body> where there is no footer, so
   it needs a colour per surface. It used to hardcode --text-muted inline —
   dark grey on the dark footer, 1.22:1. Added by scripts/fix-contrast-dark.py. */
.lw-company-disclosure { color: var(--text-muted); background: rgba(0,0,0,0.02);
  border-top: 1px solid rgba(0,0,0,0.08); }
.footer .lw-company-disclosure { color: rgba(255, 255, 255, 0.61); background: transparent;
  border-top: 1px solid rgba(255,255,255,0.15); }
.footer .lw-company-disclosure a { color: inherit; }

/* Visually-hidden helper for accessible names (WCAG 2.5.3 label-in-name).
   Added by the SEO/a11y pass. */
.lw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ── Marketplace/partner hero (.mp-hero) ────────────────────────────────── */
/* deals.html and partners.html both use this class and neither defined it:
   services.html carries the ONLY .mp-hero rule, in its own page-local <style>.
   With .navbar fixed and no padding of its own, the deals page rendered its
   <h1> underneath the navbar. Defining it here fixes both pages; services.html
   keeps its photographic variant because its page-local block still wins. */
.mp-hero {
  background: linear-gradient(160deg, var(--green, #5B3F6E), var(--teal, #1a6b7a));
  padding: calc(140px + var(--announcement-h, 0px)) 0 60px;
  color: #fff;
  text-align: center;
}
.mp-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; color: #fff; }
.mp-hero p { font-size: 1.05rem; color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto; }

/* ── Provider discount offers (shared/js/offers.js) ─────────────────────── */
/* Palette comes from each brand's own vars, so this block is brand-neutral. */
.offer-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; margin: 12px 0; border: 1px solid var(--terracotta, #8E6219);
  border-radius: 8px; background: var(--sand, #f5f0e8); font-size: .9rem; }
.offer-badge__pct { font-weight: 700; color: var(--terracotta-text, #8E6219); font-size: 1.05rem; }
.offer-badge__title { font-weight: 600; color: var(--text, #1c1c1c); }
.offer-badge__terms { flex-basis: 100%; font-size: .8rem; opacity: .75; }
.offer-badge__code { font-family: ui-monospace, Menlo, monospace; font-weight: 700;
  letter-spacing: .08em; padding: 4px 10px; border-radius: 6px;
  background: var(--green, #5B3F6E); color: #fff; }
.offer-badge__hint { flex-basis: 100%; font-size: .78rem; opacity: .7; }
.offer-badge__reveal, .offer-badge__signin { padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--green, #5B3F6E); background: transparent;
  color: var(--green, #5B3F6E); font: inherit; cursor: pointer; text-decoration: none; }
.offer-badge__reveal:hover, .offer-badge__signin:hover { background: var(--green, #5B3F6E); color: #fff; }
.offer-badge__error { flex-basis: 100%; font-size: .8rem; color: #b3261e; }
.offers-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.offers-table th, .offers-table td { padding: 8px; border-bottom: 1px solid var(--sand-dark, #e8dfd2);
  text-align: left; vertical-align: top; }
.offers-note, .offers-form__note { font-size: .8rem; opacity: .7; margin: 8px 0; }
.offers-error { color: #b3261e; font-size: .88rem; }
.offers-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--sand-dark, #e8dfd2); }
.offers-form input, .offers-form textarea { padding: 8px; border: 1px solid var(--sand-dark, #e8dfd2);
  border-radius: 6px; font: inherit; flex: 1 1 160px; }
.offers-form textarea { flex-basis: 100%; min-height: 60px; }
.offers-form button { padding: 8px 16px; border: 0; border-radius: 6px;
  background: var(--green, #5B3F6E); color: #fff; font: inherit; cursor: pointer; }

/* Deals index (deals.html) */
.deals-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.deal-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--sand-dark, #e8dfd2); border-radius: 10px;
  background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.deal-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.deal-card__pct { flex: 0 0 auto; font-weight: 700; font-size: 1.15rem;
  color: #fff; background: var(--terracotta, #8E6219); padding: 6px 10px; border-radius: 8px; }
.deal-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deal-card__partner { font-size: .98rem; }
.deal-card__title { font-size: .9rem; }
.deal-card__meta, .deal-card__until { font-size: .78rem; opacity: .7; }
.deals-empty { padding: 32px 0; opacity: .75; }

.deals-banner { display: inline-block; margin: 0 0 20px; padding: 10px 16px;
  border: 1px solid var(--terracotta, #8E6219); border-radius: 8px;
  color: var(--terracotta-text, #8E6219); text-decoration: none; font-weight: 600; }
.deals-banner:hover { background: var(--terracotta, #8E6219); color: #fff; }

/* The offer pill on an accommodation card (directory.js). The listing API has
   always embedded the best live offer here; nothing rendered it, so the badge
   shipped on the marketplace provider page only — a hotels-first feature that
   was invisible on the hotels surface. Compact by design: the card links to
   the listing, and revealing the code lives there. */
.dir-card-offer { display: inline-flex; align-items: baseline; gap: 6px; margin: 6px 0 2px;
  padding: 4px 9px; border-radius: 999px; font-size: .78rem; line-height: 1.35;
  background: var(--terracotta, #8E6219); color: #fff; max-width: 100%; }
.dir-card-offer b { font-weight: 700; }
.dir-card-offer span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* =====================================================================
   .lw-getapp — the ONLY get-the-app affordance on the platform
   =====================================================================
   No page links to the App Store or Google Play any more. Everything points
   at /download-app, which reads the user agent and forwards to the right
   store, so one QR serves both platforms and survives being printed.

   Children (owner, 2026-10-01: the QR is the way to the app, so no
   "get the app" button ships anywhere):
     .lw-getapp-qr   the code itself. Desktop visitors scan it; on a phone it
                     is a tap target that opens /download-app.
     .lw-getapp-btn  ONLY for a per-guide code ("Open this guide in the app"):
                     on phones the code gives way to it.

   Variants: --sm (footer, banners) · --lg (app landing hero)
             --dark (on a dark band; the QR keeps its white backing so it
             still scans, but the caption flips to light) */
.lw-getapp { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.lw-getapp-qr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid #ece4d2;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.lw-getapp-qr:hover { border-color: var(--green-light); box-shadow: 0 4px 14px rgba(0,0,0,0.10); transform: translateY(-1px); }
.lw-getapp-qr img { display: block; width: 116px; height: 116px; }
.lw-getapp-qr span {
  display: block; max-width: 128px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--green);
}
.lw-getapp-btn {
  display: none;                       /* phones only — see the breakpoint */
  align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--green); color: #fff;
  border-radius: 999px;
  font-size: 0.9rem; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lw-getapp-btn:hover { filter: brightness(0.88); }

.lw-getapp--sm .lw-getapp-qr img { width: 92px; height: 92px; }
.lw-getapp--sm .lw-getapp-qr span { max-width: 104px; font-size: 0.66rem; }
.lw-getapp--sm .lw-getapp-btn { padding: 9px 16px; font-size: 0.84rem; }

.lw-getapp--lg .lw-getapp-qr img { width: 148px; height: 148px; }
.lw-getapp--lg .lw-getapp-qr span { max-width: 160px; font-size: 0.76rem; }

/* On a dark band the white QR tile is the point — only the caption changes. */
.lw-getapp--dark .lw-getapp-qr { background: #fff; border-color: rgba(255,255,255,0.25); }
.lw-getapp--dark .lw-getapp-qr:hover { border-color: rgba(255,255,255,0.55); }
.lw-getapp--dark .lw-getapp-btn { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); color: #fff; }
.lw-getapp--dark .lw-getapp-btn:hover { background: rgba(255,255,255,0.24); }

@media (max-width: 640px) {
  /* A QR cannot be scanned by the device displaying it, so a per-guide
     code gives way to its "Open this guide in the app" button. The generic
     code has no button (owner, 2026-10-01): it stays, and tapping it opens
     /download-app. */
  .lw-getapp:has(.lw-getapp-btn) .lw-getapp-qr { display: none; }
  .lw-getapp-btn { display: inline-flex; }
}

/* AGX:STYLES:BEGIN (generated by scripts/gen-audio-guide-section.py) */
/* ═══════════════════════════════════════════════════════════════════════
   AUDIO GUIDES SECTION  (.agx-*)   generated by scripts/gen-audio-guide-section.py
   Written against the tokens every brand's :root already defines
   (--green, --sand, --terracotta, --text, --radius, --shadow), so one
   sheet renders in six brand palettes without a per-brand fork.
   The older .ag-* rules (map, chips, arcs) stay: this extends, not replaces.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────── */
.agx-hero {
  position: relative;
  overflow: hidden;
  padding: 132px 20px 76px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(168deg, var(--green) 0%, #101418 118%);
}
.agx-hero .container { position: relative; z-index: 2; max-width: 900px; }
.agx-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.32); border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.agx-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  line-height: 1.1; margin: 0 0 18px; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.agx-hero-lede {
  font-size: clamp(1rem, 2.1vw, 1.19rem);
  line-height: 1.72; margin: 0 auto 34px; max-width: 700px;
  color: rgba(255,255,255,.93);
}
.agx-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.agx-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: var(--transition, .3s ease);
}
.agx-btn-primary { background: #fff; color: var(--green); box-shadow: 0 10px 30px rgba(0,0,0,.24); }
.agx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.agx-btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.agx-btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* Decorative equaliser. Purely presentational, hidden from AT, and the
   animation is dropped entirely under prefers-reduced-motion. */
.agx-wave { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex;
  align-items: flex-end; justify-content: center; gap: 5px; height: 72px;
  opacity: .3; pointer-events: none; }
.agx-wave i { display: block; width: 5px; border-radius: 3px 3px 0 0; background: #fff;
  height: 18%; animation: agxpulse 2.6s ease-in-out infinite; }
.agx-wave i:nth-child(4n+1) { height: 46%; animation-delay: -.4s; }
.agx-wave i:nth-child(4n+2) { height: 76%; animation-delay: -1.1s; }
.agx-wave i:nth-child(4n+3) { height: 30%; animation-delay: -1.7s; }
@keyframes agxpulse { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .agx-wave i { animation: none; } }

/* ── Stat band ────────────────────────────────────────────────────── */
.agx-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  max-width: 1000px; margin: -38px auto 0; position: relative; z-index: 3;
  background: #fff; border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,.1)); overflow: hidden;
}
.agx-stat { padding: 26px 16px; text-align: center; border-right: 1px solid var(--sand-dark, #e8dfd2); }
.agx-stat:last-child { border-right: 0; }
.agx-stat b {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1; color: var(--green);
}
.agx-stat span { display: block; margin-top: 7px; font-size: .82rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-light, #6b7280); }
@media (max-width: 560px) {
  .agx-stat { border-right: 0; border-bottom: 1px solid var(--sand-dark, #e8dfd2); }
  .agx-stat:last-child { border-bottom: 0; }
}

/* ── Generic section furniture ────────────────────────────────────── */
.agx-sec { padding: 72px 20px; }
.agx-sec--sand { background: var(--sand, #f5f0e8); }
.agx-sec > .container { max-width: 1100px; }
.agx-sec h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--green);
  text-align: center; margin: 0 0 12px;
}
.agx-sec-sub { text-align: center; max-width: 680px; margin: 0 auto 44px;
  color: var(--text-muted, #5f6368); line-height: 1.75; font-size: 1.03rem; }

/* ── Four pillars ─────────────────────────────────────────────────── */
.agx-pillars { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.agx-pillar {
  background: #fff; border: 1px solid var(--sand-dark, #e8dfd2);
  border-radius: var(--radius, 16px); padding: 30px 26px;
  transition: var(--transition, .3s ease);
}
.agx-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,.1)); }
.agx-pillar-ico { font-size: 1.9rem; line-height: 1; display: block; margin-bottom: 14px; }
.agx-pillar h3 { font-size: 1.08rem; color: var(--green); margin: 0 0 9px; font-weight: 700; }
.agx-pillar p { margin: 0; font-size: .95rem; line-height: 1.68; color: var(--text-muted, #5f6368); }

/* ── How it works ─────────────────────────────────────────────────── */
.agx-steps { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); counter-reset: agxstep; }
.agx-step { position: relative; padding-left: 62px; }
.agx-step::before {
  counter-increment: agxstep; content: counter(agxstep);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; font-weight: 800; font-size: 1.15rem;
  font-family: 'Playfair Display', Georgia, serif;
}
.agx-step h3 { margin: 8px 0 8px; font-size: 1.05rem; color: var(--text, #1c1c1c); }
.agx-step p { margin: 0; font-size: .95rem; line-height: 1.68; color: var(--text-muted, #5f6368); }

/* ── Languages ────────────────────────────────────────────────────── */
.agx-langs { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.agx-lang {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sand-dark, #e8dfd2);
  font-weight: 600; color: var(--text, #1c1c1c);
}
.agx-lang em { font-style: normal; font-size: .8rem; color: var(--text-light, #6b7280); }
.agx-lang-note { text-align: center; margin: 30px auto 0; max-width: 640px;
  font-size: .95rem; line-height: 1.7; color: var(--text-muted, #5f6368); }

/* ── Catalogue ────────────────────────────────────────────────────── */
.agx-cat-head { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.agx-cat-count { font-size: .9rem; color: var(--text-light, #6b7280); font-weight: 600; }
.agx-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.agx-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: #fff; border: 1px solid var(--sand-dark, #e8dfd2);
  border-radius: var(--radius, 16px); transition: var(--transition, .3s ease);
}
.agx-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,.1));
  border-color: var(--green); }
.agx-card-media { position: relative; height: 164px; background: var(--sand, #f5f0e8) center/cover no-repeat; }
.agx-card-tag {
  position: absolute; top: 11px; left: 11px; padding: 5px 11px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
.agx-card-dur {
  position: absolute; bottom: 11px; right: 11px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--green); font-size: .74rem; font-weight: 800;
}
.agx-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.agx-card-body h3 { margin: 0 0 5px; font-size: 1.06rem; color: var(--green);
  font-family: 'Playfair Display', Georgia, serif; }
.agx-card-guide { margin: 0 0 10px; font-size: .88rem; font-style: italic; color: var(--terracotta-text, #8E6219); }
.agx-card-blurb { margin: 0 0 14px; font-size: .9rem; line-height: 1.62; color: var(--text-muted, #5f6368); }
.agx-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agx-card-langs { font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-light, #6b7280); text-transform: uppercase; }
.agx-card-go { font-size: .84rem; font-weight: 700; color: var(--green); white-space: nowrap; }

/* ── Sample pull-quote ────────────────────────────────────────────── */
.agx-sample { max-width: 800px; margin: 0 auto; text-align: center; }
.agx-sample blockquote {
  margin: 0 0 20px; padding: 0; border: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.15rem, 2.7vw, 1.6rem); line-height: 1.62; color: var(--text, #1c1c1c);
}
.agx-sample blockquote::before { content: '\201C'; display: block; font-size: 3.4rem;
  line-height: .6; color: var(--terracotta-text, #8E6219); margin-bottom: 12px; }
.agx-sample cite { font-style: normal; font-size: .9rem; font-weight: 700; color: var(--text-light, #6b7280); }
.agx-sample cite a { color: var(--green); }

/* ── App band ─────────────────────────────────────────────────────── */
.agx-app {
  padding: 74px 20px; color: #fff;
  background: linear-gradient(158deg, var(--green) 0%, #14181c 122%);
}
.agx-app .container { max-width: 980px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 40px; justify-content: space-between; }
.agx-app-text { flex: 1 1 380px; }
.agx-app h2 { font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem); margin: 0 0 14px; color: #fff; text-align: left; }
.agx-app p { margin: 0 0 18px; line-height: 1.75; color: rgba(255,255,255,.9); }
.agx-app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.agx-app-list li { padding-left: 27px; position: relative; font-size: .95rem; color: rgba(255,255,255,.9); }
.agx-app-list li::before { content: '✓'; position: absolute; left: 0; font-weight: 800; color: #fff; }
.agx-app-get { flex: 0 0 auto; }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.agx-faq { max-width: 800px; margin: 0 auto; }
.agx-faq details {
  background: #fff; border: 1px solid var(--sand-dark, #e8dfd2);
  border-radius: var(--radius-sm, 10px); margin-bottom: 12px; overflow: hidden;
}
.agx-faq summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative;
  font-weight: 700; color: var(--green); font-size: 1rem;
}
.agx-faq summary::-webkit-details-marker { display: none; }
.agx-faq summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.45rem; font-weight: 400; color: var(--terracotta-text, #8E6219); line-height: 1;
}
.agx-faq details[open] summary::after { content: '\2013'; }
.agx-faq summary:focus-visible { outline: 3px solid var(--terracotta, #8E6219); outline-offset: -3px; }
.agx-faq-a { padding: 0 20px 18px; margin: 0; line-height: 1.75; color: var(--text-muted, #5f6368); font-size: .96rem; }

/* ── Top-level nav promotion ──────────────────────────────────────────
   Audio Guides used to live inside the "Trail" drop-down on every brand.
   As a top-level item it needs to read as a feature, not another link —
   and the nav gains an item, so the gap tightens on mid-size desktops
   (below 768px the whole bar collapses to the burger anyway). */
.nav-links > li.nav-feature > a {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--sand, #f5f0e8);
  color: var(--green);
  font-weight: 700;
  gap: 6px;
}
.nav-links > li.nav-feature > a::after { display: none; }
.nav-links > li.nav-feature > a:hover { background: var(--green); color: #fff; }
.navbar.scrolled .nav-links > li.nav-feature > a { background: var(--sand, #f5f0e8); }
.navbar.scrolled .nav-links > li.nav-feature > a:hover { background: var(--green); color: #fff; }
@media (min-width: 769px) and (max-width: 1240px) {
  .nav-links { gap: 13px; }
}
@media (max-width: 768px) {
  .nav-links > li.nav-feature > a { background: none; padding: 4px 0; }
}

/* ── Homepage band ────────────────────────────────────────────────────
   Sits inside each brand's existing .section rhythm, so it inherits the
   homepage's padding and title styles rather than fighting them. */
.agx-home { background: var(--sand, #f5f0e8); text-align: center; }
.agx-home-eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--terracotta-text, #8E6219); margin: 0 0 10px;
}
.agx-home-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 32px auto 30px; max-width: 860px;
}
.agx-hstat {
  flex: 1 1 150px; max-width: 210px; padding: 20px 14px;
  background: #fff; border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.06));
}
.agx-hstat b {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem); line-height: 1; color: var(--green);
}
.agx-hstat span {
  display: block; margin-top: 6px; font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-light, #6b7280);
}
.agx-home-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.agx-btn-solid { background: var(--green); color: #fff; box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.06)); }
.agx-btn-solid:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,.1)); }

/* ── Homepage showcase: the guides, by name, with their own images ────
   Counting guides does not tell anyone WHICH places are covered. This is
   the part that does: twelve marquee sites as image cards, then the
   complete list by name underneath so the other three dozen are not
   quietly implied out of existence. */
.agx-show {
  display: grid; gap: 18px; margin: 8px 0 26px;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  text-align: left;
}
.agx-show-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: #fff; border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.06));
  transition: var(--transition, .3s ease);
}
.agx-show-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,.1)); }
.agx-show-img {
  position: relative; display: block; height: 148px;
  background: var(--sand-dark, #e8dfd2) center/cover no-repeat;
}
/* A dark foot under the badges so white text holds on a pale photo. */
.agx-show-img::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.agx-show-dur, .agx-show-langs {
  position: absolute; bottom: 10px; z-index: 1;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; color: #fff;
}
.agx-show-dur { left: 11px; }
.agx-show-langs {
  right: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.22); backdrop-filter: blur(3px);
}
.agx-show-body { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 4px; }
.agx-show-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.04rem; line-height: 1.25; color: var(--green);
}
.agx-show-title {
  font-size: .82rem; line-height: 1.45; color: var(--text-light, #6b7280);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}

/* The complete index. Collapsed by default so it informs without burying
   the CTA; <details> keeps every name in the DOM for crawlers regardless. */
.agx-all-wrap {
  max-width: 900px; margin: 0 auto 26px; text-align: left;
  background: #fff; border: 1px solid var(--sand-dark, #e8dfd2);
  border-radius: var(--radius-sm, 10px);
}
.agx-all-wrap > summary {
  cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: .95rem;
  color: var(--green); list-style: none; position: relative;
}
.agx-all-wrap > summary::-webkit-details-marker { display: none; }
.agx-all-wrap > summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 400; color: var(--terracotta-text, #8E6219); line-height: 1;
}
.agx-all-wrap[open] > summary::after { content: '\2013'; }
.agx-all-wrap > summary:focus-visible { outline: 3px solid var(--terracotta, #8E6219); outline-offset: -3px; }
.agx-all {
  list-style: none; margin: 0; padding: 0 18px 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.agx-all li a {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  background: var(--sand, #f5f0e8); color: var(--text, #1c1c1c);
  font-size: .86rem; text-decoration: none; transition: var(--transition, .3s ease);
}
.agx-all li a:hover { background: var(--green); color: #fff; }

/* The app-only clarification, stated where the CTAs are rather than only in
   the app band far below. */
.agx-hero-note {
  margin: 22px auto 0; max-width: 520px;
  font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.8);
}
/* AGX:STYLES:END */