/* ==========================================================================
   Kenya Safari Centre — site stylesheet
   Field-notebook palette: sand paper, ink, rust, olive, gold.
   ========================================================================== */

:root {
  --sand: #efe9d8;
  --paper: #faf7ee;
  --ink: #1e1b13;
  --ink-70: rgba(30, 27, 19, 0.7);
  --ink-45: rgba(30, 27, 19, 0.45);
  --rust: #a8502c;
  --rust-dark: #8a3f22;
  --olive: #3f4a32;
  --olive-light: #55663f;
  --gold: #b98a3e;
  --gold-light: #d3a558;
  --line: #dcd2b8;
  --line-dark: rgba(239, 233, 216, 0.18);
  --on-dark: #f3eee0;
  --on-dark-soft: rgba(243, 238, 224, 0.78);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1160px;
  --radius: 3px;
  --header-h: 76px;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}
.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.safari-hero :focus-visible,
.page-hero :focus-visible { outline-color: var(--gold-light); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
}
.narrow > * { max-width: 780px; }
.narrow > h2, .narrow > h3 { margin-bottom: 16px; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--on-dark);
  padding: 10px 18px; border-radius: var(--radius);
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ---- Type --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); max-width: 22ch; }
h3 { font-size: 1.2rem; }
h4 { font-size: 0.95rem; }
p { max-width: 68ch; color: var(--ink-70); }
p + p { margin-top: 15px; }
.lead {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  max-width: 56ch;
  line-height: 1.55;
}
.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.link-more {
  display: inline-block;
  font-weight: 600;
  color: var(--rust);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-more:hover { color: var(--rust-dark); }
.section--dark .link-more { color: var(--gold-light); }

/* ---- Sections ----------------------------------------------------------- */
.section {
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}
.section--paper { background: var(--paper); }
.section--dark {
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: none;
}
.section--dark p { color: var(--on-dark-soft); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }

.section-head { margin-bottom: 40px; }
.section-head p { margin-top: 12px; max-width: 60ch; }
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.group-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
  max-width: none;
}
.count {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sand);
  background: var(--olive);
  border-radius: 999px;
  padding: 2px 11px;
}

.two-up {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
}
.two-up h2 { margin-bottom: 14px; }
.two-up p + p { margin-top: 14px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
  text-align: center;
}
.btn--primary { background: var(--rust); color: #fff; }
.btn--primary:hover { background: var(--rust-dark); }
.btn--ghost {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.section:not(.section--dark) .btn--ghost:hover { background: rgba(30, 27, 19, 0.06); }
.btn--whatsapp { background: #1f7a4d; color: #fff; }
.btn--whatsapp:hover { background: #18613d; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(30, 27, 19, 0.92);
  backdrop-filter: blur(8px);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark { width: 44px; height: 44px; object-fit: contain; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand-sub {
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  color: rgba(243, 238, 224, 0.62);
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.main-nav ul { display: flex; gap: 22px; align-items: center; }
.main-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(243, 238, 224, 0.85);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.main-nav a:hover { color: #fff; }
.main-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.nav-cta { padding: 9px 18px; font-size: 0.88rem; }

.head-right { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(243, 238, 224, 0.55);
}
.lang-switch a { padding: 4px 2px; }
.lang-switch a:hover { color: #fff; }
.lang-switch a[aria-current="true"] { color: var(--gold-light); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  position: relative;
  color: inherit;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 20px; height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { content: ""; top: -6px; left: 0; transform: none; }
.nav-toggle span::after  { content: ""; top: 6px;  left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero slideshow ----------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  isolation: isolate;
}
.slides {
  position: relative;
  min-height: min(78vh, 680px);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.slide::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(18, 16, 11, 0.86) 0%, rgba(18, 16, 11, 0.6) 48%, rgba(18, 16, 11, 0.22) 100%),
    linear-gradient(to top,
      rgba(18, 16, 11, 0.7) 0%, rgba(18, 16, 11, 0) 38%);
}
.slide-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
  padding-bottom: 90px;
}
.slide-copy h1 { max-width: 18ch; color: var(--on-dark); }
.slide-lead {
  margin-top: 18px;
  max-width: 48ch;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  color: rgba(243, 238, 224, 0.86);
}

.hero-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 96px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-controls .cta-row { margin-top: 0; }
.dots { display: flex; gap: 9px; }
.dots button {
  width: 34px; height: 4px;
  border: 0;
  padding: 0;
  background: rgba(243, 238, 224, 0.35);
  border-radius: 2px;
  transition: background-color .2s ease;
}
.dots button:hover { background: rgba(243, 238, 224, 0.6); }
.dots button[aria-current="true"] { background: var(--gold-light); }

.stat-bar {
  position: relative;
  z-index: 3;
  background: rgba(12, 11, 7, 0.9);
  border-top: 1px solid var(--line-dark);
}
.stat-bar .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.stat-bar > .container > div { display: flex; flex-direction: column; gap: 2px; }
.stat-num {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1.1;
}
.stat-label { font-size: 0.85rem; color: rgba(243, 238, 224, 0.7); }

/* ---- Page heroes -------------------------------------------------------- */
.page-hero, .safari-hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  display: flex;
  align-items: flex-end;
  min-height: 460px;
}
.page-hero--short { min-height: 340px; }
.safari-hero { min-height: 560px; }
.page-hero > img, .safari-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero::after, .safari-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(18, 16, 11, 0.92) 0%, rgba(18, 16, 11, 0.62) 55%, rgba(18, 16, 11, 0.3) 100%);
}
.page-hero__copy, .safari-hero__copy {
  position: relative;
  z-index: 2;
  padding-top: 72px;
  padding-bottom: 56px;
}
.page-hero__copy h1, .safari-hero__copy h1 { color: var(--on-dark); }
.page-hero__copy .lead, .safari-hero__copy .lead {
  margin-top: 16px;
  color: rgba(243, 238, 224, 0.85);
}

.crumbs { margin-bottom: 18px; font-size: 0.88rem; }
.crumbs a {
  color: rgba(243, 238, 224, 0.75);
  border-bottom: 1px solid rgba(243, 238, 224, 0.4);
  padding-bottom: 2px;
}
.crumbs a:hover { color: #fff; }

.prog-code, .prog-card__code {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.prog-card__code { color: var(--rust); margin-bottom: 8px; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(243, 238, 224, 0.22);
}
.facts > div { flex: 1 1 200px; min-width: 170px; max-width: 460px; }
.facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(243, 238, 224, 0.55);
  margin-bottom: 3px;
}
.facts dd {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--on-dark);
}

/* ---- Services + hover-image treatment --------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.svc {
  background: var(--paper);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s ease;
}
.svc__icon {
  width: 44px; height: 44px;
  display: inline-block;
  margin-bottom: 14px;
  color: var(--rust);
  transition: color .25s ease, transform .25s ease;
}
.svc h3 {
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  transition: color .25s ease;
}
.svc p {
  font-size: 0.95rem;
  position: relative;
  z-index: 2;
  transition: color .25s ease;
}
.svc::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--svc-bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .35s ease, transform .8s ease;
  z-index: -1;
}
.svc::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 27, 19, 0.45) 0%, rgba(30, 27, 19, 0.78) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.svc:hover, .svc:focus-within { color: var(--on-dark); }
.svc:hover h3, .svc:focus-within h3,
.svc:hover p, .svc:focus-within p { color: var(--on-dark); }
.svc:hover .svc__icon, .svc:focus-within .svc__icon {
  color: var(--gold-light);
  transform: translateY(-2px);
}
.svc:hover::before, .svc:focus-within::before {
  opacity: 1; transform: scale(1);
}
.svc:hover::after, .svc:focus-within::after { opacity: 1; }

@media (hover: none) {
  .svc { background: var(--paper); }
  .svc:hover, .svc:focus-within { color: var(--ink); }
  .svc:hover h3, .svc:focus-within h3,
  .svc:hover p, .svc:focus-within p { color: var(--ink-70); }
  .svc:hover::before, .svc:focus-within::before,
  .svc:hover::after, .svc:focus-within::after { opacity: 0; }
}

.svc-long-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}
.svc-long { border-top: 2px solid var(--olive); padding-top: 22px; }
.svc-long h3 { margin-bottom: 12px; }
.svc-long__body p + p { margin-top: 12px; }
.svc-long__body p { font-size: 0.95rem; }

/* ---- Banner / pledge ---------------------------------------------------- */
.pledge {
  position: relative;
  margin-top: 56px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink);
}
.pledge img {
  width: 100%;
  height: clamp(200px, 26vw, 300px);
  object-fit: cover;
  opacity: 0.45;
}
.pledge figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 8%;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  line-height: 1.32;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* ---- Programme cards + carousel ---------------------------------------- */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 28px;
}
.prog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  height: 100%;
}
.section--paper .prog-card { background: #fff; }
.prog-card__media {
  display: block;
  overflow: hidden;
  background: var(--sand);
}
.prog-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.prog-card:hover .prog-card__media img { transform: scale(1.04); }
.prog-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prog-card__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.prog-card__body h3 a:hover { color: var(--rust); }
.prog-card__tag {
  font-size: 0.92rem;
  margin-bottom: 16px;
}
.prog-card__meta {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: 0.85rem;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.prog-card__meta dt { color: var(--ink-45); }
.prog-card__meta dd { color: var(--ink); font-weight: 500; }

/* Resized, more compact carousel cards on the homepage (smaller thumbnail,
   more items visible at once — mirrors a listing-style tour strip). */
.carousel-item { flex: 0 0 calc((100% - 84px) / 4); min-width: 0; }
.carousel-item .prog-card__media img { aspect-ratio: 16 / 9; height: auto; }
.carousel-item .prog-card__body { padding: 16px 16px 18px; }
.carousel-item .prog-card__body h3 { font-size: 1.02rem; margin-bottom: 6px; }
.carousel-item .prog-card__tag {
  font-size: 0.85rem;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.carousel-item .prog-card__meta { font-size: 0.78rem; gap: 3px 12px; padding-top: 10px; }

/* Compact safari listing cards on the main Safaris and Kenya destination pages.
   Keeps the image-led layout but avoids the tall 4:3 thumbnails. */
.safari-list-page .prog-card__media img {
  aspect-ratio: 16 / 9;
  height: auto;
}
.safari-list-page .prog-card__body {
  padding: 16px 16px 18px;
}
.safari-list-page .prog-card__body h3 {
  font-size: 1.04rem;
  margin-bottom: 6px;
}
.safari-list-page .prog-card__tag {
  font-size: 0.86rem;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.safari-list-page .prog-card__meta {
  font-size: 0.78rem;
  gap: 3px 12px;
  padding-top: 10px;
}

/* ---- Tour list rows (safari index — small thumbnail + text) ------------ */
.tour-list { display: grid; gap: 22px; }
.tour-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px;
  align-items: start;
}
.section--paper .tour-row { background: #fff; }
.tour-row__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  align-self: stretch;
}
.tour-row__media img {
  width: 100%;
  height: 100%;
  min-height: 130px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .4s ease;
}
.tour-row:hover .tour-row__media img { transform: scale(1.05); }
.tour-row__body h3 { font-size: 1.1rem; margin: 2px 0 6px; }
.tour-row__body h3 a:hover { color: var(--rust); }
.tour-row__tag { font-size: 0.93rem; margin-bottom: 12px; }
.tour-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 0.85rem;
  color: var(--ink-70);
  margin-bottom: 12px;
}
.tour-row__meta strong { color: var(--ink); font-weight: 600; margin-right: 4px; }

@media (max-width: 620px) {
  .tour-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .tour-row__media img { min-height: 96px; }
  .tour-row__tag { display: none; }
}

.carousel { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.carousel-item {
  scroll-snap-align: start;
}
.carousel-item .prog-card { height: 100%; }
.carousel-nav { display: flex; gap: 8px; }
.cbtn {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cbtn:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.cbtn[disabled] { opacity: .35; cursor: not-allowed; }
.cbtn[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--line); }

/* ---- Split / media ------------------------------------------------------ */
.split-section { padding: 0; border-bottom: none; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
  max-width: none;
}
.split-media { height: 100%; }
.split-media img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.split-copy {
  padding: 72px clamp(28px, 6vw, 84px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
}
.split-copy p { margin-top: 16px; }

/* ---- Overview / lists --------------------------------------------------- */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.overview-main h2 { margin-bottom: 18px; }
.overview-main p + p { margin-top: 15px; }
.overview-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--olive);
  padding: 28px 26px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.overview-side h2 { font-size: 1.3rem; margin-bottom: 16px; }

.ticks, .crosses { display: grid; gap: 11px; margin-top: 18px; }
.ticks li, .crosses li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-70);
  max-width: 62ch;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--olive-light);
  border-bottom: 2px solid var(--olive-light);
  transform: rotate(-45deg);
}
.crosses li::before,
.crosses li::after {
  content: "";
  position: absolute;
  left: 4px; top: 0.72em;
  width: 12px; height: 2px;
  background: var(--rust);
}
.crosses li::before { transform: rotate(45deg); }
.crosses li::after  { transform: rotate(-45deg); }
.section--dark .ticks li, .section--dark .crosses li { color: var(--on-dark-soft); }

/* ---- Itinerary ---------------------------------------------------------- */
.itinerary { display: grid; gap: 0; border-top: 1px solid var(--line); }
.day {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.day-label {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--rust);
  padding-top: 2px;
}
.day-body h3 { margin-bottom: 8px; }
.day-body p { max-width: 74ch; }

/* ---- Lodges ------------------------------------------------------------- */
.lodge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 34px;
}
.lodge-group {
  background: #fff;
  border: 1px solid var(--line);
  padding: 26px 24px 24px;
}
.section:not(.section--paper) .lodge-group { background: var(--paper); }
.lodge-group h3 {
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--line);
}
.tiers { display: grid; gap: 18px; }
.tier h4 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--olive);
  margin-bottom: 7px;
}
.tier ul { display: grid; gap: 5px; }
.tier li { font-size: 0.93rem; color: var(--ink-70); }
.tier a {
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.tier a:hover { color: var(--rust); border-bottom-color: currentColor; }

/* ---- Places & notes ----------------------------------------------------- */
.place-grid, .note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 30px;
}
.place, .note {
  border-top: 2px solid var(--gold);
  padding-top: 18px;
}
.note { border-top-color: var(--olive); }
.place h3, .note h3 { margin-bottom: 8px; }
.place-sub {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rust);
  margin-bottom: 10px;
}
.place p, .note p { font-size: 0.95rem; }

/* ---- Forms -------------------------------------------------------------- */
.form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.form-intro h2 { margin-bottom: 14px; }
.form-pkg {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(243, 238, 224, 0.07);
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--on-dark);
}

.enquiry { display: block; }
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field--pair span { display: flex; flex-direction: column; gap: 6px; }
.field label, .field--pair label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(243, 238, 224, 0.72);
}
.enquiry input, .enquiry select, .enquiry textarea {
  font: inherit;
  font-size: 0.95rem;
  width: 100%;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.enquiry textarea { resize: vertical; min-height: 110px; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus {
  border-color: var(--gold);
}
.field--locked input {
  background: rgba(243, 238, 224, 0.12);
  color: var(--on-dark);
  border-color: rgba(243, 238, 224, 0.3);
  font-weight: 600;
  cursor: default;
}
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.form-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(243, 238, 224, 0.6);
  max-width: 60ch;
}
.form-error {
  margin-top: 16px;
  padding: 11px 14px;
  background: rgba(168, 80, 44, 0.16);
  border-left: 3px solid var(--rust);
  color: #f6ded4;
  font-size: 0.9rem;
}
.form-error[hidden] { display: none; }

/* Light-background form (contact page) */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}
.contact-grid > div > p + p { margin-top: 14px; }
.office {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
}
.office h2 { font-size: 1.2rem; margin-bottom: 6px; }
.office a { color: var(--rust); font-weight: 500; width: fit-content; }
.office a:hover { border-bottom: 1px solid currentColor; }
.office p { font-size: 0.92rem; margin-top: 4px; }

.contact-form-col {
  background: var(--ink);
  color: var(--on-dark);
  padding: 34px 32px 38px;
  border-radius: var(--radius);
}
.contact-form-col h2 { color: var(--on-dark); margin-bottom: 10px; }
.contact-form-col > p { color: var(--on-dark-soft); margin-bottom: 22px; }

/* ---- FAQs --------------------------------------------------------------- */
.faqs { margin-top: 26px; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--rust);
  border-bottom: 2px solid var(--rust);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq p { padding-bottom: 20px; }

/* ---- Contact strip ------------------------------------------------------ */
.strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.strip p { margin-top: 12px; }
.strip-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--on-dark);
  margin-bottom: 16px;
}
.footer-mark { width: 40px; height: 40px; object-fit: contain; flex: none; }

/* The brief: the text under "Kenya Safari Centre" was unreadable — set white. */
.site-footer p { color: #ffffff; }
.footer-about p {
  color: #ffffff;
  font-size: 0.94rem;
  max-width: 42ch;
}
.footer-addr {
  margin-top: 14px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}
.footer-hours { color: rgba(255, 255, 255, 0.85); }

.footer-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  margin-bottom: 8px;
  max-width: none;
}
.footer-col a {
  font-size: 0.92rem;
  color: var(--on-dark-soft);
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.footer-col a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
.footer-hours { font-size: 0.86rem; margin-top: 6px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 0.85rem;
  color: rgba(243, 238, 224, 0.6);
}
.footer-credit a {
  color: var(--gold-light);
  border-bottom: 1px solid rgba(211, 165, 88, 0.5);
}
.footer-credit a:hover { color: #fff; border-bottom-color: #fff; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1040px) {
  .form-wrap, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .overview { grid-template-columns: 1fr; gap: 36px; }
  .overview-side { position: static; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(24, 21, 15, 0.985);
    border-bottom: 1px solid var(--line-dark);
    padding: 14px 28px 26px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .main-nav li { border-bottom: 1px solid var(--line-dark); }
  .main-nav a {
    display: block;
    padding: 14px 0;
    font-size: 1rem;
    border-bottom: none;
  }
  .main-nav a[aria-current="page"] { color: var(--gold-light); }
  .nav-cta { margin-top: 18px; align-self: flex-start; }

  .split { grid-template-columns: 1fr; }
  .split-media img { min-height: 260px; }
  .split-copy { padding: 48px 28px 56px; max-width: none; }
  .section { padding: 64px 0; }
  .slides { min-height: 520px; }
  .slide-copy { padding-bottom: 40px; }
  .hero-controls {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    padding: 26px 28px 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-width: none;
  }
  .hero-controls .dots { justify-content: center; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .container { padding: 0 20px; }
  .header-inner { padding: 0 20px; gap: 12px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 0.98rem; }
  .brand-sub { display: none; }
  .day { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero, .safari-hero { min-height: 400px; }
  .page-hero__copy, .safari-hero__copy { padding-top: 56px; padding-bottom: 44px; }
  .carousel-item { flex-basis: 78%; }
  .carousel-track { padding-left: 20px; padding-right: 20px; }
  .facts { gap: 12px 24px; }
  .contact-form-col { padding: 26px 20px 30px; }
  .svc-grid { grid-template-columns: 1fr; }
  .pledge figcaption { padding: 22px; }
}

@media (max-width: 460px) {
  .field--pair { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .cta-row .btn, .form-actions .btn, .strip-actions .btn { width: 100%; }
}

/* ---- Motion preference -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .carousel-track { scroll-behavior: auto; }
}

/* ---- Print -------------------------------------------------------------- */
@media print {
  .site-header, .hero-controls, .carousel-nav, .enquiry, .strip-actions, .skip-link { display: none; }
  body { background: #fff; }
  .section--dark { background: #fff; color: #000; }
}


/* ---- Image-card featured safaris (image top, Quick View + Read More) --- */
.prog-card--feat {
  display: flex; flex-direction: column; background: #ffffff;
  border: 1px solid var(--line); border-radius: var(--radius);
  height: 100%; overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.prog-card--feat:hover {
  box-shadow: 0 18px 40px -22px rgba(18,16,11,.32);
  transform: translateY(-2px);
}
.prog-card--feat .prog-card__media { display: block; overflow: hidden; }
.prog-card--feat .prog-card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .55s ease; display: block;
}
.prog-card--feat:hover .prog-card__media img { transform: scale(1.04); }
.prog-card--feat .prog-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.prog-card--feat .prog-card__code { color: var(--rust); font-weight: 600; font-size: .74rem; letter-spacing: .1em; margin-bottom: 2px; }
.prog-card--feat .prog-card__body h3 { font-size: 1.08rem; line-height: 1.25; margin-bottom: 4px; }
.prog-card--feat .prog-card__body h3 a { color: var(--ink); }
.prog-card--feat .prog-card__body h3 a:hover { color: var(--rust); }
.prog-card--feat .prog-card__tag { font-size: .92rem; color: var(--ink-70); margin-bottom: 6px; }
.prog-card--feat .prog-card__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: .83rem; padding-top: 10px;
  border-top: 1px solid var(--line); margin-top: auto;
}
.prog-card--feat .prog-card__meta dt { color: var(--ink-45); }
.prog-card--feat .prog-card__meta dd { color: var(--ink); font-weight: 500; }
.prog-card__cta {
  display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px;
}
.card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; font-weight: 600; font-size: .9rem; line-height: 1;
  border-radius: var(--radius); border: 1px solid transparent;
  color: #ffffff; text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.card-btn--quick { background: var(--gold); }
.card-btn--quick:hover { background: var(--gold-light); color: #ffffff; }
.card-btn--read { background: var(--olive); }
.card-btn--read:hover { background: var(--olive-light); color: #ffffff; }

/* ---- Destinations submenu ----------------------------------------------- */
.main-nav li.has-submenu { position: relative; }
.main-nav .submenu {
  position: absolute; top: 100%; left: -10px; min-width: 180px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-top: 2px solid var(--gold);
  padding: 10px 0; display: none; z-index: 30;
  box-shadow: 0 18px 40px -24px rgba(18,16,11,.35);
}
.main-nav li.has-submenu:hover > .submenu,
.main-nav li.has-submenu:focus-within > .submenu { display: block; }
.main-nav .submenu li { border: 0 !important; }
.main-nav .submenu a {
  color: var(--ink) !important; padding: 10px 18px !important;
  font-size: .92rem; font-weight: 500; border-bottom: 0 !important;
  display: block;
}
.main-nav .submenu a:hover { color: var(--rust) !important; }
.main-nav .submenu a[aria-current="page"] { color: var(--rust) !important; font-weight: 600; }
@media (max-width: 900px) {
  .main-nav .submenu {
    position: static; background: transparent; border: 0;
    box-shadow: none; padding: 0 0 0 14px; display: block;
  }
  .main-nav .submenu a {
    color: rgba(243, 238, 224, 0.78) !important;
    padding: 8px 0 !important; font-size: .95rem;
  }
  .main-nav .submenu a:hover { color: #ffffff !important; }
  .main-nav .submenu a[aria-current="page"] { color: var(--gold-light) !important; }
}

/* ---- Footer credit centred in same row --------------------------------- */
.footer-bottom {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px;
  padding-top: 22px; font-size: 0.85rem;
  text-align: center;
  color: rgba(243, 238, 224, 0.7);
}
.footer-bottom > span { color: rgba(243, 238, 224, 0.7); }
.site-credit {
  margin: 0; color: rgba(243, 238, 224, 0.7);
  font-size: 0.82rem; letter-spacing: 0.02em;
}
.site-credit a { color: var(--gold-light); border-bottom: 1px solid rgba(211, 165, 88, 0.5); }
.site-credit a:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* ---- Featured destinations (homepage) ----------------------------------- */
.destination-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rust);
  margin-bottom: 12px;
}
.destination-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.destination-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.destination-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(30,27,19,0.35);
}
.destination-card img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform .5s ease;
}
.destination-card:hover img { transform: scale(1.04); }
.destination-card__body {
  padding: 15px 16px 17px;
}
.destination-card__body h3 {
  margin-bottom: 6px;
  font-size: 1.15rem;
}
.destination-card__body p { font-size: 0.86rem; line-height: 1.55; }
.destination-card__cta {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.destination-card__cta span {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--olive);
  letter-spacing: 0.01em;
}
.destination-card__cta span::after { content: ' →'; margin-left: 4px; }

/* Homepage featured safaris: one desktop row, responsive card widths */
@media (max-width: 1100px) {
  .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .carousel-item { flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 600px) {
  .carousel-item { flex-basis: 82%; }
}

/* ==========================================================================
   Homepage revamp — warm ivory / sand / maroon editorial layer
   Added blocks only. Existing selectors above are left untouched so every
   inner page keeps its current look.
   ========================================================================== */

:root {
  --ivory: #fdfaf3;
  --sand-warm: #f4ecdc;
  --sand-deep: #e8dcc4;
  --maroon: #963a4f;
  --maroon-dark: #7b2c3e;
  --maroon-soft: rgba(150, 58, 79, 0.08);
  --earth: #6b5a45;
  --hair: rgba(107, 90, 69, 0.18);
  --shadow-soft: 0 18px 44px -26px rgba(58, 42, 30, 0.45);
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

/* Warmer page ground for the homepage only */
body.home {
  background: var(--ivory);
  color: #2b2620;
}
body.home p { color: #5c5348; }
body.home .section { border-bottom: 1px solid var(--hair); }
body.home .section--paper { background: var(--sand-warm); }
body.home .section--dark {
  background: #2c2620;
  color: var(--ivory);
}
body.home .section--dark p { color: rgba(253, 250, 243, 0.82); }

/* ---- Header: wider mark, elegant lockup, generous CTA ------------------- */
.site-header {
  background: rgba(253, 250, 243, 0.94);
  color: #2b2620;
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(10px);
}
.header-inner { gap: 30px; padding: 0 32px; min-height: 88px; }
.brand { gap: 16px; }
.brand-mark { width: 58px; height: 58px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2b2620;
  line-height: 1.1;
}
.brand-sub {
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: var(--maroon);
  font-weight: 600;
  margin-top: 3px;
}
/* Homepage keeps the brand-sub brand colour exactly as specified */
body.home .brand-sub { color: #963a4f; }

.main-nav ul { gap: 24px; }
.main-nav a {
  color: #443c33;
  font-size: 0.93rem;
  letter-spacing: 0.01em;
}
.main-nav a:hover { color: var(--maroon); }
.main-nav a[aria-current="page"] { color: var(--maroon); border-bottom-color: var(--maroon); }
.nav-cta {
  background: var(--maroon);
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: #fff;
  margin-right: 4px;
  box-shadow: 0 10px 24px -14px rgba(150, 58, 79, 0.9);
}
.nav-cta:hover { background: var(--maroon-dark); }
.lang-switch { color: rgba(68, 60, 51, 0.6); }
.lang-switch a:hover { color: var(--maroon); }
.lang-switch a[aria-current="true"] { color: var(--maroon); }
.nav-toggle { border-color: var(--hair); color: #443c33; }

.submenu {
  background: var(--ivory);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-soft);
}
.submenu a { color: #443c33; }
.submenu a:hover { color: var(--maroon); background: var(--maroon-soft); }

@media (max-width: 900px) {
  .header-inner { min-height: 74px; padding: 0 20px; gap: 14px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-name { font-size: 1.05rem; }
  .brand-sub { letter-spacing: 0.05em; }
  .main-nav { background: var(--ivory); }
  .nav-cta { padding: 12px 22px; }
}

/* ---- Cinematic hero ----------------------------------------------------- */
.hero .slides { min-height: clamp(560px, 84vh, 820px); }
.hero .slide { transition: opacity 1s ease; }
.hero .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hero .slide.is-active img {
  animation: kenburns 7s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .slide.is-active img { animation: none; transform: scale(1.01); }
}
.hero .slide::after {
  background:
    linear-gradient(to right,
      rgba(28, 20, 16, 0.86) 0%, rgba(28, 20, 16, 0.6) 46%, rgba(28, 20, 16, 0.14) 100%),
    linear-gradient(to top,
      rgba(28, 20, 16, 0.78) 0%, rgba(28, 20, 16, 0.05) 42%);
}
.hero .slide-copy { align-items: flex-end; padding-bottom: 210px; }
.hero .slide-copy .container { max-width: 1160px; }
.hero .eyebrow {
  color: #e7c98f;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  font-size: 0.74rem;
}
.hero .slide-copy h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  letter-spacing: -0.005em;
  max-width: 20ch;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.5);
}
.hero .slide-lead {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  max-width: 52ch;
  color: rgba(253, 250, 243, 0.9);
}
.hero-controls { bottom: 92px; }
.hero .btn--primary {
  background: var(--maroon);
  border-radius: 999px;
  padding: 15px 32px;
  letter-spacing: 0.01em;
  font-size: 0.86rem;
}
.hero .btn--primary:hover { background: var(--maroon-dark); }
.hero .btn--ghost {
  border-radius: 999px;
  padding: 15px 32px;
  letter-spacing: 0.01em;
  font-size: 0.86rem;
  border-color: rgba(253, 250, 243, 0.55);
}

/* ---- Stat band (dark, under the hero) ---------------------------------- */
.stat-bar { background: #2c2620; }
.stat-bar .container { gap: 26px; padding-top: 26px; padding-bottom: 26px; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: #e7c98f;
  letter-spacing: 0.02em;
}
.stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: rgba(253, 250, 243, 0.72);
}
.stat-note {
  padding: 0 0 22px;
  background: #2c2620;
}
.stat-note p {
  font-size: 0.78rem;
  color: rgba(253, 250, 243, 0.55);
  max-width: none;
  margin: 0;
}

/* ---- Section furniture -------------------------------------------------- */
body.home .section { padding: 92px 0; }
body.home .section-head h2 { max-width: 26ch; }
.rule {
  width: 74px; height: 3px;
  background: var(--maroon);
  border: 0;
  margin: 0 0 26px;
}
.section-head .rule { margin-bottom: 22px; }
body.home .eyebrow {
  color: var(--maroon);
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  font-size: 0.74rem;
}
body.home h2 { font-family: var(--font-display); letter-spacing: 0.005em; }
body.home h3 { font-family: var(--font-display); font-weight: 600; }

/* ---- Trust panel (replaces the old banner) ----------------------------- */
.trust {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.trust__media { position: relative; min-height: 420px; }
.trust__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.trust__body { padding: 46px 48px; }
.trust__body h2 { margin-bottom: 16px; }
.trust-list { display: grid; gap: 18px; margin-top: 26px; }
.trust-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.trust-list svg {
  width: 26px; height: 26px;
  color: var(--maroon);
  margin-top: 3px;
}
.trust-list h3 { font-size: 1.02rem; margin-bottom: 4px; }
.trust-list p { font-size: 0.92rem; }
@media (max-width: 860px) {
  .trust { grid-template-columns: 1fr; }
  .trust__media { min-height: 260px; }
  .trust__body { padding: 32px 24px; }
}

/* ---- Destination explorer ---------------------------------------------- */
.dest-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.dest-tabs a {
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  background: #fff;
  color: #443c33;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dest-tabs a:hover,
.dest-tabs a[aria-current="true"] {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
}
.park-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.park {
  position: relative;
  display: block;
  min-height: 260px;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #2c2620;
}
.park img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
  z-index: -2;
}
.park::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(24, 17, 13, 0.9) 0%, rgba(24, 17, 13, 0.45) 48%, rgba(24, 17, 13, 0.12) 100%);
  z-index: -1;
}
.park:hover img { transform: scale(1.06); }
.park__body {
  position: relative;
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 22px 20px;
}
.park__body h3 {
  font-size: 1.12rem;
  color: #fff;
  margin-bottom: 6px;
}
.park__body p {
  font-size: 0.88rem;
  color: rgba(253, 250, 243, 0.88);
  max-width: 34ch;
}
.park__tag {
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: #e7c98f;
  margin-bottom: 8px;
}
.dest-ext {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.dest-ext article {
  background: #fff;
  border: 1px solid var(--hair);
  padding: 20px 22px;
}
.dest-ext h3 { font-size: 1rem; margin-bottom: 6px; }
.dest-ext h3 a:hover { color: var(--maroon); }
.dest-ext p { font-size: 0.88rem; }

/* ---- Safari styles ----------------------------------------------------- */
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}
.style-card {
  background: #fff;
  border: 1px solid var(--hair);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.style-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.style-card svg { width: 30px; height: 30px; color: var(--maroon); }
.style-card h3 { font-size: 1.04rem; }
.style-card p { font-size: 0.9rem; }
.style-card .from {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--earth);
}

/* ---- Traveller questions (US / DE market) ------------------------------ */
.qa { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.qa details {
  border-bottom: 1px solid var(--hair);
  padding: 20px 0;
}
.qa summary {
  font-family: var(--font-display);
  font-size: 1.04rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  color: #2b2620;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--maroon); font-size: 1.2rem; line-height: 1; }
.qa details[open] summary::after { content: "–"; }
.qa .qa-body { padding-top: 14px; }
.qa .qa-body p + p { margin-top: 12px; }

/* ---- TripAdvisor block ------------------------------------------------- */
.ta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  background: var(--sand-warm);
  border: 1px solid var(--hair);
  border-left: 5px solid #00aa6c;
  padding: 34px 38px;
}
.ta h2 { max-width: 30ch; margin-bottom: 12px; }
.ta p { max-width: 62ch; }
.ta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--ta {
  background: #00aa6c;
  color: #fff;
  border-radius: 999px;
  padding: 15px 30px;
  letter-spacing: 0.04em;
}
.btn--ta:hover { background: #008f5c; }
.ta-note { font-size: 0.8rem; margin-top: 14px; color: #6b5a45; }
@media (max-width: 860px) { .ta { grid-template-columns: 1fr; padding: 26px 22px; } }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  background: #2c2620;
  color: rgba(253, 250, 243, 0.82);
  border-top: 4px solid var(--maroon);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 62px;
  padding-bottom: 42px;
}
.site-footer h2 {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: #e7c98f;
  margin-bottom: 16px;
  max-width: none;
}
.site-footer a { color: rgba(253, 250, 243, 0.82); display: block; padding: 4px 0; font-size: 0.92rem; }
.site-footer a:hover { color: #fff; }
.footer-about p { font-size: 0.92rem; color: rgba(253, 250, 243, 0.7); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-mark { width: 46px; height: 46px; object-fit: contain; }
.footer-brand span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ivory);
}
.footer-addr { margin-top: 12px; font-size: 0.88rem; }
.footer-hours { font-size: 0.84rem; color: rgba(253, 250, 243, 0.6); margin-top: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(253, 250, 243, 0.14);
  padding-top: 20px;
  padding-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(253, 250, 243, 0.6);
}
.footer-bottom a { display: inline; padding: 0; font-size: 0.82rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Language / market strip ------------------------------------------ */
.market-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.market-strip article {
  border: 1px dashed var(--hair);
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.6);
}
.market-strip h3 { font-size: 0.98rem; margin-bottom: 8px; }
.market-strip p { font-size: 0.88rem; }
.market-strip a { color: var(--maroon); font-weight: 600; font-size: 0.88rem; }
.todo { color: var(--maroon); font-weight: 600; }

/* ==========================================================================
   Revamp pass — readability, sentence case, one button style, one header
   Everything below intentionally comes last so it wins over earlier rules.
   ========================================================================== */
:root {
  --ink-brown: #2c2620;          /* the site's dark brown: footer, stat band, hero scrim */
  --btn-radius: 6px;
}

/* ---- Buttons: one shape everywhere (no pills, no circles) ---------------- */
.btn,
.btn--ta,
.hero .btn--primary,
.hero .btn--ghost,
.nav-cta {
  border-radius: var(--btn-radius);
  letter-spacing: 0.01em;
  font-weight: 600;
  white-space: nowrap;
}
.btn--primary,
.hero .btn--primary { background: var(--maroon); color: #fff; }
.btn--primary:hover,
.hero .btn--primary:hover { background: var(--maroon-dark); color: #fff; }
.dest-tabs a { border-radius: var(--btn-radius); }

/* ---- Header: the Plan a Safari button ------------------------------------ */
/* Root cause of the unreadable button: ".main-nav a" (dark brown) outranked
   ".nav-cta" (white). Match the specificity so the label is white on maroon. */
.main-nav a.nav-cta {
  flex: none;
  background: var(--maroon);
  color: #fff;
  padding: 12px 26px;
  font-size: 0.95rem;
  line-height: 1.2;
  border: 1px solid var(--maroon);
  box-shadow: none;
  margin-right: 0;
}
.main-nav a.nav-cta:hover { background: var(--maroon-dark); border-color: var(--maroon-dark); color: #fff; }
.main-nav a.nav-cta:focus-visible { outline-color: var(--maroon); outline-offset: 3px; }
.main-nav { flex-wrap: nowrap; }
.main-nav ul { flex-wrap: nowrap; }
.main-nav ul a { white-space: nowrap; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  font-size: 1.3rem;
}
.brand-sub,
body.home .brand-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--maroon);
  margin-top: 2px;
}
/* Narrower desktops: drop the tagline before the nav starts to crowd */
@media (max-width: 1240px) {
  .brand-sub { display: none; }
  .header-inner { gap: 20px; }
}

/* ---- Hero: readable on every slide --------------------------------------- */
/* Root cause: slides 2-8 use <p class="hero-title">, which had no styling and
   inherited the dark-brown homepage paragraph colour; the eyebrow was being
   overridden to maroon by "body.home .eyebrow". */
.hero .slide-copy h1,
.hero .slide-copy .hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  max-width: 21ch;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
body.home .hero .eyebrow {
  color: #f0d49b;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
body.home .hero .slide-lead {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  margin-top: 16px;
}

/* Scrim in the site's own dark brown: solid behind the text, easing out to the photo */
.hero .slide::after {
  background:
    linear-gradient(to top,
      rgba(44, 38, 32, 0.97) 0%,
      rgba(44, 38, 32, 0.92) 24%,
      rgba(44, 38, 32, 0.68) 46%,
      rgba(44, 38, 32, 0.18) 72%,
      rgba(44, 38, 32, 0) 100%),
    linear-gradient(to right,
      rgba(44, 38, 32, 0.55) 0%,
      rgba(44, 38, 32, 0.2) 55%,
      rgba(44, 38, 32, 0) 100%);
}

/* No more ghosted overlap while slides cross-fade: the copy fades out first,
   then the next slide's copy fades in once the photo has changed. */
.hero .slide-copy { opacity: 0; transition: opacity .3s ease; }
.hero .slide.is-active .slide-copy { opacity: 1; transition: opacity .8s ease .6s; }
@media (prefers-reduced-motion: reduce) {
  .hero .slide-copy,
  .hero .slide.is-active .slide-copy { transition: none; }
}

/* ---- Sentence-case furniture --------------------------------------------- */
body.home .eyebrow,
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.stat-label { font-size: 0.92rem; letter-spacing: 0; }
.stat-num { letter-spacing: 0; }
.park__tag { font-size: 0.82rem; letter-spacing: 0.01em; }
.style-card .from { font-size: 0.86rem; letter-spacing: 0.01em; }
.site-footer h2 { font-size: 1.05rem; letter-spacing: 0; font-weight: 600; }
.footer-brand span { letter-spacing: 0; }
.lang-switch { letter-spacing: 0.02em; }

/* ---- Footer: same on every page ------------------------------------------ */
.site-footer .footer-col p.footer-hours { color: rgba(253, 250, 243, 0.7); }
.site-footer h2.footer-subhead { margin-top: 22px; }

/* ---- Hero controls now live inside .slides so they anchor to the photo,
   not to the whole hero (which also contains the stat band). ------------- */
.hero .hero-controls { bottom: 44px; }
.hero .slide-copy { padding-bottom: 160px; }
.stat-note.container { padding: 0 28px 24px; }
.stat-note p { color: rgba(253, 250, 243, 0.72); font-size: 0.82rem; }
@media (max-width: 900px) {
  .hero .slides { min-height: 700px; }
  .hero .hero-controls {
    position: absolute;
    left: 0; right: 0;
    transform: none;
    bottom: 22px;
    padding: 0 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .hero .slide-copy { padding-bottom: 200px; }
  .stat-note.container { padding: 0 20px 24px; }
}

/* ---- Submenu: readable on the ivory header and mobile panel -------------- */
.main-nav .submenu a:hover,
.main-nav .submenu a[aria-current="page"] { color: var(--maroon) !important; }
.main-nav .submenu a:hover { background: var(--maroon-soft); }
@media (max-width: 900px) {
  .main-nav .submenu a { color: #443c33 !important; }
  .main-nav .submenu a:hover { color: var(--maroon) !important; background: transparent; }
  .main-nav .submenu a[aria-current="page"] { color: var(--maroon) !important; }
  .main-nav li { border-bottom-color: var(--hair); }
}

/* ==========================================================================
   Homepage tweaks: left-side hero gradient, white stats note, bright card text
   ========================================================================== */

/* Hero: gradient comes in from the left only, so the photo stays open on the
   right. A short, light fade at the very bottom keeps the buttons and dots legible. */
body.home .hero .slide::after {
  background:
    linear-gradient(to right,
      rgba(44, 38, 32, 0.92) 0%,
      rgba(44, 38, 32, 0.80) 26%,
      rgba(44, 38, 32, 0.46) 48%,
      rgba(44, 38, 32, 0.12) 66%,
      rgba(44, 38, 32, 0) 80%),
    linear-gradient(to top,
      rgba(44, 38, 32, 0.55) 0%,
      rgba(44, 38, 32, 0) 22%);
}
@media (max-width: 900px) {
  /* Narrow screens: text spans the full width, so keep a fuller scrim */
  body.home .hero .slide::after {
    background:
      linear-gradient(to top,
        rgba(44, 38, 32, 0.94) 0%,
        rgba(44, 38, 32, 0.78) 45%,
        rgba(44, 38, 32, 0.25) 75%,
        rgba(44, 38, 32, 0) 100%);
  }
}

/* Stats footnote: white. ("body.home p" was out-ranking ".stat-note p".) */
body.home .stat-note p { color: #ffffff; }

/* Destination cards: warm cream-yellow description and gold tag/title.
   Same cause as above: "body.home p" (dark brown) beat ".park__body p". */
body.home .park__body h3 { color: #ffffff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
body.home .park__body p { color: #fff3cf; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
body.home .park__body p.park__tag { color: #f3c969; font-weight: 600; }


/* ---- Footer: single bottom line, white address (v4) --------------------- */
.site-footer .footer-addr { color: #ffffff; }
.site-footer .footer-bottom {
  border-top: 1px solid rgba(253, 250, 243, 0.14);
  padding: 18px 0 26px;
  overflow: hidden;
}
.site-footer .footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: nowrap;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(253, 250, 243, 0.7);
}
.site-footer .footer-cell { flex: 1 1 0; min-width: 0; }
.site-footer .footer-centre { text-align: center; }
.site-footer .footer-right { text-align: right; white-space: nowrap; }
.site-footer .footer-left a,
.site-footer .footer-centre,
.site-footer .footer-right a {
  color: rgba(253, 250, 243, 0.92);
  text-decoration: none;
  border-bottom: 0;
}
.site-footer .footer-left a:hover,
.site-footer .footer-right a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 820px) {
  .site-footer .footer-bottom-row { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .site-footer .footer-cell { flex: 1 1 100%; text-align: center !important; white-space: normal; }
}
/* ---- Homepage TripAdvisor line ----------------------------------------- */
.review-line { text-align: center; padding: 22px 16px; background: var(--paper, #f7f2e6); border-top: 1px solid rgba(0,0,0,.06); }
.review-line a { font-weight: 600; color: var(--rust-dark, #8a3b12); text-decoration: none; }
.review-line a:hover { text-decoration: underline; }

/* ---- About page --------------------------------------------------------- */
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.about-photos figure { margin: 0; }
.about-photos img { width: 100%; height: auto; border-radius: 6px; display: block; }
.about-photos figcaption { font-size: .88rem; color: rgba(0,0,0,.6); margin-top: 8px; }
@media (max-width: 700px) { .about-photos { grid-template-columns: 1fr; } }

/* ---- Mobile hero: show the full picture, no cropping -------------------- */
/* On phones the slideshow keeps the whole frame visible (object-fit: contain)
   instead of cropping the sides of the photo. The dark stage colour fills any
   letterbox area so the slide stays cinematic. */
@media (max-width: 760px) {
  .hero .slides {
    display: grid;
    min-height: 0;
    height: auto;
  }
  .hero .slide {
    grid-area: 1 / 1;
    position: relative;
  }
  .hero .slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 74vh;
    object-fit: contain;
    background: #12100b;
    transform: none !important;
    animation: none !important;
  }
  .hero .slide::after {
    background: linear-gradient(to top,
      rgba(18, 16, 11, 0.9) 0%, rgba(18, 16, 11, 0.35) 40%, rgba(18, 16, 11, 0) 68%);
  }
  .hero .slide-copy {
    align-items: flex-end;
    padding-bottom: 132px;
  }
  .hero .slide-copy h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .hero .slide-lead { font-size: 0.95rem; }
  .hero .eyebrow { font-size: 0.7rem; }
  .hero .btn--primary, .hero .btn--ghost { padding: 12px 24px; }
  .hero .hero-controls {
    left: 0; right: 0;
    transform: none;
    bottom: 34px;
    justify-content: center;
    gap: 14px;
    padding: 0 20px;
  }
  .hero .hero-controls .dots { justify-content: center; }
  .hero .hero-controls .cta-row { gap: 10px; }
  /* Deeper page heroes: keep the top-centre of each photo in frame on phones */
  .page-hero > img, .safari-hero > img { object-position: center 40%; }
}

/* ---- Premium cards ------------------------------------------------------- */
.prog-card, .place, .note {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(44, 38, 32, 0.06), 0 10px 28px rgba(44, 38, 32, 0.10);
  transition: transform .35s ease, box-shadow .35s ease;
}
.park {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(18, 16, 11, 0.14), 0 14px 34px rgba(18, 16, 11, 0.18);
  transition: transform .35s ease, box-shadow .35s ease;
}
@media (hover: hover) {
  .prog-card:hover, .place:hover, .note:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(44, 38, 32, 0.08), 0 24px 48px rgba(44, 38, 32, 0.17);
  }
  .park:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 14px rgba(18, 16, 11, 0.18), 0 30px 56px rgba(18, 16, 11, 0.26);
  }
}
.prog-card__media img, .park img { filter: saturate(1.05); }
@media (prefers-reduced-motion: reduce) {
  .prog-card, .park, .place, .note { transition: none; }
}

/* ==========================================================================
   Photo focus updates
   ========================================================================== */

/* Hero slide 1 (group photo with the two safari vehicles).
   Desktop: whole group in frame, nudged slightly right.
   Tablet: portrait-ish frame, anchor right so the guide in the white cap is in view.
   Phone: the site normally letterboxes hero photos (object-fit: contain). This
   slide is the exception: it is cropped to the right-hand side so the guide in
   the white cap, and the guest beside him, fill the frame. */
.hero .slide img.hero-img--group { object-position: 58% 50%; }
@media (max-width: 900px) {
  .hero .slide img.hero-img--group { object-position: 98% 50%; }
}
@media (max-width: 760px) {
  .hero .slide img.hero-img--group {
    object-fit: cover;
    object-position: 96% 50%;
  }
}

/* "Why trust us" photo: keep the two crouching guides as the focal point */
.trust__media img.trust-img--guides { object-position: 50% 78%; }
@media (max-width: 860px) {
  .trust__media img.trust-img--guides { object-position: 50% 82%; }
}

/* Nine hero slides: slimmer progress dots on small screens so the row never
   spills past the edge of the phone */
@media (max-width: 600px) {
  .dots { gap: 6px; max-width: 100%; }
  .dots button { width: 26px; }
}

/* ==========================================================================
   Mobile hero v2 (phones only, <= 760px). Desktop and tablet are untouched.
   Each photo is shown whole, scaled to the screen width at its own aspect
   ratio (no cropping), with the headline and buttons stacked beneath it on
   the dark stage instead of sitting over the picture. Slide 1 is no longer
   cropped, so the guide on the far right of the group is always in frame.
   ========================================================================== */
@media (max-width: 760px) {
  .hero .slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #12100b;
  }
  .hero .slide img,
  .hero .slide img.hero-img--group {
    flex: 0 0 auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .hero .slide::after { display: none; }
  .hero .slide-copy {
    position: static;
    inset: auto;
    display: block;
    padding: 20px 0 168px;
  }
  .hero .slide-copy .container { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================================
   Mobile header: keep logo, EN/DE and the menu button all on screen.
   (The brand name was wide enough to push the menu button off the edge,
   so the page had to be dragged sideways to find it.) Phones only.
   ========================================================================== */
@media (max-width: 600px) {
  .header-inner { padding: 0 14px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; flex: 1 1 auto; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .head-right { flex: 0 0 auto; gap: 8px; margin-left: auto; }
  .nav-toggle { flex: 0 0 auto; width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  .brand-name { font-size: 0.92rem; }
  .brand-mark { width: 32px; height: 32px; }
  .lang-switch { font-size: 0.74rem; gap: 3px; }
}

/* Stacked split sections: let long words (German) wrap instead of widening the page */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-copy, .split-media { min-width: 0; }
  .split-copy h2, .split-copy p { overflow-wrap: anywhere; hyphens: auto; }
}

/* "Why trust us" block: same long-word safeguard on small phones */
@media (max-width: 860px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust__media, .trust__body { min-width: 0; }
  .trust__body, .trust-list { overflow-wrap: anywhere; hyphens: auto; }
}