/* ===================================================================
   VIRGIN WILDERNESS SAFARIS — v2.0
   Editorial luxury design system
   Inspired by andBeyond, Singita, Wilderness Safaris
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* -------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------- */
:root {
  /* Colours — bold safari, built on warm black + field green + amber.
     Token NAMES are unchanged from the original palette so every one of the
     1,000+ var() references across this file keeps resolving; only the values
     move. That is what makes this restyle reversible. */
  --c-cream:        #faf6f0;
  --c-sand:         #f1e8db;
  --c-sand-dark:    #d9c7ad;
  --c-warm-white:   #fdfaf5;
  --c-paper:        #f8f3ea;
  --c-stone:        #aa9881;

  --c-ink:          #1a1006;
  --c-ink-soft:     #2d1a06;
  --c-text:         #2d1a06;
  --c-text-muted:   #7a6249;
  --c-text-faint:   #b39979;
  --c-text-inverse: #faf6f0;

  /* "brown" now carries the dark bands; kept as a name so section-dark works */
  --c-brown:        #3d2812;
  --c-brown-deep:   #2a1a08;
  --c-brown-warm:   #5a3a1a;

  --c-accent:        #c95c2b;
  --c-accent-hover:  #b04a1f;
  --c-accent-soft:   #e88b58;
  --c-accent-pale:   #faddc8;
  --c-accent-strong: #9c3b18;   /* 4.8:1 on white — safe for small text */
  --c-gold:          #b48a4d;

  --c-line:         rgba(45, 26, 6, 0.10);
  --c-line-strong:  rgba(45, 26, 6, 0.18);
  --c-line-faint:   rgba(45, 26, 6, 0.05);
  --c-line-inverse: rgba(255, 255, 255, 0.18);

  /* Hero scrims. The old ones were a hard left-side wash for left-aligned text;
     these are more even so a headline reads over the whole frame, with the
     bottom weighted for the buttons. */
  --c-overlay-dark: radial-gradient(ellipse 90% 75% at 50% 42%, rgba(26,16,6,0.70) 0%, rgba(26,16,6,0.54) 45%, rgba(26,16,6,0.30) 100%), linear-gradient(180deg, rgba(26,16,6,0.34) 0%, rgba(26,16,6,0.10) 32%, rgba(26,16,6,0.50) 100%);
  --c-overlay-soft: radial-gradient(ellipse 90% 75% at 50% 42%, rgba(26,16,6,0.60) 0%, rgba(26,16,6,0.44) 45%, rgba(26,16,6,0.22) 100%), linear-gradient(180deg, rgba(26,16,6,0.28) 0%, rgba(26,16,6,0.06) 32%, rgba(26,16,6,0.42) 100%);
  --c-overlay-bot:  linear-gradient(0deg,   rgba(26, 16, 6, 0.85) 0%, rgba(26, 16, 6, 0.00) 60%);

  /* Typography — one family, separated by weight and scale. */
  --ff-display: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-serif:   'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-body:    'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-script:  'Satisfy', 'Segoe Script', cursive;

  --fw-display: 800;
  --fw-heading: 600;
  --fw-medium:  500;
  --fw-body:    400;

  --fs-eyebrow:  0.75rem;
  --fs-small:    0.8125rem;
  --fs-body:     1rem;
  --fs-lead:     1.1875rem;
  --fs-h6:       1rem;
  --fs-h5:       1.1875rem;
  --fs-h4:       1.5rem;
  --fs-h3:       clamp(1.4rem,  1rem   + 1.5vw, 2.125rem);
  --fs-h2:       clamp(1.9rem,  1.1rem + 2.5vw, 3rem);
  --fs-h1:       clamp(2.4rem,  1.2rem + 4vw,   4.0625rem);
  --fs-display:  clamp(2.75rem, 1rem   + 6vw,   5.25rem);

  --lh-tight:   1.1;
  --lh-snug:    1.22;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;
  --lh-loose:   1.85;

  --ls-tight:   -0.005em;
  --ls-normal:  0;
  --ls-loose:   0.01em;
  --ls-wide:    0.08em;
  --ls-wider:   0.12em;
  --ls-widest:  0.18em;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-28: 7rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* Roomier bands than before — the new type is heavier and needs the air. */
  --section-y:        clamp(3rem, 1.5rem + 3vw, 5rem);
  --section-y-large:  clamp(4rem, 2rem + 4.5vw, 7rem);

  /* Containers */
  --w-text:      660px;
  --w-narrow:    900px;
  --w-default:   1240px;
  --w-wide:      1480px;
  --w-edge:      clamp(1.25rem, 2vw + 0.5rem, 3rem);

  /* Radius */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-hero: 22px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm:  0 1px 2px rgba(26, 16, 6, 0.06);
  --sh-md:  0 8px 24px rgba(26, 16, 6, 0.10);
  --sh-lg:  0 18px 44px rgba(26, 16, 6, 0.16);
  --sh-xl:  0 32px 72px rgba(26, 16, 6, 0.24);

  /* Motion */
  --ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quart:   cubic-bezier(0.76, 0, 0.24, 1);
  --ease-back:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   180ms;
  --t-base:   320ms;
  --t-slow:   520ms;
  --t-slower: 800ms;

  /* Z layers */
  --z-nav:      40;
  --z-overlay:  60;
  --z-modal:    80;
  --z-toast:   100;
}

/* -------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, picture, canvas { display: block; max-width: 100%; height: auto; }
img { font-style: italic; }   /* nicer alt-text fallback */
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--sp-12) 0;
}

::selection { background: var(--c-accent); color: #fff; }

/* Accessibility: skip-to-content link (visible only on keyboard focus) */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 9999;
  background: var(--c-brown); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-family: var(--ff-body); font-size: 0.875rem; font-weight: 600;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }

/* -------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-heading);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { margin: 0 0 1em; }

.display {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.lead {
  font-family: var(--ff-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.6;
  font-style: normal;
  color: var(--c-text);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ff-script);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
  line-height: 1.2;
}
.eyebrow.eyebrow-light { color: var(--c-accent-soft); }
.eyebrow.eyebrow-line::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--c-accent);
  vertical-align: middle;
  margin-right: var(--sp-3);
  transform: translateY(-2px);
}

.small-muted, small.muted { color: var(--c-text-muted); font-size: var(--fs-small); }

blockquote {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Link styles in body content */
.rich-text a, .lead a, p a {
  color: var(--c-accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-base) var(--ease-smooth), color var(--t-base);
}
.rich-text a:hover, .lead a:hover, p a:hover {
  background-size: 100% 1px;
  color: var(--c-accent-hover);
}

/* Rich text content (admin-edited body fields) */
.rich-text { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--c-text); }
.rich-text > * + * { margin-top: 1.1em; }
.rich-text h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); }
.rich-text h3 { margin-top: 1.6em; font-size: 1.375rem; }
.rich-text h4 { margin-top: 1.4em; font-size: 1.125rem; }
.rich-text ul, .rich-text ol { padding-left: 1.25em; }
.rich-text li { margin-bottom: 0.4em; line-height: 1.65; }
.rich-text blockquote {
  border-left: 3px solid var(--c-accent);
  padding-left: 1.25rem;
  margin: 2em 0;
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.625rem);
}

/* -------------------------------------------------------------------
   4. LAYOUT — containers + grids
   ------------------------------------------------------------------- */
.container       { max-width: var(--w-default); margin-inline: auto; padding-inline: var(--w-edge); }
.container-wide  { max-width: var(--w-wide);    margin-inline: auto; padding-inline: var(--w-edge); }
.container-narrow{ max-width: var(--w-narrow);  margin-inline: auto; padding-inline: var(--w-edge); }
.container-text  { max-width: var(--w-text);    margin-inline: auto; padding-inline: var(--w-edge); }
.full-bleed      { width: 100%; padding-inline: 0; }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section-tight  { padding-block: clamp(2.5rem, 1rem + 3vw, 4rem); }
.section-large  { padding-block: var(--section-y-large); }
.section-flush  { padding-block: 0; }

.section-cream  { background: var(--c-cream); color: var(--c-text); }
.section-paper  { background: var(--c-paper); color: var(--c-text); }
.section-sand   { background: var(--c-sand);  color: var(--c-text); }
.section-dark   { background: var(--c-brown-deep); color: var(--c-text-inverse); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-ink    { background: var(--c-ink); color: var(--c-text-inverse); }

/* Section headers (eyebrow + heading + intro) */
.section-head { max-width: var(--w-text); margin: 0 0 var(--sp-12); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head .intro {
  font-family: var(--ff-serif);
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.section-end { margin-top: var(--sp-12); text-align: center; }

/* Grid primitives */
.grid       { display: grid; gap: var(--sp-8); }
.grid-2     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-auto-340 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 900px)  { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Editorial split — text + image side by side, asymmetric */
.split {
  display: grid;
  gap: clamp(2rem, 2vw + 1rem, 5rem);
  align-items: center;
}
.split-5050 { grid-template-columns: 1fr 1fr; }
.split-6040 { grid-template-columns: 1.5fr 1fr; }
.split-4060 { grid-template-columns: 1fr 1.5fr; }
.split-image { position: relative; }
.split-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-sm); }
.split-image.landscape img { aspect-ratio: 4/3; }
.split-flip { direction: rtl; }
.split-flip > * { direction: ltr; }
@media (max-width: 900px) {
  .split-5050, .split-6040, .split-4060 { grid-template-columns: 1fr; }
  .split-flip { direction: ltr; }
  .split-image img { aspect-ratio: 16/10; }
}

/* -------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0.95em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--t-base) var(--ease-smooth),
    color var(--t-base) var(--ease-smooth),
    border-color var(--t-base) var(--ease-smooth),
    transform var(--t-fast) var(--ease-smooth),
    box-shadow var(--t-base) var(--ease-smooth);
  line-height: 1;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--c-accent-strong);
  color: #fff;
  border-color: var(--c-accent-strong);
  box-shadow: var(--sh-sm);
}
.btn-primary:hover { background: #7d2f12; border-color: #7d2f12; box-shadow: var(--sh-md); }

.btn-outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn-outline:hover { background: var(--c-ink); color: var(--c-text-inverse); }
.section-dark .btn-outline, .section-ink .btn-outline,
.hero .btn-outline, .page-hero .btn-outline {
  color: #fff; border-color: rgba(255, 255, 255, 0.65);
}
.section-dark .btn-outline:hover, .section-ink .btn-outline:hover,
.hero .btn-outline:hover, .page-hero .btn-outline:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  letter-spacing: var(--ls-wide);
}
.btn-ghost:hover { color: var(--c-accent-strong); border-color: var(--c-accent-strong); background: var(--c-accent-pale); }
.hero .btn-ghost, .page-hero .btn-ghost, .section-dark .btn-ghost, .section-ink .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover, .section-dark .btn-ghost:hover, .section-ink .btn-ghost:hover { color: var(--c-ink); background: #fff; border-color: #fff; }

.btn-lg  { padding: 1.15em 2em; font-size: 0.875rem; }
.btn-sm  { padding: 0.7em 1.25em; font-size: 0.75rem; }
.btn-block { display: flex; width: 100%; }

.btn-arrow::after {
  content: '→';
  font-family: var(--ff-body);
  transition: transform var(--t-base) var(--ease-smooth);
  font-weight: 400;
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* Underlined link (used in cards, footers) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: inherit;
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding-bottom: 0.25em;
  border-bottom: 1px solid currentColor;
  transition: color var(--t-base), gap var(--t-base);
}
.link-arrow:hover { color: var(--c-accent); gap: 0.75em; }
.link-arrow svg { width: 12px; height: 12px; transition: transform var(--t-base); }
.link-arrow:hover svg { transform: translateX(2px); }

/* -------------------------------------------------------------------
   6. HEADER / NAVIGATION
   ------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0;
  z-index: var(--z-nav);
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--c-line-faint);
  transition: padding var(--t-base) var(--ease-smooth);
}
.site-header.is-scrolled {
  background: rgba(250, 246, 240, 0.98);
  box-shadow: 0 1px 0 var(--c-line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: var(--sp-4) var(--w-edge);
  max-width: var(--w-wide);
  margin: 0 auto;
  min-height: 76px;
}
.logo-link { flex-shrink: 0; line-height: 0; }
.logo { height: 52px; width: auto; transition: height var(--t-base) var(--ease-smooth); }
.site-header.is-scrolled .logo { height: 44px; }

.site-header nav { flex: 1; min-width: 0; }
.nav-links {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  padding: 0.5rem 0;
  white-space: nowrap;
  position: relative;
}
.nav-links > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-smooth);
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after { transform: scaleX(1); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  cursor: pointer;
}
.dropdown-arrow {
  width: 8px; height: 8px;
  transition: transform var(--t-base) var(--ease-smooth);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0.5rem;
  list-style: none;
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.nav-dropdown-menu::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu li a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--c-text);
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-dropdown-menu li a:hover { background: var(--c-sand); color: var(--c-accent); }

/* Header utility buttons (search, lang, currency) */
.header-utils { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-shrink: 0; }
.search-toggle, .icon-btn {
  background: transparent;
  border: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink);
  border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.search-toggle:hover, .icon-btn:hover { background: var(--c-sand); color: var(--c-accent); }
.currency-switcher {
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--c-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border var(--t-fast), color var(--t-fast);
}
.currency-switcher:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--c-ink); transition: transform var(--t-base), opacity var(--t-base); }

/* -------------------------------------------------------------------
   7. HERO (homepage)
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 68svh;
  min-height: 68vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: #fff;
  margin: 0;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.04);
  animation: heroZoom 12s var(--ease-smooth) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--c-overlay-soft);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: clamp(3rem, 2rem + 2vw, 5rem) var(--w-edge) var(--sp-8);
  display: flex; justify-content: flex-start;
}
.hero-content-inner {
  width: 100%;
  max-width: 720px;
  display: flex; flex-direction: column;
  gap: var(--sp-5);
  text-align: left;
}
@media (max-width: 640px) {
  .hero-content { padding: var(--sp-12) var(--w-edge) var(--sp-10); }
  .hero-content-inner { gap: var(--sp-4); }
}
.hero-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(201, 92, 43, 0.92); /* brand terracotta */
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.hero-title {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.5rem, 1.4rem + 4vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.hero-subtitle {
  font-family: var(--ff-serif);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: 56ch;
  text-wrap: balance;
}
.hero-buttons {
  display: flex; gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  left: 50%; bottom: var(--sp-8);
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.6875rem;
  font-family: var(--ff-body);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  animation: scrollHint 2.4s ease-in-out infinite;
}
.hero-scroll::after {
  content: '';
  width: 1px; height: 30px;
  background: rgba(255, 255, 255, 0.5);
}
@keyframes scrollHint {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  min-height: clamp(340px, 48vh, 540px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.page-hero-tall { min-height: clamp(400px, 54vh, 600px); }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  animation: heroZoom 14s var(--ease-smooth) forwards;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--c-overlay-dark);
}
.page-hero-content {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--w-default);
  margin: 0 auto;
  padding: var(--sp-20) var(--w-edge) var(--sp-12);
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}
.page-hero-eyebrow,
.page-hero-tag {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent-soft);
  margin-bottom: var(--sp-2);
}
.page-hero-title {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.25rem, 1.2rem + 4vw, 4.75rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: #fff;
  max-width: 18ch;
}
.page-hero-subtitle {
  font-family: var(--ff-serif);
  font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.3125rem);
  font-style: normal;
  color: rgba(255, 255, 255, 0.92);
  max-width: 50ch;
  line-height: 1.45;
}
.page-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}
.page-hero-meta a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.page-hero-meta strong { display: block; font-family: var(--ff-display); font-weight: 500; font-size: 1.125rem; color: #fff; letter-spacing: 0; margin-top: 2px; }

/* Hero legibility — soft shadow so text stays readable over any photo, even
   bright skies, independent of the scrim. Applies to both the homepage hero
   and inner page heroes. Buttons get a lift shadow so CTAs read over imagery. */
.hero-eyebrow, .hero-title, .hero-subtitle, .hero-trust,
.page-hero-eyebrow, .page-hero-tag, .page-hero-title, .page-hero-subtitle,
.page-hero-meta, .page-hero-facts {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 24px rgba(0, 0, 0, 0.45);
}
.hero .btn, .page-hero .btn { box-shadow: 0 8px 24px rgba(26, 16, 6, 0.30); }

/* -------------------------------------------------------------------
   8. CARDS — luxury tour/destination/blog cards
   ------------------------------------------------------------------- */
.card-grid { display: grid; gap: clamp(2rem, 1rem + 2vw, 3rem); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 900px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .card-grid.cols-3, .card-grid.cols-4, .card-grid.cols-auto { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column;
  position: relative;
  background: transparent;
  border: 0;
  transition: transform var(--t-base) var(--ease-smooth);
}
.card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  background: var(--c-sand);
  border-radius: var(--r-sm);
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-smooth);
}
.card:hover .card-image img { transform: scale(1.08); }
.card-image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(26, 16, 6, 0.55) 100%);
  pointer-events: none;
}
.card-duration {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-ink);
  padding: 0.35em 0.85em;
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  z-index: 2;
}
.card-body {
  padding: var(--sp-5) 0 var(--sp-2);
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}
.card-tag {
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent-strong);
}
.card-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.4375rem;
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.card-title a { color: inherit; transition: color var(--t-base); }
.card-title a:hover { color: var(--c-accent); }
.card-desc {
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
.card-meta {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  letter-spacing: var(--ls-loose);
  color: var(--c-text-muted);
  text-transform: uppercase;
  font-weight: 700;
}
.card-price {
  margin-top: var(--sp-1);
  font-family: var(--ff-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--c-ink);
}
.card-price small, .card-price-note {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-text-muted);
  letter-spacing: 0;
}
.card-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-top: var(--sp-3);
}
.card-actions .link-arrow,
.card-link { font-size: 0.75rem; }
.card-image-link { display: block; line-height: 0; }

/* Destination tile — full-bleed image with overlay text */
.destinations-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.destination-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  border-radius: var(--r-sm);
  color: #fff;
  background: var(--c-brown-deep);
}
.destination-tile-large { aspect-ratio: 4/3; }
.destination-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-smooth);
}
.destination-tile:hover img { transform: scale(1.07); }
.destination-overlay {
  position: absolute; inset: 0;
  background: var(--c-overlay-bot);
  z-index: 1;
}
.destination-body {
  position: absolute;
  z-index: 2;
  inset: auto var(--sp-5) var(--sp-5) var(--sp-5);
  color: #fff;
}
.destination-body h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 var(--sp-2);
}
.destination-body p {
  font-family: var(--ff-serif);
  font-style: normal;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--sp-3);
  line-height: 1.4;
}
.destination-cta {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  transition: border-color var(--t-base);
}
.destination-tile:hover .destination-cta { border-color: var(--c-accent-soft); }

/* -------------------------------------------------------------------
   9. FEATURE GRID (Why Travel With Us, etc.)
   ------------------------------------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.5rem, 0.75rem + 1.5vw, 2.5rem);
}
.feature-item {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.feature-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-accent);
  background: var(--c-sand);
  border-radius: var(--r-pill);
}
.section-dark .feature-icon, .section-ink .feature-icon {
  background: rgba(255,255,255,0.08);
  color: var(--c-accent-soft);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.375rem;
  margin: 0;
  line-height: 1.25;
}
.feature-desc {
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.section-dark .feature-desc, .section-ink .feature-desc {
  color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------------
   10. TESTIMONIALS
   ------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.testimonial {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  margin: 0;
  background: var(--c-paper);
  border-radius: var(--r-sm);
}
.section-dark .testimonial, .section-ink .testimonial {
  background: rgba(255,255,255,0.04);
}
.testimonial::before {
  content: '“';
  position: absolute;
  left: var(--sp-4); top: var(--sp-2);
  font-family: var(--ff-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--c-accent);
  opacity: 0.6;
}
.testimonial blockquote {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  line-height: 1.5;
  font-style: normal;
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
  font-family: var(--ff-serif);
  font-weight: 400;
}
.section-dark .testimonial blockquote, .section-ink .testimonial blockquote { color: #fff; }
.testimonial figcaption {
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  color: var(--c-text-muted);
}
.testimonial figcaption strong {
  display: block;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 2px;
}
.section-dark .testimonial figcaption strong, .section-ink .testimonial figcaption strong { color: #fff; }

/* -------------------------------------------------------------------
   11. FAQ
   ------------------------------------------------------------------- */
.faq-list { display: grid; gap: var(--sp-2); }
.faq-item {
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-5) 0;
}
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--c-ink);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-4);
  transition: color var(--t-base);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-accent);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.faq-item[open] > summary { color: var(--c-accent); }
.faq-item[open] > summary::after { content: '−'; }
.faq-item > summary:hover { color: var(--c-accent); }
.faq-answer {
  padding-top: var(--sp-4);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
  font-size: 0.9375rem;
}
.faq-answer p { margin: 0 0 0.8em; }
.faq-answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------
   12. FILTER CHIPS
   ------------------------------------------------------------------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-10);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-5) 0;
}
.filter-chip {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background var(--t-base), color var(--t-base), border var(--t-base);
}
.filter-chip:hover { color: var(--c-ink); }
.filter-chip.is-active {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}

/* -------------------------------------------------------------------
   13. ARTICLE GRID (tour show + destination show pages)
   ------------------------------------------------------------------- */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(2rem, 2vw + 1rem, 6rem);
}
@media (max-width: 1000px) {
  .article-grid { grid-template-columns: 1fr; }
}
.article-main > * + * { margin-top: var(--sp-8); }
.article-main h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  margin-top: var(--sp-12);
  letter-spacing: var(--ls-tight);
}
.article-main h2:first-child { margin-top: 0; }
.lead-paragraph {
  font-family: var(--ff-serif);
  font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.375rem);
  line-height: 1.5;
  font-style: normal;
  color: var(--c-text);
  margin: 0;
}
.bullet-list { padding-left: 1.1em; }
.bullet-list li {
  position: relative;
  padding-left: 0.5em;
  margin-bottom: 0.7em;
  line-height: 1.55;
  list-style: none;
}
.bullet-list li::before {
  content: '';
  position: absolute;
  left: -1em; top: 0.55em;
  width: 0.5em; height: 1px;
  background: var(--c-accent);
}

/* Aside booking panel */
.article-aside {
  position: sticky;
  top: 96px;
  align-self: start;
}
.enquiry-box {
  background: var(--c-brown-deep);
  color: var(--c-text-inverse);
  padding: var(--sp-8);
  border-radius: var(--r-sm);
}
.enquiry-box h3 {
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 var(--sp-3);
  letter-spacing: var(--ls-tight);
}
.enquiry-box p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 var(--sp-5);
  font-size: 0.9375rem;
}
.enquiry-box hr { border-top-color: rgba(255,255,255,0.15); margin: var(--sp-6) 0; }
.enquiry-box .btn { width: 100%; margin-bottom: var(--sp-3); }
.enquiry-box .btn:last-of-type { margin-bottom: 0; }
.enquiry-box .small-muted { color: rgba(255,255,255,0.6); font-size: 0.75rem; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: var(--sp-2) 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { color: rgba(255,255,255,0.92); }
.contact-list a:hover { color: var(--c-accent-soft); }

/* Itinerary list (day-by-day) */
.itinerary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: day;
}
.itinerary-day {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--c-line);
}
.itinerary-day:first-child { border-top: 0; padding-top: 0; }
.itinerary-day-num {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
  padding-top: 0.3em;
}
.itinerary-day-num::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--c-accent);
  vertical-align: middle;
  margin-right: 0.5em;
}
.itinerary-day h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.375rem;
  margin: 0 0 var(--sp-3);
  letter-spacing: var(--ls-tight);
}
.itinerary-day p {
  margin: 0 0 var(--sp-3);
  color: var(--c-text-muted);
  line-height: 1.6;
  font-size: 0.9375rem;
}
.itinerary-accom {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-text-muted);
  padding: 0.35em 0.85em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
}
.itinerary-accom strong { color: var(--c-ink); font-weight: 700; }
@media (max-width: 700px) {
  .itinerary-day { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* -------------------------------------------------------------------
   14. GALLERY
   ------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px;
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
}
.gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-sand);
  cursor: zoom-in;
}
.gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-smooth), opacity var(--t-base);
}
.gallery-tile:hover img { transform: scale(1.06); }
.gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-size: 0.8125rem;
  opacity: 0;
  transition: opacity var(--t-base);
}
.gallery-tile:hover .gallery-caption { opacity: 1; }

/* -------------------------------------------------------------------
   15. CONTACT / FORMS
   ------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 2vw + 1rem, 5rem);
}
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; } }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.contact-form, .quote-wizard {
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}
.contact-form label, .quote-step label {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
}
.contact-form input, .contact-form select, .contact-form textarea,
.quote-step input, .quote-step select, .quote-step textarea {
  padding: 0.9rem 1rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus,
.quote-step input:focus, .quote-step select:focus, .quote-step textarea:focus {
  outline: 0;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-pale);
}
.contact-form textarea, .quote-step textarea { resize: vertical; min-height: 120px; }
.required { color: var(--c-accent); margin-left: 2px; }

.contact-aside h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  margin: 0 0 var(--sp-4);
  font-size: 1.5rem;
}
.contact-aside ul { list-style: none; padding: 0; margin: 0; }
.contact-aside li { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.contact-aside li:last-child { border-bottom: 0; }
.contact-aside strong {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-1);
}

/* -------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-text-inverse);
  padding: var(--sp-20) 0 var(--sp-8);
  margin-top: 0;
}
.footer-inner { padding: 0 var(--w-edge); max-width: var(--w-wide); margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 2vw + 1rem, 4rem);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-10); } }
.footer-logo { height: 64px; width: auto; margin-bottom: var(--sp-4); border-radius: var(--r-sm); }
.footer-tagline {
  font-family: var(--ff-serif);
  font-style: normal;
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.78);
  margin: 0 0 var(--sp-5);
  line-height: 1.5;
}
.footer-heading {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--sp-5);
}
.footer-links, .footer-social, .footer-contact {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.footer-social { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
.footer-links a, .footer-social a, .footer-contact a {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
  transition: color var(--t-base);
}
.footer-links a:hover, .footer-social a:hover, .footer-contact a:hover { color: var(--c-accent-soft); }
.footer-contact li { font-size: 0.9375rem; line-height: 1.55; color: rgba(255,255,255,0.85); }
.footer-bottom {
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-6);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: var(--ls-loose);
}
.footer-bottom a { color: rgba(255,255,255,0.7); }
.footer-bottom a:hover { color: var(--c-accent-soft); }

/* Footer newsletter */
.footer-newsletter form { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.footer-newsletter input {
  flex: 1;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 0.875rem;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,0.4); }
.footer-newsletter input:focus { outline: 0; border-color: var(--c-accent-soft); background: rgba(255,255,255,0.10); }
.footer-newsletter button {
  background: var(--c-accent);
  color: #fff;
  border: 0;
  padding: 0.85rem 1.25rem;
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-base);
}
.footer-newsletter button:hover { background: var(--c-accent-hover); }
.footer-newsletter .msg { margin-top: var(--sp-2); font-size: 0.8125rem; min-height: 1.2em; }
.footer-newsletter .msg.ok  { color: #b2e7c8; }
.footer-newsletter .msg.err { color: #f0b2b2; }

/* -------------------------------------------------------------------
   17. WHATSAPP FLOATING
   ------------------------------------------------------------------- */
.whatsapp-floating {
  position: fixed;
  right: var(--sp-5); bottom: var(--sp-5);
  z-index: 50;
  width: 56px; height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
  transition: transform var(--t-base) var(--ease-smooth);
}
.whatsapp-floating:hover { transform: scale(1.08); color: #fff; }
.whatsapp-floating svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 480px) { .whatsapp-floating { width: 50px; height: 50px; } }

/* -------------------------------------------------------------------
   18. SECTION CTA (full-bleed call-to-action banners)
   ------------------------------------------------------------------- */
.section-cta-large {
  padding-block: var(--section-y-large);
  position: relative;
  text-align: center;
  background: var(--c-brown-deep);
  color: #fff;
  overflow: hidden;
}
.section-cta-large h2 { color: #fff; max-width: 22ch; margin: 0 auto var(--sp-4); }
.section-cta-large p  { color: rgba(255,255,255,0.85); max-width: 50ch; margin: 0 auto var(--sp-8); font-size: 1.0625rem; line-height: 1.5; }
.section-cta-large.has-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--cta-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  filter: saturate(0.9);
  z-index: 0;
}
.section-cta-large.has-bg .container { position: relative; z-index: 1; }

/* -------------------------------------------------------------------
   19. SEARCH POPOVER
   ------------------------------------------------------------------- */
.search-popover {
  position: fixed; inset: 0;
  background: rgba(26, 16, 6, 0.84);
  backdrop-filter: blur(10px);
  z-index: var(--z-modal);
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 18vh;
}
.search-popover.open { display: flex; }
.search-popover form {
  background: var(--c-cream);
  width: min(640px, calc(100vw - 32px));
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xl);
}
.search-popover input[type="search"] {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 500;
}
.search-popover input[type="search"]:focus { outline: 0; border-color: var(--c-accent); }
.search-popover-meta {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-3);
  font-size: 0.75rem;
  letter-spacing: var(--ls-loose);
  color: var(--c-text-muted);
}
.search-popover kbd {
  background: var(--c-sand);
  padding: 0.15em 0.5em;
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: 0.75rem;
}

/* -------------------------------------------------------------------
   20. FLASH MESSAGES
   ------------------------------------------------------------------- */
.flash-container { max-width: var(--w-default); margin: var(--sp-4) auto 0; padding: 0 var(--w-edge); }
.flash {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  border-left: 3px solid;
  font-size: 0.9375rem;
  font-weight: 400;
}
.flash-success { background: #e7f4ea; color: #1f5e3a; border-color: #2e8b57; }
.flash-error   { background: #fbe9e9; color: #8a2020; border-color: #c0392b; }
.flash-info    { background: #e8eef8; color: #1f3f6e; border-color: #2e6db5; }
.flash-warning { background: #fbf0e0; color: #8a5318; border-color: #c46a12; }

/* -------------------------------------------------------------------
   21. ANIMATIONS / SCROLL-DRIVEN REVEALS
   ------------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slower) var(--ease-smooth), transform var(--t-slower) var(--ease-smooth);
  will-change: opacity, transform;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: 0.08s; }
.fade-up.delay-2 { transition-delay: 0.16s; }
.fade-up.delay-3 { transition-delay: 0.24s; }

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

/* -------------------------------------------------------------------
   22. UTILITIES
   ------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted  { color: var(--c-text-muted); }
.text-accent { color: var(--c-accent); }
.text-white  { color: #fff; }
.uppercase   { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.italic      { font-style: italic; }
.serif       { font-family: var(--ff-serif); }
.display     { font-family: var(--ff-display); }
.no-margin   { margin: 0 !important; }
.empty-state { padding: var(--sp-16) var(--sp-4); text-align: center; color: var(--c-text-muted); font-size: 1.0625rem; font-style: normal; font-family: var(--ff-serif); }

/* -------------------------------------------------------------------
   23. RESPONSIVE — header collapse to mobile drawer
   ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav-links { gap: 1rem; }
  .nav-links > li > a { font-size: 0.7rem; }
}

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .header-utils { order: 3; }
  .site-header nav { flex: 0 0 auto; }
  .nav-links {
    display: none;
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--c-cream);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-8) var(--w-edge) var(--sp-12);
    overflow-y: auto;
    gap: 0;
    z-index: 90;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { width: 100%; border-bottom: 1px solid var(--c-line); }
  .nav-links > li:last-child { border-bottom: 0; }
  .nav-links > li > a {
    display: block;
    padding: var(--sp-4) 0;
    font-family: var(--ff-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  .nav-links > li > a::after { display: none; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0 0 var(--sp-3) var(--sp-4);
    margin: 0;
    min-width: auto;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu li a {
    font-family: var(--ff-body);
    font-size: 0.8125rem;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-text-muted);
    padding: 0.5rem 0;
  }
  .nav-dropdown-menu li a:hover { background: transparent; color: var(--c-accent); }
}

@media (max-width: 640px) {
  .header-inner { gap: 0.75rem; padding: var(--sp-3) var(--w-edge); min-height: 64px; }
  .logo { height: 40px; }
  .site-header.is-scrolled .logo { height: 36px; }
  .currency-switcher { font-size: 0.625rem; padding: 0.35rem 0.65rem; }
  .nav-links { inset: 64px 0 0 0; }
}

/* -------------------------------------------------------------------
   24. MISC — overrides for sections that need polish
   ------------------------------------------------------------------- */
.feature-card { /* page builder alias for feature-item */ }
.feature-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-5); }
.feature-card h4 { font-family: var(--ff-display); font-weight: 500; margin: var(--sp-3) 0 var(--sp-1); font-size: 1.0625rem; }
.feature-card p  { color: var(--c-text-muted); font-size: 0.875rem; margin: 0; }

/* Compare floating pill */
#compare-pill {
  position: fixed; left: var(--sp-5); bottom: var(--sp-5); z-index: 50;
  background: var(--c-ink);
  color: #fff !important;
  padding: 0.85rem 1.4rem;
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sh-lg);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
#compare-pill #compare-count {
  background: var(--c-accent);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
}

/* Quill wrapper (admin only, just in case it leaks) */
.section-cta { margin-top: var(--sp-12); }

/* Print niceties */
@media print {
  .site-header, .site-footer, .whatsapp-floating, #compare-pill { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 2rem; }
}

/* ===================================================================
   v2.0 EXTENSIONS — added during editorial redesign rollout
   Aliases for renamed classes + new editorial components.
   =================================================================== */

/* ---- Aliases for renamed classes ---- */
.section-header { max-width: var(--w-narrow); margin: 0 0 var(--sp-10); }
.section-header.center, .section-header { } /* keep selector */
.section-header .section-title { margin-bottom: var(--sp-4);
  font-weight: var(--fw-heading);
}
.section-header .section-desc {
  font-family: var(--ff-serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  font-style: normal;
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}
.section-title { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.875rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--c-ink); }
.section-cta { margin-top: var(--sp-12); text-align: center; }

.section-alt { background: var(--c-cream); }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); align-items: center; }
.hero-cta .btn { margin-bottom: 0; }

.page-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 1rem + 1.5vw, 3rem);
  margin-top: var(--sp-6);
  color: #fff;
}
.page-hero-facts .fact { display: flex; flex-direction: column; gap: 4px; }
.page-hero-facts .fact-label {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.page-hero-facts .fact-value {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
}
.page-hero-facts .fact-value a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Header redesign — alongside legacy .nav-links keep .nav-list usable */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand-mark {
  height: 60px;
  width: auto;
  max-width: 240px;
  display: block;
  object-fit: contain;
  transition: height var(--t-base);
}
.site-header[data-scrolled="true"] .brand-mark { height: 56px; }
@media (max-width: 920px) { .brand-mark { height: 60px; } .site-header[data-scrolled="true"] .brand-mark { height: 48px; } }
@media (max-width: 640px) { .brand-mark { height: 52px; } .site-header[data-scrolled="true"] .brand-mark { height: 44px; } }

.primary-nav { display: flex; align-items: center; flex: 1; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.nav-list > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ff-body); font-size: 0.75rem; font-weight: 500;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--c-ink); text-decoration: none;
  position: relative; padding: 4px 0; transition: color var(--t-base);
}
.nav-list > li > a:hover, .nav-list > li > a[aria-current="page"] { color: var(--c-accent); }
.nav-list > li > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-base);
}
.nav-list > li > a:hover::after, .nav-list > li > a[aria-current="page"]::after { transform: scaleX(1); }

.has-submenu { position: relative; }
.has-submenu > a svg { transition: transform var(--t-base); }
.has-submenu:hover > a svg, .has-submenu.open > a svg { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: var(--sp-3); margin: 0;
  list-style: none; min-width: 220px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: 80;
}
.has-submenu:hover .submenu, .has-submenu.open .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.submenu li a {
  display: block; padding: 8px 12px; border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 0.8125rem; color: var(--c-text);
  text-decoration: none; transition: background var(--t-base), color var(--t-base);
}
.submenu li a:hover { background: var(--c-cream); color: var(--c-accent); }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: transparent;
  border: 1px solid transparent; color: var(--c-ink); cursor: pointer;
  transition: all var(--t-base);
}
.icon-btn:hover { background: var(--c-cream); border-color: var(--c-line); color: var(--c-accent); }
.chip-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border: 1px solid var(--c-line); border-radius: 999px;
  background: transparent; cursor: pointer;
  font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--ls-wide); color: var(--c-ink);
  transition: all var(--t-base);
}
.chip-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); list-style: none; padding: 6px; margin: 0;
  min-width: 140px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: 80;
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li a {
  display: block; padding: 7px 12px; border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 0.8125rem; color: var(--c-text);
  text-decoration: none;
}
.dropdown-menu li a.is-current { background: var(--c-cream); font-weight: 600; color: var(--c-ink); }
.dropdown-menu li a:hover { background: var(--c-cream); color: var(--c-accent); }

.header-cta { margin-left: var(--sp-2); }
@media (max-width: 1024px) { .header-cta { display: none; } }

.site-header[data-scrolled="true"] {
  background: rgba(255,253,250,0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
/* logo scroll-state is set above (.brand-mark) */

@media (max-width: 920px) {
  .primary-nav { position: static; }
  .nav-toggle { display: inline-flex !important; flex-direction: column; gap: 4px; width: 38px; height: 38px; background: transparent; border: 1px solid var(--c-line); border-radius: 8px; padding: 0; align-items: center; justify-content: center; cursor: pointer; }
  .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--c-ink); transition: all var(--t-base); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .primary-nav { order: 99; flex: 0 0 auto; }
  .nav-list {
    display: none;
    position: fixed; inset: 72px 0 0 0;
    background: #fff; flex-direction: column; align-items: flex-start;
    padding: var(--sp-6) var(--w-edge) var(--sp-12); overflow-y: auto;
    gap: 0; z-index: 90;
  }
  .nav-list.open { display: flex; }
  .nav-list > li { width: 100%; border-bottom: 1px solid var(--c-line); }
  .nav-list > li > a { display: block; padding: var(--sp-4) 0; font-size: 1rem; }
  .nav-list > li > a::after { display: none; }
  .submenu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; background: transparent; padding: 0 0 var(--sp-3) var(--sp-4); min-width: auto; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 921px) { .nav-toggle { display: none !important; } }

/* Search popover refinement */
.search-popover {
  position: fixed; inset: 0; background: rgba(15,11,5,0.88);
  backdrop-filter: blur(10px);
  z-index: 250; display: none;
  align-items: flex-start; justify-content: center; padding-top: 18vh;
}
.search-popover.open { display: flex; }
.search-popover form {
  background: #fff; border-radius: var(--r-lg);
  padding: var(--sp-6); width: min(640px, calc(100vw - 32px));
  box-shadow: 0 32px 96px rgba(0,0,0,0.4);
}
.search-popover label.eyebrow { display: block; margin-bottom: var(--sp-3); color: var(--c-accent); }
.search-popover input[type="search"] {
  width: 100%; padding: var(--sp-3) 0; font-size: 1.5rem;
  border: 0; border-bottom: 1px solid var(--c-line);
  font-family: var(--ff-display); color: var(--c-ink); background: transparent;
}
.search-popover input[type="search"]:focus { outline: 0; border-bottom-color: var(--c-accent); }
.search-popover .search-meta {
  display: flex; justify-content: space-between; margin-top: var(--sp-4);
  font-size: 0.75rem; color: var(--c-text-muted); letter-spacing: var(--ls-wide);
}
.search-popover .search-meta kbd {
  background: var(--c-cream); padding: 2px 8px; border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 0.6875rem; border: 1px solid var(--c-line);
}
body.no-scroll { overflow: hidden; }

/* ---- New: Intro block ---- */
.section-intro {
  background: var(--c-paper);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.intro-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 800px) { .intro-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.intro-left .eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-4);
  color: var(--c-accent);
}
.intro-statement {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.intro-paragraph {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.75;
  color: var(--c-text);
  margin: 0 0 var(--sp-5);
  max-width: 60ch;
}
.intro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

/* ---- Cards refined ---- */
.card-grid { display: grid; gap: clamp(1.5rem, 0.75rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card-grid-wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.card-image-link { display: block; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; position: relative; }
.card-image-link:hover .card-image img { transform: scale(1.06); }
.card-meta-pill {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: rgba(255,255,255,0.95); color: var(--c-ink);
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  backdrop-filter: blur(4px); z-index: 2;
}
.card-title a { color: inherit; text-decoration: none; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.card-price { display: inline-flex; flex-direction: column; gap: 2px; }
.card-price-label { font-family: var(--ff-body); font-size: 0.6875rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-muted); }
.card-price > span:not(.card-price-label):not(.card-price-note) { font-family: var(--ff-display); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.card-price-note { font-size: 0.6875rem; color: var(--c-text-muted); }
.card-actions { display: inline-flex; gap: var(--sp-2); }
.compare-checkbox {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3);
  font-size: 0.75rem; color: var(--c-text-muted); cursor: pointer;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.compare-checkbox input { accent-color: var(--c-accent); }

.card-detailed { /* uses standard card styling */ }
.result-count { font-family: var(--ff-serif); font-style: normal; color: var(--c-text-muted); margin: 0 0 var(--sp-6); font-size: 1rem; }

/* ---- Destinations refined ---- */
.destinations-grid { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.destinations-grid-large { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.destination-tile {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-lg);
  text-decoration: none; color: inherit; aspect-ratio: 3/2;
  isolation: isolate;
}
.destination-tile .destination-image { position: absolute; inset: 0; z-index: 0; }
.destination-tile .destination-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms ease;
}
.destination-tile::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%);
}
.destination-tile:hover .destination-image img { transform: scale(1.06); }
.destination-tile .destination-body {
  position: relative; z-index: 2;
  padding: var(--sp-6); color: #fff;
  display: flex; flex-direction: column; gap: var(--sp-2);
  height: 100%; justify-content: flex-end;
}
.destination-tile .destination-body h3 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);
  color: #fff; margin: 0 0 var(--sp-2); letter-spacing: -0.01em; line-height: 1.05;
}
.destination-tile .destination-body p {
  font-family: var(--ff-serif); font-style: normal; font-size: 1.125rem;
  color: rgba(255,255,255,0.92); margin: 0; line-height: 1.45;
  max-width: 34ch;
}
.destination-tile .destination-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-3);
  font-family: var(--ff-body); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  align-self: flex-start;
  transition: gap var(--t-base), border-color var(--t-base);
}
.destination-tile:hover .destination-cta { gap: 12px; border-bottom-color: #fff; }
.destination-tile-large { aspect-ratio: 4/3; }
.destination-tile-wide { grid-column: span 2; aspect-ratio: 16/9; }
@media (max-width: 800px) { .destination-tile-wide { grid-column: span 1; aspect-ratio: 4/3; } }

/* ---- Big quote ---- */
.section-quote { padding-block: clamp(2rem, 1.25rem + 2vw, 3.5rem); background: var(--c-paper); }
.big-quote {
  max-width: 880px; margin: 0 auto; text-align: center; position: relative; padding: 0 var(--sp-4);
}
.big-quote .quote-mark {
  font-family: var(--ff-display); font-style: normal;
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  line-height: 0.6; color: var(--c-accent); opacity: 0.35;
  display: block; margin-bottom: var(--sp-2);
  pointer-events: none;
}
.big-quote blockquote {
  font-family: var(--ff-display); font-style: normal; font-weight: 400;
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  line-height: 1.45; color: var(--c-ink);
  margin: 0; letter-spacing: -0.005em;
}
.big-quote figcaption {
  margin-top: var(--sp-5);
  font-family: var(--ff-body); font-size: 0.8125rem; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--c-text-muted);
}

/* ---- Journal cards ---- */
.section-destinations { padding-block: clamp(2rem, 1.25rem + 2vw, 3.5rem); }
.journal-grid { display: grid; gap: clamp(1.5rem, 0.75rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.journal-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.journal-image-link { display: block; overflow: hidden; border-radius: var(--r-md); }
.journal-image { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.journal-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms ease;
}
.journal-image-link:hover img { transform: scale(1.06); }
.journal-date {
  font-family: var(--ff-body); font-size: 0.7rem; letter-spacing: var(--ls-wider);
  text-transform: uppercase; color: var(--c-text-muted);
}
.journal-card h3 {
  font-family: var(--ff-display); font-weight: 600; font-size: 1.375rem;
  line-height: 1.25; margin: 0; letter-spacing: -0.005em;
}
.journal-card h3 a { color: inherit; text-decoration: none; }
.journal-card h3 a:hover { color: var(--c-accent); }
.journal-card p { font-family: var(--ff-serif); font-size: 1rem; line-height: 1.55; color: var(--c-text-muted); margin: 0; }

/* ---- FAQ — modern two-column editorial layout ---- */
.section-faq { padding-block: clamp(2rem, 1.25rem + 2vw, 3.5rem); }
.faq-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: start;
}
@media (max-width: 800px) { .faq-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

.faq-side { position: sticky; top: 96px; }
@media (max-width: 800px) { .faq-side { position: static; } }
.faq-side .eyebrow { display: inline-block; margin-bottom: var(--sp-3); color: var(--c-accent); }
.faq-heading {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4); color: var(--c-ink);
  max-width: 14ch; text-wrap: balance;
}
.faq-side-text {
  font-family: var(--ff-body); font-size: 1rem;
  line-height: 1.6; color: var(--c-text-muted);
  margin: 0 0 var(--sp-5); max-width: 32ch;
}

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--c-line); }
.faq-item:last-child { border-bottom: 1px solid var(--c-line); }
.faq-item > .faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: var(--sp-4) 0;
  background: transparent; border: 0;
  text-align: left; cursor: pointer; color: var(--c-ink);
  font-family: var(--ff-display); font-weight: 600; font-size: 1.375rem;
  line-height: 1.3; letter-spacing: -0.005em;
  transition: color var(--t-base);
}
.faq-item > .faq-q:hover { color: var(--c-accent); }
.faq-item > .faq-q .faq-icon {
  position: relative; width: 18px; height: 18px; flex-shrink: 0;
  border: 1px solid var(--c-line-strong); border-radius: 50%;
  transition: all var(--t-base);
}
.faq-item > .faq-q .faq-icon::before,
.faq-item > .faq-q .faq-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 1.4px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform var(--t-base);
}
.faq-item > .faq-q .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open > .faq-q .faq-icon { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.faq-item.open > .faq-q .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq-item.open > .faq-q { color: var(--c-accent); }
.faq-item > .faq-a {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 350ms ease, opacity 250ms ease, padding 250ms ease;
  font-family: var(--ff-body); color: var(--c-text-muted);
  line-height: 1.65; font-size: 1rem;
}
.faq-item.open > .faq-a { max-height: 1200px; opacity: 1; padding: 0 0 var(--sp-4); }
.faq-item > .faq-a p { margin: 0 0 0.7em; }
.faq-item > .faq-a p:last-child { margin-bottom: 0; }

/* ---- Big CTA section ---- */
.section-cta-large {
  position: relative; padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem);
  color: #fff; text-align: center;
  isolation: isolate; overflow: hidden;
}
.section-cta-large .cta-large-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
    url('../img/sirikoi-lewa.jpg') center/cover no-repeat;
}
.section-cta-large .cta-large-content { position: relative; z-index: 1; }
.section-cta-large .display { color: #fff; font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); line-height: 1.1; margin: var(--sp-3) 0 var(--sp-5); }
.section-cta-large .lead { color: rgba(255,255,255,0.92); max-width: 56ch; margin: 0 auto; }
.section-cta-large .eyebrow { color: var(--c-accent-soft); }
.section-cta-large .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.section-cta-large .btn-ghost:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

.section-cta-strip { padding-block: clamp(2rem, 1.25rem + 2vw, 3.5rem); background: var(--c-cream); text-align: center; }
.section-cta-strip .eyebrow { display: inline-block; margin-bottom: var(--sp-3); }
.section-cta-strip .section-title { margin-bottom: var(--sp-3); }
.section-cta-strip .section-desc { max-width: 50ch; margin: 0 auto var(--sp-6); }

/* ---- Tour detail page ---- */
.section-tour-detail { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.tour-section { margin-top: var(--sp-10); }
.tour-section .eyebrow { display: block; margin-bottom: var(--sp-3); }
.tour-section h2 {
  font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  margin: 0 0 var(--sp-6); line-height: 1.2; color: var(--c-ink); letter-spacing: -0.01em;
}
.highlight-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.highlight-list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-family: var(--ff-serif); font-size: 1.0625rem; line-height: 1.5;
  color: var(--c-text);
}
.highlight-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--c-accent); }
.highlight-list li strong { font-weight: 600; color: var(--c-ink); }

/* Itinerary day refinement */
.itinerary-day { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-line); }
.itinerary-day:last-child { border-bottom: 0; }
.itinerary-day-marker { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.itinerary-day-label { font-family: var(--ff-body); font-size: 0.625rem; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-text-muted); }
.itinerary-day-num { font-family: var(--ff-display); font-weight: 600; font-size: 2.25rem; line-height: 1; color: var(--c-accent); }
.itinerary-day-body h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.375rem; margin: 0 0 var(--sp-2); color: var(--c-ink); }
.itinerary-day-body p { font-family: var(--ff-serif); font-size: 1rem; line-height: var(--lh-relaxed); color: var(--c-text); margin: 0 0 var(--sp-2); }
.itinerary-day-body .itinerary-accom { display: inline-flex; align-items: flex-start; gap: 6px; background: var(--c-cream); padding: 8px 12px; border-radius: var(--r-sm); margin-top: var(--sp-2); font-family: var(--ff-body); font-size: 0.875rem; color: var(--c-text-muted); }
.itinerary-day-body .itinerary-accom svg { margin-top: 3px; color: var(--c-accent); }
.itinerary-day-body .itinerary-accom strong { color: var(--c-ink); font-weight: 600; }

/* Included / Not included */
.tour-section-included { background: var(--c-paper); padding: var(--sp-8); border-radius: var(--r-lg); border: 1px solid var(--c-line); }
.included-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
@media (max-width: 720px) { .included-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.included-col .eyebrow { display: block; margin-bottom: var(--sp-2); }
.eyebrow.eyebrow-green { color: #2e8b57; }
.eyebrow.eyebrow-muted { color: var(--c-text-muted); }
.included-col h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 var(--sp-3); color: var(--c-ink); }
.rich-text-sm { font-size: 0.9375rem; }
.rich-text-sm ul { list-style: none; padding: 0; margin: 0; }
.rich-text-sm li { padding: 4px 0; padding-left: 22px; position: relative; line-height: 1.5; }
.rich-text-sm li::before { content: '✓'; position: absolute; left: 0; color: #2e8b57; font-weight: 700; }

/* Tour-page hero facts colour reset in aside */
.article-aside .enquiry-box .eyebrow { display: block; margin-bottom: var(--sp-2); color: var(--c-accent-soft); }
.aside-direct { font-family: var(--ff-body); font-size: 0.6875rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 var(--sp-3); }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list-label { font-family: var(--ff-body); font-size: 0.625rem; letter-spacing: var(--ls-wider); text-transform: uppercase; color: rgba(255,255,255,0.55); }
.contact-list a { color: #fff; text-decoration: none; font-family: var(--ff-serif); font-size: 1rem; }
.contact-list a:hover { color: var(--c-accent-soft); }

/* ---- Contact form refined ---- */
.contact-form-wrapper { /* container only */ }
.contact-form .field { display: block; }
.contact-form .field-label {
  display: block; margin-bottom: 6px;
  font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-muted);
}
.contact-form .field-label em { color: var(--c-accent); font-style: normal; font-weight: 700; }
.contact-form input[name="website"] { position: absolute; left: -9999px; opacity: 0; }
.form-submit { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.form-submit .btn { align-self: flex-start; }
.form-submit .small-muted { margin: 0; font-size: 0.75rem; max-width: 50ch; }

/* Direct contact column */
.contact-aside .eyebrow { display: block; margin-bottom: var(--sp-2); color: var(--c-accent); }
.contact-aside h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.625rem; color: var(--c-ink); margin: 0 0 var(--sp-5); letter-spacing: -0.005em; }
.contact-direct { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-direct li { display: flex; align-items: flex-start; gap: var(--sp-3); border: 0; padding: 0; }
.contact-direct-icon {
  flex-shrink: 0; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-cream); color: var(--c-accent); border-radius: 50%;
}
.contact-direct-icon-wa { background: #25D366; color: #fff; }
.contact-direct-label { font-family: var(--ff-body); font-size: 0.625rem; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-text-muted); display: block; margin-bottom: 2px; }
.contact-direct li > div:last-child a { font-family: var(--ff-display); font-weight: 500; font-size: 1.0625rem; color: var(--c-ink); text-decoration: none; }
.contact-direct li > div:last-child a:hover { color: var(--c-accent); }
.contact-direct address { font-family: var(--ff-serif); font-size: 0.9375rem; color: var(--c-text); line-height: 1.5; }
.aside-promise {
  padding: var(--sp-4); background: var(--c-cream); border-radius: var(--r-md);
  font-family: var(--ff-serif); font-size: 0.9375rem; line-height: 1.5; color: var(--c-text);
}
.aside-promise strong { color: var(--c-ink); font-family: var(--ff-body); font-weight: 700; }

/* ---- Footer redesign ---- */
.site-footer { background: var(--c-brown-deep); color: rgba(255,255,255,0.78); padding: clamp(3rem, 2rem + 3vw, 5rem) 0 0; }
.footer-top {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
  padding-bottom: var(--sp-10);
}
@media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } .footer-newsletter { grid-column: span 3; } .footer-brand { grid-column: span 3; } }
@media (max-width: 700px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-newsletter, .footer-brand { grid-column: span 2; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } .footer-newsletter, .footer-brand { grid-column: span 1; } }

.footer-brand img { height: 56px; width: auto; max-width: 220px; object-fit: contain; display: block; margin-bottom: var(--sp-3); filter: brightness(0) invert(1) opacity(0.9); }
.footer-name { font-family: var(--ff-display); font-weight: 500; font-size: 1.25rem; color: #fff; margin: var(--sp-3) 0 var(--sp-2); letter-spacing: -0.005em; }
.footer-tagline { font-family: var(--ff-serif); font-style: normal; color: rgba(255,255,255,0.7); margin: 0 0 var(--sp-4); line-height: 1.55; max-width: 36ch; }

.footer-social { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-3); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: #fff;
  transition: all var(--t-base);
}
.footer-social a:hover { background: var(--c-accent); transform: translateY(-2px); }

.footer-col h4 {
  font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: #fff;
  margin: 0 0 var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col li a { color: rgba(255,255,255,0.7); text-decoration: none; font-family: var(--ff-serif); font-size: 0.9375rem; transition: color var(--t-base); }
.footer-col li a:hover { color: var(--c-accent-soft); }

.footer-newsletter p { font-family: var(--ff-serif); font-size: 0.9375rem; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0 0 var(--sp-3); }
.footer-newsletter .newsletter-row { display: flex; gap: 8px; align-items: stretch; }
.footer-newsletter input[type="email"] {
  flex: 1; min-width: 0;
  padding: 11px 14px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05); color: #fff; border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 0.875rem;
}
.footer-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.footer-newsletter input[type="email"]:focus { outline: 0; border-color: var(--c-accent); }
.footer-newsletter input[name="website"] { position: absolute; left: -9999px; opacity: 0; }
.footer-newsletter button {
  width: 44px; height: 44px; padding: 0; flex-shrink: 0; background: var(--c-accent); color: #fff;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-base);
}
.footer-newsletter button:hover { background: var(--c-accent-hover); }
.footer-newsletter .msg { margin-top: var(--sp-2); font-size: 0.8125rem; min-height: 18px; }
.footer-newsletter .msg.ok { color: #b2e7c8; }
.footer-newsletter .msg.err { color: #ecc1c1; }

/* Card grids: collapse to one column on small phones so wide-min tracks never overflow the viewport */
@media (max-width: 480px) {
  .card-grid, .card-grid-wide, .destinations-grid, .destinations-grid-large { grid-template-columns: 1fr; }
}

/* Optional lead photo inside the article-text builder section */
.page-article-main .article-figure { margin: 0 0 1.5rem; }
.page-article-main .article-figure img { width: 100%; height: auto; display: block; border-radius: 10px; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) 0; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--ff-body); font-size: 0.75rem; color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}
.footer-meta { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-meta a { color: rgba(255,255,255,0.55); text-decoration: none; }
.footer-meta a:hover { color: var(--c-accent-soft); }

/* WhatsApp float refined */
.whatsapp-floating {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 60;
  display: inline-flex; align-items: center; gap: 6px;
  background: #25D366; color: #fff;
  padding: 14px 18px; border-radius: 999px;
  text-decoration: none; box-shadow: var(--sh-lg);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.whatsapp-floating:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(37,211,102,0.4); }
.whatsapp-floating .wa-label { font-family: var(--ff-body); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; }
@media (max-width: 480px) { .whatsapp-floating .wa-label { display: none; } .whatsapp-floating { padding: 14px; } }

/* Compare pill alongside legacy #compare-pill */
.compare-pill {
  position: fixed; left: var(--sp-5); bottom: var(--sp-5); z-index: 50;
  background: var(--c-ink); color: #fff !important;
  padding: 12px 20px; border-radius: 999px;
  font-family: var(--ff-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  text-decoration: none; box-shadow: var(--sh-lg);
  display: inline-flex; align-items: center; gap: 8px;
}
.compare-pill[hidden] { display: none; }
.compare-pill #compare-count {
  background: var(--c-accent); padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem;
}

/* ---- Testimonial stars ---- */
.testimonial-stars { display: inline-flex; gap: 2px; color: var(--c-accent); margin-bottom: var(--sp-2); }

/* ---- Empty state polish ---- */
.empty-state {
  padding: var(--sp-12) var(--sp-4); text-align: center;
  background: var(--c-paper); border-radius: var(--r-lg); border: 1px dashed var(--c-line);
}
.empty-state h3 { font-family: var(--ff-display); font-weight: 500; font-size: 1.5rem; color: var(--c-ink); margin: 0 0 var(--sp-2); }
.empty-state p { font-family: var(--ff-serif); color: var(--c-text-muted); margin: 0; max-width: 50ch; margin-inline: auto; }

/* End v2.0 extensions */

/* ---- Search results extras ---- */
.hero-search-form { display: flex; gap: var(--sp-2); max-width: 540px; margin-top: var(--sp-5); }
.hero-search-form input[type="search"] {
  flex: 1; padding: 14px 18px; border-radius: var(--r-sm);
  border: 0; background: rgba(255,255,255,0.95);
  font-family: var(--ff-display); font-size: 1rem; color: var(--c-ink);
}
.hero-search-form input[type="search"]:focus { outline: 2px solid var(--c-accent); }
.hero-search-form .btn { white-space: nowrap; }
.search-group { margin-bottom: var(--sp-12); }
.search-group .eyebrow { display: block; margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.page-result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.page-result-list li a {
  display: block; padding: var(--sp-4) var(--sp-5);
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md);
  text-decoration: none; color: var(--c-text);
  transition: all var(--t-base);
}
.page-result-list li a:hover { border-color: var(--c-accent); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.page-result-list li strong { display: block; font-family: var(--ff-display); font-weight: 500; font-size: 1.125rem; color: var(--c-ink); margin-bottom: 4px; }
.page-result-list li span { font-family: var(--ff-serif); color: var(--c-text-muted); font-size: 0.9375rem; }

/* ---- Hero trust strip ---- */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  list-style: none; padding: 0; margin: var(--sp-3) 0 0;
}
.hero-trust li {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-body); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.02em; color: rgba(255,255,255,0.95);
}
.hero-trust li svg { color: var(--c-accent); flex-shrink: 0; }
@media (max-width: 480px) { .hero-trust { gap: var(--sp-3); } .hero-trust li { font-size: 0.75rem; } }

/* ---- Fix compare pill hiding when count is 0 ---- */
.compare-pill[hidden],
#compare-pill[hidden] { display: none !important; }

/* ===================================================================
   HEADER UPGRADE — announcement bar, mega submenus, mobile drawer
   =================================================================== */

/* ---- Announcement bar (now with lang/currency on the right) ---- */
.announcement-bar {
  background: var(--c-brown-deep);
  color: rgba(255,255,255,0.88);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 5px 0;
  position: relative;
  z-index: 110;
  min-height: 34px;
}
.announcement-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: nowrap;
  min-height: 24px;
}
.announcement-left {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  flex: 1; min-width: 0; overflow: hidden;
}
.announcement-right {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  flex-shrink: 0;
}
.announcement-item {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.announcement-item svg { opacity: 0.7; }
.announcement-link { color: inherit; text-decoration: none; transition: color var(--t-base); }
.announcement-link:hover { color: var(--c-accent-soft); }
.announcement-sep { opacity: 0.4; }

/* Inline lang/currency chips in the dark bar */
.announcement-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: transparent; border: 0;
  cursor: pointer;
  font-family: var(--ff-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--r-sm);
  transition: background var(--t-base), color var(--t-base);
}
.announcement-chip:hover { background: rgba(255,255,255,0.1); color: #fff; }
.announcement-chip .chip-flag { font-size: 0.95em; line-height: 1; }
.announcement-chip .chip-symbol { font-family: var(--ff-display); font-weight: 700; font-size: 0.8rem; color: var(--c-accent-soft); line-height: 1; }
.announcement-chip svg { opacity: 0.7; }
.announcement-dropdown { position: relative; }
.announcement-dropdown .dropdown-menu {
  top: calc(100% + 8px); right: 0; left: auto;
  min-width: 200px;
  /* Light theme dropdown over the dark bar */
  background: #fff; color: var(--c-text);
}

@media (max-width: 1000px) {
  .announcement-hide-md { display: none !important; }
}
@media (max-width: 720px) {
  .announcement-hide-sm { display: none !important; }
  .announcement-bar { font-size: 0.7rem; }
  .announcement-chip { padding: 2px 6px; font-size: 0.68rem; }
  .announcement-chip .chip-label { display: none; }
}
@media (max-width: 480px) {
  .announcement-left .announcement-item:not(:first-child),
  .announcement-left .announcement-sep { display: none; }
}

/* ---- Header inner refinements ---- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,253,250,0.98); backdrop-filter: blur(8px); transition: background var(--t-base), box-shadow var(--t-base); }
.header-inner { display: flex; align-items: center; gap: clamp(0.75rem, 0.25rem + 1.5vw, 2rem); padding: var(--sp-3) var(--w-edge); min-height: 80px; }
.site-header[data-scrolled="true"] { background: rgba(255,253,250,0.98); box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 20px -16px rgba(0,0,0,0.15); }
.header-actions { gap: var(--sp-2); }

/* ---- Primary nav refined ---- */
.primary-nav { display: flex; align-items: center; flex: 1; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: clamp(0.4rem, 0.1rem + 0.7vw, 1.15rem); }
.nav-list > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ff-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  color: var(--c-ink); text-decoration: none;
  position: relative; padding: 8px 0;
  transition: color var(--t-base);
}
.nav-list .submenu-caret { transition: transform var(--t-base); opacity: 0.7; }
.has-submenu:hover .submenu-caret, .has-submenu.open .submenu-caret { transform: rotate(180deg); }

/* ---- Mega submenu ---- */
.has-submenu { position: relative; }
/* Invisible bridge that extends the hover hit-area from the nav link down across the gap to the submenu, so cursor crossing doesn't lose :hover */
.has-submenu::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  width: 200px; height: 18px;
  display: none;
}
.has-submenu:hover::after,
.has-submenu.open::after,
.has-submenu:focus-within::after { display: block; }

.submenu {
  position: absolute; top: 100%; left: 50%;
  margin-top: 14px;
  transform: translateX(-50%) translateY(8px);
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  padding: var(--sp-4);
  width: max-content; max-width: 560px;
  min-width: 280px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 95;
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
}
.has-submenu:hover .submenu,
.has-submenu.open .submenu,
.has-submenu:focus-within .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.submenu::before {
  content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; background: #fff; rotate: 45deg;
  box-shadow: -1px -1px 0 rgba(0,0,0,0.04);
}
.submenu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.submenu-grid:has(.submenu-item:only-child) { grid-template-columns: 1fr; }
.submenu-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 14px; border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--c-text); text-decoration: none;
  transition: background var(--t-base), color var(--t-base);
}
.submenu-item svg { opacity: 0; transform: translateX(-4px); transition: all var(--t-base); color: var(--c-accent); }
.submenu-item:hover { background: var(--c-cream); color: var(--c-accent); }
.submenu-item:hover svg { opacity: 1; transform: translateX(0); }
.submenu-item-label { font-weight: 500; }
.submenu-feature {
  padding: var(--sp-4); background: var(--c-cream); border-radius: var(--r-md);
  border-left: 2px solid var(--c-accent);
}
.submenu-feature .eyebrow { color: var(--c-accent); display: block; margin-bottom: 6px; }
.submenu-feature p { font-family: var(--ff-body); font-size: 0.875rem; line-height: 1.5; color: var(--c-text); margin: 0 0 var(--sp-3); }

/* ---- Header actions polish ---- */
.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  color: var(--c-ink); cursor: pointer;
  transition: all var(--t-base);
}
.icon-btn:hover { background: var(--c-cream); border-color: var(--c-line); color: var(--c-accent); }

.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--c-line); border-radius: 999px;
  background: transparent; cursor: pointer;
  font-family: var(--ff-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--c-ink); text-transform: uppercase;
  transition: all var(--t-base);
  line-height: 1;
}
.chip-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.chip-flag { font-size: 0.95rem; line-height: 1; }
.chip-symbol { font-family: var(--ff-display); font-weight: 600; font-size: 0.85rem; line-height: 1; }
.chip-label { line-height: 1; }
@media (max-width: 1200px) {
  .chip-btn .chip-label { display: none; }
  .chip-btn { padding: 7px 10px; }
}

/* ---- Dropdown menus ---- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
  list-style: none; padding: 6px; margin: 0;
  min-width: 200px;
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: 90;
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.dropdown-menu li a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-family: var(--ff-body); font-size: 0.875rem; color: var(--c-text);
  text-decoration: none; cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
.dropdown-menu li a:hover { background: var(--c-cream); color: var(--c-accent); }
.dropdown-menu li a.is-current { background: var(--c-cream); font-weight: 600; color: var(--c-ink); }
.dropdown-menu .dd-symbol { font-family: var(--ff-display); font-weight: 600; min-width: 24px; text-align: center; color: var(--c-accent); }
.dropdown-menu .dd-name { flex: 1; }
.dropdown-menu .dd-code { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--c-text-muted); text-transform: uppercase; }

/* ---- Header CTA ---- */
.header-cta { display: inline-flex !important; align-items: center; padding-inline: 1.2em; }
@media (max-width: 980px) { .header-cta { display: none !important; } }

/* ---- Nav toggle (hamburger) — only show on mobile ---- */
.nav-toggle {
  display: none;
  flex-direction: column; gap: 4px;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--c-line); border-radius: 50%;
  padding: 0; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--c-ink); transition: all var(--t-base); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav { display: none; }
  .header-inner { gap: var(--sp-3); }
  .chip-btn { padding: 6px 10px; }
  .icon-btn { width: 36px; height: 36px; }
}

/* ---- Mobile drawer ---- */
.mobile-drawer { position: fixed; inset: 0; z-index: 200; }
.mobile-drawer[hidden] { display: none; }
.mobile-drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(15,11,5,0.5);
  opacity: 0; transition: opacity 300ms ease;
}
.mobile-drawer.open .mobile-drawer-scrim { opacity: 1; }
.mobile-drawer-inner {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.2,.8,.2,1);
  box-shadow: -16px 0 40px -16px rgba(0,0,0,0.2);
}
.mobile-drawer.open .mobile-drawer-inner { transform: translateX(0); }
.mobile-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.mobile-drawer-head .brand-mark { height: 44px; }
.mobile-drawer-close {
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--c-line); border-radius: 50%;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink);
}
.mobile-nav { flex: 1; overflow-y: auto; padding: var(--sp-3) 0; }
.mobile-nav > ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--c-line); }
.mobile-nav > ul > li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--ff-display); font-weight: 600; font-size: 1.125rem;
  color: var(--c-ink); text-decoration: none;
}
.mobile-nav > ul > li.has-sub > a::after {
  content: '+';
  font-family: var(--ff-body); font-size: 1.5rem; font-weight: 300;
  color: var(--c-accent); transition: transform var(--t-base);
}
.mobile-nav > ul > li.has-sub.open > a::after { content: '−'; }
.mobile-nav > ul > li > ul {
  list-style: none; padding: 0 var(--sp-5) var(--sp-4) calc(var(--sp-5) + 12px);
  margin: 0; display: none;
}
.mobile-nav > ul > li.open > ul { display: block; }
.mobile-nav > ul > li > ul > li > a {
  display: block; padding: 8px 0;
  font-family: var(--ff-body); font-size: 0.9375rem; color: var(--c-text-muted); text-decoration: none;
}
.mobile-nav > ul > li > ul > li > a:hover { color: var(--c-accent); }
.mobile-drawer-foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-cream);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.mobile-drawer-contact { font-family: var(--ff-body); font-size: 0.875rem; color: var(--c-text); text-decoration: none; padding: 6px 0; }
.mobile-drawer-contact:hover { color: var(--c-accent); }

/* ===================================================================
   CARD + ITINERARY UPGRADE
   =================================================================== */

/* ---- Upgraded tour cards ---- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow 300ms ease, transform 300ms ease, border-color 300ms ease;
}
.card:hover {
  box-shadow: 0 24px 48px -16px rgba(40, 28, 12, 0.18), 0 0 0 1px rgba(0,0,0,0.04);
  transform: translateY(-4px);
  border-color: transparent;
}
.card .card-image-link {
  display: block; line-height: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--c-line);
}
.card .card-image {
  border-radius: 0;
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
}
.card .card-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
  opacity: 0; transition: opacity 300ms ease;
  pointer-events: none;
}
.card:hover .card-image::after { opacity: 1; }
.card .card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-image img { transform: scale(1.08); }

/* Pill in top-left or top-right of the image */
.card .card-meta-pill {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  right: auto;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
  color: var(--c-ink);
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--ff-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.card .card-meta-pill::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}

/* Hover reveal CTA in the corner */
.card .card-image-link::after {
  content: '';
  position: absolute; bottom: var(--sp-3); right: var(--sp-3);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}
.card:hover .card-image-link::after { opacity: 1; transform: translateY(0); }

.card .card-body {
  padding: var(--sp-5);
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.card .card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-family: var(--ff-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-accent);
  background: transparent;
  padding: 0;
  margin-bottom: 2px;
}
.card .card-tag::before {
  content: ''; display: inline-block;
  width: 18px; height: 1px; background: var(--c-accent);
}
.card .card-title { margin: 0; }
.card .card-desc { color: var(--c-text-muted); margin: 0; font-size: 1rem; line-height: 1.55; }

.card .card-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.card .card-price { display: flex; flex-direction: column; gap: 2px; }
.card .card-price .card-price-label { font-family: var(--ff-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); }
.card .card-price > span:not(.card-price-label):not(.card-price-note) {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.25rem; color: var(--c-ink); letter-spacing: -0.01em;
}
.card .card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-ink); text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-line-strong);
  transition: color var(--t-base), border-color var(--t-base), gap var(--t-base);
}
.card .card-link:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); gap: 10px; }

.compare-checkbox {
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: var(--sp-3);
  font-family: var(--ff-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-text-muted);
  cursor: pointer;
}
.compare-checkbox input { accent-color: var(--c-accent); cursor: pointer; }

/* ---- Itinerary timeline ---- */
.tour-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.tour-section-head h2 { margin: 0; }
.tour-section-head .eyebrow { display: block; margin-bottom: var(--sp-2); }
.itinerary-meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.itinerary-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-body); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--c-text-muted);
}
.itinerary-meta-item svg { color: var(--c-accent); }

.timeline {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--sp-5);
  padding: 0 0 var(--sp-6);
}
.timeline-step:last-child { padding-bottom: 0; }

/* The vertical line */
.timeline-step::before {
  content: '';
  position: absolute;
  left: 42px;
  top: 24px;
  bottom: -12px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--c-line-strong) 0,
    var(--c-line-strong) 4px,
    transparent 4px,
    transparent 9px
  );
  z-index: 0;
}
.timeline-step.is-last::before { display: none; }

.timeline-marker {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2);
  padding-top: 2px;
}
.timeline-marker-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-cream), 0 0 0 5px var(--c-accent);
  position: relative;
}
.timeline-marker-dot::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 50%;
}
.timeline-step.is-first .timeline-marker-dot {
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-cream), 0 0 0 5px var(--c-accent), 0 0 0 8px rgba(201, 92, 43, 0.15);
}
.timeline-marker-label {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; margin-top: 2px;
}
.timeline-marker-label small {
  font-family: var(--ff-body); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}
.timeline-marker-label strong {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 1.75rem; color: var(--c-ink);
  letter-spacing: -0.01em; line-height: 1;
}

.timeline-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: box-shadow 300ms ease, border-color 300ms ease, transform 300ms ease;
  position: relative;
}
.timeline-card::before {
  /* Connector arrow from line to card */
  content: '';
  position: absolute;
  left: -8px; top: 22px;
  width: 16px; height: 16px;
  background: #fff;
  border-left: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  transform: rotate(45deg);
}
.timeline-card:hover {
  box-shadow: 0 16px 40px -16px rgba(40, 28, 12, 0.16);
  border-color: transparent;
  transform: translateX(2px);
}
.timeline-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.timeline-card-title {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--c-ink); margin: 0; flex: 1;
}
.timeline-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--ff-body); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  flex-shrink: 0;
}
.timeline-badge-arrival { background: rgba(46, 139, 87, 0.12); color: #2e8b57; }
.timeline-badge-departure { background: rgba(196, 106, 18, 0.14); color: #c46a12; }
.timeline-card-desc {
  font-family: var(--ff-body); font-size: 1rem; line-height: 1.65;
  color: var(--c-text); margin: 0;
}
.timeline-card-stay {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-cream);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-accent);
}
.timeline-stay-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: #fff; border-radius: 50%;
  color: var(--c-accent);
}
.timeline-stay-label {
  display: block;
  font-family: var(--ff-body); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-text-muted); margin-bottom: 2px;
}
.timeline-stay-name {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.0625rem; color: var(--c-ink);
  letter-spacing: -0.005em;
}

/* Mobile timeline */
@media (max-width: 640px) {
  .timeline-step { grid-template-columns: 56px 1fr; gap: var(--sp-3); }
  .timeline-step::before { left: 28px; }
  .timeline-marker-dot { width: 18px; height: 18px; box-shadow: 0 0 0 3px var(--c-cream), 0 0 0 4px var(--c-accent); }
  .timeline-marker-label strong { font-size: 1.375rem; }
  .timeline-card { padding: var(--sp-4); }
  .timeline-card::before { display: none; }
  .timeline-card-title { font-size: 1.125rem; }
  .timeline-card-head { flex-direction: column-reverse; align-items: flex-start; }
}

/* ===================================================================
   PAGE ARTICLE — for About, DMC, CSR, Privacy, etc.
   Same outer container as the home page (1200px) with a
   sticky meta sidebar on the left and prose on the right.
   =================================================================== */
.section-article { padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem); }

.page-article-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 1rem + 3.5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .page-article-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.page-article-side { position: sticky; top: 96px; }
@media (max-width: 900px) { .page-article-side { position: static; } }
.page-article-side-inner {
  padding: var(--sp-6);
  background: var(--c-paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
}
.page-article-side .eyebrow {
  display: inline-block; margin-bottom: var(--sp-3);
  color: var(--c-accent);
}
.page-article-side-title {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3); color: var(--c-ink);
  max-width: 16ch; text-wrap: balance;
}
.page-article-side-lead {
  font-family: var(--ff-serif); font-style: normal;
  font-size: 1.0625rem; line-height: 1.5; color: var(--c-text-muted);
  margin: 0 0 var(--sp-5);
}
.page-article-side-meta {
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.page-article-side-fact { display: flex; flex-direction: column; gap: 2px; }
.page-article-side-fact .fact-key {
  font-family: var(--ff-body); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-text-muted);
}
.page-article-side-fact .fact-val {
  font-family: var(--ff-body); font-size: 0.9375rem;
  color: var(--c-ink); text-decoration: none;
}
.page-article-side-fact .fact-val:hover { color: var(--c-accent); }

.page-article-main { min-width: 0; }
.page-article-main .rich-text {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-text);
  max-width: 64ch;
}
.page-article-main .rich-text > * + * { margin-top: 1.25em; }
.page-article-main .rich-text h2 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2; letter-spacing: -0.005em;
  margin-top: 2em; margin-bottom: 0.4em;
  color: var(--c-ink);
}
.page-article-main .rich-text h2:first-child { margin-top: 0; }
.page-article-main .rich-text h3 {
  font-family: var(--ff-display); font-weight: 600;
  font-size: 1.375rem; margin-top: 1.6em; margin-bottom: 0.4em;
  color: var(--c-ink);
}
.page-article-main .rich-text p {
  font-size: 1.0625rem; line-height: 1.75; color: var(--c-text); margin: 0;
}
.page-article-main .rich-text p + p { margin-top: 1em; }
.page-article-main .rich-text ul, .page-article-main .rich-text ol { padding-left: 1.25em; }
.page-article-main .rich-text li { margin: 0.3em 0; }
.page-article-main .rich-text blockquote {
  border-left: 3px solid var(--c-accent);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: 1.5em 0;
  font-family: var(--ff-display); font-style: normal;
  font-size: 1.25rem; line-height: 1.5; color: var(--c-ink);
}

/* ---- Auto-locale notification banner ---- */
.lang-banner {
  background: linear-gradient(135deg, var(--c-accent) 0%, #b04a1d 100%);
  color: #fff;
  font-family: var(--ff-body); font-size: 0.8125rem;
  padding: 8px 0;
  position: relative;
  z-index: 120;
}
.lang-banner-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
}
.lang-banner-flag { font-size: 1.05rem; line-height: 1; }
.lang-banner-msg { flex: 1; min-width: 0; }
.lang-banner-link {
  color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 12px; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px;
  transition: background var(--t-base), border-color var(--t-base);
  white-space: nowrap;
}
.lang-banner-link:hover { background: #fff; color: var(--c-accent); border-color: #fff; }
.lang-banner-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: rgba(255,255,255,0.85); cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-base);
}
.lang-banner-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
@media (max-width: 600px) {
  .lang-banner { font-size: 0.75rem; }
  .lang-banner-msg { flex-basis: 100%; }
}

/* Script kicker, borrowed from the reference: a handwritten label with a short
   rule either side. Drawn with pseudo-elements rather than glyphs so it renders
   the same everywhere and adds nothing to the page's text. */
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

/* Over a photograph the script loses legibility, so hero and banner kickers
   keep the uppercase pill treatment. */
.eyebrow-light,
.hero-eyebrow {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow-light::before,
.eyebrow-light::after,
.hero-eyebrow::before,
.hero-eyebrow::after { content: none; }

/* -------------------------------------------------------------------
   SAFARI FINDER
   The search bar under the hero. Lifted into the hero's lower edge the
   way the reference does, but on the brand palette and only offering
   filters the catalogue can actually satisfy.
   ------------------------------------------------------------------- */
.safari-finder-band { position: relative; z-index: 5; }
.safari-finder-band.is-overlap { margin-top: calc(-1 * var(--sp-12)); }

.safari-finder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.safari-finder-title {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-4) var(--sp-5) 0;
  font-family: var(--ff-script);
  font-size: 1.25rem;
  color: var(--c-accent);
}
.finder-field {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'icon label' 'icon input';
  align-content: center;
  gap: 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--c-line);
  min-width: 0;
}
.finder-icon  { grid-area: icon; align-self: center; color: var(--c-accent); display: flex; }
.finder-label {
  grid-area: label;
  font-family: var(--ff-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.finder-field select {
  grid-area: input;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 0 0;
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  min-width: 0;
  width: 100%;
}
.finder-field select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }
.finder-submit {
  border-radius: 0;
  padding-inline: var(--sp-8);
  align-self: stretch;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .safari-finder { grid-template-columns: 1fr 1fr; }
  .finder-field:nth-of-type(3) { grid-column: 1 / -1; }
  .safari-finder-band.is-overlap { margin-top: var(--sp-8); }
}
@media (max-width: 560px) {
  .safari-finder { grid-template-columns: 1fr; }
  .finder-field { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .finder-field:nth-of-type(3) { grid-column: auto; }
  .finder-submit { width: 100%; }
}

/* Section headers use .section-label rather than .eyebrow, so the script
   kicker has to cover both or half the page keeps the old plain label. */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ff-script);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-accent);
  line-height: 1.2;
}
.section-label::before,
.section-label::after {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
/* On a dark band the kicker needs the light tint, not the terracotta. */
.section-dark .section-label,
.section-ink .section-label,
.section-cta-bg .section-label { color: var(--c-accent-soft); }

/* -------------------------------------------------------------------
   HERO AS AN INSET CARD
   The hero used to run edge to edge, so its bottom boundary drew a hard
   line across the full width — straight through the finder bar sitting
   on it. Insetting the hero and rounding it removes that seam and lets
   the bar float on its own shadow.
   ------------------------------------------------------------------- */
.hero,
.page-hero {
  margin-left: var(--w-edge);
  margin-right: var(--w-edge);
  border-radius: var(--r-hero);
  overflow: hidden;
}
.hero-bg, .page-hero-bg,
.hero-overlay, .page-hero-overlay { border-radius: inherit; }

/* The finder floats: no outline, a deeper shadow, and lifted further so it
   clears the hero's rounded corner instead of straddling the old hard edge. */
.safari-finder {
  border: 0;
  box-shadow: 0 26px 60px -14px rgba(26, 16, 6, 0.30),
              0 2px 10px rgba(26, 16, 6, 0.08);
}
.safari-finder-band.is-overlap { margin-top: calc(-1 * var(--sp-14)); }
/* the divider next to the button was doubling up with the button edge */
.finder-field:last-of-type { border-right: 0; }

@media (max-width: 900px) {
  .hero, .page-hero { margin-left: 0; margin-right: 0; border-radius: 0; }
}

/* The floating finder sits over the hero's lower edge, so the hero's own
   buttons need room to clear it. */
.hero .hero-content { padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 5rem); }

/* The inset hero leaves a gutter, so the page ground is now visible beside and
   below it. It was --c-cream (#faf6f0) while the first band is --c-paper
   (#f8f3ea) — two creams two values apart, which met in a faint but visible
   line right under the hero. Matching them removes the seam; the difference is
   imperceptible anywhere else. */
body { background: var(--c-paper); }

/* Supporting photo in the contact sidebar. Sized to the column rather than
   stretched, so a modest source file stays sharp. */
.contact-aside-figure {
  margin: 0 0 var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--sh-sm);
}
.contact-aside-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------------
   HERO: CENTRED, AND DIALLED BACK
   The headline was topping out at 76px, which crowded the frame. Also
   centres the whole stack — eyebrow, headline, lead and buttons.
   ------------------------------------------------------------------- */
.hero-title {
  font-size: clamp(2.125rem, 1.1rem + 3vw, 3.5rem);
}
.hero { align-items: center; }
.hero .hero-content { justify-content: center; }
.hero .hero-content-inner {
  text-align: center;
  align-items: center;
  max-width: 860px;
  margin-inline: auto;
}
.hero .hero-eyebrow { align-self: center; }
.hero .hero-subtitle { margin-inline: auto; }
.hero .hero-buttons,
.hero .hero-cta { justify-content: center; }
.hero .hero-trust { justify-content: center; }

/* -------------------------------------------------------------------
   HERO: SHORTER, AND THE COPY SET TO THE FINDER'S MEASURE
   The band was 68vh with ~130px of padding, leaving a lot of air above
   and below a fairly short block of text. The lead was also capped at
   56ch, so it sat far narrower than the finder bar beneath it.
   The width below is the same arithmetic .container uses, so the copy
   lines up with the finder at every viewport rather than by luck.
   ------------------------------------------------------------------- */
.hero { min-height: 54svh; min-height: 54vh; }
.hero .hero-content {
  padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 3rem);
  padding-bottom: clamp(2.25rem, 1.75rem + 1.5vw, 3.5rem);
}
.hero .hero-content-inner {
  max-width: calc(var(--w-default) - 2 * var(--w-edge));
}
.hero .hero-subtitle { max-width: none; }

/* -------------------------------------------------------------------
   HEADER ENQUIRY LINE
   Phone icon, a hairline rule, then a small label above the number —
   the pattern from the reference header, on the brand palette.
   ------------------------------------------------------------------- */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--c-ink);
  padding-right: var(--sp-3);
  margin-right: var(--sp-1);
  white-space: nowrap;
}
.header-phone-icon {
  display: flex;
  color: var(--c-accent);
  transition: transform var(--t-base) var(--ease-smooth);
}
.header-phone:hover .header-phone-icon { transform: scale(1.06) rotate(-6deg); }

/* the rule sits between icon and text, as in the reference */
.header-phone-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-line-strong);
}
.header-phone-label {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink);
}
.header-phone-number {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-accent-strong);
  letter-spacing: 0.01em;
}
.header-phone:hover .header-phone-number { color: var(--c-accent); }

/* Below the desktop nav breakpoint the header is already tight, and the
   number is still one tap away in the announcement bar and the drawer. */
@media (max-width: 1200px) {
  .header-phone { display: none; }
}

/* -------------------------------------------------------------------
   FINDER BAR — REFINEMENTS
   Four things were wrong with the first pass:
     1. the selects had no chevron, so "Anywhere" read as static text
        rather than something you could open;
     2. the kicker row was a full-width band that was ~80% empty;
     3. the submit was a square full-bleed slab fighting the rounded
        corner and the pill language used everywhere else;
     4. nothing responded to hover, so the fields felt inert.
   ------------------------------------------------------------------- */

/* 1. dropdown affordance */
.finder-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c3b18' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-1) center;
  padding-right: var(--sp-6);
}

/* 2. the kicker sits tighter, and lines up with the first field's text */
/* The kicker row takes the same tint the fields show on hover, and bleeds
   past the bar's own padding so it reaches both edges and picks up the top
   corner radius instead of floating as an inset stripe. */
.safari-finder-title {
  background: var(--c-accent-pale);
  margin: 0 calc(-1 * var(--sp-2));
  padding: var(--sp-3) calc(var(--sp-5) + var(--sp-2));
  font-size: 1.15rem;
  opacity: 1;
}

/* 3. the submit becomes an inset pill, so the bar keeps its rounded corner */
.safari-finder { padding: 0 var(--sp-2) var(--sp-2); }
/* A pill fought the bar's own geometry and, with the label nearly filling it,
   read as a squashed lozenge. A rounded rectangle set to the height of the
   field row sits with the bar instead of against it. */
.finder-submit {
  border-radius: var(--r-md);
  align-self: stretch;
  margin: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3);
  padding-inline: var(--sp-8);
  min-height: 0;
}

/* 4. each field reacts, and the dividers no longer run the full height */
.finder-field {
  position: relative;
  border-right: 0;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-smooth);
}
.finder-field + .finder-field::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: var(--c-line);
}
.finder-field:hover { background: var(--c-accent-pale); }
.finder-field:hover::before, .finder-field:hover + .finder-field::before { opacity: 0; }
.finder-field:focus-within { background: var(--c-accent-pale); }

@media (max-width: 560px) {
  .finder-field + .finder-field::before { display: none; }
  .finder-field { border-bottom: 1px solid var(--c-line); border-radius: 0; }
  .finder-submit { margin: var(--sp-3) 0 0; width: 100%; }
}

/* Announcement-bar phone: small screens only. The header enquiry block takes
   over from 1200px up, so this hides there and the number is never shown
   twice. Below 720px the bar is tight, so the planning line steps aside —
   a tappable number is worth more on a phone than a value prop. */
@media (min-width: 1200px) {
  .announcement-phone,
  .announcement-phone-sep { display: none !important; }
}
@media (max-width: 560px) {
  /* Only one item fits here, and a tappable number beats a value prop.
     The !important is needed to beat the existing 480px rule that hides
     every announcement item except the first. */
  .announcement-left > .announcement-item:first-child,
  .announcement-phone-sep { display: none !important; }
  .announcement-phone { display: inline-flex !important; }
}

/* Kicker centred within the finder's header band. */
.safari-finder-title { text-align: center; }

/* -------------------------------------------------------------------
   HERO SLIDER
   The hero was a single still image. Three slides now crossfade behind
   the copy, each carrying its own eyebrow, headline and lead.

   Both stacks — images and copy — are grid-stacked into one cell rather
   than absolutely positioned. The hero therefore sizes to its tallest
   slide, and the buttons underneath hold still while the text changes
   instead of jumping on every rotation.

   Only the first slide's headline is an <h1> (see sections/hero.php);
   the others are paragraphs styled to match, so the page keeps exactly
   one level-one heading however many slides are added.
   ------------------------------------------------------------------- */
/* One cell that fills the box. Without the explicit 1fr track the row
   auto-sizes to the image's natural height -- 799px inside a 463px hero --
   and object-fit never gets the chance to crop, so the bottom of every
   photograph falls outside the frame. min-height:0 stops the image's
   min-content height pushing the track back out again. */
.hero-bg-stack {
  display: grid;
  grid-template: 1fr / 1fr;
}

.hero-slide {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--ease-smooth);
}
.hero-slide.is-active { opacity: 1; }

/* The single-image hero keeps its keyframed zoom. Slides use a transition
   instead, so the drift restarts each time a slide becomes active rather
   than running once on page load. */
.hero-bg-stack .hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: none;
  transform: scale(1.06);
  transition: transform 7.5s var(--ease-smooth);
}
.hero-bg-stack .hero-slide.is-active img { transform: scale(1); }

/* Only the active copy stays in flow, so the stack is as tall as the slide
   being shown rather than as tall as the longest one. Grid-stacking them all
   in one cell instead reserved the tallest slide's height on every slide --
   about 80px of dead air under the shorter ones on a phone. JS sets the pixel
   height so the change eases rather than snaps. */
.hero-copy-stack {
  position: relative;
  width: 100%;
  /* .hero-content-inner is a column flex container, so the default
     flex-shrink:1 squashed this back to the previous slide's height the moment
     the copy grew, and the longest slide's text overlapped the buttons. */
  flex: 0 0 auto;
}
/* The two copy blocks sit in the same cell, so a simultaneous crossfade
   leaves both headlines legible at once and the centred text turns to mush.
   The outgoing block therefore clears first (no delay, quick), and the
   incoming one waits for it before starting. */
/* Exactly one copy is in flow at a time -- .is-current, not .is-active --
   and it alone gives the stack its height. The two classes are separated on
   purpose: .is-active drives the crossfade immediately, while .is-current is
   handed over a third of a second later, during the gap where the outgoing
   copy has faded out and the incoming one has not yet begun. The stack
   therefore resizes while nothing is visible, so the buttons below never jump
   under a legible headline. (Transitioning the height instead does not work:
   it interpolates from `auto` and sticks.) */
.hero-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-smooth), transform 0.32s var(--ease-smooth);
}
.hero-copy.is-current { position: relative; }
.hero-copy.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.55s var(--ease-smooth) 0.34s,
              transform 0.65s var(--ease-smooth) 0.34s;
}

/* Sits under the buttons: the finder bar already occupies the hero's
   lower edge, so there is no room for dots in the usual place. */
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.hero-dots { display: flex; align-items: center; gap: 0.5rem; }

.hero-dot {
  position: relative;
  width: 28px; height: 4px;
  padding: 0; border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
  transition: width 0.45s var(--ease-smooth), background-color 0.3s;
}

/* The dot is a few pixels tall; its tap target must not be. This stretches
   the hit area to 44px and half the gap on each side, changing nothing you
   can see. It grows upward into the hero rather than symmetrically: the
   finder bar's container overlaps from below and swallows anything under it.
   (The fill is itself rounded, so the parent no longer needs to clip --
   which would have eaten this.) */
.hero-dot::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: -4px;
  right: -4px;
  height: 44px;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.55); }
.hero-dot.is-active { width: 64px; background: rgba(255, 255, 255, 0.28); }

/* The active dot doubles as a progress bar for the autoplay interval. */
.hero-dot-fill {
  position: absolute; inset: 0;
  width: 0;
  border-radius: 999px;
  background: var(--c-accent);
}
.hero-dot.is-active .hero-dot-fill {
  animation: heroDotFill var(--hero-interval, 6500ms) linear forwards;
}
.hero-slider.is-paused .hero-dot.is-active .hero-dot-fill { animation-play-state: paused; }
@keyframes heroDotFill { from { width: 0; } to { width: 100%; } }

.hero-pause {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  padding: 0; border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}
.hero-pause:hover { background: rgba(255, 255, 255, 0.32); }
.hero-play-icon { display: none; }
.hero-slider.is-paused .hero-pause-icon { display: none; }
.hero-slider.is-paused .hero-play-icon { display: block; }

.hero-dot:focus-visible,
.hero-pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 600px) {
  .hero-nav { gap: var(--sp-3); margin-top: var(--sp-5); }
  .hero-dot.is-active { width: 48px; }
}

/* The finder bar is pulled up over the hero's lower edge, and the hero's
   bottom padding was set when the hero ended at its buttons. The slider adds
   a control row below them, which landed inside that overlap: the dots stayed
   visible but the finder sat on top of them, so nothing below the buttons
   could be clicked or tapped at all. Sliders get the deeper padding. */
.hero-slider .hero-content {
  padding-bottom: clamp(4.5rem, 3rem + 4vw, 6rem);
}

/* Touch devices only: no hover state to lean on, so give the controls
   enough room to hit with a thumb. */
@media (hover: none) {
  .hero-dot { height: 6px; }
  .hero-pause { width: 40px; height: 40px; }
  .hero-pause svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-copy,
  .hero-copy.is-active { transition: none; }
  .hero-copy { transform: none; }
  .hero-bg-stack .hero-slide img { transition: none; transform: none; }
  .hero-dot.is-active .hero-dot-fill { animation: none; width: 100%; }
}