/* =========================================================================
   Makito Safaris & Adventures — Design System
   Plain CSS. Glassmorphism-first. No framework.
   Sections: 1 Tokens · 2 Reset/Base · 3 Type · 4 Utilities/Glass · 5 Buttons
             6 Header/Nav/Mega · 7 Hero · 8 Sections/Cards/Rails · 9 Forms
             10 Modals/Popups · 11 Footer · 12 Motion · 13 Responsive
   ========================================================================= */

/* ---- 1. TOKENS ---------------------------------------------------------- */
:root {
  /* Brand greens — client's approved palette (design proposal, 2026-05-04):
     Forest Night #1B3A2D is the dominant tone (site header/hero/footer/dark
     sections); Safari Green/Savanna Glow/River Mist/Morning Dew step up in
     lightness for accents, hover states and light-tint surfaces. green-900
     is the one custom value (a touch darker than Forest Night) — needed for
     gradient depth on dark sections/footer, not in the client's 6-swatch set. */
  --green-900: #12251c;   /* custom — darker than Forest Night, for gradient endpoints */
  --green-800: #1b3a2d;   /* Forest Night — dominant primary */
  --green-700: #2e6b4f;   /* Safari Green */
  --green-600: #3d8d66;   /* interpolated — hover state between Safari Green and Savanna Glow */
  --green-500: #4caf7d;   /* Savanna Glow */
  --green-400: #7dd4b0;   /* River Mist */
  --green-300: #e8f5ee;   /* Morning Dew — light mint tint, for subtle surfaces */

  /* Accent — was a gold/brass accent (#c9a24b); replaced sitewide with a
     step of the client's own green scale (2026-07-12 request: green must
     dominate, not compete with a second accent hue). Variable names kept
     as `--gold-*` so every existing reference cascades without a rename. */
  --gold-600: #2e6b4f;
  --gold-500: #3d8d66;
  --gold-400: #4caf7d;
  --gold-100: #e8f5ee;

  /* Neutrals */
  --ink: #000000;
  --ink-soft: #000000;
  --paper: #f7f5ef;
  --paper-2: #efece2;
  --white: #ffffff;

  /* Glass surfaces */
  --glass-tint: rgba(255, 255, 255, 0.55);
  --glass-tint-strong: rgba(255, 255, 255, 0.72);
  --glass-dark: rgba(20, 36, 29, 0.42);
  --glass-dark-strong: rgba(20, 36, 29, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-border-dark: rgba(255, 255, 255, 0.14);
  --glass-blur: 18px;

  /* Text — client wants solid black everywhere on light backgrounds, no
     muted/washed-out grays (2026-07-12 request). --text-on-dark(-muted) are
     unaffected: those sit on dark-green sections and must stay light for
     contrast. */
  --text: var(--ink);
  --text-muted: #000000;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.8);

  /* Type — single family sitewide (Plus Jakarta Sans), a paid proprietary competitor font */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Shadows (layered, soft) */
  --shadow-sm: 0 2px 8px rgba(20, 36, 29, 0.08);
  --shadow-md: 0 12px 30px -12px rgba(20, 36, 29, 0.28);
  --shadow-lg: 0 30px 70px -24px rgba(20, 36, 29, 0.45);
  --shadow-glass: 0 8px 32px rgba(16, 30, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 76px;
  --util-h: 40px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 2. RESET / BASE ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; width: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x is clipped on <html> only — setting it here too would make
     the CSS overflow-xy auto-quirk turn <body> into its own scroll
     container, which silently breaks position:sticky (e.g. the package
     page sidebar) since it'd stick to the wrong scrolling ancestor. */
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

/* Ambient paper texture behind everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(96,128,104,0.16), transparent 60%),
    radial-gradient(1000px 800px at -10% 100%, rgba(61,141,102,0.10), transparent 55%),
    var(--paper);
}

/* ---- 3. TYPOGRAPHY ------------------------------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
h4 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
p { color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-600);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold-500); display: inline-block; }
.eyebrow.center::after { content: ""; width: 26px; height: 1px; background: var(--gold-500); display: inline-block; }
.lead { font-size: 1.12rem; color: var(--text-muted); max-width: 60ch; }
.serif-accent { font-weight: 800; font-style: italic; color: var(--gold-500); }

/* ---- 4. LAYOUT UTILITIES + GLASS --------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.section-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .5rem; }
.section-head p { margin-top: 1rem; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.text-gold { color: var(--gold-600); }
.text-center { text-align: center; }

/* Glass surfaces */
.glass {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.glass-dark {
  background: var(--glass-dark);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border-dark);
  color: var(--text-on-dark);
}
.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(61,141,102,.5), transparent); border: 0; }

/* ---- 5. BUTTONS --------------------------------------------------------- */
.btn {
  --btn-bg: var(--green-700);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.5em;
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); --btn-bg: var(--green-800); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: var(--shadow-sm); filter: brightness(.92); transition-duration: .12s; }
.btn svg { width: 1.05em; height: 1.05em; }
.btn--gold { --btn-bg: var(--gold-500); --btn-fg: #fff; }
.btn--gold:hover { --btn-bg: var(--gold-600); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--green-800); border: 1px solid rgba(40,64,56,.28); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.btn--ghost:hover { background: rgba(40,64,56,.08); border-color: var(--green-700); color: var(--green-900); box-shadow: var(--shadow-md); }
/* Inside a modal the ghost button sits on dark glass, not white, so it
   needs the inverse treatment (light border/text) to stay visible. */
.modal .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.4); }
.modal .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn--glass {
  background: var(--glass-tint); color: var(--green-800);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass);
}
.btn--glass:hover { background: var(--glass-tint-strong); box-shadow: var(--shadow-md); }
.btn--on-dark { --btn-fg: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.btn--on-dark:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); box-shadow: var(--shadow-md); }
.btn--sm { padding: .6em 1.1em; font-size: .85rem; }
.btn--lg { padding: 1em 1.9em; font-size: 1.02rem; }
.btn--block { width: 100%; }


.chip { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; background: rgba(40,64,56,.08); color: var(--ink); }
.chip--gold { background: rgba(61,141,102,.16); color: var(--gold-600); }

/* ---- 6. HEADER / NAV / MEGA-MENU --------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: transform .4s var(--ease); }

/* utility bar */
.util-bar {
  height: var(--util-h);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; color: var(--text-on-dark-muted);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.util-bar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.util-left, .util-right { display: flex; align-items: center; gap: 1.4rem; }
.util-item { display: inline-flex; align-items: center; gap: .45em; transition: color .25s; }
.util-item:hover { color: var(--gold-400); }
.util-item--wa { color: #3ddc7a; }
.util-item--wa:hover { color: #2fc767; }
.site-header.scrolled .util-item--wa { color: #1da851; }
.site-header.scrolled .util-item--wa:hover { color: #178a42; }
.util-item svg { width: 15px; height: 15px; }
.util-badge { color: var(--gold-400); font-weight: 600; }
.util-sep { width: 1px; height: 14px; background: rgba(255,255,255,.22); }

/* working currency / language dropdowns */
.util-dd { position: relative; }
.util-dd-btn { display: inline-flex; align-items: center; gap: .35em; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: .2em 0; }
.util-dd-btn svg { width: 11px; height: 11px; opacity: .75; transition: transform .25s var(--ease); }
.util-dd.open .util-dd-btn svg { transform: rotate(180deg); }
.util-dd-panel {
  position: absolute; top: calc(100% + 12px); right: -10px; z-index: 30; width: 220px; max-height: 340px; overflow-y: auto;
  scrollbar-width: none;
  border-radius: 16px; padding: 8px; background: var(--glass-dark-strong);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border-dark); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.util-dd.open .util-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.util-dd-panel::-webkit-scrollbar { width: 0; height: 0; }
.util-dd-option { display: flex; align-items: center; gap: .65em; width: 100%; padding: .55em .7em; border-radius: 10px; font-size: .87rem; color: var(--text-on-dark); text-align: left; }
.util-dd-option:hover { background: rgba(255,255,255,.12); }
.util-dd-option.active { background: rgba(61,141,102,.22); color: var(--gold-400); font-weight: 700; }
.util-dd-flag { font-size: 1.15em; line-height: 1; }
.util-dd-name { flex: 1; }
.util-dd-code { font-size: .74rem; color: var(--text-on-dark-muted); }
.util-dd-search { display: flex; align-items: center; gap: .5em; padding: .5em .7em; margin-bottom: 4px;
  border-radius: 10px; background: rgba(255,255,255,.1); }
.util-dd-search svg { width: 14px; height: 14px; color: var(--text-on-dark-muted); flex-shrink: 0; }
.util-dd-search input { background: none; border: 0; font-size: .85rem; width: 100%; color: var(--text-on-dark); }
.util-dd-search input::placeholder { color: var(--text-on-dark-muted); }
.util-dd-region { display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .5em .7em; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); }
.util-dd-region svg { width: 11px; height: 11px; transition: transform .25s var(--ease); }
.util-dd-region.collapsed svg { transform: rotate(-90deg); }
.util-dd-region-items { display: flex; flex-direction: column; }
.util-dd-region.collapsed + .util-dd-region-items { display: none; }

/* main nav */
.nav {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: color .4s var(--ease);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.nav-logo { flex-shrink: 0; display: flex; align-items: center; }
.nav-logo img { height: 42px; width: auto; transition: opacity .3s; }
.logo-white { display: block; }
.logo-green { display: none; }

.nav-menu { display: flex; align-items: center; gap: .3rem; }
.nav-link {
  position: relative; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35em;
  padding: .55em .8em; border-radius: var(--r-pill);
  font-weight: 600; font-size: .92rem; color: var(--text-on-dark);
  transition: background .25s, color .25s;
}
.nav-link svg.caret { width: 12px; height: 12px; opacity: .7; transition: transform .3s var(--ease); }
.nav-link:hover { background: rgba(255,255,255,.12); }
.has-mega.open .caret, .has-mega:focus-within .caret { transform: rotate(180deg); }
.nav-cta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* scrolled / solid state (frosted light) */
.site-header.scrolled { box-shadow: var(--shadow-md); }
.site-header.scrolled .util-bar,
.site-header.scrolled .nav-solid-bg { }
.nav-solid-bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s var(--ease);
  background: var(--glass-dark-strong); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--glass-border-dark); }
.site-header.scrolled .nav-solid-bg { opacity: 1; }
.site-header.scrolled .util-bar { color: var(--text-on-dark-muted); border-color: rgba(255,255,255,.14); }
.site-header.scrolled .util-item:hover { color: var(--gold-400); }
.site-header.scrolled .util-badge { color: var(--gold-400); }
.site-header.scrolled .util-sep { background: rgba(255,255,255,.22); }
.site-header.scrolled .nav-link { color: var(--text-on-dark); }
.site-header.scrolled .nav-link:hover { background: rgba(255,255,255,.12); }
/* header is always the green-glass treatment now (client request,
   2026-07-12) — both scrolled and "solid" (no dark hero) pages — so the
   white logo variant stays visible in every state; logo-green is unused. */

/* mega dropdown — reference-matched pattern: left list of sub-items (verified live by
   hovering every reference nav item), right detail panel that swaps title/desc/
   image/CTA as each list item is hovered/focused. */
.mega {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%) translateY(8px);
  width: min(760px, 94vw);
  border-radius: var(--r-lg);
  padding: 20px;
  background: var(--glass-dark-strong);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border-dark); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px;
}
.has-mega { position: static; }
/* opening is driven by JS (initMegaA11y) via the .open class — see comment
   there for why plain CSS :hover breaks across the gap to this panel.
   :focus-within stays for keyboard users tabbing through the list. */
.has-mega:focus-within .mega, .has-mega.open .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.has-mega.open .nav-link, .has-mega:focus-within .nav-link,
.site-header.scrolled .has-mega.open .nav-link, .site-header.scrolled .has-mega:focus-within .nav-link { background: rgba(255,255,255,.12); }

.mega-list { display: flex; flex-direction: column; gap: 1px; padding-right: 14px; border-right: 1px solid rgba(255,255,255,.14); }
.mega-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: .6em; width: 100%;
  padding: .68em .7em; border-radius: 12px; text-align: left; transition: background .2s;
}
.mega-list-item:hover, .mega-list-item:focus-visible, .mega-list-item.active { background: rgba(255,255,255,.12); }
.mega-list-item.active { background: rgba(61,141,102,.22); }
.mega-list-item span:first-child { font-size: .9rem; font-weight: 600; color: var(--text-on-dark); line-height: 1.25; }
.mega-list-item svg.mli-chev { flex-shrink: 0; width: 13px; height: 13px; color: var(--text-on-dark-muted); opacity: .8; }
.mega-badge { flex-shrink: 0; font-size: .64rem; font-weight: 700; letter-spacing: .02em; padding: .28em .55em; border-radius: var(--r-pill); background: rgba(61,141,102,.22); color: var(--gold-400); white-space: nowrap; }

.mega-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; padding-left: 18px; align-items: center; }
.mega-detail-title { font-size: 1.1rem; font-weight: 800; color: var(--text-on-dark); margin-bottom: .5rem; }
.mega-detail-desc { font-size: .86rem; color: var(--text-on-dark-muted); line-height: 1.55; margin-bottom: 1rem; }
.mega-detail-cta { display: inline-flex; align-items: center; gap: .5em; padding: .65em 1.1em; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--green-700); color: #fff; font-size: .85rem; font-weight: 700; transition: background .2s, transform .2s; }
.mega-detail-cta:hover { background: var(--green-600); transform: translateY(-1px); }
.mega-detail-cta svg { width: 13px; height: 13px; }
.mega-detail-media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3.3; }
.mega-detail-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s var(--ease); }
.mega-detail-media img.active { opacity: 1; }
.mega-detail-body { opacity: 0; transition: opacity .2s var(--ease); }
.mega-detail-body.active { opacity: 1; }

/* mobile nav — legacy toggle kept only as a no-op fallback, real UI is the bottom tab bar below */

/* ---- iOS-style floating bottom tab bar (mobile) ------------------------- */
.mob-nav-wrap { display: none; }
@media (max-width: 900px) {
  .mob-nav-wrap {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    /* Keep it on a stable compositing layer so iOS Safari doesn't drop the
       fixed bar during scroll repaints. No `will-change` (leaving it on
       permanently makes Chrome evict/re-promote the layer, which itself
       causes flicker). */
    transform: translateZ(0); -webkit-transform: translateZ(0);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .mob-pill {
    pointer-events: auto; position: relative; max-width: 420px; margin: 0 auto;
    height: 62px; border-radius: 26px; display: flex; align-items: stretch; overflow: visible;
    /* Near-opaque solid fill, no backdrop-filter: sampling the playing hero
       video with backdrop blur made this bar flicker/vanish on mobile GPUs
       whenever it overlapped the video. A solid fill always paints. */
    background: rgba(18, 30, 25, 0.97);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 16px 40px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .mob-pill::before {
    content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; z-index: 4;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(255,255,255,.26), rgba(255,255,255,.16), transparent);
  }
  .mob-indicator {
    position: absolute; top: -20px; left: 50%; width: 50px; height: 50px; margin-left: -25px;
    border-radius: 50%; z-index: 2;
    background: var(--gold-500);
    box-shadow: 0 8px 20px rgba(61,141,102,.5), 0 3px 8px rgba(61,141,102,.35), inset 0 1px 0 rgba(255,255,255,.35);
    transition: left .55s cubic-bezier(.5,1.7,.42,.95), transform .4s cubic-bezier(.34,1.6,.64,1);
    will-change: left, transform;
  }
  .mob-pill.is-moving .mob-indicator { transform: scale(1.08, .92); }
  .mob-tab {
    position: relative; z-index: 3; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; height: 100%; -webkit-tap-highlight-color: transparent;
    /* zero the UA <button> padding/appearance so the two action tabs (Plan,
       Menu, which are <button>s) are the exact same width as the <a> tabs.
       Otherwise buttons stay ~12px wider, pushing the whole row off-centre so
       the active Home tab (and its gold circle) no longer lines up with the
       viewport centre / hero Scroll indicator. */
    padding: 0; appearance: none; -webkit-appearance: none;
  }
  .mob-lbl { white-space: nowrap; }
  .mob-tab .mob-ic { display: flex; transition: transform .4s cubic-bezier(.34,1.6,.64,1); }
  .mob-tab .mob-ic svg { width: 20px; height: 20px; stroke: rgba(255,255,255,.55); transition: stroke .3s; }
  .mob-tab.active .mob-ic { transform: translateY(-15px); }
  .mob-tab.active .mob-ic svg { stroke: #1d3028; }
  .mob-lbl { font-size: .66rem; font-weight: 600; color: rgba(255,255,255,.58); transition: color .3s; }
  .mob-tab.active .mob-lbl { color: var(--gold-400); font-weight: 700; }
  /* Clearance for the fixed bottom nav lives on the footer (not body padding)
     so the space below the last content is the footer's own green, not the
     paper body background showing as a white band under the footer. Sized to
     clear the bottom nav (~92px) *and* the support-fab launcher above it
     (bottom:106px + ~46px avatar ≈ reaches 152px up), not just the nav bar —
     otherwise the "Designed with... by..." credit line sits right behind it. */
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
}

/* mobile "Menu" sheet — same clear glass language as every other modal */
.mob-sheet-scrim {
  position: fixed; inset: 0; z-index: 149; background: rgba(20,36,29,.32);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.mob-sheet-scrim.open { opacity: 1; visibility: visible; }
.mob-sheet {
  position: fixed; left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  max-height: 68vh; overflow-y: auto; scrollbar-width: none; border-radius: 28px; z-index: 150;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  /* Same green-glass language as the rest of the header (client request,
     2026-07-12) — was a light frosted wash, now a dark forest-green pane
     with solid white text for strong contrast. */
  background: var(--glass-dark-strong);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(16px) scale(.98); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease-out), opacity .35s var(--ease), visibility .4s;
}
.mob-sheet-scrim.open .mob-sheet { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.mob-sheet-handle { width: 38px; height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.3); margin: 0 auto 14px; }
.mob-sheet .m-acc { border-bottom: 1px solid rgba(255,255,255,.14); }
.mob-sheet .m-acc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem .2rem; font-weight: 700; font-size: 1.05rem; color: var(--text-on-dark); }
.mob-sheet .m-acc-head svg { width: 16px; height: 16px; transition: transform .3s; color: var(--gold-400); }
.mob-sheet .m-acc.open .m-acc-head svg { transform: rotate(45deg); }
.mob-sheet .m-acc-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.mob-sheet .m-acc.open .m-acc-body { max-height: 420px; }
.mob-sheet .m-acc-body a { display: block; padding: .5rem .2rem .5rem 1rem; color: var(--text-on-dark-muted); font-size: .92rem; }
.mob-sheet-simple { display: flex; flex-direction: column; }
.mob-sheet-simple a { padding: .8rem .2rem; font-weight: 700; font-size: 1.02rem; color: var(--text-on-dark); border-bottom: 1px solid rgba(255,255,255,.14); }
.mob-sheet-foot { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1rem; }
.mob-sheet-foot select { flex: 1; padding: .6em .8em; border-radius: var(--r-sm); background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.3); font-size: .85rem; color: var(--ink); }

/* ---- 7. HERO ------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,36,29,.6) 0%, rgba(20,36,29,.42) 35%, rgba(20,36,29,.5) 60%, rgba(20,36,29,.9) 100%); }
.hero-inner { width: 100%; padding-bottom: 110px; padding-top: calc(var(--header-h) + var(--util-h) + 24px); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero-rotator { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hero-rotator.is-swapping { opacity: 0; transform: translateY(10px); }
.hero .lead { color: var(--text-on-dark); margin-top: 1.2rem; max-width: 52ch; }
.hero-eyebrow { color: var(--gold-400); }
.hero-eyebrow::before { background: var(--gold-400); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; }
/* compact trust strip shown inside the hero on phones/tablets, so the key
   proof points are visible on first paint without scrolling. Hidden on
   desktop, where the full trust section already sits near the fold. */
.hero-trust { display: none; }

/* On phones the full-height hero centres the headline over the brightest
   middle of the video, where white text washes out. Darken the scrim more
   so the H1/lead/eyebrow/trust strip stay legible on any video frame. */
@media (max-width: 900px) {
  .hero-media::after {
    background: linear-gradient(180deg, rgba(20,36,29,.64) 0%, rgba(20,36,29,.52) 40%, rgba(20,36,29,.6) 65%, rgba(20,36,29,.92) 100%);
  }
}
.hero-scroll { position: absolute; z-index: 10; left: 50%; bottom: 108px; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-shadow: 0 1px 8px rgba(0,0,0,.4);
  animation: scrollBob 2.8s ease-in-out infinite; }
@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(9px); }
}
.hero-scroll .mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; position: relative; }
.hero-scroll .mouse::after { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 6px; background: #fff; border-radius: 2px; animation: scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 10px); } 100% { opacity: 0; } }
/* desktop: hero sized tall and immersive while keeping the trust stats
   visible below it, so the intro heading stays below the fold until scroll */
@media (min-width: 901px) {
  .hero { min-height: clamp(700px, 98vh, 920px); }
  #after-hero { padding-block: 24px 24px; }
}

/* floating enquiry / booking bar — same green-glass language as the header
   and modals now (2026-07-12 request), not the plain white .glass tint. */
.hero-booking-wrap { margin-top: -46px; }
.booking-bar {
  position: relative; z-index: 5;
  padding: 20px; border-radius: var(--r-lg);
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: end;
  background: var(--glass-dark-strong);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
}
.bf-field { display: flex; flex-direction: column; gap: .3rem; }
.bf-field label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark); }
.bf-field select, .bf-field input {
  padding: .7em .8em; border-radius: var(--r-sm); border: 1px solid rgba(40,64,56,.16);
  background: rgba(255,255,255,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .92rem; color: var(--ink); transition: border-color .25s, box-shadow .25s;
}
.bf-field select option { color: var(--ink); }
.bf-field select:focus, .bf-field input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(61,141,102,.2); }

/* trust strip */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 64px); }
.trust-item { display: flex; align-items: center; gap: .7rem; color: var(--text-muted); font-size: .9rem; }
.trust-item strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); line-height: 1; }
.trust-stars { color: var(--gold-500); letter-spacing: 2px; }

/* certification / credential strip */
.cert-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem 2.6rem;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(40,64,56,.1); }
.cert-item { display: flex; align-items: center; gap: .55em; font-size: .84rem; font-weight: 600; color: var(--ink); }
.cert-item svg { width: 18px; height: 18px; color: var(--gold-500); flex-shrink: 0; }
@media (max-width: 680px) {
  .cert-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1rem; text-align: left; }
  .cert-item { font-size: .8rem; }
  .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  /* homepage trust row has 5 items (odd), so the last one spans both
     columns and centers; other .trust instances (e.g. kilimanjaro.html)
     have an even count and fill the 2-col grid naturally. */
  #after-hero .trust-item:last-child { grid-column: 1 / -1; justify-content: center; text-align: center; }
}

/* traveller persona split cards */
.persona-card { min-height: 300px; }
.persona-card .gateway-card-body p { max-width: 34ch; }

/* ---- 8. CARDS / RAILS --------------------------------------------------- */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(24px, 4vw, 44px); }
.rail-controls { display: flex; gap: .6rem; }
.rail-btn { width: 46px; height: 46px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(40,64,56,.2); background: rgba(255,255,255,.5); box-shadow: var(--shadow-sm); transition: background .25s, transform .25s, opacity .25s, box-shadow .25s; }
.rail-btn:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rail-btn:active { transform: translateY(0) scale(.95); filter: brightness(.92); }
.rail-btn svg { width: 20px; height: 20px; }
.rail { display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none;
  /* cards dissolve at both edges instead of being sharply cut by the container */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
/* cards inside a scrolling rail skip their resting drop-shadow, it just
   reads as a dark smear trailing the row while it auto-scrolls */
.rail .card, .rail .quote { box-shadow: none; }
.rail .card:hover { box-shadow: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 clamp(280px, 32%, 380px); }
.rail.auto-scroll { scroll-snap-type: none; cursor: grab; }

/* reviews marquee: full-bleed auto-scroll strip with a soft fade at both edges */
/* reviews wall — three offset columns of compact review cards drifting
   bottom-to-top over a faint African mud-cloth pattern, fading out at both
   ends. Hover pauses the drift so reviews can actually be read. */
.reviews-wall {
  position: relative; height: clamp(480px, 68vh, 640px); overflow: hidden; padding: 0 var(--gutter);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* scattered African motifs behind the cards, one colour, one tone: the
   continent, acacia, elephant, giraffe, kilimanjaro, bird, footprints */
.reviews-wall::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340' fill='none' stroke='%231d3028' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M56 18l10-6 12 3 9 9-2 10 6 9-3 12-8 8-4 12-8 3-6-8-1-11-7-9 1-12z'/%3E%3Cpath d='M180 62h44M202 62V26m0 0l-14 10m14-10l15 9m-24 27l-8 26m26-26l7 26'/%3E%3Cpath d='M52 208c0-12 10-20 24-20 6 0 8-6 16-6 10 0 18 8 18 18v22m-50 0v-16m14 16v-12m22 12v-14m-44-18c-6 0-10 4-10 9 0 4 3 6 6 6'/%3E%3Cpath d='M258 132l10-26 4 26 12 4-12 5-2 42m-8-42l-4 42m-2-51l-8-4 8-2z'/%3E%3Cpath d='M138 306l28-38 14 16 10-11 26 33z'/%3E%3Cpath d='M262 246c8-8 22-8 26 2-8 4-14 2-18 8l-8 12-4-10z'/%3E%3Ccircle cx='84' cy='300' r='3.4'/%3E%3Ccircle cx='96' cy='288' r='3.4'/%3E%3Ccircle cx='108' cy='300' r='3.4'/%3E%3Ccircle cx='96' cy='310' r='2.6'/%3E%3Cpath d='M296 40c-14 2-24 12-26 26 14-2 24-12 26-26z'/%3E%3Cpath d='M283 53c-3 8-3 16 0 22'/%3E%3C/svg%3E");
  background-size: 340px 340px;
}
.reviews-wall-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); max-width: 1160px; margin: 0 auto; height: 100%; }
.wall-col { overflow: hidden; }
.wall-col-2 { padding-top: 72px; }
.wall-col-3 { padding-top: 34px; }
.wall-track { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); animation: wallDrift 46s linear infinite; }
/* middle column flows the other way, each at its own speed — the columns
   pass each other in a slow, continuous weave */
.wall-col-2 .wall-track { animation-duration: 58s; animation-delay: -18s; animation-direction: reverse; }
.wall-col-3 .wall-track { animation-duration: 51s; animation-delay: -33s; }
@keyframes wallDrift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* compact flat cards (no shadow), slight alternating tilt */
.reviews-wall .quote { padding: 1.1rem 1.2rem; box-shadow: none; }
.reviews-wall .quote .q { font-size: .84rem; line-height: 1.5; }
.reviews-wall .quote .who img { width: 34px; height: 34px; }
.reviews-wall .quote .who strong { font-size: .84rem; }
.reviews-wall .quote .who span { font-size: .74rem; }
.reviews-wall .trust-stars { font-size: .8rem !important; margin-bottom: .4rem !important; }
.wall-track .quote:nth-child(odd) { transform: rotate(-.6deg); }
.wall-track .quote:nth-child(even) { transform: rotate(.55deg); }
@media (max-width: 680px) {
  .reviews-wall-cols { grid-template-columns: 1fr 1fr; }
  .wall-col-3 { display: none; }
}
.rail.auto-scroll:active { cursor: grabbing; }

/* package / tour card — photo on top, details in a normal-flow white body
   below it (client's requested layout, 2026-07-12: no more text overlaid on
   the image except the small badge/rating pills, which carry their own
   background so they read regardless of photo content). */
.card { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); display: block; background: #fff; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* .card-media is the whole clickable link (wraps photo + body) — it must NOT
   carry the fixed aspect-ratio/overflow:hidden itself, or .card-body (its
   own child, needed below the photo) gets clipped along with it. Those two
   properties live on .card-photo, a dedicated inner wrapper around just the
   image + its overlay badges. */
.card-media { position: relative; display: block; width: 100%; color: inherit; }
.card-photo { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; color: #fff; }
.card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-photo img { transform: scale(1.06); }
.card-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: .5rem; z-index: 2; }
.card-fav { position: absolute; top: 58px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border); color: var(--ink); }
.card-rating {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: .35em;
  padding: .38em .7em; border-radius: var(--r-pill); background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-sm);
  font-weight: 700; font-size: .82rem; color: var(--ink);
}
.card-rating svg { width: 13px; height: 13px; color: var(--gold-500); }
.card-rating span { color: var(--text-muted); font-weight: 500; }
.card-body { position: static; padding: 20px; display: flex; flex-direction: column; gap: .5rem; }
.card-meta { display: flex; align-items: center; gap: .8rem; font-size: .8rem; color: var(--text-muted); }
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.card h3 { font-size: 1.35rem; color: var(--ink); }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: .9rem; margin-top: .3rem; border-top: 1px solid rgba(40,64,56,.08); }
.card .price small { display: block; font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
.card .price strong { font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.card .price span { display: block; font-size: .74rem; color: var(--text-muted); }
.rating { display: inline-flex; align-items: center; gap: .3em; font-weight: 600; font-size: .88rem; color: var(--ink); }
.rating svg { width: 15px; height: 15px; color: var(--gold-500); }

/* day-trip cards: shorter, lighter excursions get a "ticket stub" feel
   instead of the heavier multi-day safari card treatment */
.card--daytrip .card-badges .chip { display: inline-flex; align-items: center; gap: .4em; }
.card--daytrip .card-badges .chip svg { width: 13px; height: 13px; }
.card-summary { font-size: .82rem; line-height: 1.4; color: var(--text-muted); }
.ticket-notch {
  position: relative; height: 1px; margin: .9rem -20px 0; border-top: 1.5px dashed rgba(40,64,56,.2);
}
.ticket-notch::before, .ticket-notch::after {
  content: ""; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; /* matches .card's own background, not the page's cream tone */
}
.ticket-notch::before { left: -8px; }
.ticket-notch::after { right: -8px; }
.card--daytrip .card-foot { padding-top: .7rem; }
/* activity cards (Zanzibar water sports) sit in a 4-up grid, too narrow for
   a price block + button side by side without the button label wrapping —
   stack them and let the button take the full width instead. */
.card--daytrip .card-foot:has(button[data-book-mode="enquire"]) { flex-direction: column; align-items: stretch; gap: .6rem; }
.card--daytrip .card-foot:has(button[data-book-mode="enquire"]) button { white-space: nowrap; text-align: center; justify-content: center; }
.card-cta { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .86rem; color: var(--green-700);
  transition: gap .25s var(--ease); }
.card-cta svg { width: 15px; height: 15px; }
.card--daytrip:hover .card-cta { gap: .7em; }

/* feature / value cards */
.feature { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(40,64,56,.06); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature .ico { width: 54px; height: 54px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(96,128,104,.16), rgba(61,141,102,.16)); color: var(--green-700); }
.feature .ico svg { width: 26px; height: 26px; }
.feature h4 { margin-bottom: .4rem; }
.feature p { font-size: .92rem; }

/* destination tiles */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; gap: clamp(14px, 1.6vw, 20px); }
.dest { position: relative; border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: flex-end; }
.dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(20,36,29,.55) 58%, rgba(20,36,29,.94) 100%); }
.dest:hover img { transform: scale(1.08); }
.dest-body { position: relative; z-index: 1; padding: 18px; color: #fff; }
.dest-body h4 { color: #fff; font-size: 1.35rem; }
.dest-body span { font-size: .82rem; color: rgba(255,255,255,.8); }
.dest.wide { grid-column: span 2; }
.dest.tall { grid-row: span 2; }
.dest.big { grid-column: span 2; grid-row: span 2; }
.dest.big .dest-body h4 { font-size: 1.8rem; }
.dest-cta { background: linear-gradient(160deg, var(--green-700), var(--green-900)); align-items: center; justify-content: center; text-align: center; transition: background .3s var(--ease), transform .3s var(--ease); }
.dest-cta:hover { background: linear-gradient(160deg, var(--green-600), var(--green-800)); transform: translateY(-3px); }
.dest-cta-body { position: relative; z-index: 1; padding: 18px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.dest-cta-arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); }
.dest-cta-arrow svg { width: 16px; height: 16px; }
.dest-cta-body h4 { color: #fff; font-size: 1.1rem; line-height: 1.3; }
.dest-cta-body p { color: rgba(255,255,255,.72); font-size: .8rem; }

/* stat band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); text-align: center; }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; }
/* Price always spans the full row and left-aligns — on mobile the grid drops
   to 2 columns, and Price being the last cell would otherwise land bottom-right
   corner, exactly where the fixed support widget sits (collides with it on
   first paint). Spanning full width keeps its text clear of that corner. */
.fact-price { grid-column: 1 / -1; }
.stat .n { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--gold-400); line-height: 1; }
.stat .l { color: var(--text-on-dark-muted); font-size: .9rem; margin-top: .4rem; }
.stat-goal { display: block; font-size: .74rem; color: var(--text-on-dark-muted); margin-top: .5rem; }

/* live-rising impact graph */
.impact-graph { margin-bottom: clamp(28px, 4vw, 48px); }
.impact-graph-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: .8rem; }
.impact-graph-label strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-400); }
.impact-graph-label span { color: var(--text-on-dark-muted); font-size: .88rem; }
.impact-graph-svg { width: 100%; height: clamp(120px, 20vw, 200px); display: block; overflow: visible; }
.impact-graph-line { transition: stroke-dashoffset 4.5s cubic-bezier(.16,.8,.2,1); }
.impact-graph-fill { opacity: 0; transition: opacity 2s ease .5s; }
.impact-graph.in .impact-graph-fill { opacity: 1; }

/* split / feature block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split-media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.split-media img, .split-media video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3.4; }

/* testimonial */
.quote { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); }
.quote .q { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; color: var(--ink); font-style: italic; }
.quote .who { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.quote .who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.quote .who strong { display: block; color: var(--ink); font-size: .95rem; }
.quote .who span { font-size: .82rem; color: var(--text-muted); }

/* reviews.html — platform-authentic review wall. Masonry via CSS columns
   (cards keep natural heights), initials avatars (no fake headshots),
   verified chip, per-card micro-tilt for an organic, non-templated feel. */
.reviews-masonry { columns: 3; column-gap: 1.4rem; }
@media (max-width: 1020px) { .reviews-masonry { columns: 2; } }
@media (max-width: 640px)  { .reviews-masonry { columns: 1; } }
.review-card { break-inside: avoid; margin: 0 0 1.4rem; padding: 1.4rem 1.5rem 1.2rem; background: #fff;
  border: 1px solid rgba(40,64,56,.1); border-radius: var(--r-lg); box-shadow: 0 2px 10px rgba(20,36,29,.06);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.review-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 12px 30px rgba(20,36,29,.13); border-color: rgba(61,141,102,.45); }
.rev-head { display: flex; align-items: center; gap: .75rem; }
.rev-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: .88rem; font-weight: 800; color: #fff; letter-spacing: .04em;
  background: linear-gradient(135deg, hsl(var(--h, 152), 32%, 38%), hsl(var(--h, 152), 40%, 26%)); }
.rev-id { min-width: 0; flex: 1; }
.rev-id strong { display: block; color: var(--ink); font-size: .93rem; line-height: 1.25; }
.rev-id small { color: var(--text-muted); font-size: .78rem; }
.rev-verified { display: inline-flex; align-items: center; gap: .3em; flex-shrink: 0; font-size: .7rem; font-weight: 700;
  color: #1a7f4e; background: rgba(26,127,78,.1); border: 1px solid rgba(26,127,78,.22); padding: .3em .7em; border-radius: var(--r-pill); }
.rev-verified svg { width: 11px; height: 11px; }
.rev-meta { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; }
.rev-stars { font-size: .95rem; letter-spacing: .1em; }
.rev-star { color: rgba(40,64,56,.18); }
.rev-star.on { color: var(--gold-500); }
.rev-date { font-size: .76rem; color: var(--text-muted); }
.rev-title { display: block; margin-top: .55rem; color: var(--ink); font-size: 1.02rem; line-height: 1.35; }
.rev-body { margin-top: .45rem; font-size: .92rem; line-height: 1.65; color: var(--text-muted); }
.rev-trip { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed rgba(40,64,56,.14); font-size: .78rem; color: var(--text-muted); }
.rev-trip em { font-style: normal; font-weight: 700; color: var(--ink); }

/* price-on-request marker (Zanzibar packages & activities have tailored quotes) */
.price-poa { font-size: .95em; letter-spacing: .02em; }

/* story / article cards */
.story { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.story:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.story-media { aspect-ratio: 16/10; overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.story:hover .story-media img { transform: scale(1.05); }
.story-body { padding: 20px; }
.story-body h4 { margin: .4rem 0; }
.story-body p { font-size: .9rem; }

/* CTA band */
.cta-band { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: clamp(40px, 7vw, 90px); color: #fff; text-align: center; }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,36,29,.6), rgba(20,36,29,.78)); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--text-on-dark); max-width: 54ch; margin: 1rem auto 0; }
.cta-band .hero-actions { justify-content: center; }

/* ---- 8b. HOMEPAGE FLOW EXTRAS ------------------------------------------- */

/* 3D coverflow — "Our Popular Adventures". Center card sharp; side cards fan
   out scaled/rotated/faded on both sides. Autoplays, pauses on hover/touch,
   draggable with mouse/finger, filterable via chips. */
/* The fanned side cards intentionally extend past the container; clip them at
   the full-width section edge so they can never widen the page on phones
   (real iOS/Android grow the visual viewport from this even when desktop
   DevTools looks fine). clip > hidden: no scroll container is created. */
#popular { overflow-x: hidden; overflow-x: clip; }
.coverflow { position: relative; height: 460px; perspective: 1600px; }
.coverflow-track { position: absolute; inset: 0; transform-style: preserve-3d; cursor: grab; }
.coverflow-track:active { cursor: grabbing; }
.coverflow-card {
  position: absolute; top: 50%; left: 50%; width: 300px; height: 390px;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .65s ease;
  color: #fff; display: block;
}
.coverflow-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coverflow-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,36,29,.28) 0%, transparent 28%, rgba(20,36,29,.6) 62%, rgba(20,36,29,.95) 100%); }
.coverflow-card .card-badges { position: absolute; top: .9rem; left: .9rem; z-index: 2; }
.coverflow-card .card-rating {
  position: absolute; top: .9rem; right: .9rem; left: auto; bottom: auto; z-index: 2;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
}
.coverflow-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.25rem; }
.coverflow-card-meta { font-size: .76rem; font-weight: 700; opacity: .85; }
.coverflow-card-body h3 { color: #fff; font-size: 1.1rem; margin-top: .3rem; }
.coverflow-card-price { font-size: .92rem; font-weight: 800; color: var(--gold-400); margin-top: .5rem; }
.coverflow-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.coverflow-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(40,64,56,.22); transition: all .3s var(--ease); }
.coverflow-dots button.active { width: 26px; border-radius: var(--r-pill); background: var(--gold-500); }
@media (max-width: 860px) {
  .coverflow { height: 400px; }
  .coverflow-card { width: 230px; height: 320px; }
}

/* gateway cards (Kilimanjaro / Safari) */
.gateway-card { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lg); }
.gateway-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gateway-card:hover img { transform: scale(1.06); }
.gateway-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 12%, rgba(20,36,29,.6) 52%, rgba(20,36,29,.96) 100%); }
.gateway-card-body { position: relative; z-index: 1; padding: 2rem; color: #fff; }
.gateway-card-body h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.gateway-card-body p { color: rgba(255,255,255,.82); margin-top: .35rem; }

/* consultation CTA banner */
.consult-banner { border-radius: var(--r-lg); padding: clamp(24px,3.5vw,40px); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.consult-banner .icon-circle { width: 5rem; height: 5rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--green-700), var(--green-900)); }
.consult-banner .icon-circle--agent { position: relative; overflow: visible; padding: 4px; }
.consult-banner .icon-circle--agent img { width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.consult-banner .icon-circle--agent .support-dot { width: 15px; height: 15px; right: 3px; bottom: 3px; }

/* qualification rail ("Makito is the right match if...") — editorial
   numbered manifesto: oversized outlined numerals over a shared glass band,
   each entry separated by a hairline, key phrase set in the serif accent.
   Deliberately no icons, no badges, no sparkles. */
.qual-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  background: rgba(14,26,21,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.qual-item { position: relative; padding: clamp(1.6rem, 2.6vw, 2.4rem); display: flex; flex-direction: column; gap: 1.1rem;
  transition: background .4s var(--ease); }
.qual-item + .qual-item { border-left: 1px solid rgba(255,255,255,.1); }
.qual-item:hover { background: rgba(61,141,102,.08); }
.qual-num { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(61,141,102,.75); transition: color .4s var(--ease); }
.qual-item:hover .qual-num { color: var(--gold-500); }
.qual-item::after { content: ""; position: absolute; left: clamp(1.6rem, 2.6vw, 2.4rem); bottom: 1.2rem; height: 2px; width: 34px;
  background: linear-gradient(90deg, var(--gold-500), transparent); transition: width .45s var(--ease); }
.qual-item:hover::after { width: 72px; }
.qual-item p { font-weight: 600; color: rgba(255,255,255,.92); font-size: 1.02rem; line-height: 1.55; padding-bottom: 1.4rem; }
.qual-item p em { font-style: italic; color: var(--gold-400); font-weight: 700; }
@media (max-width: 960px) {
  .qual-row { grid-template-columns: 1fr 1fr; }
  .qual-item + .qual-item { border-left: none; }
  .qual-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
  .qual-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 560px) {
  .qual-row { grid-template-columns: 1fr; }
  .qual-item:nth-child(even) { border-left: none; }
  .qual-item:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.1); }
}

/* achievements — reference-style award cards: emblem tile, heading, short
   story, read-more link */
.achv-card { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.75rem; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); border: 1px solid rgba(40,64,56,.06); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.achv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.achv-ico { flex-shrink: 0; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(61,141,102,.18), rgba(61,141,102,.06));
  border: 1px solid rgba(61,141,102,.35); color: var(--gold-600); }
.achv-ico svg { width: 32px; height: 32px; }
.achv-txt { flex: 1; min-width: 0; }
.achv-card h4 { font-size: 1.05rem; }
.achv-card p { font-size: .88rem; margin-top: .4rem; }
.achv-more { display: inline-flex; align-items: center; gap: .4em; margin-top: .7rem; font-size: .82rem; font-weight: 700; color: var(--gold-600); transition: gap .25s var(--ease); }
.achv-card:hover .achv-more { gap: .65em; }
.achv-more svg { width: 14px; height: 14px; }
@media (max-width: 680px) { .achv-card { flex-direction: column; gap: .9rem; } }
.achv-card p { font-size: .84rem; margin-top: .35rem; }

/* guests-from honest trust row: real flag icons only, no text label
   (country name lives in title/aria-label for accessibility) */
.guest-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.guest-strip .flag { display: block; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); border: 1px solid rgba(40,64,56,.08);
  overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); cursor: default; }
.guest-strip .flag:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-md); }
.guest-strip .flag svg { width: 100%; height: 100%; display: block; }

/* full-bleed video feature + lightbox */
.video-feature { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 21/9; box-shadow: var(--shadow-lg); }
.video-feature img, .video-feature video { width: 100%; height: 100%; object-fit: cover; }
.video-feature .play-btn {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; background: var(--glass-tint-strong); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); transition: transform .3s var(--ease);
}
.video-feature .play-btn:hover { transform: scale(1.08); }
.video-feature .play-btn svg { width: 26px; height: 26px; color: var(--green-800); margin-left: 4px; }
.video-feature .vf-caption { position: absolute; bottom: 1.5rem; left: 1.5rem; color: #fff; font-weight: 800; letter-spacing: .12em; font-size: .8rem; text-transform: uppercase; }
.lightbox-scrim { position: fixed; inset: 0; z-index: 250; background: rgba(10,16,13,.92); display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.lightbox-scrim.open { opacity: 1; visibility: visible; }
.lightbox-scrim video { width: 100%; max-width: 1000px; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lightbox-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; }

/* Instagram-style visual strip */
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.insta-tile { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.insta-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.insta-tile:hover img { transform: scale(1.1); }
@media (max-width: 900px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } .gateway-card { min-height: 240px; } }
@media (max-width: 680px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }

/* video-backed section — subtle fade so footage stays visible behind text */
.video-bg-section { position: relative; overflow: hidden; }
.video-bg { position: absolute; inset: 0; z-index: 0; }
.video-bg video { width: 100%; height: 100%; object-fit: cover; }
.video-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20,36,29,.68), rgba(20,36,29,.48)); }
.video-bg-section > .container { position: relative; z-index: 1; }

/* section on dark green */
.on-green { background: linear-gradient(160deg, var(--green-800), var(--green-900)); color: #fff; position: relative; overflow: hidden; }
.on-green h2, .on-green h3, .on-green h4 { color: #fff; }
.on-green p { color: var(--text-on-dark-muted); }
.on-green .eyebrow { color: var(--gold-400); }
.on-green .eyebrow::before, .on-green .eyebrow.center::after { background: var(--gold-400); }
.on-green::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(700px 400px at 90% 0%, rgba(96,128,104,.4), transparent 60%); }

/* ---- 9. FORMS ----------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
/* Every field sits on a white/near-white surface regardless of what section
   it's in (light page or green-glass modal), so its text is always solid
   black — client rule: white background = solid black font. */
.field input, .field textarea, .field select {
  padding: .8em 1em; border-radius: var(--r-sm); color: var(--ink);
  background: rgba(255,255,255,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(40,64,56,.18); transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink); font-weight: 700; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(61,141,102,.2); background: #fff; }
.field textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Inside the now green-glass modals, everything else on that panel is solid
   white — but the field label sits directly on the dark panel (not on the
   white input), so it needs the light treatment while the input itself
   stays white-bg/black-text above. */
.modal .field label { color: var(--text-on-dark); }

/* ---- 10. MODALS / POPUPS ------------------------------------------------ */
.modal-scrim { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px;
  background: rgba(20,36,29,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.modal-scrim.open { opacity: 1; visibility: visible; }
.modal {
  position: relative;
  /* min-width:0 lets the grid item shrink below its content's max-content
     size (e.g. the welcome modal's unbroken perks row) so width:min(560px,
     100%) actually clamps to the viewport instead of the content forcing
     the grid track wider. */
  width: min(560px, 100%); min-width: 0; max-height: 90vh; overflow-y: auto; scrollbar-width: none; border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px);
  /* Green-tinted glass, not white (client request, 2026-07-12) — every
     modal/popup now reads as a frosted forest-green pane, with solid white
     text throughout for strong contrast (older-skewing audience). */
  background: var(--glass-dark-strong); color: var(--text-on-dark);
  backdrop-filter: blur(34px) saturate(160%); -webkit-backdrop-filter: blur(34px) saturate(160%);
  border: 1px solid var(--glass-border-dark); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(16px) scale(.98); transition: transform .4s var(--ease-out); }
.modal-scrim.open .modal { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: rgba(255,255,255,.85); color: var(--ink); transition: background .2s, transform .2s; }
.modal-close:hover { background: #fff; transform: rotate(90deg); }
.modal-close svg { width: 16px; height: 16px; }
/* Any heading/eyebrow sitting directly in a modal (not just inside
   .modal-head, e.g. the site-credit modal's h3/eyebrow) needs the light
   treatment too — the sitewide h1-h4 default and .eyebrow default are both
   tuned for white sections and go near-invisible on this dark glass. */
.modal h1, .modal h2, .modal h3, .modal h4 { color: #fff; }
.modal .eyebrow { color: var(--gold-400); }
.modal .eyebrow::before { background: var(--gold-400); }
.modal-head { margin-bottom: 1.4rem; }
.modal-head h3 { color: #fff; }
.modal-head p { margin-top: .4rem; font-size: .92rem; color: var(--text-on-dark); }
.modal--welcome { text-align: center; }
.modal--welcome .modal-head { margin-bottom: 1.2rem; }
.modal-badge { position: relative; width: 96px; height: 96px; margin: 0 auto 1.2rem; display: grid; place-items: center; }
.modal-badge-logo { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: #fff; padding: 8px; box-shadow: var(--shadow-md); animation: badgeDropIn .6s var(--ease-out); }
.modal-badge-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(61,141,102,.55); animation: badgePulse 2.6s ease-out infinite; }
.modal-badge-ring--2 { animation-delay: 1.3s; }
@keyframes badgePulse { 0% { transform: scale(.78); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes badgeDropIn { 0% { transform: scale(.4) translateY(-16px); opacity: 0; } 60% { transform: scale(1.08) translateY(0); opacity: 1; } 100% { transform: scale(1); } }
.modal-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem; margin: 1rem 0 1.4rem; }
.modal-perks span { display: inline-flex; align-items: center; gap: .4em; font-size: .84rem; color: #fff; font-weight: 600;
  opacity: 0; animation: perkRise .5s var(--ease-out) forwards; }
@keyframes perkRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal-perks svg { width: 15px; height: 15px; color: var(--gold-400); }
.modal-fine { margin-top: .9rem; font-size: .78rem; color: var(--text-on-dark-muted); }
/* welcome popup v2: one glance = one offer. Shimmering 5%-OFF ribbon,
   joined pill email field with the claim button inside it. */
.welcome-off {
  position: relative; display: inline-flex; align-items: center; gap: .4em; overflow: hidden;
  margin: -.2rem auto 1rem; padding: .5em 1.3em; border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--gold-600), var(--gold-400) 45%, var(--gold-600));
  color: var(--green-900); font-size: .86rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 6px 18px rgba(61,141,102,.4), inset 0 1px 0 rgba(255,255,255,.45);
}
.welcome-off em { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 1.15em; letter-spacing: .02em; }
.welcome-off::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  width: 55%; animation: offShine 3.2s var(--ease) infinite;
}
@keyframes offShine { 0%, 55% { transform: translateX(-120%) skewX(-18deg); } 85%, 100% { transform: translateX(320%) skewX(-18deg); } }
.modal--welcome .modal-head p { max-width: 34ch; margin-inline: auto; }
.welcome-input {
  display: flex; align-items: center; gap: .4rem; padding: 6px 6px 6px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.72); border: 1.5px solid rgba(40,64,56,.14);
  box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s, transform .2s;
}
.welcome-input:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(61,141,102,.18), var(--shadow-md); transform: translateY(-1px); }
.welcome-input.invalid { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,.14); }
.welcome-input .wi-ico { flex-shrink: 0; display: flex; color: var(--gold-600); }
.welcome-input .wi-ico svg { width: 18px; height: 18px; }
.welcome-input input { flex: 1; min-width: 0; border: 0; background: none; font-size: .95rem; padding: .55em 0; color: var(--ink); }
.welcome-input input::placeholder { color: var(--ink); font-weight: 700; }
.welcome-input input:focus { outline: none; }
.welcome-claim {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .4em; padding: .65em 1.15em; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--green-900);
  font-weight: 800; font-size: .88rem; box-shadow: 0 4px 12px rgba(61,141,102,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.welcome-claim:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 16px rgba(61,141,102,.5); }
.welcome-claim svg { width: 15px; height: 15px; }

/* "Design my own safari" step wizard, and the shared consultation-booking
   flow. Progress reads like a little journey: a dotted road with a paper
   plane that travels along it as the user moves step to step, rather than
   a plain loading-style bar. */
.modal--wizard { width: min(600px, 100%); }
/* The roadmap sits in its own tinted panel, pushed clear below the
   absolutely-positioned close button (top:16px, 40px tall) so the X and the
   progress never share a line. */
.wizard-progress-row { margin-top: 42px; margin-bottom: 1.8rem; }
.roadmap {
  border-radius: var(--r-md); padding: 12px 16px 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}
.roadmap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.roadmap-title { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold-400); }
.roadmap-step { font-size: .72rem; font-weight: 700; color: #fff; }
.roadmap-svg { display: block; width: 100%; height: auto; overflow: visible; }
.roadmap-track { stroke: rgba(255,255,255,.25); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 8; }
.roadmap-done { stroke: var(--gold-500); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.65,0,.35,1); }
.roadmap-node { fill: #fff; stroke: rgba(255,255,255,.4); stroke-width: 2; transition: fill .45s var(--ease), stroke .45s var(--ease); }
.roadmap-node.done { fill: var(--gold-500); stroke: var(--gold-600); }
.roadmap-marker { transition: transform .7s cubic-bezier(.65,0,.35,1); }
.roadmap-marker-bg { fill: var(--green-500); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.roadmap-marker-ico { fill: #fff; }
/* tech variant (consultation): circuit-trace styling instead of a safari trail */
.roadmap--tech { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.roadmap--tech .roadmap-title { color: #fff; }
.roadmap--tech .roadmap-track { stroke-dasharray: 5 5; stroke-width: 2.4; }
.roadmap--tech .roadmap-done { stroke: var(--green-400); }
.roadmap--tech .roadmap-node { stroke: rgba(255,255,255,.4); }
.roadmap--tech .roadmap-node.done { fill: var(--green-400); stroke: var(--green-500); }
.roadmap--tech .roadmap-marker-bg { fill: var(--green-600); }
/* climb variant (Kilimanjaro): jagged mountain-ascent trail with a summit flag */
.roadmap--climb { background: rgba(125,150,190,.14); border-color: rgba(125,150,190,.3); }
.roadmap--climb .roadmap-title { color: #fff; }
.roadmap--climb .roadmap-track { stroke: rgba(180,196,220,.5); stroke-dasharray: 0.1 7; stroke-width: 3; }
.roadmap--climb .roadmap-done { stroke: var(--gold-500); }
.roadmap--climb .roadmap-node { stroke: rgba(180,196,220,.6); }
.roadmap--climb .roadmap-node.done { fill: var(--gold-500); stroke: var(--gold-600); }
.roadmap--climb .roadmap-marker-bg { fill: #6f8bb3; }
/* package-specific booking modal: pinned package identity under the roadmap */
.book-pkg { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; margin-bottom: 1.2rem;
  border-radius: var(--r-md); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.book-pkg-img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.book-pkg-id strong { display: block; color: #fff; font-size: 1rem; line-height: 1.25; }
.book-pkg-id small { color: var(--text-on-dark-muted); font-size: .8rem; font-weight: 600; }
.book-pkg-id small .js-price { color: var(--gold-400); }
[data-book-body] h3 { margin: .4rem 0 1.2rem; }
.wizard-back { display: inline-flex; align-items: center; gap: .4em; font-size: .84rem; font-weight: 700; color: var(--text-on-dark-muted); margin-bottom: 1rem; transition: color .2s; }
.wizard-back:hover { color: #fff; }
.wizard-back svg { width: 14px; height: 14px; }
[data-wizard-body] h3 { margin: .4rem 0 1.2rem; }
.wizard-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.wizard-opt { padding: .8em 1em; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.85);
  font-weight: 600; font-size: .92rem; text-align: center; color: var(--ink); transition: all .2s var(--ease); }
.wizard-opt:hover { border-color: var(--gold-500); background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.wizard-opt.active { background: var(--green-500); border-color: var(--green-500); color: #fff; }
/* phone input with country-code dropdown; validation error states */
.phone-group { display: flex; gap: .5rem; }
.phone-group .phone-cc {
  flex-shrink: 0; width: auto; padding: .7em .6em; border-radius: var(--r-sm);
  background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.3);
  font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.phone-group .phone-num { flex: 1; min-width: 0; }
.field.invalid input, .field.invalid textarea, .phone-group.invalid .phone-num {
  border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.13);
}
.field-msg { min-height: 0; font-size: .78rem; color: #c0392b; font-weight: 600; margin-top: .4rem; text-align: left; }
.field-msg:empty { margin-top: 0; }

.wizard-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-bottom: 1.6rem; }
.wizard-summary-row small { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); font-weight: 700; margin-bottom: .2rem; }
.wizard-summary-row strong { color: #fff; font-size: .95rem; }

/* toast — same glass language as the modals, gold check chip */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px) scale(.96); z-index: 300;
  max-width: min(400px, calc(100vw - 40px));
  padding: 10px 20px 10px 10px; border-radius: var(--r-pill); color: var(--ink); font-weight: 600; font-size: .88rem; line-height: 1.35;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .5s var(--ease-out), opacity .4s var(--ease-out), visibility .5s; display: flex; align-items: center; gap: .7em; }
.toast.show { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
.toast-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--green-900);
  box-shadow: 0 3px 10px rgba(61,141,102,.4), inset 0 1px 0 rgba(255,255,255,.45); }
.toast-ico svg { width: 16px; height: 16px; }
.toast-ico-ok, .toast-ico-err { display: flex; }
.toast-ico-err, .toast--error .toast-ico-ok { display: none; }
.toast--error .toast-ico-err { display: flex; }
.toast--error .toast-ico { background: linear-gradient(135deg, #d35445, #b03225); color: #fff;
  box-shadow: 0 3px 10px rgba(176,50,37,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.toast--error { color: #8c2b20; }
@media (max-width: 900px) { .toast { bottom: 106px; } }

/* cookie consent — bottom-left, glass, dismissible */
.cookie-banner {
  position: fixed; left: 22px; bottom: 22px; z-index: 140; width: min(340px, calc(100vw - 44px));
  padding: 18px 20px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: .9rem;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateY(20px); opacity: 0; visibility: hidden;
  transition: transform .45s var(--ease-out), opacity .4s var(--ease), visibility .45s;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; visibility: visible; }
.cookie-banner p { font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
.cookie-banner a { color: var(--green-700); text-decoration: underline; font-weight: 600; }
.cookie-actions { display: flex; gap: .6rem; }
.cookie-actions .btn { flex: 1; }
@media (max-width: 900px) { .cookie-banner { left: 16px; bottom: 106px; width: calc(100vw - 32px); } }

/* floating support launcher: "How can I help you?" pill + agent avatar,
   opens a WhatsApp / Live-chat option menu and a coming-soon chat panel */
.support-fab { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; }
.support-launch { display: flex; align-items: center; gap: 0; padding: 0; }
.support-label {
  background: var(--green-700); color: #fff; font-size: .88rem; font-weight: 700;
  padding: .7em 1.2em; border-radius: var(--r-pill); margin-right: -14px; padding-right: calc(1.2em + 14px);
  box-shadow: var(--shadow-md); white-space: nowrap;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.support-launch:hover .support-label { transform: translateX(-3px); }
.support-avatar {
  position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  box-shadow: var(--shadow-lg); transition: transform .3s var(--ease);
}
/* thin breathing ring around the avatar — "we're online" */
.support-avatar::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid rgba(46,204,113,.85); pointer-events: none;
  animation: onlineGlow 2.6s ease-in-out infinite;
}
@keyframes onlineGlow {
  0%, 100% { opacity: .45; box-shadow: 0 0 4px rgba(46,204,113,.25); }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(46,204,113,.55); }
}
.support-launch:hover .support-avatar { transform: scale(1.06); }
.support-avatar img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; background: #fff; }
.support-avatar--sm { width: 38px; height: 38px; box-shadow: none; }
.support-avatar--sm img { border-width: 2px; }
.support-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: #2ecc71; border: 2.5px solid #fff; }
.support-avatar--sm .support-dot { width: 10px; height: 10px; border-width: 2px; }
.support-menu {
  position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; flex-direction: column; gap: .55rem;
  visibility: hidden; pointer-events: none;
  transition: visibility .8s;
}
/* each option floats up on its own gentle curve, slightly staggered, so the
   menu feels like it rises rather than snapping open */
.support-menu .support-opt { opacity: 0; transform: translateY(22px) scale(.96);
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.22,1,.36,1); }
.support-menu .support-opt:first-child { transition-delay: .08s; }
.support-fab.menu-open .support-menu { visibility: visible; pointer-events: auto; }
.support-fab.menu-open .support-opt { opacity: 1; transform: translateY(0) scale(1); }
.support-opt {
  display: flex; align-items: center; gap: .6em; padding: .65em 1.1em; border-radius: var(--r-pill);
  font-size: .9rem; font-weight: 700; color: var(--green-800);
  background: var(--glass-tint-strong);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.support-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.support-opt svg { width: 20px; height: 20px; }
.support-opt--wa svg { color: #25d366; }
.support-opt--chat svg { color: var(--gold-600); }
.support-chat {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: min(350px, calc(100vw - 44px));
  border-radius: 20px; overflow: hidden;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(34px) saturate(170%); -webkit-backdrop-filter: blur(34px) saturate(170%);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.5);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); pointer-events: none; transform-origin: bottom right;
  transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility .35s;
}
.support-fab.chat-open .support-chat { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.support-fab.chat-open .support-menu { opacity: 0; visibility: hidden; pointer-events: none; }
.support-chat-head {
  display: flex; align-items: center; gap: .7rem; padding: 14px 14px 12px;
  background: linear-gradient(135deg, var(--green-700), var(--green-900)); color: #fff;
}
.support-chat-id { flex: 1; min-width: 0; }
.support-chat-id strong { display: block; font-size: .95rem; }
.support-chat-id small { font-size: .74rem; color: rgba(255,255,255,.75); }
.support-chat-close { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,.14); transition: background .2s; }
.support-chat-close:hover { background: rgba(255,255,255,.28); }
.support-chat-close svg { width: 14px; height: 14px; }
.support-chat-body { padding: 16px 14px; display: flex; flex-direction: column; gap: .6rem; max-height: 46vh; overflow-y: auto; }
.chat-msg { max-width: 85%; }
.chat-msg--agent p {
  background: rgba(255,255,255,.75); color: var(--ink); font-size: .87rem; line-height: 1.45;
  padding: .65em .9em; border-radius: 14px 14px 14px 4px; box-shadow: var(--shadow-sm);
}
.chat-soon {
  margin-top: .4rem; padding: 14px; border-radius: 14px; text-align: center;
  background: rgba(61,141,102,.14); border: 1px dashed rgba(61,141,102,.55);
}
.chat-soon strong { display: block; color: var(--gold-600); font-size: .88rem; }
.chat-soon p { font-size: .8rem; color: var(--text-muted); margin: .3rem 0 .7rem; }
.chat-soon .btn svg { width: 15px; height: 15px; }
.support-chat-input { display: flex; gap: .5rem; padding: 10px 14px 14px; }
.support-chat-input input {
  flex: 1; min-width: 0; padding: .6em 1em; border-radius: var(--r-pill);
  background: rgba(255,255,255,.6); border: 1px solid rgba(40,64,56,.14); font-size: .86rem;
}
.support-chat-input input:disabled { opacity: .65; cursor: not-allowed; }
.support-chat-input button { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-500); color: var(--green-900); opacity: .65; cursor: not-allowed; }
.support-chat-input button svg { width: 17px; height: 17px; }

/* go-to-top, scroll-progress ring — stacked on the right, above the WhatsApp bubble */
.go-top {
  position: fixed; right: 22px; bottom: 90px; z-index: 90; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--glass-tint-strong);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, bottom .3s var(--ease);
}
.go-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.go-top .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.go-top .ring .track { stroke: rgba(40,64,56,.14); }
.go-top .ring .fill { stroke: var(--green-600); stroke-linecap: round; }
.go-top .go-top-arrow { position: relative; z-index: 1; width: 18px; height: 18px; color: var(--green-800); }
@media (max-width: 900px) {
  .go-top { bottom: 174px; right: 16px; }
  .support-fab { bottom: 106px; right: 16px; }
  /* compact on phones so it doesn't sit over the hero Scroll indicator */
  .support-label { font-size: .72rem; padding: .55em .95em; margin-right: -11px; padding-right: calc(.95em + 11px); }
  .support-avatar { width: 46px; height: 46px; }
  .support-avatar img { border-width: 2px; }
}

/* ---- 11. FOOTER --------------------------------------------------------- */
.site-footer { background: linear-gradient(180deg, var(--green-800), var(--green-900)); color: var(--text-on-dark-muted); padding-top: clamp(56px, 8vw, 96px); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 1.2rem; }
.footer-brand p { max-width: 34ch; font-size: .92rem; color: var(--text-on-dark-muted); }
.footer-social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.footer-social a { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: background .25s, transform .25s; }
/* keep every social glyph the same visual weight (the WhatsApp svg carries
   no width/height attributes, so without this it fills the whole circle) */
.footer-social a svg { width: 18px; height: 18px; }
.footer-social a:hover { background: var(--gold-500); color: var(--green-900); transform: translateY(-2px); }
.footer-contact { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.4rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: .5em; font-size: .9rem; color: var(--text-on-dark-muted); transition: color .2s; }
.footer-contact a:hover { color: var(--gold-400); }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold-500); }
.footer-col h5 { color: #fff; font-family: var(--font-ui); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col a { display: block; padding: .35rem 0; font-size: .92rem; transition: color .2s; }
.footer-col a:hover { color: var(--gold-400); }
.footer-news p { font-size: .9rem; margin-bottom: 1.1rem; color: var(--text-on-dark-muted); }
.footer-news-form { display: flex; gap: .4rem; padding: .35rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); transition: border-color .25s, background .25s; }
.footer-news-form:focus-within { border-color: var(--gold-400); background: rgba(255,255,255,.1); }
.footer-news-form input { flex: 1; min-width: 0; padding: .7em 1em; border-radius: var(--r-pill); background: transparent; border: 0; color: #fff; }
.footer-news-form input::placeholder { color: rgba(255,255,255,.5); }
.footer-news-form .btn { flex-shrink: 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 24px 0 32px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; font-size: .84rem;
  color: var(--text-on-dark-muted); }
.footer-bottom span, .footer-bottom a, .footer-badges, .footer-badges span { color: var(--text-on-dark-muted); }
.footer-bottom a:hover { color: var(--gold-400); }
.footer-badges { display: flex; gap: 1rem; align-items: center; }
.footer-credit { display: block; text-align: center; padding: 16px 0 28px; font-size: .82rem; color: rgba(255,255,255,.45); }
.footer-credit .credit-heart { display: inline-block; vertical-align: -1px; margin: 0 .1em; }
.footer-credit a { color: rgba(255,255,255,.75); font-weight: 600; transition: color .2s; }
.footer-credit a:hover { color: var(--gold-400); }
.footer-credit-btn { font: inherit; color: rgba(255,255,255,.75); font-weight: 600; transition: color .2s; cursor: pointer; }
.footer-credit-btn:hover { color: var(--gold-400); }

/* credit modal — chips/divider/links were tuned for the old white modal
   (dark-on-light tints); the modal is dark green now, so these need the
   light-on-dark treatment instead (2026-07-12 contrast fix). */
.modal--credit .credit-name { margin-top: .3rem; }
.credit-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.1rem 0; }
.credit-tags .chip { background: rgba(255,255,255,.14); color: #fff; }
.modal--credit > p { margin-bottom: 1.3rem; color: var(--text-on-dark); }
.credit-divider { height: 1px; background: rgba(255,255,255,.18); margin-bottom: 1.2rem; }
.credit-link { display: flex; align-items: center; gap: .6em; font-weight: 600; color: #fff; margin-bottom: .7rem; transition: color .2s; }
.credit-link:hover { color: var(--gold-400); }
.credit-link svg { width: 15px; height: 15px; color: var(--gold-400); flex-shrink: 0; }
.credit-actions { display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.credit-actions .btn { flex: 1 1 180px; }

/* ---- 12. MOTION / REVEAL ------------------------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(38px) scale(.96); transition: opacity 1.35s var(--ease-out), transform 1.35s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .12s; }
[data-reveal][data-delay="2"] { transition-delay: .24s; }
[data-reveal][data-delay="3"] { transition-delay: .36s; }
[data-reveal][data-delay="4"] { transition-delay: .48s; }

/* scroll-progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 300;
  background: var(--gold-500); box-shadow: 0 0 8px rgba(61,141,102,.6); transition: width .1s linear; }

/* card tilt — JS drives the transform inline (always wins the cascade) so it
   composes cleanly with each card's existing hover-lift instead of fighting it */
.tilt-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tilt-card.tilting { transition: transform .08s linear; }

/* tactile button press */
.btn:active { transform: translateY(0) scale(.97); }

.page-hero { position: relative; padding-top: calc(var(--header-h) + var(--util-h) + clamp(60px, 10vw, 120px)); padding-bottom: clamp(48px, 8vw, 90px); color: #fff; overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; z-index: -1; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,36,29,.6), rgba(20,36,29,.5) 40%, rgba(20,36,29,.8)); }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: var(--text-on-dark); margin-top: 1rem; }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--gold-400); }

/* ---- 12b. ACCORDION / ITINERARY / ARTICLE ------------------------------- */
[data-accordion] .acc-item { border-bottom: 1px solid rgba(40,64,56,.14); }
.acc-head { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.1rem 0; text-align: left; }
.acc-day { flex-shrink: 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600);
  width: 62px; }
.acc-title { flex: 1; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.acc-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: rgba(40,64,56,.08); color: var(--green-700); transition: transform .3s var(--ease), background .3s; }
.acc-ico svg { width: 16px; height: 16px; }
.acc-item.open .acc-ico { transform: rotate(45deg); background: var(--gold-500); color: #fff; }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.acc-item.open .acc-body { max-height: 300px; }
.acc-body p { padding: 0 0 1.2rem 78px; }

.article-body { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.8; }
.article-body p { margin-bottom: 1.3rem; }
.article-body h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin: 2rem 0 1rem; }
.article-body h3 { margin: 1.6rem 0 .8rem; }
.article-body ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.3rem; }
.article-body ul li { margin-bottom: .5rem; }
.article-body blockquote { border-left: 3px solid var(--gold-500); padding-left: 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--ink); margin: 1.6rem 0; }

/* filter bar (listing pages) */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: clamp(28px, 4vw, 44px); }
.filter-chip { padding: .55em 1.1em; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--green-700);
  background: rgba(255,255,255,.6); border: 1px solid rgba(40,64,56,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm); transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s; }
.filter-chip:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.filter-chip:active { transform: translateY(0) scale(.96); filter: brightness(.94); }
.filter-chip.active { background: var(--green-700); color: #fff; border-color: var(--green-700); }

/* ---- 13. RESPONSIVE ----------------------------------------------------- */
@media (max-width: 1040px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .dest.wide, .dest.big { grid-column: span 2; }
  .split { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-menu, .nav-cta .btn { display: none; }
  .util-left .util-item.hide-sm, .util-sep.hide-sm { display: none; }
  .booking-bar { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero-trust {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin-top: 1.5rem;
    padding-top: 1.15rem; border-top: 1px solid rgba(255,255,255,.2);
  }
  .hero-trust span { font-size: .78rem; color: rgba(255,255,255,.82); white-space: nowrap; display: inline-flex; align-items: baseline; gap: .35em; }
  .hero-trust strong { color: var(--gold-400); font-weight: 800; font-family: var(--font-display); font-size: .98rem; letter-spacing: .01em; }
  /* the hero already shows these same stats (.hero-trust) above the fold
     on mobile, so the full .trust row right under the booking bar is a
     repeat, cert-strip (different content) stays visible */
  #after-hero .trust { display: none; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-badges { justify-content: center; }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; }
  .guest-strip { gap: .8rem; }
  .guest-strip .flag { width: 44px; height: 44px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .booking-bar { grid-template-columns: 1fr; }
  .hero-booking-wrap { margin-top: -20px; }
  .rail > * { flex-basis: 82%; }
  .dest-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .dest.wide, .dest.big { grid-column: span 1; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
  .fact-grid strong { font-size: .92rem; }
  .dest.big, .dest.tall { grid-row: span 1; }
  .stats { grid-template-columns: 1fr 1fr; gap: 28px; }
  .form-row { grid-template-columns: 1fr; }
  .util-bar { display: none; }
  .hero-inner { padding-top: calc(var(--header-h) + 30px); padding-bottom: 150px; }
  .page-hero { padding-top: calc(var(--header-h) + 80px); }
  .footer-top { grid-template-columns: 1fr; }
  .rail-head { flex-direction: column; align-items: flex-start; }
  .hero-actions { flex-wrap: nowrap; gap: .5rem; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: .8em .6em; font-size: .82rem; white-space: nowrap; }
}