/* Built automatically from fonts.css, style.css, premium.css, editorial.css, mobile-polish.css, site-refresh.css, trust.css, site-extras.css. Edit those files, not this one. */

/* ===== fonts.css ===== */
/* Self hosted web fonts (Marcellus, Work Sans variable 300 to 700), latin and latin-ext subsets.
   Files downloaded 29 Oct 2026 from fonts.gstatic.com (SIL Open Font License 1.1) so that no visitor request goes to Google for fonts. */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/work-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/work-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ===== style.css ===== */
/* ============================================================
   VOLCAN TOURS & TRAVEL — site stylesheet
   Direction: "warm editorial" — paper, ink, terracotta.
   Display: Playfair Display · Body: Work Sans
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --paper: #f7f2e7;
  --panel: #efe7d5;
  --paper-2: #fcf9f0;
  --ink: #262019;
  --ink-2: #6f6553;
  --ink-3: #958a73;
  --terra: #a85c2e;
  --terra-bright: #c97a44;
  --terra-deep: #8a4a22;
  --deep: #2b241b;
  --deep-2: #211b14;
  --line: #e0d5ba;
  --line-strong: #cdbf9e;
  --white: #fdfbf5;
  --cream-on-deep: #ece3cf;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 820px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 10px;
  --radius-sm: 6px;

  --shadow-1: 0 1px 2px rgba(38, 32, 25, 0.06), 0 8px 24px -18px rgba(38, 32, 25, 0.35);
  --shadow-2: 0 2px 4px rgba(38, 32, 25, 0.07), 0 24px 48px -28px rgba(38, 32, 25, 0.45);

  --header-h: 78px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--terra-bright); color: var(--white); }

/* ---------- a11y ---------- */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--deep); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 14px; font-weight: 600; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--terra-bright); outline-offset: 3px; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(64px, 9vw, 108px) 0; }
.section--alt { background: var(--panel); }
.section--paper { background: var(--paper-2); }
.section--deep {
  background: var(--deep); color: var(--cream-on-deep);
}
.section--deep .eyebrow { color: #d9a06b; }
.section--deep .h2, .section--deep h2, .section--deep h3 { color: var(--white); }
.section--deep .lede, .section--deep p.lede { color: #b9ac93; }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--terra);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.h1, .h2, .h3, h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; color: var(--ink); }
.h1 { font-size: clamp(38px, 6.4vw, 66px); line-height: 1.04; letter-spacing: -0.01em; }
.h2 { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; }
.h3 { font-size: clamp(20px, 2.4vw, 26px); }
.lede { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.75; color: var(--ink-2); }
.small { font-size: 13.5px; }
.tight { line-height: 1.45; }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .lede { margin-top: 16px; }
.section-head--split {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  max-width: none; flex-wrap: wrap;
}
.section-head--split .lede { max-width: 380px; margin-top: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--terra); color: var(--white);
  padding: 15px 28px; border-radius: 4px;
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  text-align: center;
}
.btn:hover { background: var(--terra-bright); transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(168, 92, 46, 0.7); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: rgba(168, 92, 46, 0.06); box-shadow: inset 0 0 0 1px var(--terra); color: var(--terra-deep); }
.btn--light { background: var(--white); color: var(--deep); }
.btn--light:hover { background: var(--paper); }
.btn--on-deep { background: var(--white); color: var(--deep); }
.btn--on-deep:hover { background: var(--terra-bright); color: var(--white); }
.btn--ghost-on-deep { box-shadow: inset 0 0 0 1px rgba(253, 251, 245, 0.45); color: var(--white); }
.btn--ghost-on-deep:hover { box-shadow: inset 0 0 0 1px var(--white); background: rgba(253, 251, 245, 0.08); }
.btn--sm { padding: 10px 18px; font-size: 13.5px; }
.btn--block { width: 100%; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--terra);
  transition: gap 0.18s var(--ease);
}
.link-arrow:hover { gap: 13px; color: var(--terra-deep); }
.link-arrow::after { content: "\2192"; }

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.55), rgba(20, 16, 10, 0));
  opacity: 1; transition: opacity 0.3s var(--ease); pointer-events: none;
}
.header.is-solid { background: var(--deep-2); border-bottom-color: rgba(253, 251, 245, 0.08); box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6); }
.header.is-solid::before { opacity: 0; }
.header--always-solid { background: var(--deep-2); border-bottom-color: rgba(253, 251, 245, 0.08); }
.header--always-solid::before { opacity: 0; }

.header-inner {
  max-width: var(--wrap); margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.brand img { height: 40px; width: auto; }
.brand .brand-name { font-family: var(--serif); font-size: 19px; letter-spacing: 0.01em; }
.brand .brand-sub { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(253, 251, 245, 0.55); font-weight: 500; }

.nav ul { display: flex; align-items: center; gap: 34px; }
.nav a {
  font-size: 13.5px; font-weight: 500; color: rgba(253, 251, 245, 0.82);
  letter-spacing: 0.02em; transition: color 0.16s var(--ease);
  padding: 6px 0; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--terra-bright); transition: right 0.22s var(--ease);
}
.nav a:hover { color: var(--white); }
.nav a:hover::after { right: 0; }
.nav .is-current { color: var(--white); }
.nav .is-current::after { right: 0; }
.header-cta { display: flex; align-items: center; gap: 18px; }

.menu-btn {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; align-items: center; color: var(--white);
}
.menu-btn span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.22s var(--ease), opacity 0.22s var(--ease); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 99;
  background: var(--deep-2); border-bottom: 1px solid rgba(253, 251, 245, 0.1);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), visibility 0.25s;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.7);
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-nav ul { padding: 14px 0; }
.mobile-nav a {
  display: block; padding: 14px var(--gutter); color: var(--cream-on-deep);
  font-size: 16.5px; font-weight: 500; border-bottom: 1px solid rgba(253, 251, 245, 0.06);
}
.mobile-nav a.is-current { color: var(--terra-bright); }
.mobile-nav .mobile-cta { padding: 18px var(--gutter) 24px; }

/* ---------- hero (home) ---------- */
.hero {
  position: relative; min-height: 92vh; min-height: 92svh;
  display: flex; align-items: flex-end;
  overflow: hidden; color: var(--white);
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(18, 14, 8, 0.82) 0%, rgba(18, 14, 8, 0.42) 46%, rgba(18, 14, 8, 0.12) 78%),
    linear-gradient(180deg, rgba(18, 14, 8, 0.5), rgba(18, 14, 8, 0) 34%);
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  padding: calc(var(--header-h) + 40px) var(--gutter) clamp(48px, 7vw, 84px);
  max-width: var(--wrap); margin: 0 auto;
}
.hero .eyebrow { color: #e8b98c; }
.hero h1 { color: var(--white); text-shadow: 0 2px 28px rgba(10, 7, 3, 0.45); margin-bottom: 20px; }
.hero .lede { color: #efe7d6; max-width: 520px; margin-bottom: 32px; text-shadow: 0 1px 16px rgba(10, 7, 3, 0.45); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-trust { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(253, 251, 245, 0.68); font-weight: 500; }

/* ---------- page hero (interior pages) ---------- */
.page-hero {
  background: var(--deep); color: var(--cream-on-deep);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 72px)) 0 clamp(36px, 5vw, 56px);
  border-bottom: 1px solid rgba(253, 251, 245, 0.08);
}
.page-hero .eyebrow { color: #d9a06b; margin-bottom: 14px; }
.page-hero h1 { color: var(--white); margin-bottom: 12px; }
.page-hero .lede { color: #c3b79d; max-width: 620px; }
.breadcrumb { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(253, 251, 245, 0.5); margin-bottom: 20px; }
.breadcrumb a { color: rgba(253, 251, 245, 0.78); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { margin: 0 8px; }

/* ---------- trust strip ---------- */
.trust-strip { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.trust-strip ul {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust-strip li {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px; border-left: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.trust-strip li:first-child { border-left: 0; }
.trust-strip .t-dot { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--panel); color: var(--terra); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.trust-strip strong { display: block; font-weight: 600; }
.trust-strip small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 400; }

/* ---------- destination cards ---------- */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dest-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 3.8; display: flex; align-items: flex-end;
  isolation: isolate; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); z-index: -2; }
.dest-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(16, 12, 7, 0.82) 0%, rgba(16, 12, 7, 0.12) 58%, rgba(16, 12, 7, 0) 78%);
}
.dest-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.dest-card:hover img { transform: scale(1.06); }
.dest-card-body { padding: 26px 24px 22px; color: var(--white); width: 100%; }
.dest-card .d-name { font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.15; }
.dest-card .d-count { display: block; font-size: 12.5px; color: rgba(253, 251, 245, 0.72); margin: 6px 0 14px; }
.dest-card .link-arrow { color: #e8b98c; }
.dest-card .link-arrow:hover { color: var(--white); }

/* ---------- tour cards ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tour-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tour-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.tour-card-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tour-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.tour-card:hover .tour-card-photo img { transform: scale(1.06); }
.tour-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(33, 27, 20, 0.78); color: var(--white);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 6px 11px; border-radius: 3px; backdrop-filter: blur(4px);
}
.tour-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.tour-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; margin-bottom: 8px; }
.tour-card h3 a:hover { color: var(--terra); }
.tour-meta { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.tour-meta::first-letter { text-transform: uppercase; }
.tour-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tour-tags span { font-size: 11.5px; background: var(--panel); color: var(--ink-2); padding: 4px 10px; border-radius: 999px; }
.tour-card-foot {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.tour-price { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--terra-deep); line-height: 1; }
.tour-price small { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--ink-2); }
.tour-view { font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: color 0.16s var(--ease); }
.tour-card:hover .tour-view { color: var(--terra); }

/* ---------- why / value items ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.value-item .v-num {
  font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--terra);
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.value-item .v-num::after { content: ""; flex: 1; max-width: 44px; height: 1px; background: var(--line-strong); }
.value-item h3 { font-size: 19px; font-weight: 600; margin-bottom: 9px; }
.value-item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }

/* ---------- steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.step { position: relative; padding-top: 58px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--terra);
  opacity: 0.9;
}
.step h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.step p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.step .step-note { display: block; margin-top: 16px; font-size: 13px; color: var(--terra); font-weight: 600; }

/* ---------- quote block ---------- */
.quote-block { position: relative; }
.quote-block blockquote {
  font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 400;
  font-style: italic; line-height: 1.45; margin-bottom: 24px; max-width: 780px;
}
.quote-block cite { font-style: normal; font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.section--deep .quote-block blockquote { color: var(--white); }
.section--deep .quote-block cite { color: #a99c83; }
.quote-mark { font-family: var(--serif); font-size: 120px; line-height: 0.4; color: var(--terra); display: block; margin-bottom: 34px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--terra); color: var(--white); position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.08);
}
.cta-band::before {
  content: ""; position: absolute; right: 120px; bottom: -140px; width: 280px; height: 280px;
  border-radius: 50%; background: rgba(33, 27, 20, 0.18);
}
.cta-band .wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); font-size: clamp(26px, 3.6vw, 38px); max-width: 560px; }
.cta-band p { color: rgba(253, 251, 245, 0.82); margin-top: 10px; max-width: 520px; }
.cta-band .btn { background: var(--deep); }
.cta-band .btn:hover { background: var(--deep-2); }

/* ---------- filter bar ---------- */
.filter-bar {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  margin-bottom: 40px; box-shadow: var(--shadow-1);
}
.filter-group { flex: 1 1 170px; }
.filter-group label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.filter-group select, .filter-group input {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236f6553' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 38px 11px 14px; font-size: 14px; color: var(--ink);
  cursor: pointer; transition: border-color 0.16s var(--ease);
}
.filter-group select:focus, .filter-group input:focus { border-color: var(--terra-bright); outline: none; }
.filter-bar .filter-reset {
  padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--terra);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper-2); transition: all 0.16s var(--ease);
}
.filter-bar .filter-reset:hover { border-color: var(--terra); }
.result-count { font-size: 13.5px; color: var(--ink-2); margin: -22px 0 26px; }
.tour-card.is-hidden { display: none; }
.no-results {
  display: none; text-align: center; padding: 60px 20px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); color: var(--ink-2);
}
.no-results.is-visible { display: block; }
.no-results h3 { font-size: 24px; margin-bottom: 10px; }

/* ---------- tour detail ---------- */
.detail-hero { position: relative; min-height: 64vh; min-height: 64svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--white); }
.detail-hero .hero-media::after { background: linear-gradient(0deg, rgba(16, 12, 7, 0.88), rgba(16, 12, 7, 0.35) 55%, rgba(16, 12, 7, 0.1)); }
.detail-hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--gutter) 46px; }
.detail-hero .price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.detail-hero .big-price { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--white); }
.detail-hero .big-price small { font-family: var(--sans); font-size: 14px; font-weight: 400; color: rgba(253, 251, 245, 0.7); }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(36px, 5vw, 64px); align-items: start; }
.sticky-side { position: sticky; top: calc(var(--header-h) + 24px); }
.quote-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-1);
}
.quote-panel h3 { font-size: 21px; margin-bottom: 6px; }
.quote-panel .qp-sub { font-size: 13.5px; color: var(--ink-2); margin-bottom: 20px; }
.quote-panel .note { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 14px; }

.fact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 34px 0 40px; }
.fact { background: var(--white); padding: 18px 16px; }
.fact .f-label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.fact .f-value { font-size: 15px; font-weight: 600; color: var(--ink); }

.highlight-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 22px 0 8px; }
.highlight-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.highlight-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--terra-bright);
}

/* day-by-day accordion */
.itinerary { margin-top: 10px; }
.day { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); margin-bottom: 12px; overflow: hidden; }
.day summary {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  transition: background 0.16s var(--ease);
}
.day summary::-webkit-details-marker { display: none; }
.day summary:hover { background: var(--paper-2); }
.day .day-num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel); color: var(--terra-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 17px; font-weight: 600;
}
.day[open] .day-num { background: var(--terra); color: var(--white); }
.day .day-title { font-family: var(--serif); font-size: 18px; font-weight: 600; flex: 1; line-height: 1.3; }
.day .day-sub { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.day .day-toggle { flex-shrink: 0; font-size: 22px; color: var(--ink-3); transition: transform 0.25s var(--ease); line-height: 1; }
.day[open] .day-toggle { transform: rotate(45deg); }
.day-body { padding: 4px 22px 22px 86px; }
.day-body p { font-size: 15px; color: var(--ink); line-height: 1.75; }
.day-body .day-detail { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.day-body .day-detail strong { color: var(--terra-deep); font-weight: 600; }

/* inclusions / exclusions */
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.inc-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.inc-panel h3 { font-size: 20px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.inc-panel ul li { position: relative; padding: 7px 0 7px 28px; font-size: 14.5px; color: var(--ink); border-bottom: 1px dashed var(--line); }
.inc-panel ul li:last-child { border-bottom: 0; }
.inc-panel--in ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--terra); font-weight: 700; }
.inc-panel--ex ul li::before { content: "\2715"; position: absolute; left: 0; color: var(--ink-3); font-weight: 700; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery a { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.gallery a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }

/* best-time table */
.timetable { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.timetable th, .timetable td { padding: 13px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); }
.timetable th { background: var(--panel); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.timetable tr:last-child td { border-bottom: 0; }
.timetable td:first-child { font-weight: 600; }
.timetable .good { color: var(--terra-deep); }
.timetable .fair { color: var(--ink-2); }
.timetable .poor { color: var(--ink-3); }

/* stats row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(253, 251, 245, 0.12); border: 1px solid rgba(253, 251, 245, 0.12); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--deep-2); padding: 30px 24px; text-align: center; }
.stat .s-num { font-family: var(--serif); font-size: 40px; font-weight: 600; color: var(--white); line-height: 1; }
.stat .s-num small { font-size: 18px; color: #d9a06b; }
.stat .s-label { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #a99c83; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.form-field label .req { color: var(--terra); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper-2); padding: 13px 15px; font-size: 14.5px; color: var(--ink);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--terra-bright);
  box-shadow: 0 0 0 3px rgba(201, 122, 68, 0.18);
}
.form-field input:disabled { opacity: 0.55; background: var(--panel); cursor: not-allowed; }
.form-status { margin-top: 16px; font-size: 14px; color: var(--terra-deep); display: none; }
.form-status.is-visible { display: block; }
.form-note { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; line-height: 1.6; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 22px; }
.contact-card + .contact-card { margin-top: 18px; }
.contact-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.contact-card h3 .c-ico { color: var(--terra); }
.contact-card p, .contact-card a { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.contact-card a:hover { color: var(--terra); }
.map-frame { border: 0; width: 100%; height: 320px; border-radius: var(--radius); border: 1px solid var(--line); }

/* ---------- footer ---------- */
.footer { background: var(--deep-2); color: #a99c83; font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: clamp(48px, 6vw, 72px) 0 40px; }
.footer .brand { margin-bottom: 18px; }
.footer h4 { color: var(--white); font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { transition: color 0.16s var(--ease); }
.footer ul a:hover { color: var(--white); }
.footer .f-about { font-size: 14px; line-height: 1.8; max-width: 300px; }
.footer .f-contact li { display: flex; gap: 10px; align-items: baseline; }
.footer .f-contact svg { flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid rgba(253, 251, 245, 0.08);
  padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: #7d7260;
}
.footer-bottom a { color: #a99c83; }
.footer-bottom a:hover { color: var(--white); }

/* ---------- whatsapp float ---------- */
.wa-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 10px; }
.wa-float {
  position: relative; flex: none;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.2s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- split layout (country pages) ---------- */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split-2 .split-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }
.split-2 .split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-2 .split-media--tall img { aspect-ratio: 3 / 4; }

/* ---------- park cards ---------- */
.park-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.park-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.park-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.park-card .p-ico { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--terra); margin-bottom: 12px; }
.park-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.park-card p { font-size: 14px; color: var(--ink-2); line-height: 1.65; flex: 1; }
.park-card .p-meta { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-3); }
.park-card .p-meta strong { color: var(--terra-deep); font-weight: 600; }

@media (max-width: 1020px) {
  .split-2 { grid-template-columns: 1fr; }
  .park-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .park-grid { grid-template-columns: 1fr; }
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .tour-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .trust-strip ul { grid-template-columns: repeat(2, 1fr); }
  .trust-strip li:nth-child(3) { border-left: 0; }
  .trust-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .detail-layout { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery a:first-child { grid-column: span 2; }
}

@media (max-width: 760px) {
  .nav, .header-cta .btn { display: none; }
  .menu-btn { display: flex; }
  .hero { min-height: 88vh; min-height: 88svh; }
  .hero-actions .btn { flex: 1 1 100%; }
  .dest-grid, .tour-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .inc-grid, .form-grid { grid-template-columns: 1fr; }
  .highlight-list { grid-template-columns: 1fr; }
  .fact-row { grid-template-columns: repeat(2, 1fr); }
  .day-body { padding: 4px 20px 20px 20px; }
  .day summary { gap: 14px; padding: 15px 16px; }
  .day .day-num { width: 38px; height: 38px; font-size: 15px; }
  .trust-strip ul { grid-template-columns: 1fr; }
  .trust-strip li, .trust-strip li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-strip li:first-child { border-top: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .cta-band .wrap { justify-content: center; text-align: center; }
  .cta-band .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}


/* ===== premium.css ===== */
/* ============================================================
   VOLCAN TOURS, premium layer (v2)
   Loaded after style.css. Retypes the base and adds the new
   sections: trip finder, salesperson CTA strip, stays, locations,
   full-screen mobile nav, safari SVG motifs.
   ============================================================ */

/* ---------- retype ----------
   Fraunces carries the brand voice; Karla does the work. Optical
   sizing means display sizes get the high-contrast cut and small
   sizes stay readable, which a static serif cannot do.            */
:root {
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sand: #efe7d5;
  --dusk: #2b241b;
}

body { font-family: var(--sans); letter-spacing: -0.003em; }

.h1, .h2, .h3, h1, h2, h3,
.brand .brand-name, .dest-card .d-name, .tour-card h3, .tour-price {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 28, "WONK" 1;
  letter-spacing: -0.018em;
}
.h1 { font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 34, "WONK" 1; }
.h2 { font-weight: 400; font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 1; }
.h3 { font-weight: 500; font-variation-settings: "opsz" 48, "SOFT" 24, "WONK" 0; }
.eyebrow { font-family: var(--sans); font-weight: 600; letter-spacing: 0.2em; }
.lede { font-weight: 350; }

/* Scroll-reveal backstop, see premium.js. Guarantees no section can be
   left permanently invisible if the observer or its transition misses. */
.reveal.reveal-force {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   1. TRIP FINDER, sits directly under the hero
   ============================================================ */
.finder {
  position: relative;
  margin-top: -64px;
  z-index: 6;
  padding-bottom: clamp(56px, 7vw, 88px);
  /* clears the sticky header when arriving via the hero's "Find a Safari" anchor */
  scroll-margin-top: calc(var(--header-h) + 18px);
}
@media (max-width: 900px) { .finder { margin-top: -32px; } }

.finder-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(38,32,25,.05), 0 32px 64px -32px rgba(38,32,25,.42);
  padding: clamp(22px, 3vw, 34px);
}

.finder-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.finder-head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.finder-head .finder-count {
  font-size: 13px; color: var(--ink-2); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.finder-head .finder-count b { color: var(--terra); font-weight: 700; }

.finder-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 900px) { .finder-row { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 560px) { .finder-row { grid-template-columns: 1fr; } }

.finder-field > label {
  display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 9px;
}

/* segmented pills, used for country + style */
.pillset { display: flex; flex-wrap: wrap; gap: 6px; }
.pillset button {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2);
  cursor: pointer; transition: all .18s var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.pillset button:hover { border-color: var(--terra); color: var(--terra); }
.pillset button[aria-pressed="true"] {
  background: var(--dusk); border-color: var(--dusk); color: var(--white);
}
.pillset button[aria-pressed="true"] .pill-dot { background: var(--terra-bright); }
.pill-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong);
  transition: background .18s var(--ease-out);
}

/* range sliders for days + budget */
.range-value {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  font-variation-settings: "opsz" 24, "SOFT" 20;
  color: var(--ink); margin-bottom: 6px; display: block;
}
input[type="range"].vt-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--terra) 0%, var(--terra) var(--fill,50%), var(--line) var(--fill,50%), var(--line) 100%);
  outline: none; margin: 10px 0 4px;
}
input[type="range"].vt-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--terra);
  box-shadow: 0 2px 8px rgba(38,32,25,.25); cursor: pointer;
  transition: transform .16s var(--ease-out);
}
input[type="range"].vt-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"].vt-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--terra);
  background: var(--white); cursor: pointer;
}
.range-caption { font-size: 11.5px; color: var(--ink-3); display: flex; justify-content: space-between; }

.finder-foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.finder-reset {
  font: inherit; font-size: 13px; color: var(--ink-3); background: none; border: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.finder-reset:hover { color: var(--terra); }

/* results */
.finder-results { margin-top: clamp(28px, 4vw, 40px); }
.tour-card.is-filtered-out { display: none; }
.finder-empty {
  display: none; text-align: center; padding: 48px 24px;
  border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--paper-2);
}
.finder-empty.is-visible { display: block; }
.finder-empty h3 { font-size: 21px; margin-bottom: 8px; }
.finder-empty p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 18px; }

/* ============================================================
   2. SPECIALIST CTA STRIP, a real person, not "Book now"
   ============================================================ */
.specialist {
  background: var(--dusk);
  color: var(--cream-on-deep);
  position: relative;
  overflow: hidden;
}
.specialist::after {
  /* faint topographic horizon, drawn not stock */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300'%3E%3Cg fill='none' stroke='%23a85c2e' stroke-opacity='0.16' stroke-width='1.1'%3E%3Cpath d='M0 210 C 180 160, 300 250, 470 205 S 800 150, 1200 215'/%3E%3Cpath d='M0 232 C 200 185, 320 268, 500 228 S 830 176, 1200 238'/%3E%3Cpath d='M0 254 C 210 212, 340 286, 520 250 S 860 202, 1200 260'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; background-position: center bottom; opacity: .9;
}
.specialist-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(24px, 4vw, 48px);
  padding: clamp(38px, 5vw, 60px) 0;
}
@media (max-width: 900px) {
  .specialist-inner { grid-template-columns: auto 1fr; gap: 20px; }
  .specialist-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .specialist-inner { grid-template-columns: 1fr; text-align: left; }
}

.specialist-photo {
  position: relative; flex-shrink: 0;
  width: clamp(96px, 12vw, 132px); height: clamp(96px, 12vw, 132px);
  border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(236,227,207,.28);
  background: var(--panel);
}
.specialist-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.specialist-photo .photo-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(150deg, #3a3025, #241d16);
  color: #7d6f5a; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 10px; line-height: 1.4;
}
.specialist-status {
  position: absolute; right: 4px; bottom: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #4ea468; border: 2.5px solid var(--dusk);
}

.specialist-copy .eyebrow { color: #d9a06b; }
.specialist-copy h2 {
  color: var(--white); font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15; margin-bottom: 10px;
}
.specialist-copy p { color: #b9ac93; font-size: 15.5px; max-width: 48ch; }
.specialist-copy .specialist-name {
  display: block; margin-top: 12px; font-size: 13px; color: #8e806a;
}
.specialist-copy .specialist-name b { color: var(--cream-on-deep); font-weight: 600; }

.specialist-actions { display: flex; flex-direction: column; gap: 10px; min-width: 210px; }
.specialist-actions .btn { width: 100%; }
.btn--wa { background: #25623f; }
.btn--wa:hover { background: #2f7a4f; }
.specialist-reply {
  font-size: 12px; color: #8e806a; text-align: center; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.specialist-reply .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ea468; }

/* ============================================================
   3. STAYS (accommodation) + LOCATIONS
   Deliberately different structure from the tour cards: stays use
   a wide editorial split, locations use a bordered index list.
   ============================================================ */
.stays-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 26px); }
@media (max-width: 900px) { .stays-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .stays-grid { grid-template-columns: 1fr; } }

.stay-card {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--dusk); color: var(--cream-on-deep);
  min-height: 340px; display: flex; align-items: flex-end;
  isolation: isolate;
}
.stay-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; transition: transform 1.1s var(--ease-out);
}
.stay-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(24,19,13,.92) 6%, rgba(24,19,13,.38) 52%, rgba(24,19,13,.08) 100%);
}
.stay-card:hover img { transform: scale(1.06); }
.stay-body { padding: 24px; width: 100%; }
.stay-kicker {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #d9a06b; font-weight: 600; margin-bottom: 8px; display: block;
}
.stay-card h3 { color: var(--white); font-size: 22px; margin-bottom: 6px; }
.stay-meta { font-size: 13px; color: #b9ac93; display: flex; gap: 14px; flex-wrap: wrap; }
.stay-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* locations: index list, not cards */
.loc-index { border-top: 1px solid var(--line); }
.loc-row {
  display: grid; grid-template-columns: 56px 1.1fr 1fr auto;
  align-items: center; gap: 20px;
  padding: 20px 4px; border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease-out), padding-left .2s var(--ease-out);
  text-decoration: none; color: inherit;
}
.loc-row:hover { background: var(--paper-2); padding-left: 12px; }
.loc-row .loc-num {
  font-family: var(--serif); font-variation-settings: "opsz" 24;
  font-size: 14px; color: var(--ink-3);
}
.loc-row .loc-name { font-family: var(--serif); font-size: 21px; font-variation-settings: "opsz" 36, "SOFT" 24; }
.loc-row .loc-country { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); font-weight: 600; margin-top: 3px; }
.loc-row .loc-note { font-size: 14px; color: var(--ink-2); }
.loc-row .loc-go { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.loc-row:hover .loc-go { color: var(--terra); }
@media (max-width: 800px) {
  .loc-row { grid-template-columns: 40px 1fr; gap: 6px 16px; }
  .loc-row .loc-note, .loc-row .loc-go { grid-column: 2; }
  .loc-row .loc-note { font-size: 13px; }
}

/* ============================================================
   4. FULL-SCREEN MOBILE NAV
   ============================================================ */
.mobile-nav {
  position: fixed; inset: 0; z-index: 120;
  background: var(--dusk); color: var(--cream-on-deep);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .5s var(--ease-out);
  overflow-y: auto; visibility: hidden;
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }

.mnav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter); border-bottom: 1px solid rgba(236,227,207,.12);
  flex-shrink: 0;
}
.mnav-close {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(236,227,207,.22); background: none; color: inherit;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease-out);
}
.mnav-close:hover { background: rgba(236,227,207,.1); }

.mnav-body { padding: 8px var(--gutter) 28px; flex: 1; }
.mnav-list { list-style: none; margin: 0; padding: 0; }
.mnav-list > li { border-bottom: 1px solid rgba(236,227,207,.1); }
.mnav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; font-family: var(--serif);
  font-size: 27px; font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 1;
  color: var(--white); text-decoration: none; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.mnav-link .mnav-idx {
  font-family: var(--sans); font-size: 10px; letter-spacing: .18em;
  color: #7d6f5a; margin-right: 14px; font-weight: 600;
}
.mnav-caret { transition: transform .35s var(--ease-out); flex-shrink: 0; }
.mnav-link[aria-expanded="true"] .mnav-caret { transform: rotate(45deg); }

.mnav-sub {
  overflow: hidden; max-height: 0;
  transition: max-height .45s var(--ease-out);
}
.mnav-sub.is-open { max-height: 1200px; }
.mnav-sub ul { list-style: none; margin: 0; padding: 0 0 14px; }
.mnav-country > a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0 11px 30px; color: var(--cream-on-deep);
  text-decoration: none; font-size: 16px; font-weight: 500;
}
.mnav-country > a:hover { color: var(--terra-bright); }
.mnav-parks {
  padding: 0 0 10px 30px; display: flex; flex-wrap: wrap; gap: 6px;
}
.mnav-parks a {
  font-size: 12.5px; color: #a1937c; text-decoration: none;
  border: 1px solid rgba(236,227,207,.16); border-radius: 999px; padding: 5px 11px;
  transition: all .18s var(--ease-out);
}
.mnav-parks a:hover { color: var(--white); border-color: var(--terra); }

.mnav-foot {
  padding: 22px var(--gutter) 32px;
  border-top: 1px solid rgba(236,227,207,.12);
  display: grid; gap: 12px; flex-shrink: 0;
}
.mnav-foot .btn { width: 100%; }
.mnav-contact { font-size: 13px; color: #8e806a; display: grid; gap: 6px; }
.mnav-contact a { color: var(--cream-on-deep); text-decoration: none; }

/* burger becomes an X when open */
.menu-btn.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn.is-active span:nth-child(2) { opacity: 0; }
.menu-btn.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-btn span { transition: transform .3s var(--ease-out), opacity .2s linear; }

body.nav-open { overflow: hidden; }

/* ============================================================
   5. SAFARI SVG MOTIFS, subject-relevant, not decoration for its own sake
   ============================================================ */
.svg-motif { display: block; }
.svg-motif path, .svg-motif line, .svg-motif circle { vector-effect: non-scaling-stroke; }

/* acacia + horizon that draws itself once in view */
.motif-draw path {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}
.motif-draw.is-in path {
  animation: vtDraw 1.9s var(--ease-out) forwards;
}
.motif-draw.is-in path:nth-child(2) { animation-delay: .18s; }
.motif-draw.is-in path:nth-child(3) { animation-delay: .32s; }
.motif-draw.is-in path:nth-child(4) { animation-delay: .46s; }
@keyframes vtDraw { to { stroke-dashoffset: 0; } }

/* section divider: horizon line with a slow sun */
.horizon-rule { position: relative; height: 46px; margin: 0 auto; max-width: var(--wrap); }
.horizon-rule svg { width: 100%; height: 100%; overflow: visible; }
.horizon-sun { transform-origin: center; animation: vtSunDrift 14s ease-in-out infinite alternate; }
@keyframes vtSunDrift {
  from { transform: translateX(-18px) translateY(2px); }
  to   { transform: translateX(18px) translateY(-2px); }
}

/* animated tracks used as a small accent beside "how it works" */
.tracks-motif .track { opacity: 0; }
.tracks-motif.is-in .track { animation: vtTrack .5s var(--ease-out) forwards; }
.tracks-motif.is-in .track:nth-child(1) { animation-delay: .05s; }
.tracks-motif.is-in .track:nth-child(2) { animation-delay: .25s; }
.tracks-motif.is-in .track:nth-child(3) { animation-delay: .45s; }
.tracks-motif.is-in .track:nth-child(4) { animation-delay: .65s; }
@keyframes vtTrack { from { opacity: 0; transform: translateY(5px); } to { opacity: .55; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .motif-draw.is-in path,
  .tracks-motif.is-in .track,
  .horizon-sun { animation: none !important; }
  .motif-draw path { stroke-dashoffset: 0; }
  .tracks-motif .track { opacity: .55; }
}

/* ---------- permit note ----------
   The one cost a gorilla trekker must know before they enquire. Set apart
   from the season table it follows so it reads as a statement, not a footnote. */
.permit-note {
  margin: 26px 0 0;
  padding: 18px 22px 18px 26px;
  border-left: 3px solid var(--terra);
  background: var(--panel);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
}

/* ---------- park cards that carry their own photograph ----------
   Only cards whose park actually has photography in the library get the
   image treatment, so a half-populated country page degrades to the plain
   card rather than showing a gap where a picture should be. */
.park-card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.park-card-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--panel);
}
.park-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease);
}
.park-card--photo:hover .park-card-photo img { transform: scale(1.04); }
.park-card--photo > .p-ico,
.park-card--photo > h3,
.park-card--photo > p,
.park-card--photo > .p-meta { padding-inline: 24px; }
.park-card--photo > .p-ico { padding-top: 20px; }
.park-card--photo > .p-meta { padding-bottom: 22px; margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .park-card-photo img { transition: none; }
  .park-card--photo:hover .park-card-photo img { transform: none; }
}

/* ---------- Lottie motifs ----------
   The box is sized before the JSON arrives so the page never jumps, and the
   animation fades in once the player reports it has drawn. A file that fails
   to load collapses the box rather than leaving a gap in the layout. */
.lottie {
  aspect-ratio: var(--lottie-ratio, 3 / 2);
  width: 100%;
  opacity: 0;
}
/* The transition is declared on the loaded state, not the resting one. A
   transition queued on an element that was offscreen or zero-width when the
   class landed can sit un-ticked and leave the motif painted at zero, which
   is exactly what the scroll-reveal code on this site already had to work
   around. Declaring it here means the fade only ever runs forwards. */
.lottie.is-loaded { opacity: 1; transition: opacity 600ms var(--ease); }
.lottie.is-failed { display: none; }
.lottie svg { display: block; overflow: visible; }

/* Placements. Each motif is sized against the copy it sits with, never
   competing with it. */
.lottie--route   { max-width: 380px; }
.lottie--tracks  { max-width: 300px; margin-inline: auto; }
.lottie--tracks.is-loaded { opacity: 0.75; }
.lottie--horizon { max-width: 220px; }

.section-motif {
  display: flex;
  justify-content: center;
  padding: 8px 0 26px;
}

@media (prefers-reduced-motion: reduce) {
  .lottie { transition: none; }
}

/* ---------- journal ----------
   Reading layout, not a product grid. The lead entry gets a wide image and
   more of its excerpt; everything after it is a compact row so a reader can
   scan the list without scrolling past three screens of cards. */
.journal-list { display: grid; gap: clamp(28px, 4vw, 46px); }

.journal-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
  padding-bottom: clamp(28px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
}
.journal-item:last-child { border-bottom: 0; padding-bottom: 0; }

.journal-item--lead { grid-template-columns: 1fr; gap: 26px; }

.journal-photo { display: block; overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.journal-photo img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  aspect-ratio: 3 / 2;
  transition: transform 900ms var(--ease);
}
.journal-item--lead .journal-photo img { aspect-ratio: 16 / 7; }
.journal-item:hover .journal-photo img { transform: scale(1.03); }

.journal-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.journal-meta a { color: inherit; }

.journal-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.18;
  margin: 0 0 12px;
}
.journal-item--lead .journal-title { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.journal-title a { color: var(--ink); text-decoration: none; }
.journal-title a:hover { color: var(--terra); }

.journal-excerpt { color: var(--ink-2); margin: 0 0 14px; max-width: 62ch; }

.journal-pagination { margin-top: clamp(36px, 5vw, 60px); }
.journal-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.journal-pagination a, .journal-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 0.9rem; text-decoration: none; color: var(--ink-2);
}
.journal-pagination a:hover { border-color: var(--terra); color: var(--terra); }
.journal-pagination .current { background: var(--terra); border-color: var(--terra); color: var(--white); }

.journal-empty { max-width: 60ch; }
.journal-empty p { color: var(--ink-2); margin: 12px 0 26px; }
.journal-empty-links { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .journal-item { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .journal-photo img { transition: none; }
  .journal-item:hover .journal-photo img { transform: none; }
}

/* ---------- 404 ----------
   Search first, then the four countries, then a human. Ordered by how
   likely each is to get a lost visitor back on track. */
.notfound-search {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: 520px; margin: 4px auto 0;
}
.notfound-search input[type="search"] {
  flex: 1 1 260px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink);
}
.notfound-search input[type="search"]:focus-visible {
  outline: 2px solid var(--terra); outline-offset: 2px; border-color: var(--terra);
}

.notfound-links { margin-top: 30px; }
.notfound-links-label {
  display: block; margin-bottom: 12px;
  font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.notfound-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.notfound-chips .chip {
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--sans); font-size: 0.92rem; color: var(--ink-2);
  text-decoration: none;
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}
.notfound-chips .chip:hover { border-color: var(--terra); color: var(--terra); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- motifs on dark sections ----------
   Lottie bakes its colours into the JSON, so the same file rendered on the
   dark hero disappears into the background. Because the player draws inline
   SVG rather than a canvas, CSS can retint it, which means one file serves
   both grounds instead of maintaining a light copy and a dark copy that
   drift apart. */
.lottie--on-dark svg path,
.lottie--on-dark svg ellipse { fill: var(--cream-on-deep); }
.lottie--on-dark svg path[stroke] { stroke: var(--cream-on-deep); }
.lottie--on-dark.is-loaded { opacity: 0.55; }

/* The 404 hero is dark, so the chips need light borders and light text.
   Inheriting the paper-ground values leaves them all but unreadable. */
.page-hero .notfound-chips .chip {
  border-color: rgba(236, 227, 207, 0.32);
  color: var(--cream-on-deep);
}
.page-hero .notfound-chips .chip:hover {
  border-color: #d9a06b;
  color: #d9a06b;
}
.page-hero .notfound-links-label { color: #a1937a; }
.page-hero .notfound-search input[type="search"] { border-color: rgba(236, 227, 207, 0.28); }

/* The 404's motif sits between the promise and the search box, so it stays
   deliberately small. A tall box there pushes the useful controls below the
   fold on a laptop, which is the opposite of what a 404 should do. */
.page-hero .section-motif { padding: 4px 0 10px; }
.page-hero .lottie--tracks { max-width: 220px; }

/* ---------- prose ----------
   Body copy coming out of a WYSIWYG field. Without this, editor paragraphs
   inherit whatever wrapper they land in, which is how the country pages
   ended up rendering three paragraphs of body text at heading size. */
.prose {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 62ch;
}
/* The theme reset already zeroes every margin, so the only rule needed is
   the one that puts space back between siblings. An extra ".prose p {
   margin: 0 }" would outrank this on specificity and silently flatten the
   whole block, which is exactly what it did the first time. */
.prose > * + * { margin-top: 1.15em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--terra); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }

/* The statement above the prose keeps its heading size, and gains the space
   the old markup was providing inline. */
.split-2 .reveal > .h2 { margin: 0 0 18px; }

/* ---------- split-2, media matched to the copy ----------
   The base rule centres the image against the text column. With three
   paragraphs of body copy beside it that leaves roughly 100px of dead
   space above and below the photograph, and the two halves stop reading
   as a pair. Stretching the media to the height of the copy removes the
   gap and gives the section a proper edge. object-fit keeps the crop
   honest at any height.

   Scoped to --fill so the About page's shorter blocks, where centring is
   the better call, are untouched. */
.split-2--fill { align-items: stretch; }
.split-2--fill .split-media { display: flex; }
.split-2--fill .split-media img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}
.split-2--fill > .reveal:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 860px) {
  .split-2--fill .split-media img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ============================================================
   PREMIUM UPLIFT, 2026-09-05
   The itinerary page (assets/css/itinerary.css) reads as more
   expensive than the rest of the site. This block borrows its
   three cheapest-to-adopt moves so the whole site agrees:

   1. Square edges on every control. Small radii are the single
      biggest "template" tell.
   2. One button height, so rows of buttons align instead of
      almost aligning.
   3. A calmer motion curve, and no lift-plus-coloured-glow on
      hover, which is the other common tell.

   Deliberately NOT touched: photo and card radii, layout, type
   scale. Those are a bigger decision, see CLAUDE.md.
   ============================================================ */

:root{ --e-premium: cubic-bezier(.32,.72,0,1); }

/* ---- controls: square, one height, calm hover ---- */
.btn,
.btn--ghost,
.btn--light,
.btn--on-deep,
.btn--ghost-on-deep{
  border-radius: 0;
  min-height: 52px;
  padding: 0 22px;
  font-size: 13.5px;
  transition: background .5s var(--e-premium),
              color .5s var(--e-premium),
              box-shadow .5s var(--e-premium),
              transform .5s var(--e-premium);
}
.btn:hover,
.btn--ghost:hover,
.btn--light:hover,
.btn--on-deep:hover,
.btn--ghost-on-deep:hover{
  transform: none;          /* the lift read as a web template, not a brochure */
  box-shadow: none;
}
.btn--ghost:hover{ box-shadow: inset 0 0 0 1px var(--terra); }
.btn--ghost-on-deep:hover{ box-shadow: inset 0 0 0 1px var(--white); }
.btn:active{ transform: scale(.985); }
.btn--small{ min-height: 42px; padding: 0 16px; font-size: 12.5px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea{
  border-radius: 0;
}

/* ---- pills and chips: square, to match the itinerary's chip language ---- */
.filter-chip, .tag-pill, .chip, .badge-pill,
.card-badge, .trip-badge{
  border-radius: 0;
}

/* ---- display type: the itinerary's tighter tracking ---- */
.h1, h1, .h2, h2{ letter-spacing: -.02em; }


/* ===== editorial.css ===== */
/* ============================================================
   VOLCAN TOURS, editorial layer (v3), 2026-09-05
   Loaded after premium.css, before itinerary.css.

   Brief: the site did not read as expensive next to the itinerary
   page. Every change here is one of the moves a printed travel
   magazine makes and a template does not:

     - the photograph is the page, chrome sits on glass over it
     - captions live on paper under the image, not in a dark
       gradient stamped across it
     - hairlines and whitespace do the separating, not boxes
     - one display face used large and confidently, one grotesque
       doing all the small work
     - a phone gets a denser grid, not the desktop grid stacked

   Nothing here is scoped to a single template on purpose: the
   complaint was that the site disagreed with itself.
   ============================================================ */

/* ============================================================
   0. TYPE + SHAPE

   Marcellus for titles, Work Sans for everything else.

   Marcellus is an inscriptional roman, the shape of carved Roman
   capitals rather than a drawn book face. It reads as expensive
   without any of the tricks that make a page look like it is
   trying: no hairline strokes, no extreme contrast, no swashes.
   Which is the brief: premium, still very readable, not doing
   too much.

   Two rules it imposes, both load-bearing:

   1. It ships ONE weight. No heading may be set bold anywhere,
      ever. `font-synthesis: none` below makes a stray
      font-weight:600 fail visibly rather than smearing the
      letterforms into a fake bold.
   2. Its lowercase is small against tall caps, so it needs a
      size up and a touch of positive tracking where a Didone
      wanted negative.

   Rejected before this, do not propose again: Fraunces/Karla,
   Bodoni Moda/Archivo, Playfair Display.

   Radius: --r 4px on controls, --r-md 6px on photographs and
   cards. Squaring everything was borrowed from the itinerary
   page and overshot off it. Index rules and hairlines stay 0.
   ============================================================ */
:root {
  --serif: "Marcellus", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --e-ed: cubic-bezier(.32,.72,0,1);
  --rule: 1px solid var(--line);
  --rule-strong: 1px solid var(--line-strong);
  --r: 4px;      /* controls, chips, small panels */
  --r-md: 6px;   /* photographs and cards */
}

body { font-family: var(--sans); letter-spacing: 0; }

/* A single-weight face must never be faux-bolded. */
h1, h2, h3, h4, .h1, .h2, .h3,
.brand .brand-name, .dest-card .d-name, .tour-card h3,
.loc-row .loc-name, .mnav-link, .gz-cap b, .cta-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: normal;
  font-synthesis: none;
}

.h1, h1 { letter-spacing: -.005em; line-height: 1.1; }
.h2, h2 { letter-spacing: -.003em; line-height: 1.18; }
.h3, h3 { letter-spacing: 0; }
.h1 { font-size: clamp(34px, 6vw, 66px); }
.h2 { font-size: clamp(26px, 3.9vw, 40px); }

/* UI-sized headings stay in the grotesque: these are labels on controls,
   not headlines, and Marcellus has no weight to give them emphasis with. */
.value-item h3, .step h3, .finder-empty h3, .no-results h3,
.footer h4, .park-card h3, .stay-card h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Labels: tracked-out grotesque, the magazine standfirst convention. */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  color: var(--terra); margin-bottom: 16px;
}
.eyebrow::before { width: 22px; }

.lede { font-weight: 400; letter-spacing: 0; }

/* ---------- money ----------
   Every display serif this project has tried drew a currency symbol that
   fought the figures beside it: too tall, too thin, or sitting off the
   baseline. Money is data, not display type, so it is set in the grotesque
   with tabular figures, which also means a column of prices lines up. */
.tour-price, .range-value, .vt-itin .price b, .vt-itin .f span,
.stat .s-num, .finder .range-value {
  font-family: var(--sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  font-feature-settings: "tnum" 1;
}

/* ---------- radius, put back in measured amounts ---------- */
.btn, .btn--ghost, .btn--light, .btn--on-deep, .btn--ghost-on-deep,
.pillset button, .filter-bar .filter-reset, .mnav-close,
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea,
.filter-group select, .filter-group input { border-radius: var(--r); }

.tour-card-photo, .dest-shot, .stay-card, .finder-panel, .filter-bar,
.finder-empty, .no-results, .tour-tag, .split-2 .split-media,
.park-card, .specialist-photo { border-radius: var(--r-md); }

.tour-tag { border-top-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md);
  border-top-right-radius: 0; border-bottom-left-radius: 0; }

/* ============================================================
   1. HEADER, dissolved into the hero
   The header no longer draws a bar across the top of the
   photograph. It is a band of glass: the image is blurred and
   darkened only in the strip the logo and links occupy, and the
   mask fades that band out so there is no visible edge where it
   ends. Everything below stays the untouched photograph.
   ============================================================ */
/* MOVED, 2026-09-06. Both states are generic now and live in section 15 at
   the end of this file: the glass band belongs to any header that is not
   marked always-solid, which is the front page AND a single tour package,
   and the scrolled bar is white site-wide rather than dark.

   The `.home` rules that used to sit here are gone rather than left in
   place. `.home .header.is-solid` is (0,3,0) and beat section 15's
   (0,2,0), so the homepage kept a dark bar on scroll while the rest of the
   site went white, and the ink type and dark lockup that section 15 pairs
   with white landed on it and disappeared. */

/* .header::before is position:absolute and .header-inner is not, so the
   pseudo-element painted ON TOP of the logo and the links: the blur was being
   applied to the nav itself, not just to the photograph behind it. */
.header-inner { position: relative; z-index: 2; }

.brand .brand-name { font-size: 20px; font-weight: 500; letter-spacing: 0; }
.brand .brand-sub { font-family: var(--sans); font-size: 9.5px; letter-spacing: .24em; }
.nav a { font-size: 13px; letter-spacing: .04em; }

/* ============================================================
   2. HERO, the photograph is the page
   Full viewport including the header, so the image is the first
   and largest thing. The old build laid a gradient over 78% of it
   to make white type work; that is what made it look cheap. The
   veil is now a masked blur across the lower third only, the same
   device the approved itinerary hero uses.
   ============================================================ */
.home .hero {
  min-height: 100vh;
  min-height: 100svh;
}
.hero-media::after {
  background:
    linear-gradient(0deg, rgba(18,14,8,.74) 0%, rgba(18,14,8,.36) 24%, rgba(18,14,8,0) 50%),
    linear-gradient(180deg, rgba(18,14,8,.30) 0%, rgba(18,14,8,0) 16%);
}
.home .hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(15px) saturate(1.05);
  backdrop-filter: blur(15px) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 76%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 76%);
}
.hero-content { padding-bottom: clamp(56px, 7vw, 92px); }
.hero h1 { text-shadow: none; margin-bottom: 18px; }
.hero .lede { text-shadow: none; max-width: 480px; font-size: 16.5px; }
.hero .eyebrow { letter-spacing: .26em; }
.hero-actions { gap: 12px; margin-bottom: 24px; }
.hero-trust { font-size: 11px; letter-spacing: .16em; }

/* ============================================================
   3. TRIP FINDER
   Was a tall white card with four stacked fields, a headline, a
   Lottie and a shadow, directly under the hero. On a phone it was
   most of a screen before a single safari appeared.

   Now: one hairline-bordered strip on paper. The summary row is
   the whole control on a phone, and the fields are folded behind
   it (premium.js opens the fold above 820px and closes it below,
   because CSS cannot toggle the details attribute).
   ============================================================ */
.finder {
  margin-top: -38px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 900px) { .finder { margin-top: -26px; } }

.finder-panel {
  background: var(--paper-2);
  border: var(--rule-strong);
  border-radius: var(--r);
  box-shadow: 0 28px 56px -44px rgba(38,32,25,.55);
  padding: 0;
}

.finder-fold { display: block; }
.finder-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 15px clamp(16px, 2.4vw, 26px);
  list-style: none; cursor: default;
}
.finder-bar::-webkit-details-marker { display: none; }
.finder-bar::marker { content: ""; }

.finder-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.finder-title .eyebrow { margin-bottom: 0; }
.finder-title b {
  font-family: var(--serif); font-weight: 400; font-size: 21px;
  letter-spacing: -.012em; color: var(--ink);
}
.finder-count {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.finder-count b { color: var(--terra); }

.finder-toggle {
  display: none; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--terra);
}
.finder-toggle::after {
  content: ""; width: 8px; height: 8px; margin-top: -3px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--e-ed);
}
.finder-fold[open] .finder-toggle::after { transform: rotate(-135deg); margin-top: 2px; }

.finder-row {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(18px, 2.2vw, 30px);
  padding: 4px clamp(16px, 2.4vw, 26px) 20px;
  border-top: var(--rule);
}
.finder-row > .finder-field { padding-top: 18px; }
.finder-field > label { font-size: 10px; letter-spacing: .18em; margin-bottom: 10px; }

.pillset button {
  border-radius: var(--r);
  border-color: var(--line-strong);
  padding: 7px 12px; font-size: 12.5px;
  transition: background .35s var(--e-ed), color .35s var(--e-ed), border-color .35s var(--e-ed);
}
.pillset button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.pill-dot { border-radius: 50%; width: 4px; height: 4px; }

.range-value { font-size: 19px; font-weight: 400; letter-spacing: -.01em; }
input[type="range"].vt-range { margin: 12px 0 6px; }
.range-caption { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

.finder-foot {
  margin-top: 0;
  padding: 14px clamp(16px, 2.4vw, 26px);
  border-top: var(--rule);
}
.finder-foot .link-arrow, .finder-reset { font-size: 12.5px; }

.finder-results { margin-top: clamp(30px, 4vw, 46px); }
.finder-empty { border-radius: var(--r-md); }

/* ============================================================
   4. PACKAGE CARDS
   Was a bordered white box with a radius, a shadow and a lift on
   hover, which is the single most template-looking object on the
   site. A magazine sets a listing as: photograph, rule, caption.
   No box. The rule under the photograph is what does the framing,
   and it fills with terracotta on hover instead of the card
   jumping upward.
   ============================================================ */
.tour-grid { gap: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 32px); }

.tour-card {
  background: none;
  border: 0; border-radius: 0;
  overflow: visible;
  transition: none;
}
.tour-card:hover { transform: none; box-shadow: none; border-color: transparent; }

.tour-card-photo {
  border-radius: var(--r-md);
  aspect-ratio: 3 / 2;
  background: var(--panel);
}
.tour-card-photo::after {
  /* the rule that replaces the card border, and the hover event */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--terra); z-index: 3;
  transition: width .55s var(--e-ed);
}
.tour-card:hover .tour-card-photo::after { width: 100%; }
.tour-card:hover .tour-card-photo img { transform: scale(1.04); }
.tour-tag {
  border-radius: var(--r) 0 var(--r-md) 0; top: 0; left: 0;
  background: rgba(33,27,20,.82);
  font-size: 10px; letter-spacing: .16em; padding: 7px 12px;
}

.tour-card-body { padding: 0; border-top: var(--rule-strong); }
.tour-meta {
  order: -1;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  margin: 13px 0 8px;
}
.tour-card h3 {
  font-family: var(--serif); font-size: clamp(21px, 2.1vw, 25px);
  font-weight: 400; letter-spacing: -.015em; line-height: 1.16;
  margin-bottom: 12px;
}
.tour-tags { gap: 6px; margin-bottom: 16px; }
.tour-tags span {
  border-radius: var(--r); background: none;
  border: 1px solid var(--line-strong); color: var(--ink-3);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; font-weight: 600;
}
.tour-card-foot { border-top: var(--rule); padding-top: 14px; }
.tour-price {
  font-family: var(--serif); font-size: 24px; font-weight: 400;
  color: var(--ink); letter-spacing: -.01em;
}
.tour-price small {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.tour-view {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--terra);
}

/* ============================================================
   5. "WHERE WE GO"
   The old treatment, a tall photo with a black gradient and the
   country name set inside it, is the exact pattern the reference
   site uses and half the safari market with it. Moved to the
   other convention: the photograph is clean, and the caption sits
   on paper underneath it with an index numeral and a rule. Every
   second card drops half a step, so the row reads as a spread
   rather than four equal tiles.
   ============================================================ */
.dest-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(18px, 2.4vw, 30px);
  counter-reset: dest;
}
.dest-card {
  counter-increment: dest;
  position: relative; display: block;
  aspect-ratio: auto; border-radius: 0; overflow: visible;
  isolation: auto; background: none;
  transition: none;
}
.dest-card:hover { transform: none; box-shadow: none; }
.dest-card::after { display: none; }

.dest-shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--panel);
}
.dest-card img {
  position: absolute; inset: 0; z-index: auto;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--e-ed);
}
.dest-card:hover img { transform: scale(1.05); }

.dest-card-body {
  width: auto; padding: 0; color: var(--ink);
  border-top: 2px solid var(--ink);
  margin-top: 14px; padding-top: 12px;
}
.dest-card .d-name {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 400; letter-spacing: -.015em; color: var(--ink);
}
.dest-card .d-name::before {
  content: counter(dest, decimal-leading-zero);
  font-family: var(--sans); font-size: 10px; letter-spacing: .16em;
  font-weight: 700; color: var(--terra);
}
.dest-card .d-count {
  color: var(--ink-2); font-size: 13px; margin: 7px 0 12px;
  line-height: 1.55;
}
.dest-card .link-arrow { color: var(--terra); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.dest-card .link-arrow:hover { color: var(--terra-deep); }
.dest-card:nth-child(even) { margin-top: clamp(22px, 3.4vw, 54px); }

/* ============================================================
   6. STAYS + LOCATIONS, squared to agree with everything else
   ============================================================ */
.stay-card { border-radius: var(--r-md); min-height: 320px; }
.stay-card h3 { font-size: 20px; }
.stay-kicker { letter-spacing: .2em; font-size: 10px; }
.loc-row .loc-name { font-size: 22px; font-weight: 400; letter-spacing: -.012em; }
.loc-row .loc-country { font-size: 10.5px; letter-spacing: .16em; }
.loc-row .loc-go { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.loc-index { border-top: 2px solid var(--ink); }

/* ============================================================
   7. CLOSING CTA STRIP
   Was flat terracotta with two decorative circles bleeding off the
   corner, which is a 2015 landing-page move. Now the deep ink
   ground the rest of the dark sections use, a terracotta hairline
   at the top edge, the same drawn horizon the specialist strip
   carries, and the headline set large in the display face.
   ============================================================ */
.cta-band {
  background: var(--deep);
  color: var(--white);
  border-top: 2px solid var(--terra);
}
.cta-band::before, .cta-band::after { display: none; }
.cta-band .wrap {
  align-items: flex-end;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300'%3E%3Cg fill='none' stroke='%23a85c2e' stroke-opacity='0.20' stroke-width='1.1'%3E%3Cpath d='M0 210 C 180 160, 300 250, 470 205 S 800 150, 1200 215'/%3E%3Cpath d='M0 232 C 200 185, 320 268, 500 228 S 830 176, 1200 238'/%3E%3Cpath d='M0 254 C 210 212, 340 286, 520 250 S 860 202, 1200 260'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom -30px;
  background-size: 100% auto;
}
.cta-band h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 50px); letter-spacing: -.02em;
  line-height: 1.06; color: var(--white);
}
.cta-band p { color: #b9ac93; font-size: 15.5px; }
.cta-band .btn { background: var(--terra); color: var(--white); }
.cta-band .btn:hover { background: var(--terra-bright); }
.cta-band .btn--ghost-on-deep { background: transparent; }

/* ============================================================
   8. SAFARIS ARCHIVE, given the magazine masthead treatment
   ============================================================ */
.page-hero {
  background: var(--deep);
  border-bottom: 2px solid var(--terra);
  padding-bottom: clamp(30px, 4vw, 46px);
}
.page-hero h1 { font-size: clamp(42px, 7vw, 82px); margin-bottom: 16px; }
.page-hero .lede { max-width: 56ch; font-size: 16px; }
.breadcrumb { font-size: 10.5px; letter-spacing: .18em; }

.filter-bar {
  background: var(--paper-2);
  border: var(--rule-strong); border-radius: var(--r);
  box-shadow: none;
  padding: 16px clamp(14px, 2vw, 22px);
  gap: 16px clamp(16px, 2vw, 26px);
  margin-bottom: 26px;
}
.filter-group label { font-size: 10px; letter-spacing: .18em; margin-bottom: 8px; }
.filter-group select, .filter-group input {
  border-radius: var(--r); background-color: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong);
  padding: 8px 30px 8px 0; font-size: 14px;
  background-position: right 2px center;
}
.filter-group select:focus, .filter-group input:focus {
  border-bottom-color: var(--terra); outline: none;
}
.filter-bar .filter-reset {
  border-radius: var(--r); background: none; border: 1px solid var(--line-strong);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 12px 18px;
}
.result-count {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  margin: 0 0 26px; padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.no-results { border-radius: var(--r-md); }

/* ============================================================
   9. NAV DRAWER
   A panel dropping down from the top is a mobile-web default and
   reads as one. This comes in from the right edge over a dimmed,
   blurred page.

   It is set on paper with ink type, not on the dark ground: a
   light drawer reads as a page turning rather than a dialog
   opening over one, and the display face carries far better
   against paper. The rows stagger in behind the panel, which is
   the whole difference between a panel that appears and a menu
   that opens.

   The lockup image is a white wordmark on transparent, so it
   cannot go on paper. Only in this one place it is dropped and
   the brand name is set in type instead, which the markup already
   carries.
   ============================================================ */
.mnav-scrim {
  position: fixed; inset: 0; z-index: 115;
  background: rgba(24,18,11,.42);
  -webkit-backdrop-filter: blur(5px) saturate(.9);
  backdrop-filter: blur(5px) saturate(.9);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--e-ed), visibility .5s;
}
body.nav-open .mnav-scrim { opacity: 1; visibility: visible; }

.mobile-nav {
  inset: 0 0 0 auto;
  width: min(88vw, 400px);
  background: var(--paper-2);
  color: var(--ink);
  transform: translateX(101%);
  transition: transform .62s var(--e-ed);
  border-left: 0;
  box-shadow: -60px 0 100px -60px rgba(24,18,11,.6);
}
.mobile-nav.is-open { transform: translateX(0); }

/* masthead */
.mnav-top {
  padding: 20px var(--gutter) 18px;
  border-bottom: 1px solid var(--line);
  background: none;
}
.mnav-top .brand img { display: none; }
.mnav-top .brand { color: var(--ink); gap: 0; }
.mnav-top .brand-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 21px; letter-spacing: -.01em; color: var(--ink);
}
.mnav-top .brand-sub {
  font-family: var(--sans); font-size: 9px; letter-spacing: .24em;
  color: var(--terra); font-weight: 600; margin-top: 2px;
}
.mnav-close {
  border-radius: var(--r); width: 40px; height: 40px;
  border: 1px solid var(--line-strong); color: var(--ink-2);
  transition: background .35s var(--e-ed), color .35s var(--e-ed), border-color .35s var(--e-ed);
}
.mnav-close:hover { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }

/* rows */
.mnav-body { padding: 6px var(--gutter) 20px; }
.mnav-list > li { border-bottom: 1px solid var(--line); }
.mnav-list > li:last-child { border-bottom: 0; }

.mnav-link,
.mobile-nav a.mnav-link {
  /* `.mobile-nav a` in style.css is the old dropdown rule and outranks
     `.mnav-link`, so it forced display:block back on and the caret sat glued to
     the end of the label instead of at the right edge of the row. */
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 25px; letter-spacing: -.015em; line-height: 1.1;
  color: var(--ink); border-bottom: 0;
  transition: color .3s var(--e-ed);
}
.mnav-link:hover, .mobile-nav a.mnav-link:hover { color: var(--terra); }
.mnav-link .mnav-idx {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; color: var(--terra); margin-right: 13px;
  position: relative; top: -4px;
}
.mnav-caret { color: var(--ink-3); flex-shrink: 0; }
.mnav-link:hover .mnav-caret { color: var(--terra); }

/* Each row is held just off its resting position and released on a
   stagger, so the list arrives after the panel rather than with it. */
.mnav-list > li {
  opacity: 0; transform: translateX(18px);
  transition: opacity .5s var(--e-ed), transform .5s var(--e-ed);
}
.mobile-nav.is-open .mnav-list > li { opacity: 1; transform: none; }
.mobile-nav.is-open .mnav-list > li:nth-child(1) { transition-delay: .16s; }
.mobile-nav.is-open .mnav-list > li:nth-child(2) { transition-delay: .21s; }
.mobile-nav.is-open .mnav-list > li:nth-child(3) { transition-delay: .26s; }
.mobile-nav.is-open .mnav-list > li:nth-child(4) { transition-delay: .31s; }
.mobile-nav.is-open .mnav-list > li:nth-child(5) { transition-delay: .36s; }
.mnav-foot, .mnav-top {
  opacity: 0; transition: opacity .5s var(--e-ed);
}
.mobile-nav.is-open .mnav-top { opacity: 1; transition-delay: .1s; }
.mobile-nav.is-open .mnav-foot { opacity: 1; transition-delay: .4s; }

/* nested destinations */
.mnav-sub ul { padding: 0 0 16px; }
.mobile-nav .mnav-country > a,
.mnav-country > a {
  padding: 10px 0 10px 28px; font-size: 15px; font-weight: 500;
  color: var(--ink); border-bottom: 0;
}
.mnav-country > a:hover { color: var(--terra); }
.mnav-country > a span { color: var(--ink-3) !important; }
.mnav-parks { padding-left: 28px; }
.mobile-nav .mnav-parks a, .mnav-parks a {
  border-radius: var(--r);
  border-color: var(--line-strong); color: var(--ink-2);
  font-size: 11.5px; padding: 5px 10px; border-bottom: 0;
}
.mnav-parks a:hover { color: var(--terra); border-color: var(--terra); background: var(--panel); }

/* foot */
.mnav-foot {
  padding: 18px var(--gutter) 26px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.mnav-contact { color: var(--ink-3); }
.mobile-nav .mnav-contact a, .mnav-contact a {
  color: var(--ink); font-size: 13px; font-weight: 500;
  padding: 0; border-bottom: 0;
}
.mnav-contact a:hover { color: var(--terra); }

/* the burger is on a photograph until the drawer opens, then on paper */
.mobile-nav.is-open ~ * .menu-btn, body.nav-open .menu-btn { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .mnav-list > li, .mnav-top, .mnav-foot { opacity: 1; transform: none; }
}

/* ============================================================
   10. WHATSAPP
   The old mark was an approximation of the logo drawn by hand and
   it showed. This is the real glyph geometry. The button loses the
   green glow, which was the loudest thing on any page.
   ============================================================ */
.wa-wrap { right: 20px; bottom: 20px; }
.wa-float {
  width: 54px; height: 54px;
  background: #1faa55;
  box-shadow: 0 10px 26px -12px rgba(15,60,32,.75);
  transition: background .4s var(--e-ed), transform .4s var(--e-ed);
}
.wa-float:hover { background: #25d366; transform: none; }
.wa-float svg { width: 27px; height: 27px; }


/* -- "we're online" signal, subtle by design --------------------
   A label pill beside the button on room-to-spare widths, and a small
   corner dot on the button itself everywhere (the only thing that survives
   on a phone). Both pulse once every few seconds rather than looping fast:
   a status light, not an alert. */
.wa-label {
  display: flex; align-items: center; gap: 8px;
  background: rgba(253,251,245,.94); color: var(--ink);
  padding: 9px 14px 9px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 8px 20px -10px rgba(30,25,15,.35), inset 0 0 0 1px rgba(30,25,15,.06);
  white-space: nowrap;
}
.wa-dot, .wa-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #25d366; flex: none;
  box-shadow: 0 0 0 rgba(37,211,102,.55);
  animation: wa-ping 2.8s ease-out infinite;
}
.wa-pulse {
  position: absolute; top: 3px; right: 3px;
  box-shadow: 0 0 0 2px var(--paper, #f7f2e7);
}
@keyframes wa-ping {
  0%, 60% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  100% { box-shadow: 0 0 0 7px rgba(37,211,102,0); }
}
.wa-pulse { animation-name: wa-ping-badge; }
@keyframes wa-ping-badge {
  0%, 60% { box-shadow: 0 0 0 2px var(--paper, #f7f2e7), 0 0 0 2px rgba(37,211,102,.55); }
  100% { box-shadow: 0 0 0 2px var(--paper, #f7f2e7), 0 0 0 8px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-dot, .wa-pulse { animation: none; }
}


/* ============================================================
   11. PHONE
   The complaint was that the phone got the desktop layout stacked,
   so everything is one column, every section is a full screen, and
   reaching the third safari is a workout. Three rules fix most of
   it: buttons pair, cards go two-up, and photographs stop being
   portrait.
   ============================================================ */
@media (max-width: 900px) {
  .finder-row { grid-template-columns: 1fr 1fr; gap: 4px 22px; }
}

@media (max-width: 820px) {
  /* the fold: closed on a phone, so the filter costs one row, not a screen */
  .finder-bar { cursor: pointer; padding: 13px 16px; }
  .finder-toggle { display: inline-flex; }
  .finder-title { gap: 10px; }
  .finder-title b { font-size: 18px; }
  .finder-title .eyebrow { display: none; }
  .finder-fold:not([open]) .finder-count { display: none; }
}

@media (max-width: 760px) {
  /* Two buttons to a row. `flex: 1 1 100%` in the base put every button on
     its own line, which is what made the hero and the CTA strip so tall. */
  .hero-actions,
  .cta-band .wrap > div:last-child {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
  }
  .hero-actions .btn,
  .cta-band .btn {
    flex: none; width: 100%; min-height: 48px;
    padding: 0 10px; font-size: 12px; letter-spacing: .04em;
  }

  .home .hero { min-height: 100svh; }
  .home .hero::after { height: 46%; }
  .hero-content { padding-bottom: 40px; }
  .hero .lede { font-size: 15px; margin-bottom: 26px; }

  /* Destinations: two up, landscape, caption under. Four countries now fit
     in roughly one screen instead of four. */
  .dest-grid { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .dest-card:nth-child(even) { margin-top: 0; }
  .dest-shot { aspect-ratio: 1 / 1; }
  .dest-card .d-name { font-size: 17px; gap: 8px; }
  .dest-card .d-count { font-size: 12px; margin: 5px 0 8px; }
  .dest-card .link-arrow { font-size: 10px; }

  /* Everything else that was one-per-screen */
  .value-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .value-item h3 { font-size: 16px; }
  .value-item p { font-size: 13.5px; }
  .stays-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stay-card { min-height: 210px; }
  .stay-card h3 { font-size: 16px; }
  .stay-body { padding: 14px; }
  .stay-meta { font-size: 11px; gap: 8px; }

  .tour-grid { grid-template-columns: 1fr; gap: 30px; }
  .tour-card-photo { aspect-ratio: 16 / 9; }
  .tour-card h3 { font-size: 21px; }

  .section { padding: clamp(48px, 8vw, 72px) 0; }
  .section-head { margin-bottom: 26px; }

  .filter-bar { padding: 14px 14px 16px; gap: 12px 18px; }
  .filter-group { flex: 1 1 calc(50% - 12px); }
  .filter-group:nth-child(4) { flex: 1 1 100%; }
  .filter-bar .filter-reset { flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .finder-row { grid-template-columns: 1fr 1fr; }
  /* the two sliders keep the full width, they need the travel */
  .finder-row > .finder-field:nth-child(3),
  .finder-row > .finder-field:nth-child(4) { grid-column: 1 / -1; }
  .pillset button { font-size: 12px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dest-card img, .tour-card-photo img, .mobile-nav, .mnav-scrim { transition: none; }
}

/* ---------- odds and ends the pass turned up ----------
   Small things that only became visible once everything around them had been
   squared off and reset in the new faces. */

/* The park index ran the country straight on from the park name, so it read
   as "Maasai Mara National ReserveKENYA". */
.loc-row .loc-country { display: block; }

/* Playfair's quote mark is fine, but the pull quote is set in italic serif and
   the mark should match its weight rather than shouting over it. */
.quote-block blockquote { font-family: var(--serif); font-weight: 400; }

/* ---------- phone, second pass ----------
   Found by measuring the real 390px viewport rather than a narrowed desktop
   one, which is where the original build went wrong. */
@media (max-width: 760px) {
  /* The country strip is dropped on a phone. It cost a line above the headline
     to repeat what the copy and the whole page already say, and squeezed the
     hero text block that the photograph should be dominating. The itinerary
     hero drops its country tag on a phone for the same reason. */
  .hero .eyebrow { display: none; }
  .hero-trust { font-size: 9.5px; letter-spacing: .12em; }

  /* The decorative motifs sit in a flex section-head, so on a phone they take
     a whole row to themselves and push the content they decorate down a
     screen. They are ornament: they go. */
  .section-head .svg-motif { display: none; }
  .section-head > div:last-child:not(:first-child):empty { display: none; }
  .section-motif, .horizon-rule { display: none; }

  /* The float sat on the hero's trust line. */
  .wa-wrap { right: 14px; bottom: 14px; }
  .wa-float { width: 48px; height: 48px; }
  .wa-float svg { width: 23px; height: 23px; }
  /* The label pill goes on a phone; the corner dot on the button stays. */
  .wa-label { display: none; }

  /* From-the-field split was a two-column grid written inline. */
  .section--deep .wrap > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ---------- safaris archive, masthead ----------
   A magazine opens a section with the title on the left and the standfirst
   set against it on the right, divided by a rule, not with a headline and a
   paragraph stacked down the left margin. The children are plain siblings in
   the template, so they are placed on a grid rather than re-nested. */
.post-type-archive-tour_package .page-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: clamp(28px, 4vw, 72px);
}
.post-type-archive-tour_package .page-hero .breadcrumb { grid-column: 1 / -1; }
.post-type-archive-tour_package .page-hero .eyebrow,
.post-type-archive-tour_package .page-hero h1 { grid-column: 1; }
.post-type-archive-tour_package .page-hero .lede {
  grid-column: 2; grid-row: 2 / span 2;
  align-self: end; max-width: 44ch;
  padding: 0 0 8px clamp(20px, 2.6vw, 40px);
  border-left: 1px solid rgba(253,251,245,.18);
}
@media (max-width: 820px) {
  .post-type-archive-tour_package .page-hero .wrap { display: block; }
  .post-type-archive-tour_package .page-hero .lede {
    border-left: 0; padding: 0; margin-top: 14px; max-width: none;
  }
}

/* ---------- destinations hub ----------
   Two-up, wider crop, and the same caption-on-paper treatment as the homepage
   row. The template used to carry `style="aspect-ratio:16/10"` inline and rely
   on the old overlay, so once the caption moved out from under the gradient it
   was rendering behind the photograph and the country names disappeared. */
.dest-grid--two { grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(22px, 3vw, 40px); }
.dest-grid--two .dest-card:nth-child(even) { margin-top: 0; }
.dest-shot--wide { aspect-ratio: 16 / 10; }
.dest-grid--two .d-name { font-size: clamp(24px, 2.6vw, 32px); }
.dest-grid--two .d-count { font-size: 14px; }
@media (max-width: 760px) {
  .dest-grid--two { grid-template-columns: 1fr; gap: 26px; }
  .dest-shot--wide { aspect-ratio: 16 / 10; }
  .dest-grid--two .d-name { font-size: 21px; }
}

/* ---------- the tablet band nobody had looked at ----------
   Between 760px, where the base hides the nav, and roughly 1000px, the brand
   lockup, five nav links and the quote button do not fit on one line. The
   button wrapped onto two lines and the strapline broke mid-phrase. The
   button is the thing to drop: the nav still carries Contact, and the hero
   and every section below carry a CTA. */
.brand .brand-sub { white-space: nowrap; }
@media (max-width: 1000px) {
  .header-cta .btn { display: none; }
  .nav ul { gap: 24px; }
}
@media (max-width: 860px) {
  .nav ul { gap: 18px; }
  .nav a { font-size: 12.5px; }
}

/* ---------- horizontal overflow guard ----------
   The site header is `position: fixed`, so it is laid out against the *page*,
   not the visible viewport. Any element that widens the page therefore widens
   the header too, and everything pinned to its right edge, the hamburger
   button included, slides off screen. That is what happened on the country
   pages: the four-column best-time table was 411px inside a 350px column, the
   page became 431px, and the button sat at 367-411 in a 390px window.

   Two parts. The table now scrolls inside its own box, so the content is still
   reachable. And the page itself is clipped, so no future overflow anywhere
   can push the header off screen again.

   `clip`, never `hidden`: `hidden` makes the element a scroll container and
   breaks `position: sticky` inside it, which would take out the itinerary
   page's day rail. */
html, body { overflow-x: clip; }

.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}
.table-scroll .timetable { min-width: 460px; }
@media (max-width: 600px) {
  .timetable th, .timetable td { padding: 11px 14px; font-size: 13px; }
  /* a hairline edge so it is obvious the box scrolls rather than being cut off */
  .table-scroll { box-shadow: inset -14px 0 12px -14px rgba(38,32,25,.35); }
}

/* ============================================================
   12. THE GAZETTEER, "Parks and reserves we run"
   Was eight rows of type with no photograph, sitting in the
   middle of a page carried by photography. The index is worth
   keeping: a numbered reference list is the one thing on the
   homepage that is not a card grid, and losing it would make the
   page more repetitive, not less. So the picture is added beside
   it rather than instead of it.

   Desktop: one large plate that changes to whichever park the
   reader is on. All eight are in the DOM and cross-faded on
   opacity, so nothing waits on a request and nothing shifts.
   Phone: no hover exists, so the plate is dropped and every row
   carries its own thumbnail instead.
   ============================================================ */
.gazetteer {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.gz-plate {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--panel);
  position: sticky;
  top: calc(var(--header-h, 78px) + 40px);
}
.gz-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--e-ed), transform 1.4s var(--e-ed);
}
.gz-shot.is-on { opacity: 1; transform: scale(1); }

.gz-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 22px 20px;
  color: var(--white);
  background: linear-gradient(0deg, rgba(16,12,7,.86), rgba(16,12,7,0));
}
.gz-cap b {
  display: block;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: -.012em;
  line-height: 1.15;
}
.gz-cap span {
  display: block; margin-top: 6px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #e8b98c; font-weight: 600;
}

/* the index itself */
.gazetteer .loc-index { border-top: 2px solid var(--ink); }
.gazetteer .loc-row { padding: 17px 4px; }
.gazetteer .loc-row.is-active { background: var(--white); padding-left: 12px; }
.gazetteer .loc-row.is-active .loc-name { color: var(--terra-deep); }
.gazetteer .loc-row.is-active .loc-go { color: var(--terra); }
.loc-thumb { display: none; }

@media (max-width: 900px) {
  .gazetteer { grid-template-columns: 1fr; gap: 26px; }
  .gz-plate { position: static; aspect-ratio: 16 / 9; }
}

/* ---- phone: the plate goes, every row gets its own picture ---- */
@media (max-width: 760px) {
  .gz-plate { display: none; }

  .gazetteer .loc-row,
  .loc-row {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 3px 14px;
    align-items: start;
    padding: 14px 0;
  }
  .gazetteer .loc-row.is-active { background: none; padding-left: 0; }

  /* The thumbnail takes the numeral's job: it is the thing that identifies
     the row at a glance, and two markers competing for that is one too many. */
  .loc-thumb {
    display: block;
    grid-column: 1; grid-row: 1 / span 3;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--panel);
  }
  .loc-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .loc-row .loc-num { display: none; }
  .loc-row .loc-id,
  .loc-row .loc-note,
  .loc-row .loc-go { grid-column: 2; }
  .loc-row .loc-name { font-size: 17px; line-height: 1.25; }
  .loc-row .loc-country { font-size: 9.5px; margin-top: 2px; }
  .loc-row .loc-note { font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
  .loc-row .loc-go { font-size: 10px; margin-top: 4px; color: var(--terra); }
}

@media (prefers-reduced-motion: reduce) {
  .gz-shot { transition: none; transform: none; }
}

/* The base row is `56px 1.1fr 1fr auto`, which was set when this list ran the
   full page width. Inside the gazetteer it has a plate beside it, so the name
   column has to be widened or every park wraps onto two lines and the rows
   come out at different heights. */
.gazetteer .loc-row {
  /* A hard floor on the name column, not a fraction: the longest park name is
     272px at this size, and a fractional track let it wrap on three of the
     eight rows, so the index came out with rows at two different heights. The
     go column is capped rather than auto: "See Tsavo & the South Coast tours"
     is real content, not a two-word label, and an uncapped auto track would
     let one long park name push the row wider than its neighbours. */
  grid-template-columns: 40px minmax(276px, 1fr) minmax(0, 300px);
  gap: 16px;
}
.gazetteer .loc-name { font-size: 20px; line-height: 1.2; }
/* This is the row's one action, so it reads as a link, not a caption: always
   terracotta, an arrow, and it closes up on hover the way .link-arrow does
   everywhere else on the site. Ellipsis is the overflow guard for whichever
   park has the longest name once "National Park/Reserve" is stripped off it. */
.gazetteer .loc-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--terra);
  transition: gap .18s var(--e-ed);
}
.gazetteer .loc-go::after { content: "\2192"; flex: none; }
.gazetteer .loc-row:hover .loc-go { gap: 12px; color: var(--terra-deep); }
.gazetteer .loc-row { align-items: center; min-height: 92px; }

/* ---------- gazetteer on a phone, corrected ----------
   This has to come after the desktop `align-items:center; min-height:92px`
   above, which was leaking down and floating the thumbnail in the middle of a
   173px row while the text ran past it on both sides.

   Rows are rebuilt as a picture and a block of text: thumbnail down the left
   across the full height, name, country and the tour CTA under it. That
   takes a row from 173px to about 110px, so five parks fit a screen instead
   of two and a half. */
@media (max-width: 760px) {
  .gazetteer .loc-row,
  .loc-index .loc-row {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    min-height: 0;
    gap: 2px 14px;
    padding: 13px 0;
  }
  .gazetteer .loc-thumb,
  .loc-thumb { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .gazetteer .loc-num { display: none; }

  .gazetteer .loc-id   { grid-column: 2; grid-row: 1; }
  .gazetteer .loc-go   { grid-column: 2; grid-row: 2; margin-top: 6px; }

  .gazetteer .loc-name    { font-size: 16px; line-height: 1.25; }
  .gazetteer .loc-country { font-size: 9px; letter-spacing: .18em; margin-top: 3px; }
  .gazetteer .loc-go      { font-size: 12px; }
}

/* A square thumbnail top-aligned against a taller text block leaves a gap
   under every picture. Letting it fill the row height instead gives the list
   one clean left edge, which is what makes it read as an index rather than a
   stack of cards. */
@media (max-width: 760px) {
  .gazetteer .loc-thumb {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 76px;
  }
}

/* ============================================================
   13. LONG-FORM PAGES (About, Responsible travel)

   The About page was the worst thing on the site on a phone: a
   five-line headline, then three long paragraphs at the desktop
   measure with nothing to break them, then a photograph right at
   the bottom where nobody had scrolled to. It read as a document,
   not a page.

   Three moves, all of them what a magazine does with a feature:
   the headline is sized for the column it is actually in, the
   picture opens the section instead of closing it, and the first
   paragraph is set as a standfirst so the eye has somewhere to
   land before the body copy starts.
   ============================================================ */

/* The masthead headline was locked to a 42px floor, which is a desktop size
   set in a 350px column. */
.page-hero h1 { font-size: clamp(29px, 6.2vw, 64px); }

/* Standfirst: the opening paragraph carries the weight, the rest is body. */
.page-template-page-about .split-2 > div:not(.split-media) > p:first-of-type {
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
}

@media (max-width: 760px) {
  .page-hero {
    padding-top: calc(var(--header-h, 78px) + 26px);
    padding-bottom: 26px;
  }
  .page-hero h1 { line-height: 1.14; margin-bottom: 14px; }
  .page-hero .lede { font-size: 14.5px; line-height: 1.68; }

  .split-2 { gap: 22px; }

  /* The photograph leads. Stacked, a split with the copy first buries the
     image under 300 words, so on a phone the two halves swap. The blocks that
     already put the picture first, Responsible travel, are unaffected: they
     have .split-media as their first child and order:-1 keeps it there. */
  .split-2 .split-media { order: -1; }

  .split-2 p { font-size: 15px; line-height: 1.72; margin-bottom: 13px; }
  .page-template-page-about .split-2 > div:not(.split-media) > p:first-of-type {
    font-size: 16px;
  }
  .split-2 .h2, .split-2 h2 { font-size: 24px; margin-bottom: 14px; }

  /* Ports of the desktop grid that were still one-per-screen here. */
  .park-grid { grid-template-columns: 1fr; gap: 14px; }
  .park-card { padding: 20px 18px; }
  .park-card h3 { font-size: 17px; }
  .park-card p { font-size: 13.5px; line-height: 1.6; }
}

/* ============================================================
   15. HEADER, two states, 2026-09-06

   TRANSPARENT, over a hero photograph. The front page and a
   single tour package both hand their top strip to the picture,
   so header.php leaves .header--always-solid off them and the
   glass band from section 1 applies. The white lockup is used.

   SOLID, WHITE. Everywhere else, and on every page once it has
   scrolled past 30px. Paper ground, ink type, the dark lockup.
   This replaces the old dark bar site-wide, so the rules below
   have to beat style.css's .header.is-solid, which they do on
   source order at equal specificity.

   The two lockups are both in the markup and swapped with
   display, not with a CSS filter: the artwork is different, not
   inverted, and filtering the white one would grey the mark.
   ============================================================ */

/* -- the glass band, generalised off .home -------------------- */
/* Anything that is not marked always-solid is floating over a
   photograph, which is now the front page AND a tour package. */
.header:not(.header--always-solid) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.header:not(.header--always-solid)::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(20,15,9,.60) 0%, rgba(20,15,9,.24) 62%, rgba(20,15,9,0) 100%);
  -webkit-backdrop-filter: blur(11px) saturate(1.04);
  backdrop-filter: blur(11px) saturate(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 44%, rgba(0,0,0,.5) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 44%, rgba(0,0,0,.5) 76%, transparent 100%);
}

/* -- solid is white now, site-wide ---------------------------- */
.header.is-solid,
.header--always-solid {
  background: var(--paper-2);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(38, 32, 25, .55);
}
.header.is-solid::before,
.header--always-solid::before {
  opacity: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Type has to flip with the ground or it lands white on paper. */
.header.is-solid .brand,
.header--always-solid .brand { color: var(--ink); }
.header.is-solid .brand-sub,
.header--always-solid .brand-sub { color: var(--ink-3); }
.header.is-solid .nav a,
.header--always-solid .nav a { color: var(--ink-2); }
.header.is-solid .nav a:hover,
.header--always-solid .nav a:hover,
.header.is-solid .nav .is-current,
.header--always-solid .nav .is-current { color: var(--ink); }
.header.is-solid .menu-btn,
.header--always-solid .menu-btn { color: var(--ink); }

/* editorial.css section 8 turns the hamburger white while the drawer is open,
   which was right over a dark bar. The drawer is paper and the bar is white
   now, so on a solid header it stays ink. */
body.nav-open .header.is-solid .menu-btn,
body.nav-open .header--always-solid .menu-btn { color: var(--ink); }

/* -- the lockup swap ------------------------------------------ */
.brand .brand-logo { height: 40px; width: auto; display: block; }
.brand .brand-logo--dark { display: none; }
.header.is-solid .brand .brand-logo--light,
.header--always-solid .brand .brand-logo--light { display: none; }
.header.is-solid .brand .brand-logo--dark,
.header--always-solid .brand .brand-logo--dark { display: block; }

/* The drawer sets its brand in type, so neither lockup belongs there. The old
   rule targeted `.mnav-top .brand img`, which still matches both. */
.mnav-top .brand .brand-logo { display: none; }


/* ===== mobile-polish.css ===== */
/* Mobile polish pass, loaded after editorial.css. Kept as its own small file
   so it can be redeployed without touching the large editorial.css. */

.tour-grid-more { display: none; }

/* Requested explicitly brighter than the site's usual muted terracotta
   (--terra #a85c2e), so it reads as a clear next step, not another card. */
.tour-grid-more { background: #F08A22; }
.tour-grid-more:hover { background: #d9791c; }

@media (max-width: 760px) {
  /* Homepage catalogue: four cards is already a full screen on a phone, the
     rest live one tap away on /safaris/. Filtering lifts the cap, since a
     real match hidden purely by DOM position would read as a bug. */
  /* Scoped to the homepage finder grid, 2026-09-17: unscoped it also cut
     /safaris/ and the country pages to four cards on a phone. */
  .finder-results .tour-grid > .tour-card:nth-child(n+5) { display: none; }
  body.vt-finder-active .finder-results .tour-grid > .tour-card:nth-child(n+5) { display: block; }
  .tour-grid-more { display: flex; margin: 6px auto 0; width: fit-content; }
  body.vt-finder-active .tour-grid-more { display: none; }

  /* How it works: three full blocks read as a lot of scrolling on a phone.
     Tighter rhythm and the secondary note dropped, the sentences themselves
     untouched. */
  .steps { gap: 20px; }
  .step { padding-top: 40px; }
  .step h3 { font-size: 16.5px; margin-bottom: 5px; }
  .step p { font-size: 13.5px; line-height: 1.5; }
  .step .step-note { display: none; }
}

/* Featured safaris, first section after the homepage hero, 2026-09-17:
   three cards on a phone and a clear button to the rest. */
.featured-more { display: none; }
@media (max-width: 760px) {
  .featured-tours .tour-grid > .tour-card:nth-child(n+4) { display: none; }
  .featured-more { display: flex; margin: 6px auto 0; width: fit-content; background: #F08A22; }
  .featured-more:hover { background: #d9791c; }
}


/* ===== site-refresh.css ===== */
/* ==========================================================================
   Site refresh, 2026-09-17. Loaded last, after mobile-polish.css.
     1. Header logo, a step larger
     2. Safari filter (template-parts/safari-filter.php), homepage + /safaris/
     3. Homepage featured head: heading left, filter right
     4. Safaris archive layout around the filter
     5. Volcan's own vehicles: homepage fleet block, About, Contact
   ========================================================================== */

/* 1. LOGO ------------------------------------------------------------------ */
.header .brand .brand-logo { height: 54px; }
@media (max-width: 760px) {
  .header .brand .brand-logo { height: 46px; }
}

/* 2. SAFARI FILTER ------------------------------------------------------------
   A dark panel on the paper page: the one piece of "equipment" on the page,
   set like a leather-bound booking card. Hairline gold rules, no inner boxes. */
.vf {
  --vf-ink: #f3ecdf;
  --vf-ink-2: #cdbfa6;          /* 9.1:1 on the panel */
  --vf-gold: #d9a46c;           /* 7.6:1 on the panel */
  --vf-rule: rgba(217,164,108,.22);
  --vf-ground: #1f1a14;
  position: relative;
  margin: 0;
  color: var(--vf-ink);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201,122,68,.16), transparent 60%),
    linear-gradient(180deg, #262019 0%, var(--vf-ground) 100%);
  border: 1px solid rgba(217,164,108,.28);
  border-radius: var(--r-md, 6px);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 34px 70px -40px rgba(38,32,25,.75);
  padding: clamp(20px, 2.4vw, 30px);
  font-family: var(--sans);
}
.vf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.vf-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--vf-rule);
}
.vf-kicker {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--vf-gold);
  display: inline-flex; align-items: center; gap: 10px;
}
.vf-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.vf-count {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vf-ink-2); font-weight: 500; white-space: nowrap;
}
.vf-count b {
  font-family: var(--sans); font-weight: 500; font-size: 30px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--vf-ink); margin-right: 4px; vertical-align: -3px;
}

.vf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.vf-field { padding-top: 18px; min-width: 0; }
.vf-field--country, .vf-field--style, .vf-field--search { grid-column: 1 / -1; }

.vf legend, .vf-field > label {
  display: block; padding: 0; margin: 0 0 10px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--vf-ink-2);
}

.vf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.vf .vf-pills button {
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  min-height: 36px; padding: 0 14px;
  color: var(--vf-ink); background: transparent;
  border: 1px solid rgba(243,236,223,.22); border-radius: var(--r, 4px);
  cursor: pointer;
  transition: background .35s var(--e-ed), color .35s var(--e-ed), border-color .35s var(--e-ed), transform .15s ease;
}
.vf .vf-pills button:hover { border-color: var(--vf-gold); color: #fff; }
.vf .vf-pills button:active { transform: scale(.97); }
.vf .vf-pills button[aria-pressed="true"] {
  background: var(--vf-ink); border-color: var(--vf-ink); color: #1f1a14;
}
.vf .vf-pills button:focus-visible,
.vf .vf-go:focus-visible, .vf .vf-clear:focus-visible, .vf .vf-range:focus-visible {
  outline: 2px solid var(--vf-gold); outline-offset: 2px;
}

.vf-value {
  display: block; font-size: 16px; font-weight: 500; color: var(--vf-ink);
  font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.vf .vf-range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 22px; margin: 4px 0 2px; padding: 0;
  background: transparent; cursor: pointer;
}
.vf .vf-range::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--vf-gold) 0, var(--vf-gold) var(--vf-fill, 100%), rgba(243,236,223,.18) var(--vf-fill, 100%));
}
.vf .vf-range::-moz-range-track { height: 2px; background: rgba(243,236,223,.18); }
.vf .vf-range::-moz-range-progress { height: 2px; background: var(--vf-gold); }
.vf .vf-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -8px; border-radius: 50%;
  background: var(--vf-ink); border: 4px solid var(--vf-gold);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.vf .vf-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--vf-ink); border: 4px solid var(--vf-gold);
}
.vf-scale {
  display: flex; justify-content: space-between;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--vf-ink-2);
}

.vf .vf-search {
  width: 100%; min-height: 46px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--vf-ink);
  background: rgba(243,236,223,.06);
  border: 1px solid rgba(243,236,223,.22); border-radius: var(--r, 4px);
}
.vf .vf-search::placeholder { color: #a3967f; }
.vf .vf-search:focus { outline: none; border-color: var(--vf-gold); }

.vf-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vf-rule);
}
.vf .vf-clear {
  font: inherit; font-size: 13px; color: var(--vf-ink-2);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(205,191,166,.4);
  visibility: hidden;
}
.vf.is-filtered .vf-clear { visibility: visible; }
.vf .vf-clear:hover { color: #fff; }
.vf .vf-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: #F08A22; border: 0; border-radius: var(--r, 4px);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background .3s var(--e-ed), transform .15s ease;
}
.vf .vf-go::after {
  content: ""; width: 7px; height: 7px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.vf .vf-go:hover { background: #d9791c; color: #fff; }
.vf .vf-go:active { transform: scale(.98); }
.vf .vf-go:disabled { background: #5a4e3f; cursor: default; }
.vf .vf-go:disabled::after { display: none; }

@media (max-width: 560px) {
  .vf { padding: 18px 16px 16px; }
  .vf-grid { gap: 0 18px; }
  .vf .vf-pills button { min-height: 38px; padding: 0 12px; }
  .vf-foot { flex-wrap: wrap; }
  .vf .vf-go { flex: 1 1 100%; order: -1; }
  .vf .vf-clear { margin: 0 auto; }
  .vf:not(.is-filtered) .vf-clear { display: none; }
}

/* 3. HOMEPAGE FEATURED HEAD ------------------------------------------------ */
.featured-tours { scroll-margin-top: calc(var(--header-h, 78px) + 12px); }
.ft-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 4.4vw, 60px);
}
.ft-intro .h2 { margin: 0; }
.ft-note {
  margin-top: 20px; max-width: 420px;
  color: var(--ink-2); font-size: 15.5px; line-height: 1.7;
}
.ft-note a { color: var(--terra); text-underline-offset: 3px; }
@media (max-width: 980px) {
  .ft-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
  .ft-note { margin-top: 14px; }
}

/* 4. SAFARIS ARCHIVE ------------------------------------------------------- */
.vf--live { margin-bottom: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) {
  .vf--live .vf-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; }
  .vf--live .vf-field--country { grid-column: 1; }
  .vf--live .vf-field--style { grid-column: 2 / -1; }
  .vf--live .vf-field--range { grid-column: auto; }
  .vf--live .vf-field--search { grid-column: 1; grid-row: 2; }
}
.tour-card.vf-out { display: none !important; }
#vf-results { scroll-margin-top: calc(var(--header-h, 78px) + 20px); }

/* 5. VOLCAN'S OWN VEHICLES ------------------------------------------------- */

/* Homepage, inside "Why travel with Volcan": the large photograph beside a
   narrow column of the branded wheel covers and a short note. */
.fleet {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.fleet figure { margin: 0; }
.fleet-shot { overflow: hidden; border-radius: var(--r-md, 6px); background: var(--line); }
.fleet-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fleet-main .fleet-shot { aspect-ratio: 4 / 3; }
.fleet-main .fleet-shot img { object-position: 45% 60%; }
.fleet-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(14px, 2vw, 22px); min-width: 0; }
.fleet-side .fleet-shot { min-height: 0; }
.fleet-side .fleet-shot img { object-position: 50% 55%; }
.fleet-note { border-top: 1px solid var(--line-strong, #cfc2a4); padding-top: 16px; }
.fleet-note .eyebrow { margin-bottom: 8px; }
.fleet-note p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.fleet figcaption {
  margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .fleet { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 36px; }
  .fleet-main .fleet-shot { aspect-ratio: 5 / 4; }
  .fleet-side { grid-template-rows: none; grid-template-columns: 38% minmax(0, 1fr); align-items: start; gap: 16px; }
  .fleet-side .fleet-shot { aspect-ratio: 3 / 4; }
  .fleet-note { border-top: 0; padding-top: 0; }
  .fleet-note p { font-size: 14.5px; }
}

/* About, the team section: a full-width vehicle photograph above the cards. */
.team-fleet { margin: 0 0 clamp(28px, 4vw, 44px); }
.team-fleet .fleet-shot { aspect-ratio: 21 / 9; }
.team-fleet .fleet-shot img { object-position: 50% 58%; }
.team-fleet figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 760px) {
  .team-fleet .fleet-shot { aspect-ratio: 4 / 3; }
}

/* About: the two story photographs are portrait and landscape originals,
   framed from their subject rather than the centre. */
.split-media img.is-fleet-guests { object-position: 50% 40%; }
.split-media img.is-fleet-lions { object-position: 62% 40%; }

/* Contact: the wheel covers carry the office number, so they sit above the
   contact cards as the first thing in that column. */
.contact-photo { margin: 0 0 22px; }
.contact-photo .fleet-shot { aspect-ratio: 16 / 10; }
.contact-photo .fleet-shot img { object-position: 50% 62%; }
.contact-photo figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 760px) {
  .contact-photo { margin-top: 8px; }
  .contact-photo .fleet-shot { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   2026-09-18, client review. On a phone the filter goes: the twelve featured
   cards and one clear button to the rest are the whole job at that width.
   The button itself gets room and weight to match.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .ft-head .vf { display: none; }
  .ft-head { gap: 0; margin-bottom: 26px; }

  .featured-tours .featured-more {
    display: flex; width: 100%; max-width: 440px;
    min-height: 62px; margin: 34px auto 8px; padding: 0 26px;
    font-size: 16px; letter-spacing: .03em; border-radius: var(--r, 4px);
  }
}


/* ===== trust.css ===== */
/* ==========================================================================
   trust.css, 2026-09-23. The client review's first round (Paul and Marion).

   Loaded after site-refresh.css on every page. Holds only what that round
   added: the consent line on the forms, the Responsible Travel page, the
   Google reviews strip and page, the legal pages' reading width, the pay
   later block on the guest's booking page, and the registration line in
   the footer. Nothing here restyles anything that existed before.

   Colour rule carried over from the booking pass: supporting text is
   --ink-2 (5.1:1 on paper), never --ink-3 (3.1:1), and text links use
   --terra-deep (6.1:1), not --terra (4.4:1).
   ========================================================================== */

/* ---------- 1. consent line, quote form and checkout ---------- */
.form-consent,
.vtco .vtco-consent {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin-top: 18px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-2);
	cursor: pointer;
}
.form-consent input,
.vtco .vtco-consent input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--terra-deep);
	cursor: pointer;
}
.form-consent a,
.vtco .vtco-consent a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 2px; }
.vtco .vtco-consent { margin-top: 6px; }
.vtco .vtco-consent[aria-invalid="true"] span { color: #a33131; }

/* ---------- 2. Responsible Travel ---------- */
.vt-rt-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	margin-bottom: clamp(40px, 6vw, 80px);
}
.vt-rt-shot { margin: 0; }
.vt-rt-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-md, 6px);
}
.vt-rt-intro p { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; max-width: 46ch; }

.vt-rt-pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--line);
}
.vt-rt-pillars li {
	padding: clamp(26px, 3vw, 40px) clamp(0px, 3vw, 40px) clamp(26px, 3vw, 40px) 0;
	border-bottom: 1px solid var(--line);
	min-width: 0;
}
.vt-rt-pillars li:nth-child(even) {
	padding-left: clamp(0px, 3vw, 40px);
	padding-right: 0;
	border-left: 1px solid var(--line);
}
.vt-rt-n {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--terra-deep);
	margin-bottom: 14px;
}
.vt-rt-pillars h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-synthesis: none;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.2;
	margin: 0 0 12px;
}
.vt-rt-pillars p { margin: 0; color: var(--ink-2); line-height: 1.7; max-width: 52ch; }

.vt-rt-pol-head { max-width: 640px; margin-bottom: 28px; }
.vt-rt-pol-head p { color: var(--ink-2); }
.vt-rt-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.vt-rt-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	font-size: 16px;
}
.vt-rt-list a {
	flex: none;
	color: var(--terra-deep);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 820px) {
	.vt-rt-intro { grid-template-columns: minmax(0, 1fr); }
	.vt-rt-pillars { grid-template-columns: minmax(0, 1fr); }
	.vt-rt-pillars li,
	.vt-rt-pillars li:nth-child(even) { padding: 24px 0; border-left: 0; }
	.vt-rt-list li { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- 3. Google reviews ---------- */
.vt-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.vt-stars svg { width: 16px; height: 16px; fill: var(--line-strong); }
.vt-stars svg.is-on { fill: var(--terra); }

.vt-reviews-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.vt-reviews-score,
.vt-rv-score {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.vt-reviews-score b,
.vt-rv-score b { font-family: var(--sans); font-size: 30px; font-weight: 600; line-height: 1; }
.vt-reviews-score span { color: var(--ink-2); font-size: 14px; }
.page-hero .vt-rv-score b,
.page-hero .vt-rv-score span { color: var(--cream-on-deep); }
.page-hero .vt-rv-score span { font-size: 15px; }

.vt-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}
.vt-reviews-grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-review {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 0 0;
	border-top: 2px solid var(--terra);
	min-width: 0;
}
.vt-review blockquote { margin: 0; }
.vt-review blockquote p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.vt-reviews-grid--page .vt-review blockquote p { -webkit-line-clamp: unset; display: block; }
.vt-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.vt-review figcaption img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.vt-review figcaption span { display: grid; gap: 2px; min-width: 0; }
.vt-review figcaption a,
.vt-review figcaption b { color: var(--ink); font-weight: 600; font-size: 14px; }
.vt-review figcaption small { color: var(--ink-2); font-size: 12.5px; }
.vt-reviews-more { margin: 32px 0 0; }

.vt-rv-empty { max-width: 560px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.vt-rv-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.vt-rv-source { margin-top: 18px; font-size: 13px; color: var(--ink-2); }

@media (max-width: 900px) {
	.vt-reviews-grid,
	.vt-reviews-grid--page { grid-template-columns: minmax(0, 1fr); }
	.vt-rv-actions .btn { flex: 1 1 100%; }
}

/* ---------- 4. legal pages: Terms, Privacy, Booking & Payment Terms ---------- */
.vt-legal h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-synthesis: none;
	font-size: clamp(22px, 2.6vw, 28px);
	margin: 38px 0 12px;
	color: var(--ink);
}
.vt-legal p,
.vt-legal li { font-size: 16px; line-height: 1.75; color: var(--ink); }
.vt-legal ul { padding-left: 1.2em; }
.vt-legal a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 2px; }
.vt-legal .vt-legal-meta { color: var(--ink-2); font-size: 14px; }

/* ---------- 5. paying later, the guest's booking page ---------- */
.vtbk .vtbk-pay {
	margin: 26px 0 8px;
	padding: 22px 0 0;
	border-top: 1px solid var(--line-strong);
}
.vtbk .vtbk-pay h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-synthesis: none;
	font-size: 24px;
	margin: 0 0 8px;
}
.vtbk .vtbk-pay p { margin: 0 0 16px; color: var(--ink-2); }
.vtbk .vtbk-pay form { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.vtbk .vtbk-pay button { font: inherit; cursor: pointer; border: 0; }
.vtbk .vtbk-pay .vtbk-num { font-variant-numeric: tabular-nums; }

/* ---------- 6. footer registration line ---------- */
.footer .f-reg { display: block; margin-top: 4px; opacity: 1; }

/* ---------- 7. the secure payment page, /booking/pay/ (booking-pay.php) ----------
   Pesapal's form sits in a white panel under a strip carrying the booking
   and the amount, so the guest never leaves a Volcan page to pay. The frame
   cannot size itself to Pesapal's form (it is another site), so it is given
   a height that fits the tallest state of that form, the card billing step,
   with a little room to spare. */
.vtpay-body {
	max-width: 940px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(56px, 7vw, 88px);
}
.vtpay-sum {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 16px 20px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md, 6px) var(--r-md, 6px) 0 0;
}
.vtpay-sum img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r, 4px); }
.vtpay-trip { min-width: 0; }
.vtpay-k,
.vtpay-due span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.vtpay-k { color: var(--terra-deep); margin-bottom: 4px; }
.vtpay-t {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-synthesis: none;
	font-size: 20px;
	line-height: 1.25;
	color: var(--ink);
}
.vtpay-m { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.vtpay-due { text-align: right; }
.vtpay-due span { color: var(--ink-2); }
.vtpay-num {
	display: block;
	font-family: var(--sans);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.vtpay-due small { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vtpay-frame {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 var(--r-md, 6px) var(--r-md, 6px);
	overflow: hidden;
}
.vtpay-frame iframe { display: block; width: 100%; height: 920px; border: 0; }
.vtpay-trust {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin-top: 20px;
}
.vtpay-trust svg { width: 20px; height: 20px; color: var(--terra-deep); }
.vtpay-trust p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.vtpay-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0 32px; font-size: 13.5px; }
.vtpay-links a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
	.vtpay-sum { grid-template-columns: 56px minmax(0, 1fr); padding: 14px 16px; }
	.vtpay-sum img { width: 56px; height: 56px; }
	.vtpay-due {
		grid-column: 1 / -1;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 4px 12px;
		text-align: left;
		padding-top: 12px;
		border-top: 1px solid var(--line);
	}
	.vtpay-frame iframe { height: 1320px; }
	.vtpay-links { margin-left: 0; flex-direction: column; }
}


/* ===== site-extras.css ===== */
/* ============================================================
   Client review round 2, 2026-09-24.

   1. Social icons: footer and phone menu
   2. Newsletter sign-up, footer
   3. Share row: tours and Travel Guides
   4. Travel Guides article
   5. Travel Guides teaser, homepage

   Loaded after trust.css. Removing its wp_enqueue_style line in
   functions.php takes all of it away. Money and figures are Work Sans,
   headings Marcellus with no bold, as everywhere else on the site.
   ============================================================ */

/* ---------- 1. Social icons ---------- */
.vt-social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vt-social li { margin: 0; }
.vt-social a {
	display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: 50%; transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.vt-social svg { width: 18px; height: 18px; display: block; }

.footer .f-social { margin-top: 22px; }
.footer .f-social a { color: #d9ccb2; box-shadow: inset 0 0 0 1px rgba(236, 227, 207, .22); }
.footer .f-social a:hover { color: var(--white); background: var(--terra); box-shadow: none; }

.mnav-social { margin-top: 16px; }
.mnav-social a { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mnav-social a:hover { color: var(--white); background: var(--terra); box-shadow: none; }

/* ---------- 2. Newsletter, footer ---------- */
.f-news-wrap { border-top: 1px solid rgba(236, 227, 207, .12); padding: 34px 0 38px; }
.f-news { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 72px); align-items: start; }
.f-news h4 { margin-bottom: 8px; }
.f-news-copy p { font-size: 14px; line-height: 1.7; color: #a99c83; max-width: 40ch; }
.f-news-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.f-news-row { display: flex; gap: 0; }
.f-news-row input[type="email"] {
	flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
	font: inherit; font-size: 16px; color: var(--white);
	background: rgba(236, 227, 207, .06); border: 1px solid rgba(236, 227, 207, .22); border-right: 0; border-radius: 0;
}
.f-news-row input[type="email"]::placeholder { color: #8f836c; }
.f-news-row input[type="email"]:focus { outline: none; border-color: var(--terra-bright); background: rgba(236, 227, 207, .1); }
.f-news-row button {
	flex: 0 0 auto; height: 52px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer;
	font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
	background: var(--terra); color: var(--white); transition: background .3s var(--ease);
}
.f-news-row button:hover { background: var(--terra-bright); }
.f-news-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.6; color: #a99c83; cursor: pointer; }
.f-news-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--terra); }
.f-news-consent a { color: #d9ccb2; text-decoration: underline; text-underline-offset: 2px; }
.f-news-msg { margin-top: 12px; font-size: 13.5px; color: #e8b48c; }
.f-news-msg.is-ok { color: #b9cf9d; }
@media (max-width: 820px) {
	.f-news { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- 3. Share row ---------- */
.vt-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.vt-share-lb { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.vt-share ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vt-share li { margin: 0; }
.vt-share li a,
.vt-share li button {
	position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; cursor: pointer;
	color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
	transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.vt-share li a:hover,
.vt-share li button:hover { background: var(--terra); color: var(--white); box-shadow: none; }
.vt-share svg { width: 17px; height: 17px; display: block; }
.vt-share-done {
	position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
	white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--terra-deep); pointer-events: none;
}

/* ---------- 4. Travel Guides article ---------- */
.vt-art-hero { padding: calc(var(--header-h, 78px) + clamp(34px, 6vw, 70px)) 0 clamp(26px, 4vw, 44px); background: var(--paper); }
.vt-art-hero .wrap { max-width: 900px; }
/* The global breadcrumb is set for a dark hero; this one sits on paper. */
.vt-art-hero .breadcrumb { color: var(--ink-2); }
.vt-art-hero .breadcrumb a { color: var(--terra-deep); }
.vt-art-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 22px 0 0; font-size: 13px; color: var(--ink-2); }
.vt-art-meta a { color: var(--terra-deep); font-weight: 600; }
.vt-art-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.vt-art-hero h1 { font-size: clamp(32px, 5vw, 58px); line-height: 1.1; letter-spacing: -.02em; max-width: 20ch; }
.vt-art-hero .lede { margin-top: 18px; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.7; color: var(--ink-2); max-width: 58ch; }
.vt-art-photo { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.vt-art-photo img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; border-radius: var(--r-md, 6px); }
.vt-art-photo figcaption { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }

.vt-art-body { max-width: 720px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) var(--gutter) 0; font-size: 17px; line-height: 1.8; color: var(--ink); }
.vt-art-body > * + * { margin-top: 1.1em; }
.vt-art-body h2 { font-size: clamp(24px, 2.6vw, 31px); line-height: 1.22; letter-spacing: -.01em; margin-top: 1.9em; }
.vt-art-body h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.3; margin-top: 1.6em; }
.vt-art-body h2 + *, .vt-art-body h3 + * { margin-top: .7em; }
.vt-art-body ul, .vt-art-body ol { padding-left: 1.2em; }
.vt-art-body li + li { margin-top: .45em; }
.vt-art-body li::marker { color: var(--terra); }
.vt-art-body :is(p, li) a { color: var(--terra-deep); text-decoration: underline; text-decoration-color: rgba(168, 92, 46, .4); text-underline-offset: 3px; }
.vt-art-body :is(p, li) a:hover { text-decoration-color: currentColor; }
.vt-art-body strong { font-weight: 600; }
.vt-art-body table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.vt-art-body th, .vt-art-body td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }

.vt-art-foot { max-width: 720px; margin: 0 auto; padding: 38px var(--gutter) 0; }
.vt-art-foot .vt-share { padding: 20px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.vt-art-cta {
	margin-top: 40px; padding: clamp(26px, 4vw, 40px); background: var(--deep-2); color: var(--cream-on-deep, #ece3cf);
}
.vt-art-cta h2 { color: var(--white); font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; }
.vt-art-cta p { margin-top: 10px; font-size: 15.5px; line-height: 1.7; color: #c9bda5; max-width: 52ch; }
.vt-art-cta .btn { margin-top: 20px; }

.vt-art-more { padding: clamp(56px, 9vw, 100px) 0; }
.vt-art-more .h2 { margin-bottom: 26px; }

/* ---------- Google reviews via Trustindex, 2026-09-25 ---------- */
/* The plugin styles its own widget; this only spaces it inside the site's review blocks. */
.vt-ti { margin-top: 6px; }
/* No review count beside the stars: with only a handful of reviews it undersells (Isaac, 2026-09-25). */
.vt-ti .ti-widget .ti-rating-text { display: none !important; }
.vt-ti + .vt-reviews-more, .vt-ti + .vrev-more { margin-top: 24px; }

/* ---------- 5. Travel Guides teaser, homepage ---------- */
.vt-guides-teaser { border-top: 1px solid var(--line); }
.vt-guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.vt-guide { display: flex; flex-direction: column; min-width: 0; }
.vt-guide-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md, 6px); background: var(--panel); }
.vt-guide-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.vt-guide:hover .vt-guide-photo img { transform: scale(1.04); }
.vt-guide-cat { margin-top: 16px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--terra-deep); }
.vt-guide h3 { margin-top: 8px; font-size: 21px; line-height: 1.3; }
.vt-guide h3 a { color: var(--ink); }
.vt-guide h3 a:hover { color: var(--terra-deep); }
.vt-guide p { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.vt-guides-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 42px); }
@media (max-width: 900px) {
	.vt-guides-grid { grid-template-columns: minmax(0, 1fr); }
	.vt-guide { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; }
	.vt-guide-photo { grid-row: span 3; aspect-ratio: 1 / 1; }
	.vt-guide-cat { margin-top: 0; }
	.vt-guide p { display: none; }
	.vt-guide h3 { font-size: 18px; }
}

/* ---------- Homepage, 2026-09-25 ---------- */
.vt-reviews-lede { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 52ch; }

/* Specialist strip: no dark photo band, a light panel in the page's own paper tones. */
.specialist { background: var(--paper) !important; color: var(--ink); padding: clamp(40px, 6vw, 72px) 0; }
.specialist::before, .specialist::after { display: none !important; }
.specialist-inner { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md, 6px); padding: clamp(24px, 4vw, 44px); box-shadow: 0 24px 48px -32px rgba(38, 32, 25, .35); }
.specialist-photo:has(.photo-placeholder) { display: none; }
.specialist-copy .eyebrow { color: var(--terra-deep); }
.specialist-copy h2 { color: var(--ink) !important; }
.specialist-copy p { color: var(--ink-2) !important; }
.specialist-copy .specialist-name, .specialist-copy .specialist-name b { color: var(--ink-2) !important; }
.specialist .btn--ghost-on-deep { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); background: transparent; }
.specialist .btn--ghost-on-deep:hover { color: var(--terra-deep); box-shadow: inset 0 0 0 1px var(--terra); }
.specialist-reply { color: var(--ink-2) !important; }
@media (min-width: 761px) { .specialist-inner:has(.photo-placeholder) { grid-template-columns: 1fr auto; } }

/* How it works, now the closing call to action. */
.how-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(32px, 5vw, 52px); padding-top: 28px; border-top: 1px solid var(--line); }
.how-cta p { margin: 0 auto 0 0; font-size: 15px; color: var(--ink-2); }

/* Enquiry received, 2026-09-28. Replaces the quote form after a successful
   send (vt_quote_form). No WhatsApp hand-off any more. */
.qf-done { padding: 6px 0 4px; }
.qf-done-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; background: var(--terra); color: var(--white); }
.qf-done h3 { font-size: 24px; margin: 0 0 10px; color: var(--ink); }
.qf-done p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.qf-done .qf-done-note { font-size: 14px; }
.qf-done .qf-done-note a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px; }
.qf-done-again { display: inline-block; margin-top: 6px; padding-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--terra); }
.qf-done-again:hover { color: var(--terra-deep); }
.vt-itin .vq-form .qf-done { background: var(--white); padding: clamp(24px, 3vw, 38px); box-shadow: inset 0 0 0 1px var(--line); }

/* Plain pages, 2026-10-02 (page.php: Privacy Policy, Terms, Booking & Payment
   Terms). Their content sits in div.lede, which had no paragraph spacing and
   no list bullets, so long legal text ran together. Tables scroll inside their
   own box, never the page (page overflow hides the mobile menu button). */
.section > .wrap > div.lede > p { margin: 0 0 1em; }
.section > .wrap > div.lede h2 { margin: 1.8em 0 .5em; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; color: var(--ink); }
.section > .wrap > div.lede h3 { margin: 1.4em 0 .4em; font-size: 19px; line-height: 1.3; color: var(--ink); }
.section > .wrap > div.lede ul { list-style: disc; margin: 0 0 1.1em; padding-left: 1.3em; }
.section > .wrap > div.lede li { margin: 0 0 .5em; padding-left: .2em; }
.section > .wrap > div.lede li::marker { color: var(--terra); }
.section > .wrap > div.lede :is(p, li) a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 3px; }
.section > .wrap > div.lede .vt-terms-meta { font-size: 14.5px; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.section > .wrap > div.lede .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 6px 0 1.4em; }
.section > .wrap > div.lede table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.section > .wrap > div.lede th { text-align: left; font-weight: 600; color: var(--ink); background: var(--paper-2); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); }
.section > .wrap > div.lede td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--line); }


/* ==========================================================================
   CLIENT REVIEW ROUND 3, 2026-10-06 (Isaac's screenshot list, items 1-10)
   ========================================================================== */

/* 1. Google reviews: no review dates ("1 year ago") in any widget. */
.ti-widget .ti-date { display: none !important; }

/* 2. Safari cards: no terracotta rule under the photo on hover. */
.tour-card-photo::after { display: none !important; }

/* 3. Homepage filter: one slim full-width strip under the heading instead of
   a tall box beside it. Four fields in one row, smaller chips, the button
   up in the title row. Phones (760px and below) still hide it. */
@media (min-width: 981px) {
  .ft-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(24px, 2.6vw, 32px); }
  .ft-head .vf { padding: 16px clamp(22px, 2.6vw, 34px) 20px; }
  .ft-head .vf-head { padding-bottom: 12px; min-height: 40px; align-items: center; padding-right: 220px; }
  .ft-head .vf-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .75fr) minmax(0, .75fr);
    gap: 0 clamp(24px, 2.8vw, 40px);
  }
  .ft-head .vf-field { padding-top: 14px; }
  .ft-head .vf-field--country, .ft-head .vf-field--style, .ft-head .vf-field--range { grid-column: auto; }
  .ft-head .vf legend, .ft-head .vf-field > label { margin-bottom: 8px; }
  .ft-head .vf .vf-pills { gap: 5px; }
  .ft-head .vf .vf-pills button { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
  .ft-head .vf-foot { position: absolute; top: 12px; right: clamp(22px, 2.6vw, 34px); margin: 0; padding: 0; border: 0; }
  .ft-head .vf .vf-go { min-height: 42px; }
}

/* 4. Accommodation hero (and any .detail-hero): headline was ink on the photo. */
.detail-hero .h1 { color: #fbf6ea; text-shadow: 0 2px 22px rgba(10, 7, 3, .45); }
.detail-hero .lede { color: #e9dfca; text-shadow: 0 1px 14px rgba(10, 7, 3, .5); }
.detail-hero .eyebrow { color: #eab17c; }
.detail-hero .breadcrumb, .detail-hero .breadcrumb a { color: rgba(251, 246, 234, .82); }

/* 5. Photo viewer for .gallery links (accommodation pages). Built by
   main.js, "gallery viewer". */
.vt-lbx { position: fixed; inset: 0; z-index: 100000; display: none; background: rgba(12, 9, 6, .95); }
.vt-lbx.on { display: block; }
.vt-lbx-fig { position: absolute; inset: 70px 84px 64px; margin: 0; }
.vt-lbx-fig img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.vt-lbx button { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(251, 246, 234, .4); border-radius: 50%; background: rgba(20, 15, 10, .6); color: #fbf6ea; cursor: pointer; transition: background .2s, border-color .2s; }
.vt-lbx button:hover { background: #f38922; border-color: #f38922; }
.vt-lbx button:focus-visible { outline: 2px solid #f38922; outline-offset: 3px; }
.vt-lbx button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vt-lbx-x { top: 12px; right: 16px; }
.vt-lbx-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.vt-lbx-next { right: 16px; top: 50%; transform: translateY(-50%); }
.vt-lbx-n { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: #e9dfca; font: 500 13px/1 var(--sans); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.vt-lbx.single .vt-lbx-prev, .vt-lbx.single .vt-lbx-next, .vt-lbx.single .vt-lbx-n { display: none; }
html.vt-lbx-open { overflow: hidden; }
.gallery a { cursor: zoom-in; }
@media (max-width: 760px) {
  .vt-lbx-fig { inset: 72px 0 84px; }
  .vt-lbx-prev, .vt-lbx-next { top: auto; bottom: 16px; transform: none; width: 50px; height: 50px; }
  .vt-lbx-n { bottom: 34px; }
}

/* 6. Homepage hero: the country line moves from above the headline to the
   foot of the frosted band, under the trust line, in a readable cream. */
.home .hero-content { display: flex; flex-direction: column; }
.home .hero-content > * { align-self: flex-start; }
.home .hero-content > .hero-actions { align-self: stretch; }
.home .hero .eyebrow { order: 9; margin: 10px 0 0; color: #efe4cf; font-size: 11px; letter-spacing: .2em; }
.home .hero .eyebrow::before { display: none; }

/* 7. Safari page hero, desktop: wider measure, so titles run on one line
   where they fit and the intro takes fewer lines; the block sits lower in
   the blur band. Phone sizes untouched. (Beats itinerary.css by the body
   prefix, which loads after this file.) */
@media (min-width: 821px) {
  body .vt-itin .ihero h1.ht-1,
  body .vt-itin .ihero h1.ht-2,
  body .vt-itin .ihero h1.ht-3,
  body .vt-itin .ihero h1.ht-4 { max-width: none; }
  body .vt-itin .ihero h1.ht-2 { font-size: clamp(34px, 4.3vw, 62px); }
  body .vt-itin .ihero h1.ht-3 { font-size: clamp(30px, 3.7vw, 52px); }
  body .vt-itin .ihero h1.ht-4 { font-size: clamp(28px, 3.2vw, 44px); }
  body .vt-itin .ihero .sub { max-width: 1000px; }
}

/* 10. "Talk to a person", v2 (2026-10-06, Isaac): round portrait, short
   copy, one button. Overrides premium.css section 2 and the older white-card
   rules above. */
.specialist--v2 .specialist-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(22px, 3.2vw, 44px);
  max-width: 980px; margin: 0 auto;
  padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.6vw, 48px);
}
.specialist--v2 .specialist-photo {
  display: block; position: relative;
  width: clamp(96px, 10vw, 124px); height: clamp(96px, 10vw, 124px);
  border: 0; border-radius: 50%; overflow: visible; background: none;
}
.specialist--v2 .specialist-photo img {
  position: static; width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: 50% 40%;
  box-shadow: 0 14px 30px -14px rgba(38, 32, 25, .55);
}
.specialist--v2 .specialist-status {
  display: block; right: 6%; bottom: 6%; width: 16px; height: 16px;
  border: 0; box-shadow: 0 0 0 3px var(--white, #fff);
}
.specialist--v2 .specialist-copy h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 0 0 8px; }
.specialist--v2 .specialist-copy p { margin: 0; font-size: 15px; line-height: 1.6; max-width: none; }
.specialist--v2 .specialist-copy p b { color: var(--ink); font-weight: 600; }
.specialist--v2 .specialist-actions { min-width: 0; }
.specialist--v2 .specialist-actions .btn { width: auto; min-width: 180px; padding: 0 30px; }
@media (max-width: 760px) {
  .specialist--v2 .specialist-inner { grid-template-columns: auto minmax(0, 1fr); gap: 18px 18px; padding: 24px 20px; }
  .specialist--v2 .specialist-photo { width: 84px; height: 84px; }
  .specialist--v2 .specialist-copy .eyebrow { margin-bottom: 6px; }
  .specialist--v2 .specialist-copy h2 { font-size: 23px; }
  .specialist--v2 .specialist-actions { grid-column: 1 / -1; }
  .specialist--v2 .specialist-actions .btn { width: 100%; }
}

/* =====================================================================
   VOLCAN-SEO LAYER FIXES, 2026-10-19
   The client's mu-plugin volcan-seo (volcan-theme.css, loaded after this
   file) boxes the cards and adds a 38px contact strip above the fixed
   header. Their colours and type are kept as they are. These rules only
   repair spacing that their layer broke. "body" in front of each selector
   lifts it above their equal-specificity rules without !important.
   ===================================================================== */

/* 1. Contact strip: everything pinned under the header assumed the header
      starts at 0. With the strip it ends 38px lower, so the token grows
      for the page while the header itself keeps its own 78px height. */
body:has(.vc-strip) { --header-h: calc(78px + var(--vc-strip-h, 38px)); }
body:has(.vc-strip) header.header { --header-h: 78px; }

/* 2. Safari cards: their rule draws a box, but the card was built with no
      inner padding, so the text ran into the box edges. */
body .tour-card { overflow: hidden; display: flex; flex-direction: column; }
body .tour-card-photo { border-radius: 0; }
body .tour-card-body { padding: 0 20px 18px; border-top: 0; flex: 1; }
body .tour-card-foot { margin-top: auto; }
/* card lift on hover was removed in client review round 3 */
body .tour-card:hover { transform: none; }

/* 3. Header button kept on one line between 1000px and 1200px */
body .header-cta .btn { white-space: nowrap; }

/* 4. Agency credit in the footer legal line: present, but quiet */
body .footer a.vt-credit, body footer a.vt-credit { color: rgba(201, 214, 218, .38); text-decoration: none; font-size: .95em; }
body .footer a.vt-credit:hover, body footer a.vt-credit:hover { color: rgba(201, 214, 218, .7); }

/* 5. Footer language row, 2026-10-19 (Volcan's theme note) */
.footer .f-langs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 18px 0; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; }
.footer .f-langs-lb { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(201, 214, 218, .7); margin-right: 4px; }
.footer .f-langs a { color: #c9d6da; text-decoration: none; }
.footer .f-langs a:hover { color: #fff; }

/* 6. Homepage trade strip and "Planning from abroad?" row, 2026-10-19 */
.vt-trade-strip { background: var(--deep, #0f3743); font-size: 14px; }
.vt-trade-strip .wrap { padding-top: 12px; padding-bottom: 12px; text-align: center; }
.vt-trade-strip a { color: #dfe8ea; text-decoration: none; }
.vt-trade-strip a b { color: #fff; font-weight: 600; }
.vt-trade-strip a:hover b { color: var(--terra-bright, #f6a04a); }
.vt-abroad .wrap { text-align: center; }
.vt-abroad h2 { margin: 6px 0 22px; }
.vt-abroad h2::after { margin-left: auto; margin-right: auto; }
.vt-abroad .volcan-markets ul { justify-content: center; }
.vt-abroad .volcan-trust { margin-top: 34px; text-align: left; }
@media (min-width: 900px) { body .vt-abroad .volcan-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }