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

:root {
  --green: #8B6914;
  --green-light: #B8922D;
  --sand: #FAF6F0;
  --sand-dark: #e8dfd2;
  --terracotta: #c0623a;
  --terracotta-light: #d4845e;
  /* White text on --terracotta is 4.2:1, under AA for normal-size text. This
     is the button hover shade, 5.4:1. The shared five-points.css colours its
     "Get the free app" button with it, as every trails-web brand defines it. */
  --terracotta-text: #a8512d;
  --ocean: #1a6b7a;
  --text: #1c1c1c;
  --text-muted: #5f6368;
  /* #80868b was 3.68:1 on white (fails WCAG AA). #6b7280 is ~4.8:1 — passes AA
     for normal-size body text while staying a muted secondary grey. */
  --text-light: #6b7280;
  --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;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--sand);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.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 {
  background: var(--terracotta);
  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 ===== */
.navbar {
  position: fixed;
  top: var(--announcement-h);
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: var(--transition);
}

.navbar.scrolled {
  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);
}
.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(--white);
  transition: var(--transition);
}

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

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

/* ===== 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:
     common.js measures this banner and publishes its height so the fixed
     navbar (top: var(--announcement-h)) lands directly below it. Reading the
     variable here too 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. */
  min-height: 72px;
  height: auto;
  background: linear-gradient(135deg, #6B4F0E 0%, #8B6914 30%, #B8922D 55%, #8b4a2a 80%, #c0623a 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;
  /* Measured 19x23 on a 375px phone — under the 24x24 minimum, on the
     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 outgrows its .container,
   overflows, and — the banner being overflow:hidden — the app icon and the
   badge are sliced off the left edge. Drop the decorative strip before that
   happens, which is what this rule always did, 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) {
  .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.
       The hard-coded 72px default above was the whole bug: measured 98px
       here at 375px, so the navbar was drawn 26px up inside the banner. */
    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;
    /* Clear of the corner controls, which are absolutely positioned and so
       do not displace text: the badge occupies the left inset and the
       dismiss button 40px on the right. */
    box-sizing: border-box;
    padding: 0 46px;
  }
  .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 {
    position: absolute;
    top: 8px;
    left: 8px;
    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 {
    /* Stays in the corner on this brand: the hero reserves no space for the
       fixed chrome, so a taller banner walks the navbar onto the hero's own
       heading. The 40x40 hit area from the base rule still applies; the text
       below is given a matching gutter so nothing hides under it. */
    position: absolute;
    top: 6px;
    right: 6px;
    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%; }
}

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

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

.nav-links a {
  color: rgba(255,255,255,0.85);
  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(--white);
  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 ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url('/images/hero-gobekli-sunset.jpg') center/cover no-repeat; /* fallback */
  background-image: -webkit-image-set(url('/images/hero-gobekli-sunset.webp') type('image/webp'), url('/images/hero-gobekli-sunset.jpg') type('image/jpeg'));
  background-image: image-set(url('/images/hero-gobekli-sunset.webp') type('image/webp'), url('/images/hero-gobekli-sunset.jpg') type('image/jpeg'));
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Warm dark wash, not the template's 0.82 green: a green gradient over an
     orange sunset muddies to olive-brown. Kept strongest top-left where the
     headline sits, light elsewhere so the sky reads. */
  background: linear-gradient(
    160deg,
    rgba(58, 26, 18, 0.50) 0%,
    rgba(28, 20, 14, 0.28) 50%,
    rgba(28, 20, 14, 0.30) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding-top: 120px;
  padding-bottom: 60px;
}

.hero-tag {
  display: inline-block;
  background: rgba(192, 98, 58, 0.15);
  border: 1px solid rgba(192, 98, 58, 0.35);
  color: var(--terracotta-light);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* On the homepage's sunset photo, terracotta on orange all but vanished. A
   dark glass pill with the five cards' gold text keeps it readable
   (2026-10-01). */
.five-hero .hero-tag {
  background: rgba(28, 20, 14, 0.5);
  border-color: rgba(246, 223, 164, 0.4);
  color: #f6dfa4;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero h1 {
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  color: var(--white);
  margin-bottom: 24px;
}

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

.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 520px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-badges {
  margin-top: 36px;
}
.hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(45, 80, 22, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.hero-badge:hover {
  background: rgba(45, 80, 22, 0.9);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-decoration: none;
}
.hero-badge-secondary {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  font-size: 0.78rem;
}
.hero-badge-secondary:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

@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; }
  .hero-badge-secondary { font-size: 0.7rem; }
}

.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(255,255,255,0.08);
  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 GobekliTepe ===== */
.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);
  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(2, 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);
}

.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%, #B8922D 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.15);
}

.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; }
.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);
}

.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(45, 80, 22, 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: var(--terracotta);
  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);
  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;
}

.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);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===== Group Matching ===== */
.group-matching {
  background: var(--white);
}

.group-finder {
  max-width: 720px;
  margin: 0 auto 80px;
  background: var(--sand);
  border-radius: var(--radius);
  padding: 48px 40px;
  box-shadow: var(--shadow);
}

.finder-progress {
  height: 4px;
  background: #e0dbd2;
  border-radius: 2px;
  margin-bottom: 40px;
  overflow: hidden;
}

.finder-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--terracotta), var(--green));
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s ease;
}

.finder-step {
  display: none;
  text-align: center;
}

.finder-step.active {
  display: block;
  animation: fadeInStep 0.4s ease;
}

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.finder-question {
  font-size: 1.35rem;
  color: var(--green);
  margin-bottom: 28px;
}

.finder-options {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.finder-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 28px;
  background: var(--white);
  border: 2px solid #e0dbd2;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  min-width: 120px;
  font-family: 'Inter', -apple-system, sans-serif;
}

.finder-option:hover {
  border-color: var(--terracotta);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.finder-option.selected {
  border-color: var(--green);
  background: rgba(45, 80, 22, 0.06);
}

.finder-option-icon {
  font-size: 2rem;
}

.finder-option-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.finder-results {
  display: none;
  text-align: center;
}

.finder-results.active {
  display: block;
  animation: fadeInStep 0.4s ease;
}

.finder-results-title {
  font-size: 1.5rem;
  color: var(--green);
  margin-bottom: 8px;
}

.finder-results-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.finder-results-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.finder-result-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  border-left: 4px solid var(--terracotta);
  text-align: left;
  box-shadow: var(--shadow);
  position: relative;
}

.finder-result-card h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  color: var(--green);
  margin-bottom: 6px;
}

.finder-result-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.finder-result-card .btn {
  padding: 8px 20px;
  font-size: 0.8rem;
}

.finder-match-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--terracotta);
  color: var(--white);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.finder-restart {
  margin-top: 8px;
}

.btn-outline-dark {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  padding: 10px 24px;
  font-size: 0.85rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Inter', -apple-system, sans-serif;
}

.btn-outline-dark:hover {
  background: var(--green);
  color: var(--white);
}

.group-browse-title {
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  color: var(--green);
  margin-bottom: 28px;
}

.group-filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.group-filter {
  padding: 8px 20px;
  border-radius: 50px;
  border: 2px solid #e0dbd2;
  background: transparent;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.group-filter:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

.group-filter.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

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

.group-card {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
  display: flex;
  flex-direction: column;
  position: relative;
}

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

.group-card.hidden {
  display: none;
}

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

.group-card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--green);
  color: var(--white);
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.group-card h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  color: var(--green);
  margin-bottom: 10px;
}

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

.group-card-features {
  list-style: none;
  margin-bottom: 20px;
  flex: 1;
}

.group-card-features li {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 4px 0;
  padding-left: 20px;
  position: relative;
}

.group-card-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--green-light);
  font-weight: 700;
}

.group-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #e0dbd2;
  margin-top: auto;
}

.group-card-dates {
  font-size: 0.78rem;
  color: var(--terracotta);
  font-weight: 600;
}

/* ===== 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);
}

/* Ships hidden; script.js unhides it once a real review has rendered. The
   attribute must win over any display rule added to .section later. */
#testimonials[hidden] { display: none !important; }

.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);
  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);
  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-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.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: 16px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 20px;
  border: 2px solid #e0dbd2;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  background: var(--white);
  color: var(--text);
  transition: var(--transition);
  outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(45, 80, 22, 0.08);
}

.contact-form textarea {
  resize: vertical;
}

/* ===== 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;
}

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

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

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

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

/* 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.5);
  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.3);
  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=-3 and
     Packing List ended at x=378 on a 375px screen, 2026-09-25). */
  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.5);
  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.3);
  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.5);
  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;
  }
}

/* Independence line (owner-approved 2026-09-25) — static in every page's
   footer, i18n key footer.independent. Small print, but legible: white at .92
   on --green is 4.6:1 (WCAG AA); the .3–.5 of the © lines around it is not. */
.footer-independent {
  max-width: 760px;
  margin: 12px auto 0;
  font-size: 0.78rem;
  line-height: 1.55;
}
.footer .footer-independent,
.camp-footer .footer-independent {
  color: rgba(255,255,255,0.92);
}
.footer-grid .footer-independent {
  max-width: 520px;
  margin: 10px 0 0;
  font-size: 0.78rem;
}
@media (max-width: 600px) {
  .footer-grid .footer-independent { margin: 10px auto 0; }
}

/* Minimal light footer for the pages that had none (legal, sign-in, app
   hand-off, 404) — it exists to carry the independence line. */
.footer-min {
  padding: 24px 16px;
  margin-top: 40px;
  border-top: 1px solid #eaeaea;
  text-align: center;
  font-size: 13px;
  color: #6b6b6b;
}
.footer-min .footer-independent { margin: 0 auto; }
.has-sidebar .footer-min { margin-left: 260px; }
@media (max-width: 768px) {
  .has-sidebar .footer-min { margin-left: 0; }
}

/* ===== 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(45, 80, 22, 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);
  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);
  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: 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);
  }

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

@media (max-width: 768px) {
  .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;
  }

  .group-finder {
    padding: 32px 24px;
  }

  .finder-option {
    min-width: 100px;
    padding: 18px 20px;
  }

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

  .finder-results-cards {
    grid-template-columns: 1fr;
  }
}

@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;
  }

  .finder-options {
    flex-direction: column;
    align-items: stretch;
  }

  .finder-option {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-width: unset;
  }

  .group-filters {
    gap: 8px;
  }

  .group-filter {
    font-size: 0.75rem;
    padding: 6px 14px;
  }
}

/* ===== 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(255,255,255,0.4);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--white);
  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: rgba(255,255,255,0.7);
}

.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: #8B6914;
}

/* ===== 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.82rem;
  font-weight: 600;
  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); }
}

.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 zoom buttons drew over the header while scrolling and
   over the open phone menu. z-index 0 + isolation keeps them 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 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.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) !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(58, 26, 18, 0.62), rgba(28, 20, 14, 0.45)),
    url('/images/gt-site-gobekli-tepe.jpg') 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(45,80,22,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(45,80,22,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(45,80,22,0.35);
}
@keyframes loginPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(45,80,22,0.25); }
  50% { box-shadow: 0 2px 16px rgba(45,80,22,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: 220px;
  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);
}
.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;
  }
  .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 .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(45,80,22,0.1);
}

/* Footer newsletter signup (Trailivo network newsletter) */
.footer-newsletter {
  max-width: 520px;
  margin: 0 auto 32px;
  text-align: center;
}
.footer-newsletter-title {
  color: var(--white, #fff);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.footer-newsletter-note {
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.footer-newsletter-form {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-newsletter-form input[type="email"] {
  flex: 1 1 220px;
  max-width: 300px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.9rem;
}
.footer-newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.footer-newsletter-form button {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--terracotta);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition, all 0.2s);
}
.footer-newsletter-form button:hover { opacity: 0.9; }
.footer-newsletter-form button:disabled { opacity: 0.7; cursor: not-allowed; }
.footer-newsletter-status { margin-top: 10px; font-size: 0.85rem; min-height: 18px; }
.footer-newsletter-status.success { color: #b7e8a3; }
.footer-newsletter-status.error { color: #ffb4a0; }

/* ============================================================
   Visit Planner wizard styles (marketplace-strip + .lwp-*), ported from
   the trails ecosystem for a unified 'Plan My …' experience. Themed via
   GBK's own --green (gold) / --terracotta vars. 2026-07-28.
   ============================================================ */
/* ===== 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(45, 80, 22, 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(45, 80, 22, 0.07);
  border: 1px solid rgba(45, 80, 22, 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;
}


/* =====================================================================
   Coast to Coast Path 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); }

.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(45, 80, 22, 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(45, 80, 22, 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 {
  margin-left: auto; background: var(--terracotta);
  border: 1.5px solid var(--terracotta); 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(45, 80, 22, 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);
  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; }
}


/* =====================================================================
   .lw-getapp — the ONLY get-the-app affordance on the site
   =====================================================================
   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 code that opens one thing in the app: on
                     phones the code gives way to it.

   Variants: --sm (footer, banners) · --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; }

/* 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); filter: none; }

@media (max-width: 640px) {
  /* A QR cannot be scanned by the device displaying it, so a code that
     comes with an "open in the app" button gives way to it. 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; }
}

/* ── App strap — injected by common.js above the standard footer on consumer pages ── */
.app-strap { background: linear-gradient(160deg, #3d2b1a, #241708); color: #fff; padding: 34px 20px; }
.app-strap-inner { display: flex; align-items: center; justify-content: center; gap: 38px; flex-wrap: wrap; }
.app-strap-text { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.app-strap-headline { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: #fff; }
.app-strap-sub { font-size: 0.92rem; opacity: 0.85; line-height: 1.55; }
@media (max-width: 640px) {
  .app-strap-inner { text-align: center; }
  .app-strap-text { align-items: center; }
}

/* App-download row at the foot of the hero badges */
.hero-badges-row-apps { justify-content: center; margin-top: 6px; }

/* Audio-guide app block — same component as the other brands, brand-neutral
   so the colours come from --green rather than one brand's ochre. */
/* "Recording coming soon" placeholder for guides without uploaded audio */
.cs-audio-soon {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  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; }
/* Restored: a refactor that replaced the QR block took these with it, which
   ran the headline and the body text together on one line. Scoped to the copy
   column so they cannot reach the QR caption's own <span>. */
.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, so the tap-through gets its own full-width line. */
  .cs-audio-soon { flex-wrap: wrap; }
  .cs-audio-soon .lw-getapp { width: 100%; }
  .cs-audio-soon .lw-getapp-btn { width: 100%; justify-content: center; }
}

/* 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, #a85633); }
.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, #a85633); 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, #a85633); line-height: 1;
}
.agx-faq details[open] summary::after { content: '\2013'; }
.agx-faq summary:focus-visible { outline: 3px solid var(--terracotta, #c0623a); 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, #a85633); 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, #a85633); line-height: 1;
}
.agx-all-wrap[open] > summary::after { content: '\2013'; }
.agx-all-wrap > summary:focus-visible { outline: 3px solid var(--terracotta, #c0623a); 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 */

/* Audio-guide scripts on the culture detail page (2026-08-27). Until the
   catalogue refresh, data/culture-sites.json carried an audio_guide_count and
   no guides, so this block could only state a number; it now shows the text. */
.cs-audio-script { border: 1px solid #eee5d8; border-radius: 10px; margin: 10px 0 0; background: #fff; }
.cs-audio-script > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--green); }
.cs-audio-script[open] > summary { border-bottom: 1px solid #eee5d8; }
.cs-audio-script p { padding: 0 16px; margin: 12px 0; line-height: 1.75; color: var(--text-muted); }
.cs-audio-script p:last-child { padding-bottom: 14px; }