/* =========================================================
   Haku Expeditions — redesigned
   Editorial / magazine aesthetic. Original stylesheet.
   ========================================================= */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:root {
  --paper:   #f4f1ea;     /* warm off-white */
  --paper-2: #ebe6db;     /* slightly darker */
  --ink:     #161514;     /* near-black */
  --ink-2:   #3a3733;     /* secondary */
  --muted:   #6b6660;
  --rule:    #d8d2c4;
  --accent:  #b6502b;     /* terracotta */
  --accent-2:#7a3e21;
  --serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
  --container: 1280px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.2; }
h4 { font-size: 1.05rem; line-height: 1.3; }
p  { margin: 0 0 1.1em; }
.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-wide { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 28px; }
section { padding: clamp(64px, 9vw, 130px) 0; }
.divider { height: 1px; background: var(--rule); margin: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; }
.section-head .lead { max-width: 580px; color: var(--ink-2); font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  border: 1px solid var(--ink);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-on-dark { border-color: var(--paper); color: var(--paper); }
.btn-on-dark:hover { background: var(--paper); color: var(--ink); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--ink);
  color: #cfc9bd;
  font-size: .78rem;
  letter-spacing: .04em;
}
.topbar .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: #e8e3d7; transition: color .2s; }
.topbar a:hover { color: var(--accent); }
.topbar .contacts { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar .socials { display: flex; gap: 16px; }
.topbar .socials a { opacity: .8; }
@media (max-width: 680px) { .topbar .socials { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled {
  background: rgba(244, 241, 234, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--rule);
  box-shadow: 0 4px 20px -16px rgba(0,0,0,.25);
}
.nav .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  transition: padding .35s var(--ease);
}
.nav.scrolled .row { padding: 12px 0; }
.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.brand .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; display: inline-block; transform: translateY(-4px); }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav-links a {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  transition: color .25s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: inline-flex; align-items: center; gap: 1.2rem; }
.menu-toggle {
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
}
.menu-toggle span {
  position: absolute;
  height: 1.5px;
  width: 24px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s;
}
.menu-toggle span:nth-child(1) { transform: translateY(-6px); }
.menu-toggle span:nth-child(3) { transform: translateY(6px); }
.menu-toggle.open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 0 0 0 0;
    background: var(--paper);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 32px;
    gap: 18px;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    z-index: 49;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { font-size: 1.6rem; letter-spacing: .02em; text-transform: none; font-family: var(--serif); font-weight: 500; color: var(--ink); }
  .nav-cta .btn:not(.menu-toggle) { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 86vh, 920px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
}
.hero .bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroZoom 14s var(--ease) forwards;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.6) 100%);
}
@keyframes heroZoom {
  to { transform: scale(1); }
}
.hero .container { padding-bottom: clamp(48px, 8vw, 110px); padding-top: clamp(48px, 8vw, 100px); }
.hero .eyebrow { color: #f6c9b1; }
.hero .eyebrow::before { background: #f6c9b1; }
.hero h1 { color: var(--paper); max-width: 14ch; }
.hero .sub {
  max-width: 560px;
  margin: 24px 0 36px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: rgba(255,255,255,.88);
}
.hero-actions { display: inline-flex; gap: 16px; flex-wrap: wrap; }

/* Hero text reveal */
.reveal-line { overflow: hidden; display: block; }
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  animation: rise .9s var(--ease) forwards;
}
.reveal-line:nth-child(1) > span { animation-delay: .15s; }
.reveal-line:nth-child(2) > span { animation-delay: .35s; }
.reveal-line:nth-child(3) > span { animation-delay: .55s; }
@keyframes rise { to { transform: translateY(0); } }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 36px;
  background: rgba(255,255,255,.7);
  animation: scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Marquee strip ---------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid #2a2826;
  border-bottom: 1px solid #2a2826;
}
.marquee-track {
  display: inline-flex;
  gap: 56px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 56px; }
.marquee-track span::after {
  content: "✦";
  color: var(--accent);
  font-style: normal;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Intro block ---------- */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.intro-grid h2 { max-width: 12ch; }
.intro-grid .lead { font-size: 1.15rem; color: var(--ink-2); }
@media (max-width: 880px) { .intro-grid { grid-template-columns: 1fr; } }

/* ---------- Card grid (tours) ---------- */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}
@media (max-width: 1040px) { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tour-grid { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.card .frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border-radius: 2px;
}
.card .frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease), filter .8s var(--ease);
}
.card:hover .frame img { transform: scale(1.08); filter: brightness(.95); }
.card .badge {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(244,241,234,.92);
  color: var(--ink);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.card .price {
  position: absolute;
  bottom: 16px; right: 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  padding: 8px 14px;
  border-radius: 999px;
}
.card .meta {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card h3 {
  margin: 8px 0 12px;
  font-size: 1.45rem;
  line-height: 1.2;
  transition: color .25s;
}
.card:hover h3 { color: var(--accent); }
.card p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.card .read {
  margin-top: 14px;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card .read::after {
  content: "→";
  transition: transform .35s var(--ease);
}
.card:hover .read::after { transform: translateX(6px); }

/* ---------- Feature wide split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.split .media { aspect-ratio: 4/5; overflow: hidden; }
.split .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.split:hover .media img { transform: scale(1.04); }
.split.reverse { grid-template-columns: 1fr 1.05fr; }
.split.reverse .copy { order: 1; }
.split.reverse .media { order: 2; }
@media (max-width: 880px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .copy, .split.reverse .media { order: initial; }
}

/* ---------- Pillars (3-up) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pillar {
  padding: 56px 32px;
  border-right: 1px solid var(--rule);
}
.pillar:last-child { border-right: none; }
.pillar .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--rule); }
  .pillar:last-child { border-bottom: none; }
}

/* ---------- Mosaic gallery ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 180px;
  gap: 8px;
}
.mosaic .tile {
  overflow: hidden;
  position: relative;
}
.mosaic .tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.mosaic .tile:hover img { transform: scale(1.07); }
.mosaic .t1 { grid-column: span 2; grid-row: span 2; }
.mosaic .t2 { grid-column: span 2; }
.mosaic .t3 { grid-column: span 2; }
.mosaic .t4 { grid-column: span 2; }
.mosaic .t5 { grid-column: span 2; grid-row: span 2; }
.mosaic .t6 { grid-column: span 2; }
.mosaic .t7 { grid-column: span 2; }
.mosaic .t8 { grid-column: span 2; }
@media (max-width: 880px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .mosaic .tile { grid-column: span 1 !important; grid-row: span 1 !important; }
  .mosaic .t1, .mosaic .t5 { grid-column: span 2 !important; grid-row: span 2 !important; }
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--paper-2); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 880px) { .testi-grid { grid-template-columns: 1fr; } }
.testi {
  background: var(--paper);
  padding: 40px;
  border: 1px solid var(--rule);
  position: relative;
}
.testi::before {
  content: "“";
  position: absolute;
  top: 0; left: 24px;
  font-family: var(--serif);
  font-size: 6rem;
  color: var(--accent);
  line-height: 1;
  opacity: .35;
}
.testi h4 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 12px 0 16px;
}
.testi p { color: var(--ink-2); font-size: .95rem; }
.testi .who {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.testi .who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testi .who .name { font-weight: 600; font-size: .95rem; }
.testi .who .place { font-size: .82rem; color: var(--muted); }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  color: var(--paper);
  text-align: center;
  overflow: hidden;
}
.cta-banner .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: -2;
}
.cta-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.6));
  z-index: -1;
}
.cta-banner h2 { color: var(--paper); max-width: 18ch; margin: 0 auto 20px; }
.cta-banner p { max-width: 540px; margin: 0 auto 32px; color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
footer {
  background: var(--ink);
  color: #c9c3b6;
  padding: 90px 0 30px;
  font-size: .92rem;
}
footer a { color: #e5e0d2; transition: color .2s; }
footer a:hover { color: var(--accent); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 56px;
  padding-bottom: 60px;
  border-bottom: 1px solid #2a2826;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .brand { color: var(--paper); font-size: 1.6rem; }
.foot-brand p { margin-top: 18px; max-width: 36ch; color: #aea99c; }
footer h4 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .78rem;
  color: var(--paper);
  margin-bottom: 18px;
  font-weight: 600;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.newsletter input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #4a4642;
  color: var(--paper);
  padding: 10px 0;
  font-family: inherit;
  font-size: .95rem;
  outline: none;
  transition: border-color .25s;
}
.newsletter input:focus { border-color: var(--accent); }
.newsletter input::placeholder { color: #7a766c; }
.newsletter button {
  margin-top: 18px;
  padding: 10px 22px;
  border: 1px solid var(--paper);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .25s, color .25s;
}
.newsletter button:hover { background: var(--paper); color: var(--ink); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  font-size: .78rem;
  color: #807b6f;
}
.foot-bottom .links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Inner page hero (sub-pages) ---------- */
.page-hero {
  position: relative;
  padding: clamp(140px, 18vw, 240px) 0 clamp(64px, 9vw, 110px);
  color: var(--paper);
  overflow: hidden;
}
.page-hero .bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.5));
}
.page-hero h1 { color: var(--paper); max-width: 16ch; }
.page-hero .crumb { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-bottom: 24px; }
.page-hero .crumb a { color: inherit; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 96px);
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form { display: grid; gap: 18px; }
.contact-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 540px) { .contact-form .two { grid-template-columns: 1fr; } }
.contact-form label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted); display: block; margin-bottom: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  outline: none;
  transition: border-color .25s;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-info h3 { margin-bottom: 12px; }
.contact-info .channel {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.contact-info .channel:last-child { border-bottom: 1px solid var(--rule); }
.contact-info .channel .label { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.contact-info .channel .value { font-family: var(--serif); font-size: 1.25rem; font-style: italic; }

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

/* ---------- Featured-in strip ---------- */
.logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 880px) { .logos { grid-template-columns: repeat(3, 1fr); } }
.logos .logo {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: .92rem;
  letter-spacing: .04em;
  border: 1px solid var(--rule);
  padding: 22px 12px;
  transition: color .25s, border-color .25s, background .25s;
}
.logos .logo:hover { color: var(--ink); border-color: var(--ink); background: var(--paper); }

/* ---------- TripAdvisor reviews (glass cards) ---------- */
.ta-section {
  position: relative;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.ta-section .bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.02);
}
.ta-section::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,18,22,.78), rgba(15,18,22,.62));
}
.ta-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.ta-head h2 { color: var(--paper); max-width: 14ch; margin-top: 14px; }
.ta-head .lead { color: rgba(255,255,255,.85); max-width: 540px; }
.ta-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 700;
  color: #00aa6c;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.ta-brand .owl {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #00aa6c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.ta-rating {
  margin-top: 12px;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
}
.ta-rating strong { color: var(--paper); }
.ta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .ta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ta-grid { grid-template-columns: 1fr; } }
.ta-card {
  position: relative;
  padding: 28px 26px 22px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  transition: transform .45s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.ta-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.24);
}
.ta-stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 18px;
}
.ta-stars .dot {
  width: 13px; height: 13px;
  background: #00aa6c;
  border-radius: 50%;
}
.ta-card h4 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.32;
  color: var(--paper);
  margin: 0 0 14px;
  font-weight: 500;
}
.ta-card .excerpt {
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0 0 22px;
  flex: 1;
}
.ta-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .82rem;
}
.ta-meta .who { color: var(--paper); font-weight: 500; line-height: 1.3; }
.ta-meta .who span {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: .74rem;
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: .04em;
}
.ta-meta .when {
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  white-space: nowrap;
  font-style: italic;
}
.ta-actions {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- No-JS safety: always show .reveal ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Util ---------- */
.flow > * + * { margin-top: 1.1em; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--ink-2); line-height: 1.65; }

/* ---------- Hero reviews overlay (right-side glass cards) ---------- */
.hero-reviews {
  position: absolute;
  right: 28px;
  top: 110px;
  bottom: 70px;
  width: 330px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 14px;
  background: rgba(8, 12, 16, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  color: var(--paper);
  opacity: 0;
  transform: translateY(16px);
  animation: hrIn 1.1s var(--ease) .65s forwards;
}
@keyframes hrIn { to { opacity: 1; transform: translateY(0); } }

.hero-reviews .hr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-reviews .hr-brand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .85rem;
  color: #00aa6c;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
}
.hero-reviews .hr-brand .owl {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00aa6c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
}
.hero-reviews .hr-rating {
  font-size: .72rem;
  letter-spacing: .04em;
  color: #f6c9b1;
  font-family: var(--sans);
}
.hero-reviews .hr-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.hero-reviews .hr-scroll::-webkit-scrollbar { width: 4px; }
.hero-reviews .hr-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}
.hero-reviews .hr-scroll::-webkit-scrollbar-track { background: transparent; }

.ta-mini {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 13px 14px 11px;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ta-mini:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateX(-3px);
}
.ta-mini .ta-stars { display: inline-flex; gap: 3px; margin-bottom: 8px; }
.ta-mini .ta-stars .dot {
  width: 9px;
  height: 9px;
  background: #00aa6c;
  border-radius: 50%;
}
.ta-mini h4 {
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  line-height: 1.32;
  color: var(--paper);
  margin: 0 0 10px;
  font-weight: 500;
}
.ta-mini-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
}
.ta-mini-foot .who {
  color: var(--paper);
  font-weight: 500;
  letter-spacing: .02em;
}
.ta-mini-foot .when {
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
  white-space: nowrap;
}
.hr-cta {
  text-align: center;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper);
  padding: 11px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  transition: color .25s;
}
.hr-cta:hover { color: #00aa6c; }

@media (max-width: 1180px) {
  .hero-reviews { width: 290px; }
}
@media (max-width: 980px) {
  .hero-reviews {
    position: static;
    width: auto;
    margin: 32px 28px 0;
    bottom: auto;
    top: auto;
    max-height: 380px;
    animation-delay: .2s;
  }
  .hero { display: block; align-items: stretch; padding-bottom: 32px; }
  .hero .container { padding-bottom: 32px; }
}
@media (max-width: 640px) {
  .hero-reviews { display: none; }
}

/* ---------- Hero reviews carousel (one at a time) ---------- */
.hero-reviews .hr-rotator {
  position: relative;
  flex: 1;
  min-height: 200px;
}
.hero-reviews .ta-mini {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.hero-reviews .ta-mini.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-reviews .ta-mini {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-reviews .ta-mini h4 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  margin: 12px 0 14px;
  color: var(--paper);
  font-weight: 500;
}

/* Yellow stars */
.hero-reviews .ta-stars {
  display: inline-block;
  color: #f5c542;
  font-size: 1.05rem;
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Dot nav */
.hero-reviews .hr-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 10px;
}
.hero-reviews .hr-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero-reviews .hr-dot:hover { background: rgba(255, 255, 255, 0.55); }
.hero-reviews .hr-dot.is-active {
  background: #f5c542;
  transform: scale(1.4);
}

/* ---------- Hero reviews — minimal floating overlay (no box) ---------- */
.hero-reviews {
  background: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  position: absolute;
  right: 40px;
  bottom: 90px;
  top: auto;
  width: 320px;
  min-height: 130px;
  z-index: 3;
  opacity: 0;
  transform: translateY(12px);
  animation: hrIn 1.1s var(--ease) .7s forwards;
}
.hero-reviews .hr-review {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0;
  text-decoration: none;
  color: var(--paper);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.hero-reviews .hr-review.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-reviews .hr-stars {
  color: #f5c542;
  font-size: 1.1rem;
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.hero-reviews .hr-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-reviews .hr-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  color: #fff;
  letter-spacing: .04em;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hero-reviews .hr-info { min-width: 0; }
.hero-reviews .hr-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .98rem;
  color: var(--paper);
  letter-spacing: -.005em;
  line-height: 1.25;
}
.hero-reviews .hr-meta {
  font-family: var(--sans);
  font-size: .78rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 2px;
  line-height: 1.35;
}
.hero-reviews .hr-review:hover .hr-name { color: #f5c542; }
.hero-reviews .hr-review:hover .hr-stars { transform: translateY(-1px); transition: transform .25s; }

/* Remove any leftover sub-elements from earlier iterations */
.hero-reviews .hr-head,
.hero-reviews .hr-dots,
.hero-reviews .hr-cta,
.hero-reviews .hr-rating,
.hero-reviews .hr-brand,
.hero-reviews h4,
.hero-reviews .ta-mini-foot,
.hero-reviews .ta-stars:not(.hr-stars) {
  display: none !important;
}

@media (max-width: 1100px) {
  .hero-reviews { width: 290px; right: 28px; bottom: 80px; }
}
@media (max-width: 880px) {
  .hero-reviews { display: none; }
}

/* ---------- Hero reviews — centered & enlarged ---------- */
.hero-reviews {
  left: 50% !important;
  right: auto !important;
  bottom: 110px !important;
  top: auto !important;
  width: 480px !important;
  max-width: calc(100% - 56px) !important;
  min-height: 180px !important;
  transform: translateX(-50%) translateY(12px);
  animation-name: hrInCenter;
}
@keyframes hrInCenter {
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.hero-reviews .hr-review {
  align-items: center;
  text-align: center;
  gap: 20px;
}
.hero-reviews .hr-stars {
  font-size: 1.7rem !important;
  letter-spacing: 6px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hero-reviews .hr-person {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-reviews .hr-avatar {
  width: 60px !important;
  height: 60px !important;
  font-size: 1.1rem !important;
  border-width: 2px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
}
.hero-reviews .hr-info { text-align: center; }
.hero-reviews .hr-name {
  font-size: 1.25rem !important;
  letter-spacing: -.005em;
}
.hero-reviews .hr-meta {
  font-size: .92rem !important;
  margin-top: 4px;
  letter-spacing: .01em;
}

@media (max-width: 1100px) {
  .hero-reviews { width: 440px !important; bottom: 100px !important; }
}
@media (max-width: 880px) {
  .hero-reviews { display: block !important; width: 380px !important; bottom: 80px !important; }
  .hero-reviews .hr-stars { font-size: 1.4rem !important; letter-spacing: 4px !important; }
  .hero-reviews .hr-avatar { width: 52px !important; height: 52px !important; }
  .hero-reviews .hr-name { font-size: 1.1rem !important; }
}
@media (max-width: 640px) {
  .hero-reviews { display: none !important; }
}

/* ---------- Hero reviews — right side, vertically centered ---------- */
.hero-reviews {
  left: auto !important;
  right: 56px !important;
  top: 50% !important;
  bottom: auto !important;
  width: 420px !important;
  transform: translateY(-50%) translateX(20px);
  animation-name: hrInRight;
}
@keyframes hrInRight {
  to { transform: translateY(-50%) translateX(0); opacity: 1; }
}

@media (max-width: 1180px) {
  .hero-reviews { width: 380px !important; right: 36px !important; }
}
@media (max-width: 980px) {
  .hero-reviews { width: 340px !important; right: 24px !important; }
}
@media (max-width: 760px) {
  .hero-reviews { display: none !important; }
}

/* ---------- Brand logo (nav only) ---------- */
.brand-img { display: inline-flex; align-items: center; }
.brand-img .brand-logo {
  height: 56px;
  width: auto;
  display: block;
  transition: height .35s var(--ease);
}
.nav.scrolled .brand-img .brand-logo { height: 44px; }
@media (max-width: 640px) {
  .brand-img .brand-logo { height: 44px; }
  .nav.scrolled .brand-img .brand-logo { height: 36px; }
}

/* ---------- Rotating featured-trip hero ---------- */
.hero-trip {
  min-height: clamp(620px, 92vh, 980px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  display: flex;
  align-items: flex-end;
}

.hero-trip .hero-bgs {
  position: absolute; inset: 0; z-index: -2;
}
.hero-trip .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.3s var(--ease), transform 8s linear;
}
.hero-trip .hero-bg.is-active {
  opacity: 1;
  transform: scale(1);
}
.hero-trip::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.55) 100%);
}

.hero-trip .hero-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(70px, 10vw, 130px);
  padding-bottom: clamp(80px, 10vw, 140px);
  width: 100%;
}

.hero-trip .trip-slides {
  position: relative;
  max-width: 640px;
  min-height: 380px;
}
.hero-trip .trip-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  pointer-events: none;
}
.hero-trip .trip-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-trip h1 {
  color: var(--paper);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 6px 0 22px;
  max-width: 14ch;
}
.hero-trip .trip-desc {
  max-width: 540px;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(255,255,255,.88);
  margin: 0 0 32px;
}

.hero-trip .trip-stats {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0;
  margin: 0 0 36px;
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
  max-width: 560px;
}
.hero-trip .trip-stats > div {
  padding: 16px 26px;
  border-right: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-trip .trip-stats > div:last-child { border-right: 0; }
.hero-trip .trip-stats .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--paper);
  letter-spacing: -.01em;
}
.hero-trip .trip-stats .num small {
  font-size: .68em;
  color: rgba(255,255,255,.55);
  margin-left: 2px;
  font-style: italic;
}
.hero-trip .trip-stats .lbl {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* Trip-dot nav (under hero on left) */
.trip-dots {
  position: absolute;
  left: 28px;
  bottom: 38px;
  display: flex;
  gap: 10px;
  z-index: 3;
}
.trip-dot {
  width: 28px;
  height: 3px;
  background: rgba(255,255,255,.32);
  border: 0;
  border-radius: 2px;
  padding: 0;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), width .35s var(--ease);
}
.trip-dot:hover { background: rgba(255,255,255,.6); }
.trip-dot.is-active {
  background: #f5c542;
  width: 46px;
}
@media (max-width: 760px) {
  .trip-dots { left: 24px; bottom: 26px; gap: 8px; }
  .trip-dot { width: 22px; }
  .trip-dot.is-active { width: 36px; }
}

/* Make sure scroll-cue clears the trip dots */
.hero-trip .scroll-cue { right: 32px; left: auto; transform: none; bottom: 32px; }
.hero-trip .scroll-cue::after { transform-origin: top; }

/* Trip stats wraps cleaner on smaller widths */
@media (max-width: 720px) {
  .hero-trip .trip-stats {
    grid-template-columns: 1fr 1fr;
  }
  .hero-trip .trip-stats > div:nth-child(2) { border-right: 0; }
  .hero-trip .trip-stats > div:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,.18);
  }
}

/* =========================================================
   DARK CAMO THEME OVERRIDE — dark green-grey palette
   ========================================================= */
:root {
  --paper:    #1c221c;   /* deep green-grey · main bg */
  --paper-2:  #262c26;   /* raised surfaces · slightly lighter */
  --ink:      #e8e3d4;   /* warm bone · primary text */
  --ink-2:    #b1ac9c;   /* secondary text */
  --muted:    #7c7e72;   /* tertiary, captions */
  --rule:     #353a34;   /* subtle dividers */
  --accent:   #b3a06a;   /* warm olive · highlights */
  --accent-2: #826e3d;   /* deeper olive · hovers */
  --dark:     #0f130f;   /* ultra-dark · strips & footer */
}

/* Ultra-dark strips (topbar, marquee, footer) */
.topbar { background: var(--dark); color: var(--ink-2); }
.topbar a { color: var(--ink); }
.topbar a:hover { color: var(--accent); }

.marquee { background: var(--dark); color: var(--ink); border-top-color: var(--paper-2); border-bottom-color: var(--paper-2); }

footer { background: var(--dark); color: var(--ink-2); }
footer h4 { color: var(--ink); }
footer a { color: var(--ink-2); }
footer a:hover { color: var(--accent); }
.foot-grid { border-bottom-color: var(--paper-2); }
.foot-brand p { color: var(--muted); }
.newsletter input { color: var(--ink); border-bottom-color: var(--paper-2); }
.newsletter input::placeholder { color: var(--muted); }
.newsletter input:focus { border-bottom-color: var(--accent); }
.newsletter button { border-color: var(--ink); color: var(--ink); background: transparent; }
.newsletter button:hover { background: var(--ink); color: var(--dark); }
.foot-bottom { color: var(--muted); }
.foot-bottom a:hover { color: var(--accent); }

/* Nav */
.nav { background: var(--paper); }
.nav.scrolled {
  background: rgba(28, 34, 28, 0.93);
  border-bottom-color: var(--paper-2);
  box-shadow: 0 6px 24px -16px rgba(0, 0, 0, .55);
}
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.menu-toggle span { background: var(--ink); }
.brand .dot { background: var(--accent); }
@media (max-width: 960px) {
  .nav-links { background: var(--paper); }
  .nav-links a { color: var(--ink); }
}

/* Buttons */
.btn { border-color: var(--ink); color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); color: var(--dark); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-on-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-on-dark:hover { background: var(--ink); color: var(--paper); }

/* Eyebrow / accent text */
.eyebrow { color: var(--accent); }
.eyebrow::before { background: var(--accent); }

/* Section structure */
body { background: var(--paper); color: var(--ink); }
.divider { background: var(--rule); }
.section-head .lead, .lead { color: var(--ink-2); }
h1, h2, h3, h4 { color: var(--ink); }

/* Testimonials */
.testimonials { background: var(--paper-2); }
.testi { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.testi::before { color: var(--accent); }
.testi h4 { color: var(--ink); }
.testi p { color: var(--ink-2); }
.testi .who { border-top-color: var(--rule); }
.testi .who .name { color: var(--ink); }
.testi .who .place { color: var(--muted); }

/* Pillars */
.pillars { border-top-color: var(--rule); border-bottom-color: var(--rule); }
.pillar { border-right-color: var(--rule); }
.pillar .num { color: var(--accent); font-style: italic; }
.pillar h3 { color: var(--ink); }
.pillar p { color: var(--ink-2); }
@media (max-width: 880px) {
  .pillar { border-bottom-color: var(--rule); }
}

/* Card grid */
.card .frame { background: var(--paper-2); }
.card .frame img { filter: brightness(.94); }
.card:hover .frame img { filter: brightness(1); }
.card .badge { background: rgba(28, 34, 28, .85); color: var(--ink); }
.card .price { background: var(--ink); color: var(--paper); }
.card .meta { color: var(--muted); }
.card h3 { color: var(--ink); }
.card p { color: var(--ink-2); }
.card .read { color: var(--ink); }
.card:hover h3 { color: var(--accent); }

/* Logos */
.logos .logo { color: var(--ink-2); border-color: var(--rule); }
.logos .logo:hover { color: var(--ink); border-color: var(--ink); background: transparent; }

/* Contact form */
.contact-form label { color: var(--muted); }
.contact-form input, .contact-form textarea {
  color: var(--ink);
  border-bottom-color: var(--rule);
  background: transparent;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--accent); }

.contact-info .channel { border-top-color: var(--rule); }
.contact-info .channel:last-child { border-bottom-color: var(--rule); }
.contact-info .channel .label { color: var(--muted); }
.contact-info .channel .value { color: var(--ink); }

/* Page heroes (about, contact, tours) — overlay gets a green tint */
.page-hero::after {
  background: linear-gradient(180deg, rgba(15, 19, 15, .55), rgba(15, 19, 15, .58));
}

/* Hero (rotating featured trips) overlay tint */
.hero-trip::after {
  background: linear-gradient(105deg, rgba(10, 14, 10, .68) 0%, rgba(10, 14, 10, .42) 45%, rgba(10, 14, 10, .25) 70%, rgba(10, 14, 10, .55) 100%);
}

/* Trip stat numbers and labels — set explicit colors on dark hero (already mostly correct) */
.hero-trip .trip-stats { border-color: rgba(255, 255, 255, .22); }
.hero-trip .trip-stats > div { border-right-color: rgba(255, 255, 255, .18); }

/* CTA banner overlay — slightly greener tint */
.cta-banner::after {
  background: linear-gradient(180deg, rgba(10, 14, 10, .58), rgba(10, 14, 10, .62));
}

/* Top utility bar mobile */
@media (max-width: 680px) { .topbar a:hover { color: var(--accent); } }

/* AddToAny social icons on dark — keep contrast */
.share a, .channel a { color: var(--ink); }

/* Hours card on contact page — inline style uses var(--paper-2) which is now dark green */
/* No override needed, it cascades. */

/* Scroll cue color stays light on hero */
.scroll-cue { color: rgba(255, 255, 255, .82); }
.scroll-cue::after { background: rgba(255, 255, 255, .7); }

/* Hero-reviews glass uses rgba already, so still works on darker palette */

/* Trip dot keeps yellow (still readable on dark) */
.trip-dot.is-active { background: var(--accent); }

/* Make the camo greener-grey → push toward neutral charcoal with a hint of green */
:root {
  --paper:    #20231f;   /* charcoal with faint warm-green tint */
  --paper-2:  #282c27;   /* raised surfaces */
  --rule:     #383b36;   /* subtle dividers */
  --dark:     #111311;   /* ultra-dark strips */
}
.nav.scrolled {
  background: rgba(32, 35, 31, 0.93);
}
.card .badge { background: rgba(32, 35, 31, .85); }

/* Lighter grey pass — push paper bg into mid-grey territory */
:root {
  --paper:    #43463f;   /* medium warm-grey */
  --paper-2:  #4e524a;   /* raised surfaces */
  --rule:     #62665c;   /* dividers */
  --dark:     #1f221d;   /* strips still distinct */
}
.nav.scrolled { background: rgba(67, 70, 63, 0.93); }
.card .badge { background: rgba(67, 70, 63, .85); }

/* =========================================================
   EARTH / MOSS PALETTE — warm forest tones, amber accent
   Replaces the grey-camo theme. Outdoor / bike publication feel.
   ========================================================= */
:root {
  --paper:    #2c2f25;   /* warm moss-charcoal · main bg */
  --paper-2:  #363a2f;   /* raised surfaces */
  --ink:      #ece5d0;   /* warm cream · primary text */
  --ink-2:    #b8b09a;   /* secondary text · warm muted */
  --muted:    #8a8474;   /* tertiary */
  --rule:     #4e524 5;   /* dividers (visible but soft) */
  --accent:   #c4892a;   /* warm amber / honey */
  --accent-2: #946826;   /* deeper amber */
  --dark:     #16180f;   /* deep forest near-black · strips */
}
/* Fix that broken --rule value (had a space in it) */
:root { --rule: #4e5245; }

.nav.scrolled { background: rgba(44, 47, 37, 0.93); }
.card .badge { background: rgba(44, 47, 37, .85); }

/* Tiny tweaks so amber pops in dark hero overlays */
.hero-trip::after,
.cta-banner::after {
  background: linear-gradient(105deg, rgba(12, 14, 8, .68) 0%, rgba(12, 14, 8, .42) 45%, rgba(12, 14, 8, .25) 70%, rgba(12, 14, 8, .55) 100%);
}
.page-hero::after {
  background: linear-gradient(180deg, rgba(12, 14, 8, .55), rgba(12, 14, 8, .58));
}

/* =========================================================
   FOREST + TERRACOTTA — deeper greens, cream text, burnt-orange accent
   ========================================================= */
:root {
  --paper:    #1f2820;   /* deep forest · main bg */
  --paper-2: #29322a;    /* raised surfaces */
  --ink:      #ede5d0;   /* warm cream · primary text */
  --ink-2:    #b6ad96;   /* secondary text */
  --muted:    #82806e;   /* tertiary */
  --rule:     #3e4a3f;   /* dividers */
  --accent:   #d97939;   /* burnt orange · highlights */
  --accent-2: #a85827;   /* deeper terracotta */
  --dark:     #0e120e;   /* deep · strips & footer */
}
.nav.scrolled { background: rgba(31, 40, 32, 0.93); }
.card .badge { background: rgba(31, 40, 32, .85); }
.hero-trip::after,
.cta-banner::after {
  background: linear-gradient(105deg, rgba(8, 11, 8, .68) 0%, rgba(8, 11, 8, .42) 45%, rgba(8, 11, 8, .25) 70%, rgba(8, 11, 8, .55) 100%);
}
.page-hero::after {
  background: linear-gradient(180deg, rgba(8, 11, 8, .55), rgba(8, 11, 8, .58));
}

/* =========================================================
   SCROLL-COVER HERO — hero photo stays pinned, content
   slides up and covers it. The "doors closing" feel.
   ========================================================= */
.hero-trip {
  position: sticky;
  top: 0;
  min-height: 100vh;
  z-index: 1;
  margin-bottom: 0;
}

/* Everything after the hero floats above it with an opaque bg */
.hero-trip ~ .marquee,
.hero-trip ~ .divider,
.hero-trip ~ section,
.hero-trip ~ footer {
  position: relative;
  z-index: 2;
}
.hero-trip ~ section { background: var(--paper); }
.hero-trip ~ section.testimonials { background: var(--paper-2); }
.hero-trip ~ section.cta-banner { background: var(--paper); /* the bg image still renders inside */ }
.hero-trip ~ .marquee { background: var(--dark); }
.hero-trip ~ .divider { background: var(--rule); }
.hero-trip ~ footer { background: var(--dark); }

/* The first section after the hero gets a soft top-edge so it reads like a cover sliding up */
.hero-trip ~ .marquee {
  box-shadow: 0 -20px 40px -16px rgba(0, 0, 0, .35);
}

/* On smaller screens the sticky-cover effect can get jumpy — disable */
@media (max-width: 760px) {
  .hero-trip { position: relative; min-height: clamp(560px, 86vh, 820px); }
  .hero-trip ~ .marquee { box-shadow: none; }
}

/* Fix: any text using var(--paper) on dark hero/CTA overlays is invisible
   (since var(--paper) is now the page bg color). Force these to --ink (cream). */
.hero h1,
.hero-trip h1,
.page-hero h1,
.cta-banner h2 {
  color: var(--ink) !important;
}
.hero-trip .trip-stats .num,
.hero-trip .trip-stats .num small {
  color: var(--ink) !important;
}
.hero-trip .trip-stats .lbl {
  color: rgba(255, 255, 255, 0.78);
}
.scroll-cue { color: rgba(255, 255, 255, 0.88); }

/* Foot brand wordmark text — was using inherited --ink which is now cream, fine.
   But the brand .dot color is accent which pops nicely now. */

/* Page hero crumb text contrast */
.page-hero .crumb,
.page-hero .crumb a { color: rgba(255, 255, 255, 0.85); }

/* CTA banner sub text */
.cta-banner p { color: rgba(255, 255, 255, 0.88); }

/* Header bar override — neutral grey instead of forest green */
.topbar { background: #1a1c1b; }
.nav { background: #2a2d2b; }
.nav.scrolled { background: rgba(42, 45, 43, 0.93); }

/* Match the mobile menu fullscreen to the new grey too */
@media (max-width: 960px) {
  .nav-links { background: #2a2d2b; }
}

/* Force the nav logo to render as pure white via CSS filter */
.brand-img .brand-logo {
  filter: brightness(0) invert(1);
}

/* =========================================================
   HERO — kill the Ken Burns pan; use directional slide
   ========================================================= */
.hero-trip .hero-bg {
  transition: transform 1.1s var(--ease), opacity .8s var(--ease) !important;
  animation: none !important;
  opacity: 0;
}
/* Inactive slides sit off to one side depending on traversal direction */
.hero-trip[data-dir="forward"] .hero-bg:not(.is-active),
.hero-trip:not([data-dir]) .hero-bg:not(.is-active) {
  transform: translateX(80px) !important;
}
.hero-trip[data-dir="back"] .hero-bg:not(.is-active) {
  transform: translateX(-80px) !important;
}
.hero-trip .hero-bg.is-active {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.hero-trip .trip-slide {
  transition: transform 1.1s var(--ease), opacity .8s var(--ease);
}
.hero-trip[data-dir="forward"] .trip-slide:not(.is-active),
.hero-trip:not([data-dir]) .trip-slide:not(.is-active) {
  transform: translateX(60px);
}
.hero-trip[data-dir="back"] .trip-slide:not(.is-active) {
  transform: translateX(-60px);
}

/* Prev / Next arrow buttons */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: #ede5d0;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  padding: 0;
  user-select: none;
  opacity: .8;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
.hero-arrow:hover {
  background: transparent;
  border: 0;
  opacity: 1;
  transform: translateY(-50%) scale(1.18);
}
.hero-arrow.prev { left: 28px; }
.hero-arrow.next { right: 28px; }
.hero-arrow span {
  display: block;
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .hero-arrow { width: 42px; height: 42px; font-size: 1.25rem; }
  .hero-arrow.prev { left: 14px; }
  .hero-arrow.next { right: 14px; }
}

/* =========================================================
   Hero review — single card, trip-linked, typewriter
   ========================================================= */
.hero-reviews {
  position: absolute;
  right: 40px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 380px !important;
  max-width: calc(100% - 56px);
  z-index: 4;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 0 !important;
  opacity: 0;
  animation: hrCardIn 1s var(--ease) .7s forwards;
}
@keyframes hrCardIn { to { opacity: 1; } }

.hr-card {
  display: block;
  background: rgba(12, 14, 8, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 20px 22px;
  color: var(--ink);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  text-decoration: none;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .55);
}
.hr-card:hover {
  background: rgba(12, 14, 8, 0.7);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateX(-3px);
}

.hr-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.hr-avatar {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  letter-spacing: .04em;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  background: #4a9d8e;
  transition: background .35s var(--ease);
}
.hr-info { min-width: 0; flex: 1; }
.hr-stars {
  color: #f5c542;
  font-size: 1.05rem;
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  margin-bottom: 6px;
}
.hr-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .88rem;
  color: var(--ink);
}
.hr-name { font-weight: 600; }
.hr-sep { opacity: .5; }
.hr-when { font-style: italic; color: rgba(255, 255, 255, 0.7); font-size: .82rem; }
.hr-trip {
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
}

.hr-body {
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  min-height: 4.65rem; /* hold space for ~3 lines so layout doesn't jump while typing */
}
.hr-caret {
  display: inline-block;
  color: #f5c542;
  font-weight: 700;
  margin-left: 1px;
  animation: hrCaret 1s steps(2) infinite;
}
@keyframes hrCaret { 50% { opacity: 0; } }

@media (max-width: 1100px) { .hero-reviews { width: 340px !important; right: 28px !important; } }
@media (max-width: 880px)  { .hero-reviews { display: none !important; } }

/* Get rid of grey-ish text in the review card — make everything cream or amber */
.hr-card,
.hr-meta,
.hr-name,
.hr-sep,
.hr-when,
.hr-trip,
.hr-body { color: var(--ink) !important; }
.hr-when { color: var(--accent) !important; opacity: 1; }
.hr-sep  { opacity: 1; color: var(--ink) !important; }
.hr-trip { color: var(--ink) !important; opacity: .92; }
.hr-body { color: var(--ink) !important; }

/* =========================================================
   Nav dropdowns
   ========================================================= */
.nav-links li.has-sub { position: relative; }
.nav-links li > a .caret,
.nav-links li > a .caret-side {
  display: inline-block;
  margin-left: 4px;
  font-size: .65rem;
  opacity: .7;
  transition: transform .2s var(--ease);
}

.nav-links .sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: #2a2d2b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), visibility .2s var(--ease), transform .2s var(--ease);
  z-index: 60;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .55);
}
.nav-links li.has-sub:hover > .sub,
.nav-links li.has-sub:focus-within > .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-links li.has-sub:hover > a .caret { transform: rotate(180deg); }

.nav-links .sub li { display: block; }
.nav-links .sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.nav-links .sub a::after { display: none; }
.nav-links .sub a:hover { background: rgba(255, 255, 255, 0.06); color: var(--accent); }

/* Nested submenu (one level deeper, opens to the right) */
.nav-links .sub .sub {
  top: -9px;
  left: calc(100% + 6px);
  transform: translateX(-6px);
}
.nav-links .sub li.has-sub:hover > .sub {
  transform: translateX(0);
}

@media (max-width: 960px) {
  /* Mobile: dropdowns become accordions */
  .nav-links .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    padding: 0 0 0 20px;
    margin: 8px 0 0;
    box-shadow: none;
    display: none;
  }
  .nav-links li.has-sub.is-open > .sub { display: block; }
  .nav-links .sub a {
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: none;
    font-family: var(--serif);
    padding: 6px 0;
  }
  .nav-links li.has-sub > a .caret { transition: transform .25s; }
  .nav-links li.has-sub.is-open > a .caret { transform: rotate(180deg); }
  .nav-links .sub .sub { padding-left: 18px; }
}

/* Align trip-stats columns evenly so values line up cleanly */
.hero-trip .trip-stats {
  grid-template-columns: 1fr 1fr 1.5fr !important;
  align-items: stretch;
}
.hero-trip .trip-stats > div {
  padding: 16px 22px;
  align-items: flex-start;
  justify-content: center;
  min-height: 78px;
}
.hero-trip .trip-stats .num {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.hero-trip .trip-stats .lbl {
  margin-top: 6px;
}

/* Date moved to bottom of the review card */
.hr-meta { gap: 0 !important; }
.hr-when {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
  font-size: .78rem !important;
  text-align: right;
  color: var(--accent) !important;
  font-style: italic;
  letter-spacing: .04em;
  opacity: 1 !important;
}

/* Review card: drop the stars row + nudge left so it clears the right arrow */
.hero-reviews .hr-stars { display: none !important; }
.hero-reviews {
  right: 110px !important;
}
@media (max-width: 1100px) {
  .hero-reviews { right: 92px !important; }
}
@media (max-width: 960px) {
  .hero-reviews { right: 80px !important; }
}

/* The reveal-line wrapper uses overflow:hidden for the line-reveal animation,
   which clips descenders (g, p, y, j). Pad the bottom so letters fit. */
.reveal-line {
  padding-bottom: 0.18em;
  line-height: 1.1;
}
.reveal-line > span {
  padding-bottom: 0.05em;
}

/* Bottom-align the review card with the trip title block so they share a baseline */
.hero-reviews {
  top: auto !important;
  bottom: clamp(80px, 10vw, 140px) !important;
  transform: none !important;
}
@keyframes hrCardIn { to { opacity: 1; transform: none; } }

/* Reverse last change: keep review card vertically centered, move the trip
   title UP to meet it instead. Hero content vertically centers now. */
.hero-trip {
  align-items: center !important;
}
.hero-trip .hero-content {
  padding-top: clamp(60px, 7vw, 90px);
  padding-bottom: clamp(60px, 7vw, 90px);
}
.hero-reviews {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
@keyframes hrCardIn { to { opacity: 1; transform: translateY(-50%); } }

/* Nudge the trip title block up another 15% of the hero height */
.hero-trip .hero-content { transform: translateY(-15%); }

/* Lighter mosaic: 4-tile 2×2 grid instead of 8-tile asymmetric */
.mosaic-lite {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 320px;
  gap: 12px;
}
.mosaic-lite .tile {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}
@media (max-width: 760px) {
  .mosaic-lite { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}

/* Review card arrow nav (prev / position / next) */
.hr-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}
.hr-arrow {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: .75;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.hr-arrow:hover {
  opacity: 1;
  transform: scale(1.15);
  background: transparent;
  border: 0;
}
.hr-pos {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .15em;
  color: rgba(255, 255, 255, 0.7);
}
.hr-pos #hr-pos-now { color: var(--accent); font-weight: 600; }

/* Hide the position indicator (e.g. "1 / 7") on the review card */
.hr-pos { display: none !important; }
.hr-nav { justify-content: space-between; }

/* Pin the review arrows to the top corners of the card */
.hr-card { position: relative; padding-top: 38px !important; }
.hr-nav { display: contents !important; }   /* let the arrows be positioned against the card */
.hr-card .hr-arrow {
  position: absolute;
  top: 10px;
  width: auto;
  height: auto;
  padding: 4px 8px;
  z-index: 5;
  font-size: 1.45rem;
}
.hr-card .hr-arrow.prev { left: 12px; right: auto; }
.hr-card .hr-arrow.next { right: 12px; left: auto; }

/* =========================================================
   Reveal panels — sticky photo "doors" mid-page.
   Content above scrolls up off-screen revealing the photo,
   then the next content section slides over to cover it.
   ========================================================= */
.reveal-panel {
  position: sticky !important;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  z-index: 1 !important;          /* sit below scrolling content sections */
  background: var(--paper);       /* fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.reveal-panel .rp-fill {
  position: absolute;
  inset: 0;
  background-image: var(--rp-img);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.reveal-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 11, 8, .45), rgba(8, 11, 8, .55));
}
.reveal-panel .rp-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 28px;
  color: var(--paper);
}
.reveal-panel .rp-overlay h2 {
  color: var(--ink) !important;
  font-size: clamp(1.8rem, 4vw, 3rem);
  max-width: 20ch;
  margin: 8px auto 0;
}

/* Sections after each reveal-panel need to scroll OVER it (higher z-index, opaque) */
.reveal-panel ~ section,
.reveal-panel ~ .divider,
.reveal-panel ~ .marquee,
.reveal-panel ~ footer {
  position: relative;
  z-index: 3;
  background: var(--paper);
}
.reveal-panel ~ footer { background: var(--dark); }
.reveal-panel ~ .marquee { background: var(--dark); }

/* On mobile, disable sticky to avoid jumpiness */
@media (max-width: 760px) {
  .reveal-panel { position: relative !important; height: 60vh; min-height: 60vh; }
}

/* =========================================================
   Moto page only — hero headline slides in from the sides
   in PERFECT SYNC so they look like they're about to clash.
   Both lines kick off at the same instant, travel at the same
   speed, and arrive at the same frame. A micro-bump at the end
   sells the "almost-collision" feel.
   ========================================================= */
.page-moto .page-hero .reveal-line { overflow: hidden; display: block; }
.page-moto .page-hero .reveal-line > span {
  display: block;
  opacity: 0;
  /* same duration, same easing, same delay → arrival is synchronised */
  animation: motoSlideInL 1.15s cubic-bezier(.18, .85, .12, 1) .25s forwards;
  transform: translateX(-110%);
}
.page-moto .page-hero .reveal-line:nth-child(2) > span {
  transform: translateX(110%);
  animation-name: motoSlideInR;
  animation-delay: .25s;  /* identical to line 1 so they land together */
}
.page-moto .page-hero .reveal-line:nth-child(3) > span {
  animation-delay: .25s;
  transform: translateX(-110%);
  animation-name: motoSlideInL;
}
@keyframes motoSlideInL {
  0%   { transform: translateX(-110%); opacity: 0; }
  55%  { opacity: 1; }
  88%  { transform: translateX(2%);    opacity: 1; }   /* slight overshoot — feels like impact */
  100% { transform: translateX(0);     opacity: 1; }
}
@keyframes motoSlideInR {
  0%   { transform: translateX(110%);  opacity: 0; }
  55%  { opacity: 1; }
  88%  { transform: translateX(-2%);   opacity: 1; }   /* mirrored overshoot */
  100% { transform: translateX(0);     opacity: 1; }
}

/* =========================================================
   Review-card swoosh — sliding transition when cycling reviews.
   Arrows sit outside .hr-swap (pinned to card corners) so they
   stay put while the review contents fly out one side and the
   new review flies in from the other.
   ========================================================= */
.hr-swap {
  transition: transform .22s cubic-bezier(.4, 0, .3, 1),
              opacity   .22s cubic-bezier(.4, 0, .3, 1);
  will-change: transform, opacity;
}
.hr-card.is-swoosh-out-next .hr-swap { transform: translateX(-42px); opacity: 0; filter: blur(1.5px); }
.hr-card.is-swoosh-out-prev .hr-swap { transform: translateX( 42px); opacity: 0; filter: blur(1.5px); }

/* "priming" — snap new content to the far side with no transition, ready to fly in */
.hr-card.is-swoosh-prime-next .hr-swap { transition: none; transform: translateX( 42px); opacity: 0; filter: blur(1.5px); }
.hr-card.is-swoosh-prime-prev .hr-swap { transition: none; transform: translateX(-42px); opacity: 0; filter: blur(1.5px); }

/* =========================================================
   CTA banner — plain modifier: solid paper background,
   no image, no dark overlay, no scroll-cover behavior.
   Used at the bottom of the home page.
   ========================================================= */
.cta-banner.is-plain {
  background: var(--paper);
  color: var(--ink);
  padding: 110px 0 120px;
}
.cta-banner.is-plain::after { display: none; }        /* kill the dark gradient overlay */
.cta-banner.is-plain h2,
.cta-banner.is-plain p       { color: var(--ink); }
.cta-banner.is-plain p       { opacity: .82; }

/* =========================================================
   Peru Multi-Sport only — elastic drop from above with tilt.
   Each line falls in from -100px with a slight -3° tilt, then
   overshoots ~6px past its rest, wobbles the tilt back through
   +1.5°, and settles. Feels playful and weighted.
   ========================================================= */
.page-multisport .page-hero .reveal-line { overflow: visible; display: block; }
.page-multisport .page-hero .reveal-line > span {
  display: block;
  transform-origin: 20% 50%;
  transform: translateY(-100px) rotate(-3deg);
  opacity: 0;
  animation: multisportDrop 1.15s cubic-bezier(.5, 1.65, .45, 1) forwards;
  will-change: transform, opacity;
}
.page-multisport .page-hero .reveal-line:nth-child(1) > span { animation-delay: .20s; }
.page-multisport .page-hero .reveal-line:nth-child(2) > span { animation-delay: .45s; }
.page-multisport .page-hero .reveal-line:nth-child(3) > span { animation-delay: .70s; }

@keyframes multisportDrop {
  0%   { transform: translateY(-100px) rotate(-3deg);   opacity: 0; }
  40%  { opacity: 1; }
  75%  { transform: translateY(8px)    rotate(1.5deg);  opacity: 1; }   /* overshoot past rest */
  90%  { transform: translateY(-2px)   rotate(-.5deg);  opacity: 1; }   /* micro-wobble */
  100% { transform: translateY(0)      rotate(0);       opacity: 1; }
}

/* Sub-paragraph, stats, buttons fade up after the last line has dropped */
.page-multisport .page-hero .sub,
.page-multisport .page-hero p.sub,
.page-multisport .page-hero .trip-stats,
.page-multisport .page-hero .hero-actions {
  opacity: 0;
  transform: translateY(14px);
  animation: multisportBodyIn .9s ease-out 1.4s forwards;
}
@keyframes multisportBodyIn {
  to { opacity: 1; transform: translateY(0); }
}