/* ==========================================================================
   Sand Dune Bashing — main stylesheet
   Palette sampled from bnbtravelandtours.com:
     lime  #ADCA2E   action green #61CE70   olive #66744E
     brown #412706 / #6F3E00   ink #333 / #111
   No framework, no runtime dependencies.
   ========================================================================== */

/* 1 — TOKENS ------------------------------------------------------------- */
:root {
  /* brand */
  --lime-600:  #8ca81f;
  --lime-500:  #adca2e;
  --lime-400:  #c2dc55;
  --lime-100:  #eef4d3;
  --lime-50:   #f7f9ee;

  --green-600: #2f8c3d;
  --green-500: #61ce70;
  --green-400: #7ddb89;
  --green-50:  #eef9f0;

  --olive-600: #66744e;

  --brown-900: #2a1904;
  --brown-800: #412706;
  --brown-700: #5a370a;
  --brown-600: #6f3e00;
  --brown-100: #f3e6d4;
  --sand-50:   #fff8ef;
  --sand-100:  #fdf1e2;

  --ink:       #1d1d1b;
  --ink-soft:  #333333;
  --muted:     #6b6b66;
  --line:      #e6e3da;
  --line-warm: #ecdfcc;

  --ok: #3fa84f;
  --warn: #b4361f;

  /* per-page accent (tour pages override) */
  --accent:      var(--lime-600);
  --accent-deep: #6f8514;
  --accent-soft: var(--lime-50);

  --radius-s: 6px;
  --radius:   10px;
  --radius-l: 16px;
  --radius-xl: 24px;

  --shadow-s: 0 1px 2px rgba(25,20,10,.05), 0 2px 6px rgba(25,20,10,.05);
  --shadow:   0 2px 6px rgba(25,20,10,.06), 0 10px 24px -12px rgba(25,20,10,.2);
  --shadow-l: 0 6px 18px rgba(25,20,10,.08), 0 24px 52px -26px rgba(25,20,10,.32);

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 36px);

  /* tightened vertical rhythm */
  --sec-y:  clamp(34px, 4.2vw, 62px);
  --sec-y-s: clamp(24px, 3vw, 40px);

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body[data-accent="gold"]  { --accent: #b8860b; --accent-deep: #8a6408; --accent-soft: #fdf6e0; }
body[data-accent="dawn"]  { --accent: var(--brown-600); --accent-deep: var(--brown-800); --accent-soft: var(--sand-50); }
body[data-accent="royal"] { --accent: var(--olive-600); --accent-deep: #4c5739; --accent-soft: #f1f4ea; }
body[data-accent="ember"] { --accent: var(--lime-600); --accent-deep: #6f8514; --accent-soft: var(--lime-50); }
body[data-accent="sunset"]{ --accent: var(--green-600); --accent-deep: #2e8a3c; --accent-soft: var(--green-50); }

/* 2 — RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 78px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lime-600); }
button { font: inherit; }
ul, ol { padding-left: 1.1em; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--lime-500); color: #17210a; }

/* 3 — TYPOGRAPHY --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700; line-height: 1.14; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 .45em; text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem); }
h4 { font-size: 1.03rem; }
p  { margin: 0 0 .9em; max-width: 70ch; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 650; }
.lede { font-size: clamp(1rem, .95rem + .3vw, 1.14rem); color: var(--ink-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 .6em;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--lime-500); }

/* 4 — LAYOUT ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 840px; }
.section { padding-block: var(--sec-y); position: relative; }
.section-tight { padding-block: var(--sec-y-s); }
.section-head { max-width: 780px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(22px, 3.2vw, 46px); align-items: stretch; }
.split > * { align-self: center; min-width: 0; }
/* media column fills the row height so long text columns leave no dead space */
.split .figure { align-self: center; display: flex; height: 100%; max-height: 460px; }
.split .figure img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.split .map-embed { align-self: center; aspect-ratio: auto; height: 100%; min-height: 330px; max-height: 460px; }

/* section background variants — each section on the page differs */
.bg-white { background: #fff; }
.bg-lime  { background: var(--lime-50); }
.bg-sand  { background: var(--sand-50); }
.bg-mint  { background: var(--green-50); }
.bg-stone { background: #f5f5f3; }
.bg-brown { background: var(--brown-800); color: #ddd2c2; }
.bg-brown h2, .bg-brown h3, .bg-brown h4, .bg-brown strong { color: #fff; }
.bg-brown .eyebrow { color: var(--lime-400); }
.bg-brown .eyebrow::before { background: var(--lime-400); }
.bg-brown a { color: var(--lime-400); }

/* image-backed band */
.bg-img { position: relative; isolation: isolate; color: #e6ddd0; background: var(--brown-900); }
.bg-img > .band-art {
  position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
}
.bg-img::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,12,3,.86), rgba(20,12,3,.7));
}
.bg-img h2, .bg-img h3, .bg-img h4, .bg-img strong { color: #fff; }
.bg-img .eyebrow { color: var(--lime-400); }
.bg-img .eyebrow::before { background: var(--lime-400); }
.bg-img a { color: var(--lime-400); }
.bg-img a:hover { color: #fff; }

/* 5 — BUTTONS ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--lime-500);
  --btn-fg: #000000;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .72em 1.35em;
  border: 1px solid transparent; border-radius: var(--radius-s);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: .93rem; letter-spacing: .01em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), filter .15s var(--ease), background .15s var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn:hover { filter: brightness(.94); transform: translateY(-1px); color: var(--btn-fg); }
.btn:active { transform: none; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-wa    { --btn-bg: var(--green-500); --btn-fg: #000000; }
.btn-green { --btn-bg: var(--green-500); --btn-fg: #000000; }
.btn-dark  { --btn-bg: var(--brown-800); }
.btn-olive { --btn-bg: var(--olive-600); }
.btn-ghost {
  --btn-bg: #fff; --btn-fg: var(--ink);
  border-color: var(--line); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--lime-500); color: var(--lime-600); filter: none; background: #fff; }
.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--brown-800);
  border-color: var(--brown-800); box-shadow: none;
}
.btn-outline:hover { background: var(--brown-800); color: #fff; }
.btn-ghost-light {
  --btn-bg: rgba(255,255,255,.1); --btn-fg: #fff;
  border-color: rgba(255,255,255,.4); box-shadow: none;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.2); }

/* Button label colour always wins over section link colours (.bg-brown a, .bg-img a …) */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:focus, a.btn:active { color: var(--btn-fg); }
a.btn svg, a.btn:hover svg { color: var(--btn-fg); fill: currentColor; }
a.btn-wa, a.btn-wa:link, a.btn-wa:visited, a.btn-wa:hover, a.btn-wa:focus, a.btn-wa:active,
a.btn-green, a.btn-green:link, a.btn-green:visited, a.btn-green:hover, a.btn-green:focus, a.btn-green:active {
  color: #000; }
a.btn-wa svg, a.btn-wa:hover svg, a.btn-green svg, a.btn-green:hover svg { color: #000; }
.bg-brown a.btn-ghost, .bg-img a.btn-ghost { color: var(--ink); }
.bg-brown a.btn-dark, .bg-img a.btn-dark, .bg-brown a.btn-olive, .bg-img a.btn-olive { color: #fff; }
.bg-brown a.btn-ghost-light, .bg-img a.btn-ghost-light { color: #fff; }
.btn-lg { padding: .88em 1.7em; font-size: 1rem; }
.btn-sm { padding: .55em 1em; font-size: .82rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* 6 — HEADER ------------------------------------------------------------- */
.topbar { background: #adca2e; color: #000; font-size: .8rem; font-weight: 700; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px;
  min-height: 36px; flex-wrap: nowrap; }
.topbar a { color: #000; text-decoration: none; font-weight: 700; }
.topbar a:hover { color: #000; text-decoration: underline; }
.topbar-list { display: flex; gap: 22px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.topbar-list:first-child { flex: 1 1 auto; min-width: 0; }
.topbar-list:last-child { flex: 0 0 auto; }
.topbar-list a { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.topbar-list li { display: flex; }
.topbar-badge { display: inline-flex; align-items: center; gap: .4em; color: #000; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.topbar svg { width: 14px; height: 14px; flex: none; color: #000; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(26,18,7,.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 2px solid var(--lime-500);
  transition: background .25s var(--ease);
}
.site-header.solid { background: rgba(20,13,4,.98); }
.nav { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name { font-weight: 800; font-size: 1.02rem; color: #fff; letter-spacing: -.02em; }
.brand-sub { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-400); font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: 1px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a {
  display: block; padding: .55em .75em; border-radius: var(--radius-s);
  color: #e3dbcf; text-decoration: none; font-size: .9rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--lime-500); color: #000; }
.has-sub > button {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .55em .75em; border-radius: var(--radius-s); border: 0; background: none;
  color: #e3dbcf; font-size: .9rem; font-weight: 600; cursor: pointer;
  text-transform: uppercase; letter-spacing: .02em;
}
.has-sub > button:hover, .has-sub[data-open="true"] > button { background: var(--lime-500); color: #000; }
.has-sub > button svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.has-sub[data-open="true"] > button svg { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
  min-width: 290px; padding: 6px; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.has-sub[data-open="true"] .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: .5em .65em; border-radius: var(--radius-s); color: var(--ink);
  font-size: .89rem; text-transform: none; letter-spacing: 0; font-weight: 550;
}
.submenu a:hover { background: var(--lime-50); color: var(--lime-600); }
.submenu .price { color: var(--green-600); font-weight: 800; font-size: .84rem; white-space: nowrap; }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.burger {
  display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-s); background: rgba(255,255,255,.07); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .burger span::after  { top: 0; transform: rotate(-45deg); }

/* 7 — HERO --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--brown-900); overflow: hidden; }
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center 45%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(14,9,2,.74) 0%, rgba(14,9,2,.58) 55%, rgba(14,9,2,.42) 100%),
    linear-gradient(180deg, rgba(14,9,2,.5) 0%, rgba(14,9,2,.18) 38%, rgba(14,9,2,.6) 100%);
}
.hero-inner { position: relative; padding-block: clamp(42px, 6vw, 78px); max-width: 780px; }
.hero-inner.hero-center { max-width: none; text-align: center; }
.hero-center h1 { max-width: 20ch; margin-inline: auto; }
.hero-center .hero-sub { max-width: 84ch; margin-inline: auto; }
.hero-center .hero-note {
  max-width: 78ch; margin-inline: auto; border-left: 0; padding-left: 0;
  border-top: 2px solid var(--lime-500); padding-top: .8em;
}
.hero-center .btn-row, .hero-center .hero-badges { justify-content: center; }
.hero h1 { color: #fff; margin-bottom: .4em; }
.hero h1 .accentword { color: var(--lime-400); }
.hero-sub { color: #ded5c8; font-size: clamp(.99rem, .94rem + .35vw, 1.1rem); max-width: 62ch; margin-bottom: 1.2em; }
.hero-note {
  color: #cfc5b7; font-size: .93rem; max-width: 62ch; margin-bottom: 1.3em;
  padding-left: 12px; border-left: 3px solid var(--lime-500);
}
.hero-note strong { color: var(--lime-400); }

/* icon trust row under the hero CTAs */
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.3em; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .42em .8em; border-radius: 999px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(173,202,46,.45);
  color: #f0ece4; font-size: .81rem; font-weight: 600;
}
.hero-badge svg { width: 15px; height: 15px; flex: none; color: var(--lime-400); }

.chip {
  display: inline-flex; align-items: center; gap: .42em;
  padding: .38em .8em; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: #f2ece2; font-size: .82rem; font-weight: 600;
}
.chip svg { width: 14px; height: 14px; color: var(--lime-400); flex: none; }
.chip-light { background: #fff; border-color: var(--line); color: var(--ink-soft); }
.chip-light svg { color: var(--green-600); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* page hero (inner pages) */
.phero { position: relative; isolation: isolate; background: var(--brown-900); overflow: hidden; }
.phero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 45%; }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(14,9,2,.9) 0%, rgba(14,9,2,.6) 52%, rgba(14,9,2,.2) 100%);
}
.phero-inner { padding-block: clamp(32px, 4.6vw, 62px); max-width: 800px; }
.phero h1 { color: #fff; margin-bottom: .25em; }
.phero p { color: #ded4c6; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4em; font-size: .82rem; margin-bottom: .9em; color: #a99d8c; }
.crumbs a { color: #cfc4b3; text-decoration: none; }
.crumbs a:hover { color: var(--lime-400); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--lime-400); }

/* 8 — CARDS -------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-s); overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.card-pad { padding: clamp(16px, 2.1vw, 24px); }
.card.hoverable:hover, a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); border-color: var(--lime-400); }

/* ---- tour / package card (2 buttons) ---- */
.tour-card { display: flex; flex-direction: column; }
.tour-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); border-color: var(--lime-400); }
.tour-card .thumb {
  position: relative; display: block; aspect-ratio: 16/10;
  background-size: cover; background-position: center;
}
.tour-card .thumb::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(180deg, transparent, rgba(12,8,2,.78));
}
.tour-card .badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: .28em .7em; border-radius: var(--radius-s);
  background: var(--lime-500); color: #000;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.tour-card .price-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: .32em .75em; border-radius: var(--radius-s);
  background: var(--green-500); color: #07230d; font-weight: 800; font-size: .86rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.tour-card .thumb-meta {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2;
  display: flex; justify-content: space-between; gap: 8px; color: #fff; font-size: .78rem; font-weight: 600;
}
.tour-card .thumb-meta .dur { display: inline-flex; align-items: center; gap: .3em; }
.tour-card .thumb-meta svg { width: 13px; height: 13px; flex: none; }
.tour-card .body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.tour-card h3 { font-size: 1.08rem; margin-bottom: .3em; line-height: 1.25; }
.tour-card h3 a { color: var(--ink); text-decoration: none; }
.tour-card h3 a:hover { color: var(--lime-600); }
.tour-card .tagline { font-size: .89rem; color: var(--muted); margin-bottom: .7em; }
.tour-card .feat { list-style: none; padding: 0; margin: 0 0 .9em; display: grid; gap: .25em; }
.tour-card .feat li { font-size: .84rem; color: var(--ink-soft); display: flex; gap: .45em; }
.tour-card .feat li::before { content: "\2713"; color: var(--green-600); font-weight: 800; }
.tour-card .pricerow {
  display: flex; align-items: baseline; gap: .4em; padding: 10px 0 12px;
  margin-top: auto; border-top: 1px dashed var(--line);
}
.tour-card .pricerow b { font-size: 1.32rem; font-weight: 800; color: var(--brown-800); letter-spacing: -.02em; }
.tour-card .pricerow small { font-size: .78rem; color: var(--muted); }
.tour-card .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tour-card .actions .btn { padding: .62em .5em; font-size: .8rem; }

/* ---- activity card ---- */
.act-card { display: flex; flex-direction: column; }
.act-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); border-color: var(--lime-400); }
.act-thumb { display: block; aspect-ratio: 16/10; background-size: cover; background-position: center; }
.act-card h3 { font-size: 1.08rem; margin-bottom: .15em; }
.act-card h3 a { color: var(--ink); text-decoration: none; }
.act-card h3 a:hover { color: var(--lime-600); }
.act-meta {
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-600); margin-bottom: .55em;
}
.act-card p { font-size: .89rem; color: var(--muted); }
.act-card .btn { margin-top: .9em; align-self: flex-start; }

/* 9 — COMPONENTS --------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tabs button {
  padding: .45em 1em; border-radius: var(--radius-s); cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  font-size: .85rem; font-weight: 650; transition: all .15s;
}
.tabs button:hover { border-color: var(--lime-500); }
.tabs button[aria-pressed="true"] { background: var(--lime-500); border-color: var(--lime-500); color: #000; }

/* compact trust strip — titles only */
.trustbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.trustbar .t {
  display: flex; align-items: center; gap: 10px;
  font-size: .92rem; font-weight: 650; color: #fff; line-height: 1.25;
}
.trustbar .t .ic {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--lime-500); color: #000;
}
.trustbar .t .ic svg { width: 17px; height: 17px; }

/* steps */
.steps { counter-reset: s; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.step {
  position: relative; padding: 22px 16px 16px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-l);
}
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; top: -13px; left: 16px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime-500); color: #000; font-weight: 800; font-size: .84rem;
}
.step h3 { font-size: 1rem; margin-bottom: .22em; }
.step p { font-size: .87rem; color: var(--muted); }
.bg-img .step { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.bg-img .step p { color: #ccc1b1; }

/* include / exclude */
.inex { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 16px; }
.inex ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35em; }
.inex li { display: flex; gap: .55em; font-size: .92rem; line-height: 1.45; }
.inex .yes li::before { content: "\2713"; color: var(--ok); font-weight: 800; flex: none; }
.inex .no li::before  { content: "\2715"; color: var(--warn); font-weight: 800; flex: none; }

/* accordion */
.acc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.acc + .acc { margin-top: 8px; }
.acc summary {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-weight: 650; font-size: .98rem; color: var(--ink); line-height: 1.4;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px;
  border-right: 2.2px solid var(--lime-600); border-bottom: 2.2px solid var(--lime-600);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.acc[open] summary::after { transform: rotate(-135deg); }
.acc summary:hover { background: var(--lime-50); }
.acc .acc-body { padding: 0 18px 15px; font-size: .93rem; color: var(--ink-soft); }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; }
table.data { min-width: 540px; font-size: .92rem; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.data thead th {
  background: var(--brown-800); color: #fff; font-size: .74rem;
  letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
}
table.data tbody tr:nth-child(even) { background: var(--lime-50); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--sand-50); }
table.data .p { font-weight: 800; color: var(--green-600); white-space: nowrap; }
table.data.compact { min-width: 0; font-size: .89rem; }
table.data.compact td { padding: 9px 13px; }

/* riding guide */
.guide-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.guide-item {
  display: flex; gap: 12px; padding: 15px 16px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.guide-item .ic {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600);
}
.guide-item .ic svg { width: 14px; height: 14px; }
.guide-item strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .12em; }
.guide-item p { font-size: .86rem; color: var(--muted); margin: 0; }

/* checklist */
.checklist { counter-reset: c; list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.checklist li {
  counter-increment: c; position: relative; padding: 13px 16px 13px 52px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-size: .93rem;
}
.checklist li::before {
  content: counter(c); position: absolute; left: 14px; top: 12px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime-500); color: #000; font-weight: 800; font-size: .78rem;
}

/* ticks */
.ticks { list-style: none; padding: 0; margin: 0 0 1.1em; display: grid; gap: .35em; }
.ticks li { display: flex; gap: .55em; font-size: .93rem; }
.ticks li::before { content: "\2713"; color: var(--green-600); font-weight: 800; flex: none; }

/* fact list */
.factlist {
  display: grid; grid-template-columns: auto 1fr; gap: .45em 18px; margin: 0 0 1.1em;
  padding: 16px 18px; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--lime-500); border-radius: var(--radius); font-size: .92rem;
}
.factlist dt { color: var(--muted); font-weight: 600; }
.factlist dd { margin: 0; color: var(--ink); font-weight: 650; }

/* map */
.map-embed {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--brown-100);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* callout */
.callout {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 24px); border-radius: var(--radius-l);
  background: var(--brown-800); color: #ddd2c2; border: 1px solid var(--brown-700);
}
.callout h3 { color: #fff; margin-bottom: .25em; }
.callout p { font-size: .92rem; color: #cabfae; max-width: 58ch; margin: 0; }

/* gallery */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* masonry: CSS columns, staggered heights, even gaps */
.gallery-clean { display: block; columns: 4; column-gap: 12px; }
.gallery-clean .gal-img {
  display: block; width: 100%; margin: 0 0 12px; break-inside: avoid;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  background-size: cover; background-position: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gallery-clean .gal-img:nth-child(4n+1) { aspect-ratio: 4/3; }
.gallery-clean .gal-img:nth-child(4n+2) { aspect-ratio: 3/4; }
.gallery-clean .gal-img:nth-child(4n+3) { aspect-ratio: 1/1; }
.gallery-clean .gal-img:nth-child(4n+4) { aspect-ratio: 5/4; }
.gallery-clean .gal-img:hover { transform: scale(1.015); box-shadow: var(--shadow); }
@media (max-width: 1000px) { .gallery-clean { columns: 3; } }
@media (max-width: 680px)  { .gallery-clean { columns: 2; column-gap: 10px; }
  .gallery-clean .gal-img { margin-bottom: 10px; } }
.gal-item {
  margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--line); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.gal-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.gal-img { display: block; aspect-ratio: 4/3; background-size: cover; background-position: center; }
.gal-item figcaption { padding: 9px 12px; }
.gal-item figcaption strong { display: block; font-size: .89rem; color: var(--ink); }
.gal-item figcaption span { font-size: .78rem; color: var(--muted); }

.suit { list-style: none; padding: 0; margin: 0; display: grid; gap: .8em; }
.suit li { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; align-items: start; }
.suit li::before { font-weight: 800; line-height: 1.5; }
.suit.yes li::before { content: "\2713"; color: var(--green-400); }
.suit.no  li::before { content: "\2715"; color: #ef8b74; }
.suit li strong { grid-column: 2; display: block; color: #fff; font-size: .97rem; }
.suit li span { grid-column: 2; display: block; font-size: .88rem; color: #c2b7a7; line-height: 1.5; }

/* internal link hub */
.linkhub h3 { font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; color: var(--olive-600); margin-bottom: .6em; }
.linkhub ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35em; }
.linkhub a { font-size: .9rem; color: var(--ink-soft); text-decoration: none; }
.linkhub a:hover { color: var(--lime-600); text-decoration: underline; }

/* dark cards */
.dark-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); color: #cdc2b2; }
.dark-card p { color: #c2b7a7; font-size: .91rem; }

/* E-E-A-T badge */
.eeat {
  margin: 1.6em auto 0; padding: .6em 1.2em; border-radius: var(--radius-s); width: fit-content;
  background: var(--lime-50); border: 1px solid var(--lime-400);
  color: var(--olive-600); font-size: .82rem; font-weight: 700; text-align: center;
}
.bg-brown .eeat, .bg-img .eeat { background: rgba(173,202,46,.14); border-color: rgba(173,202,46,.5); color: var(--lime-400); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--line); border-radius: var(--radius-l); overflow: hidden; }
.stat { background: #fff; padding: 18px 16px; text-align: center; }
.stat b { display: block; font-size: clamp(1.5rem,1.2rem+1vw,2rem); font-weight: 800; color: var(--brown-800); line-height: 1.05; }
.stat span { font-size: .8rem; color: var(--muted); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px;
  background: var(--lime-400); border-radius: 2px;
}
.timeline li { position: relative; padding: 0 0 20px 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; border: 3px solid var(--lime-500);
}
.timeline .t-time {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--green-600); margin-bottom: .1em;
}
.timeline li h3 { font-size: 1rem; margin-bottom: .18em; }
.timeline p { font-size: .9rem; color: var(--muted); }

/* booking aside */
.booking {
  position: sticky; top: 84px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow); overflow: hidden;
}
.booking .bk-head { padding: 16px 18px 13px; background: var(--brown-800); color: #fff; }
.booking .bk-head .eyebrow { color: var(--lime-400); }
.booking .bk-head .eyebrow::before { background: var(--lime-400); }
.booking .bk-price { display: flex; align-items: baseline; gap: .35em; }
.booking .bk-price b { font-size: 1.9rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.booking .bk-price small { font-size: .78rem; color: #cabfae; font-weight: 600; }
.booking .bk-body { padding: 16px 18px 18px; }
.booking dl { display: grid; grid-template-columns: auto 1fr; gap: .45em 12px; margin: 0 0 14px; font-size: .88rem; }
.booking dt { color: var(--muted); }
.booking dd { margin: 0; color: var(--ink); font-weight: 650; text-align: right; }
.booking .assure { margin-top: 12px; font-size: .79rem; color: var(--muted); text-align: center; }

/* tour page layout */
.tour-layout { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(22px, 3.4vw, 44px); align-items: start; }

/* prose */
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.25em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1em; display: grid; gap: .3em; }
.prose table { margin-bottom: 1.2em; }
.prose .toc {
  background: var(--lime-50); border: 1px solid var(--lime-400); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 1.6em;
}
.prose .toc strong { display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--olive-600); margin-bottom: .55em; }
.prose .toc ol { margin: 0; gap: .22em; }

/* review / note blocks */
.placeholder-note {
  border: 1px dashed var(--lime-600); background: var(--lime-50); border-radius: var(--radius);
  padding: 12px 16px; font-size: .86rem; color: #5b6b1a;
}
.go { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; color: var(--green-600); font-size: .88rem; }
.go svg { width: 14px; height: 14px; flex: none; }

/* CTA band */
.ctaband { position: relative; isolation: isolate; overflow: hidden; background: var(--brown-900); color: #ffffff; }
.ctaband p, .ctaband .lede, .ctaband .small { color: #ffffff; text-align: center;
  max-width: 66ch; margin-left: auto; margin-right: auto; }
.ctaband .eyebrow { justify-content: center; }
.ctaband .eyebrow { color: #ffffff; }
.ctaband .eyebrow::before { background: #ffffff; }
.ctaband .small { opacity: 1; color: #f2efe9; }
.ctaband h2 { color: #fff; }
.ctaband .wrap { position: relative; padding-block: clamp(34px, 4.4vw, 58px); text-align: center; }
.ctaband .btn-row { justify-content: center; }
.ctaband-art { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.ctaband::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,10,2,.82), rgba(16,10,2,.88)); }
.cta-lines { display: block; margin-top: .7em; color: #ffffff; font-weight: 800; }

/* figure */
.figure { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.figure img { width: 100%; }
figcaption { font-size: .8rem; color: var(--muted); padding: 8px 12px; }

/* sticky mobile bar */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(25,20,10,.12);
}
.mbar .btn { flex: 1; padding: .72em 1em; font-size: .86rem; }

/* 10 — FOOTER ------------------------------------------------------------ */
.site-footer { background: var(--brown-900); color: #b1a593; font-size: .9rem; }
.site-footer a { color: #d4c9b8; text-decoration: none; }
.site-footer a:hover { color: var(--lime-400); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 28px; padding-block: clamp(30px,3.6vw,48px); }
.footer-top h4 { color: var(--lime-400); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9em; }
.footer-top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45em; }
.footer-brand .brand { margin-bottom: .9em; }
.footer-brand p { font-size: .88rem; max-width: 36ch; margin-bottom: .8em; }
.socials { display: flex; gap: 8px; }
.socials a { width: 34px; height: 34px; border-radius: var(--radius-s); display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.socials a:hover { background: var(--lime-500); border-color: var(--lime-500); color: #000; }
.socials svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 16px;
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center;
  font-size: .82rem; color: #8d8272;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* 11 — UTILITIES --------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: var(--ink); padding: .6em 1.1em; border-radius: 0 0 8px 8px; font-weight: 700; transition: top .18s var(--ease); }
.skip:focus { top: 0; }
.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 20px; } .mt-l { margin-top: 32px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }

/* 12 — RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1150px) {
  .topbar-list li a[href^="mailto"] { display: none; }
}
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 960px) {
  .burger { display: inline-flex; }
  .nav-links, .nav-cta .btn-desktop { display: none; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 1px;
    position: fixed; top: 100%; left: 0; right: 0; z-index: 59;
    height: calc(100dvh - 100%); min-height: 60vh;
    padding: 14px var(--gutter) 110px; overflow-y: auto;
    background: var(--brown-900); box-shadow: 0 24px 48px rgba(0,0,0,.5);
  }
  body.menu-open .nav-links a, body.menu-open .has-sub > button {
    width: 100%; text-align: left; padding: .78em .6em; font-size: .96rem;
    border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0;
  }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; min-width: 0;
    padding: 0 0 6px 12px; display: none;
  }
  .has-sub[data-open="true"] .submenu { display: block; }
  .submenu a { color: #bdb2a1; border-bottom: 1px dashed rgba(255,255,255,.08) !important; }
  .submenu strong { color: #fff; }
  .submenu .price { color: var(--lime-400); }
  .split, .tour-layout { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mbar { display: flex; }
  body { padding-bottom: 62px; }
  .booking { position: static; }
  html { scroll-padding-top: 72px; }
  .callout { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .split .figure, .split .map-embed { max-height: 300px; min-height: 220px; }
  .topbar-list li:not(.always) { display: none; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .factlist { grid-template-columns: 1fr; gap: .1em 0; }
  .factlist dt { margin-top: .5em; }
  body { font-size: 16px; }
}
@media (max-width: 540px) {
  .topbar-badge { display: none; }
  .topbar .wrap > ul:first-child { display: none; }
  .topbar .wrap { justify-content: center; }
}

/* 13 — MOTION / PRINT ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  .site-header, .mbar, .ctaband, .site-footer, .topbar { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .booking { box-shadow: none; border-color: #ccc; }
}