/* ==========================================================================
   AXOM INTERNATIONAL TOURS — Homepage Stylesheet
   Framework-agnostic pure CSS. Converts cleanly to Next.js or PHP.
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand */
  --blue:        #1B4A9C;
  --navy:        #12224A;
  --gold:        #B8963E;
  --gold-light:  #C9A84C;

  /* Neutrals */
  --cream:       #FAF7F2;
  --cream-deep:  #F3EDE4;
  --white:       #FFFFFF;
  --ink:         #1A1A1A;
  --body:        #5A5A5A;
  --muted:       #8A8A8A;
  --line:        #E5DFD6;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --max:       1280px;
  --gutter:    clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 120px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- 3. UTILITIES ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.bg-cream { background: var(--cream); }
.bg-cream-deep { background: var(--cream-deep); }

.eyebrow {
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 18px;
}

.h-display { font-size: clamp(2.8rem, 5.6vw, 4.4rem); }
.h-section { font-size: clamp(2.2rem, 4vw, 3.3rem); }
.h-card    { font-size: clamp(1.4rem, 2.3vw, 1.75rem); }

.lede { font-size: 17px; color: var(--body); max-width: 46ch; margin: 0; }

.rule { width: 56px; height: 1px; background: var(--gold); margin: 22px 0; border: 0; }
.rule.center { margin-inline: auto; }

.center { text-align: center; }

/* Section heading row: title left, link right */
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* ---------- 4. BUTTONS & LINKS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--navy); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--gold); }

.btn-ghost { border: 1px solid rgba(255,255,255,.55); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* Text link with circular arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap .3s var(--ease);
}
.link-arrow:hover { gap: 18px; }
.link-arrow .circ {
  width: 26px; height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px;
  flex-shrink: 0;
}
.link-arrow.on-dark { color: var(--white); }

/* ---------- 5. HEADER / NAV ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  box-shadow: 0 1px 20px rgba(0,0,0,0);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled {
  background: var(--white);
  box-shadow: 0 1px 20px rgba(0,0,0,.12);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 88px;
}
.brand { display: block; line-height: 0; }
.brand img { height: 44px; width: auto; }
.brand .logo-light { display: none; }
.brand .logo-dark  { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-inline: auto;
}
.nav-links a {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 400;
  position: relative;
  padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .35s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 18px; }

.burger {
  display: grid;
  gap: 5px;
  padding: 8px;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--navy);
  transition: all .3s var(--ease);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 110;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--white);
  padding-block: 10px;
  transition: color .3s var(--ease);
}
.drawer a:hover { color: var(--gold-light); }
.drawer-close {
  position: absolute;
  top: 28px; right: 32px;
  font-size: 30px;
  color: var(--white);
  line-height: 1;
}

/* ---------- 6. HERO ---------- */
.hero {
  position: relative;
  /* Full viewport height, with a floor so short/landscape windows stay usable */
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--ink);
  overflow: hidden;
}
.hero picture,
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-bg { display: block; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.65) 40%, rgba(255,255,255,.1) 70%);
  z-index: -1;
}
.hero-inner { max-width: 560px; padding-block: 120px 40px; }
.hero .eyebrow { color: var(--gold); }
.hero h1 { color: var(--navy); margin-bottom: 4px; }
.hero .lede { color: var(--body); margin-bottom: 36px; }
.hero .rule { background: var(--gold); }
.hero .link-arrow { color: var(--navy); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- 7. SPLIT (Soul of Assam) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.split-media { position: relative; }
.split-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.split-text .h-section { margin-bottom: 4px; }
.split-text .lede { margin-bottom: 26px; }

/* Decorative leaf watermark */
.split-text { position: relative; }

/* ---------- 8. DESTINATION CAROUSEL ---------- */
.rail-outer { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rail::-webkit-scrollbar { display: none; }

.dest-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  scroll-snap-align: start;
  display: block;
}
.dest-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.dest-card:hover img { transform: scale(1.07); }
.dest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,14,30,.82) 0%, rgba(8,14,30,.22) 45%, transparent 70%);
}
.dest-card figcaption {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  z-index: 2;
  color: var(--white);
}
.dest-card figcaption .name {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.2;
  display: block;
}
.dest-card figcaption .tag {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 6px;
  display: block;
}

.rail-nav {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 22px rgba(0,0,0,.16);
  display: grid; place-items: center;
  z-index: 5;
  color: var(--navy);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.rail-nav:hover { background: var(--gold); color: var(--white); }
.rail-nav.next { right: -18px; }
.rail-nav.prev { right: auto; left: -18px; }

/* ---------- 9. CATEGORY TILES (Travel Your Way) ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.cat-tile {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  display: block;
}
.cat-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.25);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.cat-tile:hover img { transform: scale(1.06); filter: grayscale(0); }
.cat-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,34,74,.85), rgba(18,34,74,.12) 60%, transparent);
}
.cat-tile .label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 20px;
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.4rem;
}
.cat-tile .label small {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 4px;
}

/* ---------- 10. WORLD MAP ---------- */
.map-split {
  display: grid;
  grid-template-columns: .8fr 1.6fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.map-wrap { position: relative; }
.map-wrap > img { width: 100%; height: auto; }

/* Routes out of Assam — sits exactly over the dot map */
.map-arcs {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .55;
  pointer-events: none;
}
.map-arcs path {
  stroke-dasharray: 3 4;
  animation: flow 26s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -140; } }
/* Zero-size anchor sits at the exact coordinate; the dot and label hang
   off it, so a label can flip sides without moving the pin. */
.map-pin { position: absolute; width: 0; height: 0; }

.map-pin i {
  position: absolute;
  left: -4px; top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.6s infinite;
}
.map-pin b {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
/* Placement variants so crowded pins stay legible */
.map-pin.up    b { top: auto; bottom: 12px; }
.map-pin.right b { top: -7px; left: 15px; transform: none; }
.map-pin.left  b { top: -7px; left: auto; right: 15px; transform: none; }

/* Home base reads differently from the destinations */
.map-pin.origin i {
  width: 10px; height: 10px;
  left: -5px; top: -5px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(27,74,156,.16);
  animation: none;
}
.map-pin.origin b { color: var(--blue); font-weight: 600; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,150,62,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(184,150,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,150,62,0); }
}

/* ---------- 11. SIGNATURE (4 pillars) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.pillar {
  padding: 34px clamp(16px, 3vw, 34px);
  border-right: 1px solid var(--line);
}
.pillar:last-child { border-right: 0; }
.pillar .ico {
  width: 30px; height: 30px;
  color: var(--gold);
  margin-bottom: 16px;
}
.pillar h3 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.pillar p { font-size: 15px; margin: 0; line-height: 1.6; }

/* ---------- 12. DUAL CTA CARDS ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.duo-card {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--cream-deep);
}
.duo-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.duo-card:hover img { transform: scale(1.05); }
.duo-body {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 48px);
  max-width: 62%;
  background: linear-gradient(90deg, rgba(250,247,242,.96) 0%, rgba(250,247,242,.9) 70%, rgba(250,247,242,0) 100%);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.duo-body .h-card { margin-bottom: 10px; }
.duo-body p { font-size: 15px; margin: 0 0 24px; }
.duo-body .btn { align-self: flex-start; }

.duo-body.right {
  margin-left: auto;
  background: linear-gradient(270deg, rgba(250,247,242,.96) 0%, rgba(250,247,242,.9) 70%, rgba(250,247,242,0) 100%);
}

/* ---------- 13. STORIES ---------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.story {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  display: block;
}
.story img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.story:hover img { transform: scale(1.06); }
.story::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,30,.86), rgba(8,14,30,.18) 55%, transparent);
}
.story-body {
  position: absolute;
  inset: auto 24px 24px 24px;
  z-index: 2;
  color: var(--white);
}
.story-body .h-card { color: var(--white); margin-bottom: 4px; }
.story-body p {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ---------- 14. TESTIMONIALS (video placeholders) ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.video-card {
  position: relative;
  aspect-ratio: 9/13;
  background: var(--navy);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.video-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .5s var(--ease), transform .9s var(--ease);
}
.video-card:hover img { opacity: .62; transform: scale(1.05); }
.play {
  position: relative;
  z-index: 2;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.65);
  display: grid; place-items: center;
  color: var(--white);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.video-card:hover .play { background: var(--gold); border-color: var(--gold); }
.video-meta {
  position: absolute;
  inset: auto 22px 22px 22px;
  z-index: 2;
  color: var(--white);
}
.video-meta strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  display: block;
}
.video-meta span {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.video-note {
  font-size: 13.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 22px;
  text-align: center;
}

/* ---------- 15. CLOSING CTA ---------- */
.closing { text-align: center; }
.closing .h-section { margin-bottom: 12px; }
.closing p { margin: 0 auto 30px; max-width: 44ch; font-size: 16px; }

/* ---------- 16. FOOTER ---------- */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 76px) 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 48px;
}
.foot-brand img { height: 52px; width: auto; margin-bottom: 18px; }
.foot-brand p { font-size: 14.5px; margin: 0 0 22px; max-width: 30ch; }
.socials { display: flex; gap: 14px; }
.socials a {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--navy);
  transition: all .3s var(--ease);
}
.socials a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.socials svg { width: 14px; height: 14px; }

.foot-col h4 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 16px;
}
.foot-col a {
  display: block;
  font-size: 14.5px;
  color: var(--body);
  padding-block: 5px;
  transition: color .25s var(--ease);
}
.foot-col a:hover { color: var(--gold); }

.foot-bottom {
  border-top: 1px solid var(--line);
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- 17. SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar:nth-child(1), .pillar:nth-child(2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-right .btn { display: none; }
  .split, .map-split { grid-template-columns: 1fr; }
  .split-media { order: -1; }
  .duo { grid-template-columns: 1fr; }
  .duo-body, .duo-body.right { max-width: 100%; margin-left: 0; background: linear-gradient(rgba(250,247,242,.95), rgba(250,247,242,.95)); }
  .rail { grid-auto-columns: minmax(230px, 76%); }
  .rail-nav { display: none; }
}

@media (max-width: 640px) {
  .nav { height: 72px; }
  .brand img { height: 38px; }
  .hero-inner { padding-block: 100px 60px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--line); }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .head-row { margin-bottom: 32px; }
}

/* ==========================================================================
   19. INNER PAGES
   Everything below is used by about / contact / faq / legal pages.
   ========================================================================== */

/* ---------- 19.1 Page hero (compact, not full-bleed like the homepage) ---------- */
/* Light treatment to match the homepage hero — the nav sits on dark text,
   so inner heroes must stay light or the nav becomes unreadable. */
.page-hero {
  position: relative;
  background: var(--cream);
  padding-block: clamp(140px, 16vw, 190px) clamp(52px, 7vw, 82px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(250,247,242,.95) 0%, rgba(250,247,242,.8) 45%, rgba(250,247,242,.5) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: var(--navy); font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.page-hero .lede { margin-top: 16px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.breadcrumb a { transition: color .25s var(--ease); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span::after { content: "/"; margin-left: 8px; opacity: .5; }

/* ---------- 19.2 Long-form prose (legal, about) ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-top: 2.2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 1.9em;
}
.prose p, .prose li { font-size: 14.5px; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5em; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--navy); font-weight: 500; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose .meta {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Highlighted block for important terms */
.callout {
  background: var(--cream);
  border-left: 2px solid var(--gold);
  padding: 20px 24px;
  font-size: 14px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: .8em; }
.callout.warn { border-left-color: #B4472F; background: #FBF1EE; }

/* ---------- 19.3 Legal layout: sticky contents + prose ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
}
.toc { position: sticky; top: 110px; }
.toc h4 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.toc a {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body);
  padding: 6px 0 6px 12px;
  border-left: 1px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.toc a:hover, .toc a.active { color: var(--gold); border-left-color: var(--gold); }

/* ---------- 19.4 Accordion (FAQ, itineraries) ---------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover { color: var(--gold); }
.acc-item summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.acc-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.acc-body { padding: 0 44px 24px 0; }
.acc-body p, .acc-body li { font-size: 14px; line-height: 1.7; margin: 0; }
.acc-body p + p, .acc-body ul { margin-top: .8em; }
.acc-body ul { padding-left: 1.15em; list-style: disc; }
.acc-body li::marker { color: var(--gold); }

.faq-group + .faq-group { margin-top: 56px; }
.faq-group > h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: 18px;
}

/* ---------- 19.5 Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}
.field label .req { color: var(--gold); }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 13px 15px;
  width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,150,62,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #B0AAA1; }
.field .hint { font-size: 11.5px; color: var(--muted); }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
}
.check input { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; accent-color: var(--gold); }

.form-note { font-size: 11.5px; color: var(--muted); margin-top: 14px; }

/* ---------- 19.6 Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.info-list { display: grid; gap: 26px; }
.info-item { display: flex; gap: 16px; align-items: flex-start; }
.info-item svg {
  width: 19px; height: 19px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}
.info-item h3 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 5px;
}
.info-item p { font-size: 14px; margin: 0; line-height: 1.6; }
.info-item a { color: var(--body); transition: color .25s var(--ease); }
.info-item a:hover { color: var(--gold); }

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(26px, 4vw, 42px);
}
.form-card > h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 6px; }
.form-card > p  { font-size: 13.5px; margin: 0 0 28px; }

/* ---------- 19.7 About ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 30px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}
.stat span {
  display: block;
  margin-top: 9px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}
.value h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.value .num {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 12px;
}
.value p { font-size: 13.5px; margin: 0; }

/* ---------- 19.8 Responsive ---------- */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: static; padding-bottom: 12px; }
  .toc a { display: inline-block; border-left: 0; border-bottom: 1px solid var(--line); margin-right: 14px; padding-left: 0; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .acc-item summary { font-size: 1.02rem; padding-right: 36px; }
}

/* ==========================================================================
   20. TRIPS — listing, filters, cards
   ========================================================================== */

/* ---------- 20.1 Filter bar ---------- */
.filter-bar {
  background: var(--cream);
  border-block: 1px solid var(--line);
  position: sticky;
  top: 88px;
  z-index: 40;
}
.filter-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 16px;
}
.filter-field { display: flex; align-items: center; gap: 8px; }
.filter-field label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.filter-bar select,
.filter-bar input[type="month"] {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 9px 12px;
  min-width: 130px;
  transition: border-color .25s var(--ease);
}
.filter-bar select:focus,
.filter-bar input:focus { outline: none; border-color: var(--gold); }

.filter-search { position: relative; flex: 1 1 180px; min-width: 160px; }
.filter-search input {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 9px 12px 9px 34px;
}
.filter-search input:focus { outline: none; border-color: var(--gold); }
.filter-search svg {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.btn-clear {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 9px 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.btn-clear:hover { border-bottom-color: var(--gold); }
.btn-clear[hidden] { display: none; }

/* Active filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
.chips:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: .06em;
  background: var(--white);
  border: 1px solid var(--gold);
  color: var(--navy);
  padding: 6px 10px 6px 12px;
}
.chip button {
  font-size: 15px;
  line-height: 1;
  color: var(--gold);
  padding: 0 2px;
}
.chip button:hover { color: var(--navy); }

/* ---------- 20.2 Result bar ---------- */
.result-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.result-count { font-size: 13px; color: var(--muted); }
.result-count b { color: var(--navy); font-weight: 500; }

/* ---------- 20.3 Trip cards ---------- */
.trip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 26px;
}
.trip-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.trip-card:hover { box-shadow: 0 12px 40px rgba(18,34,74,.1); transform: translateY(-3px); }

.trip-card .shot { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.trip-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.trip-card:hover .shot img { transform: scale(1.05); }

.badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  padding: 6px 10px;
}
.badge.gold { background: var(--gold); }
.badge.ghost { background: rgba(255,255,255,.92); color: var(--navy); }
.badge.warn { background: #B4472F; }
.badge-stack { position: absolute; top: 14px; right: 14px; display: grid; gap: 6px; justify-items: end; z-index: 2; }
.badge-stack .badge { position: static; }

.trip-card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.trip-card .where {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.trip-card h3 {
  font-size: 1.32rem;
  line-height: 1.22;
  margin-bottom: 10px;
}
.trip-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--body);
  margin-bottom: 18px;
}
.trip-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.trip-card .meta svg { width: 13px; height: 13px; color: var(--gold); flex-shrink: 0; }

.trip-card .foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.price small {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.price b {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}
.price i { font-style: normal; font-size: 11px; color: var(--muted); display: block; margin-top: 4px; }

/* ---------- 20.4 Empty state ---------- */
.empty-state {
  text-align: center;
  padding: clamp(48px, 8vw, 90px) 20px;
  border: 1px dashed var(--line);
  background: var(--cream);
}
.empty-state svg { width: 38px; height: 38px; color: var(--gold); margin: 0 auto 20px; }
.empty-state h3 { font-size: 1.5rem; margin-bottom: 10px; }
.empty-state p { font-size: 14px; max-width: 40ch; margin: 0 auto 24px; }

/* ==========================================================================
   21. TRIP DETAIL
   ========================================================================== */

.trip-hero { position: relative; background: var(--navy); color: var(--white); overflow: hidden; }
.trip-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.trip-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,18,38,.72) 0%, rgba(10,18,38,.5) 45%, rgba(10,18,38,.85) 100%);
}
.trip-hero .wrap { position: relative; z-index: 2; padding-block: clamp(140px, 15vw, 180px) clamp(40px, 5vw, 60px); }
.trip-hero .breadcrumb { color: rgba(255,255,255,.66); }
.trip-hero .breadcrumb a:hover { color: var(--gold-light); }
.trip-hero .eyebrow { color: var(--gold-light); }
.trip-hero h1 { color: var(--white); font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; }
.trip-hero .tagline {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-style: italic;
  color: rgba(255,255,255,.86);
  margin: 14px 0 0;
  max-width: 44ch;
}

.trip-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.fact small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 5px;
}
.fact b {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--white);
}

/* ---------- 21.1 Two-column layout with sticky booking card ---------- */
.trip-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.trip-main > section + section {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--line);
}
.trip-main h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 18px;
  scroll-margin-top: 110px;
}
.trip-main > section > p { font-size: 15px; }

.book-card {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line);
  background: var(--white);
}
.book-card .top { padding: 24px; border-bottom: 1px solid var(--line); }
.book-card .price b { font-size: 1.9rem; }
.book-card .note { font-size: 11.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.book-card .mid { padding: 20px 24px; display: grid; gap: 12px; }
.book-card .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.book-card .row span { color: var(--muted); }
.book-card .row b { color: var(--navy); font-weight: 500; text-align: right; }
.book-card .actions { padding: 0 24px 24px; display: grid; gap: 10px; }
.book-card .actions .btn { width: 100%; }
.btn-whatsapp { background: #1FA855; color: #fff; }
.btn-whatsapp:hover { background: #16833f; }
.btn-outline { border: 1px solid var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }

/* ---------- 21.2 Highlights ---------- */
.hl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 28px;
}
.hl {
  display: flex;
  gap: 11px;
  font-size: 14px;
  line-height: 1.55;
  align-items: flex-start;
}
.hl svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }

/* ---------- 21.3 Itinerary ---------- */
.itin { border-top: 1px solid var(--line); }
.itin-day { border-bottom: 1px solid var(--line); }
.itin-day summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 40px 22px 0;
  position: relative;
}
.itin-day summary::-webkit-details-marker { display: none; }
.itin-day summary::after {
  content: "";
  position: absolute; right: 6px; top: 30px;
  width: 8px; height: 8px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.itin-day[open] summary::after { transform: rotate(-135deg); }
.daynum {
  flex-shrink: 0;
  width: 46px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 5px;
}
.daynum b { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--navy); letter-spacing: 0; }
.itin-day .head h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 400; margin-bottom: 6px; }
.itin-day .when { font-size: 11.5px; color: var(--muted); }
.itin-body { padding: 0 40px 26px 64px; }
.itin-body p { font-size: 14px; line-height: 1.72; margin: 0 0 .85em; }
.itin-body p:last-of-type { margin-bottom: 0; }

.day-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.day-meta div small {
  display: block;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
.day-meta div span { font-size: 12.5px; color: var(--body); }

/* ---------- 21.4 Inclusions / exclusions ---------- */
.ie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.ie h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ie ul { display: grid; gap: 11px; }
.ie li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.55; align-items: flex-start; }
.ie li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; }
.ie.inc h3, .ie.inc svg { color: #2E7D4F; }
.ie.exc h3, .ie.exc svg { color: #B4472F; }

/* ---------- 21.5 Batches ---------- */
.batches { border: 1px solid var(--line); }
.batch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.batch:last-child { border-bottom: 0; }
.batch .dates { font-family: var(--serif); font-size: 1.18rem; color: var(--navy); }
.batch .sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.batch .right { display: flex; align-items: center; gap: 18px; }

.pill {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid currentColor;
}
.pill.open { color: #2E7D4F; }
.pill.filling { color: #B8963E; }
.pill.closed { color: #B4472F; }

/* ---------- 21.6 Variants ---------- */
.variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.variant {
  display: block;
  border: 1px solid var(--line);
  padding: 18px 20px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.variant:hover { border-color: var(--gold); background: var(--cream); }
.variant small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.variant b { font-family: var(--serif); font-size: 1.14rem; font-weight: 400; color: var(--navy); }

/* ---------- 21.7 Mobile sticky booking bar ---------- */
.mobile-book {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 24px rgba(0,0,0,.1);
  padding: 12px var(--gutter);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mobile-book .price b { font-size: 1.25rem; }
.mobile-book .btn { padding: 13px 24px; }

/* ==========================================================================
   22. BOOKING FORM
   ========================================================================== */

.stepper { display: flex; gap: 0; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.step-tab {
  flex: 1;
  padding: 0 8px 16px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.step-tab b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--line);
  transition: color .3s var(--ease);
}
.step-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.step-tab.active b { color: var(--gold); }
.step-tab.done b { color: var(--navy); }
.step-tab.done { color: var(--body); }

.step { display: none; }
.step.active { display: block; }

.step > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 6px; }
.step > .sub { font-size: 14px; margin: 0 0 30px; }

.member-block {
  border: 1px solid var(--line);
  padding: clamp(20px, 3vw, 30px);
  margin-bottom: 20px;
  position: relative;
}
.member-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.member-block > header h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.member-block > header h3 span { color: var(--gold); }
.btn-remove {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B4472F;
  transition: opacity .25s var(--ease);
}
.btn-remove:hover { opacity: .7; }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px dashed var(--line);
  padding: 15px 26px;
  width: 100%;
  justify-content: center;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.btn-add:hover { border-color: var(--gold); color: var(--gold); }
.btn-add svg { width: 15px; height: 15px; }

/* Radio cards for yes/no choices */
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radio-card {
  display: block;
  border: 1px solid var(--line);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.radio-card:hover { border-color: var(--gold); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card b {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 4px;
}
.radio-card span { font-size: 12px; color: var(--muted); line-height: 1.45; }
.radio-card:has(input:checked) { border-color: var(--gold); background: var(--cream); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Validation */
.field.invalid input,
.field.invalid select { border-color: #B4472F; }
.field .error {
  font-size: 11.5px;
  color: #B4472F;
  display: none;
}
.field.invalid .error { display: block; }

.step-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.step-nav .btn { min-width: 150px; }
.step-nav .spacer { flex: 1; }

/* Review step */
.review-block { border: 1px solid var(--line); margin-bottom: 16px; }
.review-block > h3 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.review-rows { padding: 8px 22px 18px; }
.review-rows div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.review-rows div:last-child { border-bottom: 0; }
.review-rows span { color: var(--muted); }
.review-rows b { color: var(--navy); font-weight: 500; text-align: right; }

.form-success {
  text-align: center;
  padding: clamp(40px, 6vw, 70px) 24px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.form-success svg { width: 44px; height: 44px; color: #2E7D4F; margin: 0 auto 22px; }
.form-success h2 { font-size: 1.8rem; margin-bottom: 12px; }
.form-success p { font-size: 14.5px; max-width: 44ch; margin: 0 auto 26px; }

/* ==========================================================================
   23. GALLERY / TESTIMONIALS / BLOG
   ========================================================================== */

.tabs { display: flex; flex-wrap: wrap; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.tab {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.tab:hover { color: var(--navy); }
.tab.active { color: var(--navy); border-bottom-color: var(--gold); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.shot-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream-deep);
}
.shot-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.shot-tile:hover img { transform: scale(1.07); }
.shot-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 16px 14px;
  background: linear-gradient(transparent, rgba(8,14,30,.8));
  color: var(--white);
  font-size: 11.5px;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.shot-tile:hover figcaption { opacity: 1; }
.shot-tile.tall { grid-row: span 2; aspect-ratio: 1/2.06; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,14,30,.94);
  display: none;
  place-items: center;
  padding: 24px;
}
.lightbox.open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lightbox figcaption {
  color: rgba(255,255,255,.8);
  font-size: 12.5px;
  text-align: center;
  margin-top: 16px;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  color: var(--white);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  transition: background .25s var(--ease);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.16); }
.lb-close { top: 24px; right: 24px; font-size: 22px; line-height: 1; }
.lb-prev { left: 20px; top: 50%; margin-top: -23px; }
.lb-next { right: 20px; top: 50%; margin-top: -23px; }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.post-card { display: flex; flex-direction: column; }
.post-card .shot { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 18px; }
.post-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .shot img { transform: scale(1.05); }
.post-card .kicker {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.post-card h3 { font-size: 1.35rem; line-height: 1.24; margin-bottom: 9px; transition: color .3s var(--ease); }
.post-card:hover h3 { color: var(--gold); }
.post-card p { font-size: 13.5px; margin: 0 0 12px; }
.post-card .byline { font-size: 11.5px; color: var(--muted); margin-top: auto; }

.post-featured {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  padding-bottom: clamp(36px, 5vw, 56px);
  margin-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.post-featured .shot { aspect-ratio: 16/10; overflow: hidden; }
.post-featured .shot img { width: 100%; height: 100%; object-fit: cover; }
.post-featured h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 12px; }

/* Article body */
.article { max-width: 68ch; margin-inline: auto; }
.article > * + * { margin-top: 1.1em; }
.article p, .article li { font-size: 16px; line-height: 1.78; }
.article h2 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); margin-top: 1.9em; }
.article h3 { font-size: 1.22rem; margin-top: 1.6em; }
.article ul, .article ol { padding-left: 1.2em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-top: .5em; }
.article li::marker { color: var(--gold); }
.article img { width: 100%; margin-block: 2em; }
.article blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 24px;
  margin-block: 2em;
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--navy);
  font-style: italic;
}
.article figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: -1.4em; }

/* Testimonial quote cards */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.quote {
  border: 1px solid var(--line);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.quote .stars { color: var(--gold); font-size: 13px; letter-spacing: 3px; margin-bottom: 16px; }
.quote blockquote {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
}
.quote .who { margin-top: auto; font-size: 12.5px; }
.quote .who b { display: block; color: var(--navy); font-weight: 500; }
.quote .who span { color: var(--muted); }

/* ==========================================================================
   24. RESPONSIVE — sections 20-23
   ========================================================================== */

@media (max-width: 1024px) {
  .trip-layout { grid-template-columns: 1fr; }
  .book-card { display: none; }
  .mobile-book { display: flex; }
  body.has-mobile-book { padding-bottom: 78px; }
  .post-featured { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .filter-bar { top: 72px; }
  .filter-inner { gap: 10px; }
  .filter-field { flex: 1 1 45%; }
  .filter-field label { display: none; }
  .filter-bar select, .filter-bar input[type="month"] { width: 100%; min-width: 0; }
}

@media (max-width: 640px) {
  .ie-grid { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .itin-body { padding-left: 0; padding-right: 0; }
  .itin-day summary { padding-right: 30px; gap: 14px; }
  .step-tab { font-size: 0; padding-bottom: 12px; }
  .step-tab b { font-size: 1.2rem; margin: 0; }
  .step-nav .btn { min-width: 0; flex: 1; }
  .trip-facts { gap: 16px 26px; }
  .shot-tile.tall { grid-row: span 1; aspect-ratio: 1; }
}

/* Traveller number inside a repeatable booking block, set by booking.js */
.mnum { color: var(--gold); }

/* ==========================================================================
   25. DARK-HERO HEADER
   The nav is dark-on-light by default, which disappears against a dark hero
   (trip detail). Pages with one set `<body class="dark-hero">` and the header
   inverts until it sticks — once scrolled it goes white and reverts.
   ========================================================================== */
body.dark-hero .site-header:not(.scrolled) .nav-links a { color: var(--white); }
body.dark-hero .site-header:not(.scrolled) .burger span { background: var(--white); }
body.dark-hero .site-header:not(.scrolled) .brand .logo-light { display: block; }
body.dark-hero .site-header:not(.scrolled) .brand .logo-dark  { display: none; }

/* ==========================================================================
   26. TRIP PHOTOGRAPHY
   Images extracted from the client's own itinerary document.
   ========================================================================== */

/* Photos inside an itinerary day */
.day-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.day-shots figure {
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream-deep);
}
.day-shots img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.day-shots figure:hover img { transform: scale(1.05); }

/* Trip gallery */
.trip-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.trip-gallery figure {
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream-deep);
}
.trip-gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.trip-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.trip-gallery figure:hover img { transform: scale(1.04); }

@media (max-width: 640px) {
  .trip-gallery figure:first-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 3/2; }
  .day-shots { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   27. CONTENTS SCROLLSPY
   .toc a.active is set by main.js as you scroll. Long lists (Terms has 14
   items) get their own scroll area so the sticky sidebar can't outgrow the
   viewport and strand the active item off-screen.
   ========================================================================== */
.toc {
  max-height: calc(100svh - 130px);
  overflow-y: auto;
  scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }

.toc a {
  transition: color .25s var(--ease),
              border-color .25s var(--ease),
              background .25s var(--ease);
}
.toc a.active {
  color: var(--gold);
  border-left-color: var(--gold);
  font-weight: 500;
}

@media (max-width: 900px) {
  /* Horizontal strip on mobile — the active item scrolls itself into view */
  .toc {
    max-height: none;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .toc a.active { border-left: 0; border-bottom-color: var(--gold); }
}