/* ==========================================================================
   BAHE Safaris - website styles
   Sits on top of Bootstrap 5.3. Sections follow the order of the page.
   ========================================================================== */

/* 1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bh-ink: #1e1b16;
  --bh-body: #3b372f;
  --bh-stone: #6b6457;
  --bh-forest: #22392c;
  --bh-forest-2: #2f4d3b;
  --bh-forest-3: #1a2d22;
  --bh-ochre: #c9822e;
  --bh-ochre-soft: #f3e3cc;
  --bh-clay: #b4512d;
  --bh-clay-dark: #963f20;
  --bh-sand: #f4ede0;
  --bh-cream: #fbf8f2;
  --bh-line: #e5dccc;
  --bh-ocean: #2b6e74;
  --bh-white: #fff;

  --bh-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --bh-font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --bh-radius: 6px;
  --bh-radius-lg: 14px;
  --bh-shadow: 0 1px 2px rgba(30, 27, 22, .06), 0 8px 24px -12px rgba(30, 27, 22, .18);
  --bh-shadow-lg: 0 24px 48px -24px rgba(30, 27, 22, .35);
  --bh-header-h: 78px;

  --bs-body-font-family: var(--bh-font-body);
  --bs-body-color: var(--bh-body);
  --bs-body-bg: var(--bh-cream);
  --bs-link-color: var(--bh-clay);
  --bs-link-color-rgb: 180, 81, 45;
  --bs-link-hover-color: var(--bh-clay-dark);
  --bs-link-hover-color-rgb: 150, 63, 32;
  --bs-border-color: var(--bh-line);
  --bs-emphasis-color: var(--bh-ink);
  --bs-secondary-color: var(--bh-stone);
}

/* 2. Base & type scale
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bh-header-h) + 72px); }
body {
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .display-title {
  font-family: var(--bh-font-display);
  color: var(--bh-ink);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
}
h1, .h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.05; }
h2, .h2 { font-size: clamp(1.95rem, 1.35rem + 2.1vw, 3.1rem); line-height: 1.1; }
h3, .h3 { font-size: clamp(1.3rem, 1.12rem + .7vw, 1.7rem); line-height: 1.25; }
h4, .h4 { font-size: 1.2rem; line-height: 1.35; }
h5, .h5 { font-family: var(--bh-font-body); font-size: 1rem; font-weight: 700; color: var(--bh-ink); letter-spacing: 0; }
.lead { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); line-height: 1.6; color: var(--bh-body); font-weight: 400; }
small, .small { font-size: .875rem; }
.text-stone { color: var(--bh-stone) !important; }
.text-ochre { color: var(--bh-ochre) !important; }
.text-clay { color: var(--bh-clay) !important; }
.text-forest { color: var(--bh-forest) !important; }
.fw-medium { font-weight: 500 !important; }
em.serif, .serif-italic { font-family: var(--bh-font-display); font-style: italic; font-weight: 400; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bh-ochre);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow.no-rule::before { display: none; }

::selection { background: var(--bh-ochre-soft); color: var(--bh-ink); }
img { max-width: 100%; }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--bh-ochre); outline-offset: 2px; }

.container-wide { max-width: var(--bh-wide, 1400px); }
.section { padding-block: clamp(3rem, 2.25rem + 2.5vw, 5rem); }
.section-sm { padding-block: clamp(2.25rem, 1.75rem + 1.5vw, 3.25rem); }
.bg-sand { background: var(--bh-sand); }
.bg-cream { background: var(--bh-cream); }
.bg-forest { background: var(--bh-forest); color: rgba(255, 255, 255, .82); }
.bg-forest h1, .bg-forest h2, .bg-forest h3, .bg-forest h4, .bg-forest h5 { color: #fff; }
.bg-forest .text-stone { color: rgba(255, 255, 255, .62) !important; }
.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.section-head.text-center { margin-inline: auto; }
.section-head p { color: var(--bh-stone); }
.rule { border: 0; border-top: 1px solid var(--bh-line); opacity: 1; margin: 0; }

/* 3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .72rem;
  --bs-btn-font-size: .95rem;
  --bs-btn-border-radius: var(--bh-radius);
  letter-spacing: .01em;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: .9rem; --bs-btn-font-size: 1rem; }
.btn-sm { --bs-btn-padding-x: .9rem; --bs-btn-padding-y: .45rem; --bs-btn-font-size: .85rem; }
.btn-clay {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bh-clay); --bs-btn-border-color: var(--bh-clay);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bh-clay-dark); --bs-btn-hover-border-color: var(--bh-clay-dark);
  --bs-btn-active-bg: var(--bh-clay-dark); --bs-btn-active-border-color: var(--bh-clay-dark); --bs-btn-active-color: #fff;
}
.btn-forest {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bh-forest); --bs-btn-border-color: var(--bh-forest);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bh-forest-3); --bs-btn-hover-border-color: var(--bh-forest-3);
  --bs-btn-active-bg: var(--bh-forest-3); --bs-btn-active-color: #fff;
}
.btn-outline-ink {
  --bs-btn-color: var(--bh-ink); --bs-btn-border-color: rgba(30, 27, 22, .3);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bh-ink); --bs-btn-hover-border-color: var(--bh-ink);
  --bs-btn-active-bg: var(--bh-ink); --bs-btn-active-color: #fff;
}
.btn-ghost-light {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-color: var(--bh-ink); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: #fff; --bs-btn-active-color: var(--bh-ink);
}
.btn-whatsapp {
  --bs-btn-color: #fff; --bs-btn-bg: #1f8f4e; --bs-btn-border-color: #1f8f4e;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #187540; --bs-btn-hover-border-color: #187540;
}
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none; color: var(--bh-clay);
}
.link-arrow i { transition: transform .2s; }
.link-arrow:hover i { transform: translateX(4px); }

/* 4. Top bar & header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--bh-forest-3);
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
  line-height: 1;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .container-wide { min-height: 38px; }
.topbar i { font-size: 1rem; opacity: .8; vertical-align: -2px; }
.topbar .clock { font-variant-numeric: tabular-nums; }
.topbar .topbar-login { padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .22); font-weight: 600; white-space: nowrap; }
@media (max-width: 575.98px) { .topbar .container-wide { gap: .5rem; } .topbar .topbar-login { min-height: 38px; padding-left: .6rem; } .topbar .d-flex.gap-3 { gap: .65rem !important; } }

.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(251, 248, 242, .94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-color: var(--bh-line); box-shadow: 0 6px 24px -18px rgba(30, 27, 22, .45); }
.site-header .navbar { min-height: var(--bh-header-h); padding-block: 0; }

/* Transparent header over the photo hero */
.has-overlay-header .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; }
.has-overlay-header .site-header:not(.is-scrolled) .nav-link,
.has-overlay-header .site-header:not(.is-scrolled) .brand-name,
.has-overlay-header .site-header:not(.is-scrolled) .navbar-toggler { color: #fff; }
.has-overlay-header .site-header:not(.is-scrolled) .brand-tag { color: rgba(255, 255, 255, .75); }
.has-overlay-header .site-header { position: fixed; left: 0; right: 0; top: 38px; }
.has-overlay-header .site-header.is-scrolled { top: 0; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--bh-font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: .06em; color: var(--bh-ink); }
.brand-tag { font-size: .62rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--bh-stone); margin-top: .3rem; }

.site-header .nav-link {
  font-size: .95rem; font-weight: 500; color: var(--bh-ink);
  padding: .5rem .85rem !important; position: relative;
}
.site-header .nav-link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 1.5px;
  background: var(--bh-ochre); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-header .nav-link:hover::after, .site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .dropdown-toggle::after { display: none; }
.site-header .nav-link .ti-chevron-down { font-size: .8rem; margin-left: .15rem; opacity: .7; }

.mega-menu {
  border: 1px solid var(--bh-line); border-radius: var(--bh-radius-lg);
  box-shadow: var(--bh-shadow-lg); padding: 1.5rem; margin-top: .5rem !important;
  background: var(--bh-cream); min-width: 560px;
}
.mega-menu.mega-sm { min-width: 300px; }
.mega-menu h6 {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bh-stone);
  font-weight: 600; margin-bottom: .75rem;
}
.mega-link {
  display: flex; gap: .75rem; padding: .55rem .6rem; border-radius: var(--bh-radius);
  text-decoration: none; color: var(--bh-ink); align-items: flex-start;
}
.mega-link:hover { background: var(--bh-sand); color: var(--bh-ink); }
.mega-link i { font-size: 1.25rem; color: var(--bh-ochre); margin-top: .1rem; }
.mega-link strong { display: block; font-size: .93rem; font-weight: 600; line-height: 1.3; }
.mega-link span { display: block; font-size: .8rem; color: var(--bh-stone); line-height: 1.4; }
.mega-feature {
  position: relative; border-radius: var(--bh-radius); overflow: hidden; display: block; min-height: 100%;
  color: #fff; text-decoration: none;
}
.mega-feature img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mega-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 25, 18, .85), transparent 60%); }
.mega-feature div { position: relative; z-index: 1; padding: 1rem; margin-top: auto; }
.mega-feature { display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; }
.mega-feature strong { font-family: var(--bh-font-display); font-size: 1.2rem; font-weight: 500; display: block; }
.mega-feature span { font-size: .8rem; opacity: .85; }

@media (min-width: 1200px) {
  .site-header .dropdown:hover > .dropdown-menu { display: block; }
  .site-header .dropdown > .dropdown-menu { top: 100%; }
}

@media (max-width: 1199.98px) {
  .has-overlay-header .site-header, .site-header { background: var(--bh-cream) !important; backdrop-filter: none !important; }
  .has-overlay-header .site-header .nav-link,
  .has-overlay-header .site-header .brand-name,
  .has-overlay-header .site-header .navbar-toggler { color: var(--bh-ink) !important; }
  .has-overlay-header .site-header .brand-tag { color: var(--bh-stone) !important; }
  .site-header .navbar-collapse {
    max-height: calc(100vh - var(--bh-header-h)); overflow-y: auto; padding-bottom: 1.25rem;
  }
  .site-header .nav-link { font-size: 1.05rem; padding: .7rem 0 !important; border-bottom: 1px solid var(--bh-line); }
  .site-header .nav-link::after { display: none; }
  .mega-menu { min-width: 0; box-shadow: none; border: 0; padding: .5rem 0; background: transparent; }
  .mega-feature { display: none; }
}
.navbar-toggler { border: 0; font-size: 1.6rem; padding: .25rem; color: var(--bh-ink); }
.navbar-toggler:focus { box-shadow: none; }

/* 5. Heroes
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: min(100vh, 920px); display: flex; align-items: flex-end;
  color: #fff; isolation: isolate; overflow: hidden; background: var(--bh-forest-3);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media img { animation: slow-zoom 22s ease-out both; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 20, 15, .55) 0%, rgba(14, 20, 15, 0) 28%),
    linear-gradient(0deg, rgba(14, 20, 15, .82) 0%, rgba(14, 20, 15, .25) 55%, rgba(14, 20, 15, .05) 100%);
}
.hero h1 { color: #fff; max-width: 14ch; }
.hero .lead { color: rgba(255, 255, 255, .88); max-width: 40rem; }
.hero .eyebrow { color: #f0c58b; }
.hero-inner { width: 100%; padding-top: 160px; padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.hero-caption {
  position: absolute; right: 1.25rem; bottom: 1rem; font-size: .72rem; color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
}
.hero-caption a { color: inherit; }
@keyframes slow-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.trip-finder {
  background: var(--bh-cream); border-radius: var(--bh-radius-lg); box-shadow: var(--bh-shadow-lg);
  padding: .65rem; color: var(--bh-body); margin-top: 2.5rem;
}
.trip-finder .form-label {
  display: block; text-align: center;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--bh-stone);
  margin: 0 0 .15rem;
}
.trip-finder .finder-field {
  padding: .55rem 1rem; border-right: 1px solid var(--bh-line); border-radius: var(--bh-radius);
  transition: background-color .2s;
}
.trip-finder .finder-field:hover,
.trip-finder .finder-field:focus-within { background: var(--bh-sand); }
.trip-finder .form-select {
  border: 0; padding: .1rem 1.75rem; background-color: transparent; font-weight: 600; color: var(--bh-ink);
  font-size: 1rem; box-shadow: none; background-position: right .25rem center; cursor: pointer;
  text-align: center; text-align-last: center;
}
.trip-finder .form-select:focus { box-shadow: none; outline: none; }
.trip-finder .form-select option {
  text-align: center; font-weight: 500; color: var(--bh-ink); background: #fff; padding: .5rem;
}
.trip-finder .form-select option:checked { background: var(--bh-ochre-soft); font-weight: 700; }
.trip-finder .btn { height: 100%; min-height: 58px; }
@media (max-width: 991.98px) {
  .trip-finder .finder-field { border-right: 0; border-bottom: 1px solid var(--bh-line); }
}

.page-hero {
  position: relative; color: #fff; isolation: isolate; overflow: hidden;
  padding-top: clamp(7rem, 5rem + 6vw, 10rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--bh-forest-3);
}
.page-hero.tall { min-height: min(62vh, 620px); display: flex; align-items: flex-end; }
.page-hero .hero-media img { animation: none; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(14, 20, 15, .85) 0%, rgba(14, 20, 15, .35) 60%, rgba(14, 20, 15, .25) 100%);
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: rgba(255, 255, 255, .85); max-width: 42rem; }
.page-hero .eyebrow { color: #f0c58b; }
.page-hero-plain { padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-hero-plain h1 { max-width: 20ch; }

.breadcrumbs { font-size: .82rem; margin-bottom: 1.25rem; }
.breadcrumbs a { color: inherit; opacity: .75; text-decoration: none; }
.breadcrumbs a:hover { opacity: 1; }
.breadcrumbs span { opacity: .5; margin: 0 .4rem; }

.fact-strip { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 1.75rem; }
.fact-strip div { display: flex; flex-direction: column; }
.fact-strip dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; opacity: .7; }
.fact-strip dd { margin: 0; font-weight: 600; font-size: 1.02rem; }

/* 6. Cards
   -------------------------------------------------------------------------- */
.card-tour {
  background: #fff; border-radius: var(--bh-radius-lg); overflow: hidden; height: 100%;
  border: 1px solid var(--bh-line); display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-tour:hover { transform: translateY(-4px); box-shadow: var(--bh-shadow-lg); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bh-sand); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.card-tour:hover .card-media img { transform: scale(1.05); }
.card-badge {
  position: absolute; top: .9rem; left: .9rem; background: rgba(251, 248, 242, .95); color: var(--bh-ink);
  font-size: .75rem; font-weight: 700; padding: .3rem .65rem; border-radius: 99px; letter-spacing: .02em;
}
.card-badge.right { left: auto; right: .9rem; background: var(--bh-forest); color: #fff; }
.card-body-tour { padding: 1.35rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card-route { font-size: .78rem; color: var(--bh-stone); font-weight: 500; margin-bottom: .45rem; letter-spacing: .02em; }
.card-tour h3 { font-size: 1.32rem; margin-bottom: .6rem; }
.card-tour h3 a { color: inherit; text-decoration: none; }
.card-tour h3 a::after { content: ""; position: absolute; inset: 0; }
.card-tour { position: relative; }
.card-tour p { font-size: .95rem; color: var(--bh-stone); margin-bottom: 1rem; }
.card-foot {
  margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between;
  padding-top: 1rem; border-top: 1px dashed var(--bh-line);
}
.price-from { line-height: 1.15; }
.price-from small { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bh-stone); font-weight: 600; }
.price-from strong { font-family: var(--bh-font-display); font-size: 1.4rem; font-weight: 600; color: var(--bh-ink); }
.price-from em { font-style: normal; font-size: .78rem; color: var(--bh-stone); }
.comfort-tag { font-size: .78rem; font-weight: 600; color: var(--bh-forest-2); display: inline-flex; gap: .3rem; align-items: center; }

.card-style {
  position: relative; display: block; border-radius: var(--bh-radius-lg); overflow: hidden; color: #fff;
  text-decoration: none; aspect-ratio: 3 / 4; isolation: isolate;
}
.card-style img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s ease; }
.card-style::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 20, 15, .88) 0%, rgba(14, 20, 15, .1) 60%); }
.card-style:hover img { transform: scale(1.06); }
.card-style .inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem; }
.card-style i.style-icon { font-size: 1.6rem; color: #f0c58b; }
.card-style h3 { color: #fff; font-size: 1.45rem; margin: .4rem 0 .3rem; }
.card-style p { font-size: .88rem; color: rgba(255, 255, 255, .8); margin: 0; line-height: 1.5; }
.card-style .count { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, .7); }

.card-destination { display: block; text-decoration: none; color: inherit; }
.card-destination .card-media { border-radius: var(--bh-radius-lg); aspect-ratio: 5 / 4; }
.card-destination h3 { font-size: 1.35rem; margin: 1rem 0 .25rem; }
.card-destination p { font-size: .93rem; color: var(--bh-stone); margin: 0; }
.card-destination .region { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bh-ochre); font-weight: 700; }
.card-destination:hover h3 { color: var(--bh-clay); }

.card-post { display: block; text-decoration: none; color: inherit; height: 100%; }
.card-post .card-media { border-radius: var(--bh-radius-lg); aspect-ratio: 16 / 10; }
.card-post .meta { font-size: .8rem; color: var(--bh-stone); margin: 1rem 0 .4rem; }
.card-post .meta .cat { color: var(--bh-ochre); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.card-post h3 { font-size: 1.3rem; margin-bottom: .5rem; transition: color .2s; }
.card-post p { font-size: .95rem; color: var(--bh-stone); }
.card-post:hover h3 { color: var(--bh-clay); }

/* 7. Home sections
   -------------------------------------------------------------------------- */
.intro-photos { position: relative; padding: 0 0 2.25rem 2.5rem; }
.intro-photos .photo-main { border-radius: var(--bh-radius-lg); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.intro-photos .photo-inset {
  position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--bh-radius-lg); border: 8px solid var(--bh-cream); box-shadow: var(--bh-shadow);
}
.intro-photos .note {
  position: absolute; right: -0.5rem; top: 2rem; background: var(--bh-cream); padding: .9rem 1.1rem;
  border-radius: var(--bh-radius); box-shadow: var(--bh-shadow); max-width: 220px; font-size: .85rem;
  line-height: 1.45; transform: rotate(2deg);
}
.intro-photos .note strong { font-family: var(--bh-font-display); font-size: 1.05rem; display: block; font-weight: 500; color: var(--bh-ink); }

.promise-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.promise-list li { display: flex; gap: 1rem; }
.promise-list i {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bh-ochre-soft); color: var(--bh-clay); font-size: 1.25rem;
}
.promise-list strong { display: block; color: var(--bh-ink); font-weight: 600; }
.promise-list span { font-size: .95rem; color: var(--bh-stone); }

/* Month-by-month planner */
.month-picker { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; margin-bottom: 2rem; }
.month-picker button {
  border: 1px solid var(--bh-line); background: #fff; border-radius: var(--bh-radius); padding: .65rem 0;
  font-weight: 600; font-size: .9rem; color: var(--bh-ink); position: relative; transition: all .2s;
}
.month-picker button::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; border-radius: 50%;
  transform: translateX(-50%); background: var(--season, transparent);
}
.month-picker button[data-season="dry"] { --season: var(--bh-ochre); }
.month-picker button[data-season="green"] { --season: #6f9a5b; }
.month-picker button[data-season="rains"] { --season: #6c8fa3; }
.month-picker button:hover { border-color: var(--bh-ochre); }
.month-picker button.active { background: var(--bh-forest); border-color: var(--bh-forest); color: #fff; }
@media (max-width: 767.98px) { .month-picker { grid-template-columns: repeat(6, 1fr); } }
.month-panel { background: #fff; border: 1px solid var(--bh-line); border-radius: var(--bh-radius-lg); overflow: hidden; }
.month-panel .panel-media { min-height: 280px; height: 100%; background-size: cover; background-position: center; transition: background-image .4s; }
.month-panel .panel-body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.month-panel h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.month-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.month-facts div { border-left: 2px solid var(--bh-ochre); padding-left: .85rem; }
.month-facts dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bh-stone); font-weight: 600; }
.month-facts dd { margin: 0; font-size: .95rem; color: var(--bh-ink); }
.season-key { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .82rem; color: var(--bh-stone); }
.season-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; background: var(--c); }

/* Route line: Arusha -> Serengeti */
.route-line { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.route-line::before {
  content: ""; position: absolute; top: 15px; left: 10%; right: 10%; border-top: 2px dashed rgba(255, 255, 255, .3);
}
.route-stop { position: relative; text-align: center; padding-top: 2.6rem; }
.route-stop::before {
  content: ""; position: absolute; top: 6px; left: 50%; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%; background: var(--bh-forest); border: 3px solid #f0c58b;
}
.route-stop.home::before { background: #f0c58b; }
.route-stop h4 { font-size: 1.15rem; color: #fff; margin-bottom: .2rem; }
.route-stop .drive { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #f0c58b; font-weight: 600; }
.route-stop p { font-size: .88rem; color: rgba(255, 255, 255, .7); margin: .5rem 0 0; line-height: 1.5; }
@media (max-width: 991.98px) {
  .route-line { grid-template-columns: 1fr; gap: 0; }
  .route-line::before { top: 0; bottom: 0; left: 9px; right: auto; border-top: 0; border-left: 2px dashed rgba(255, 255, 255, .3); }
  .route-stop { text-align: left; padding: 0 0 1.75rem 2.75rem; }
  .route-stop::before { top: 4px; left: 0; margin-left: 0; }
}

.split-band { position: relative; overflow: hidden; }
.split-band .band-media { position: absolute; inset: 0 0 0 50%; }
.split-band .band-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px) {
  .split-band .band-media { position: relative; inset: auto; height: 320px; }
}
.pledge { border-left: 3px solid var(--bh-ochre); padding: .25rem 0 .25rem 1.25rem; margin: 1.75rem 0; }
.pledge p { margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; }
.stat-row strong { font-family: var(--bh-font-display); font-size: 2.2rem; font-weight: 500; display: block; line-height: 1; color: #fff; }
.stat-row span { font-size: .85rem; color: rgba(255, 255, 255, .7); }

.quote-card { background: #fff; border-radius: var(--bh-radius-lg); padding: 2rem; border: 1px solid var(--bh-line); height: 100%; }
.quote-card blockquote { font-family: var(--bh-font-display); font-size: 1.15rem; line-height: 1.55; color: var(--bh-ink); margin: 1rem 0 1.25rem; }
.quote-card .stars { color: var(--bh-ochre); letter-spacing: 2px; }
.quote-card footer { font-size: .88rem; color: var(--bh-stone); }
.quote-card footer strong { color: var(--bh-ink); }

.cta-band { position: relative; color: #fff; isolation: isolate; overflow: hidden; border-radius: var(--bh-radius-lg); }
.cta-band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 32, 24, .92) 0%, rgba(20, 32, 24, .6) 60%, rgba(20, 32, 24, .3) 100%); z-index: -1; }
.cta-band .inner { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem); max-width: 40rem; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .85); }

/* 8. Gallery
   -------------------------------------------------------------------------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-pills a {
  padding: .45rem 1rem; border-radius: 99px; border: 1px solid var(--bh-line); text-decoration: none;
  font-size: .88rem; font-weight: 600; color: var(--bh-ink); background: #fff; transition: all .2s;
}
.filter-pills a:hover { border-color: var(--bh-ochre); }
.filter-pills a.active { background: var(--bh-ink); color: #fff; border-color: var(--bh-ink); }

.masonry { columns: 3 320px; column-gap: 1.25rem; }
.masonry-item { break-inside: avoid; margin-bottom: 1.25rem; }
.gallery-tile {
  position: relative; display: block; border-radius: var(--bh-radius-lg); overflow: hidden; background: var(--bh-sand);
  cursor: zoom-in; border: 0; padding: 0; width: 100%; text-align: left;
}
.gallery-tile img { width: 100%; display: block; transition: transform .8s ease; }
.gallery-tile:hover img { transform: scale(1.04); }
.gallery-tile .tile-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 1rem; color: #fff;
  background: linear-gradient(0deg, rgba(14, 20, 15, .85), transparent); opacity: 0; transform: translateY(6px);
  transition: all .3s ease;
}
.gallery-tile:hover .tile-caption, .gallery-tile:focus-visible .tile-caption { opacity: 1; transform: none; }
.gallery-tile .tile-caption strong { display: block; font-family: var(--bh-font-display); font-weight: 500; font-size: 1.1rem; }
.gallery-tile .tile-caption span { font-size: .8rem; opacity: .85; }
.gallery-tile .play {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(251, 248, 242, .92); color: var(--bh-clay); font-size: 1.6rem;
  box-shadow: var(--bh-shadow);
}
@media (hover: none) { .gallery-tile .tile-caption { opacity: 1; transform: none; } }

.gallery-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; gap: 1rem; }
.gallery-strip > *:first-child { grid-row: span 2; }
.gallery-strip .gallery-tile { height: 100%; }
.gallery-strip .gallery-tile img { height: 100%; object-fit: cover; }
@media (max-width: 767.98px) {
  .gallery-strip { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; }
  .gallery-strip > *:first-child { grid-column: span 2; grid-row: auto; }
}

.lightbox .modal-content { background: #0e1310; color: #fff; border: 0; border-radius: var(--bh-radius-lg); overflow: hidden; }
.lightbox .modal-body { padding: 0; }
.lightbox .media-wrap { background: #000; display: grid; place-items: center; max-height: 78vh; }
.lightbox .media-wrap img, .lightbox .media-wrap video { max-width: 100%; max-height: 78vh; display: block; }
.lightbox .media-wrap .ratio { width: 100%; }
.lightbox .lb-caption { padding: 1.1rem 1.5rem 1.4rem; }
.lightbox .lb-caption h3 { color: #fff; font-size: 1.3rem; margin-bottom: .3rem; }
.lightbox .lb-caption p { color: rgba(255, 255, 255, .78); font-size: .95rem; margin: 0; }
.lightbox .lb-caption .meta { font-size: .78rem; color: rgba(255, 255, 255, .5); margin-top: .5rem; }
.lightbox .lb-caption .meta a { color: inherit; }
.lightbox .btn-close-lb, .lightbox .lb-nav {
  position: absolute; z-index: 5; border: 0; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.3rem; display: grid; place-items: center;
}
.lightbox .btn-close-lb { top: .75rem; right: .75rem; }
.lightbox .lb-nav { top: 38%; }
.lightbox .lb-prev { left: .75rem; }
.lightbox .lb-next { right: .75rem; }

/* 9. Tour detail
   -------------------------------------------------------------------------- */
.sub-nav {
  position: sticky; top: var(--bh-header-h); z-index: 1020; background: var(--bh-cream);
  border-bottom: 1px solid var(--bh-line);
}
.sub-nav .nav-link { color: var(--bh-stone); font-weight: 600; font-size: .9rem; padding: 1rem 0; margin-right: 1.75rem; border-bottom: 2px solid transparent; border-radius: 0; }
.sub-nav .nav-link:hover, .sub-nav .nav-link.active { color: var(--bh-ink); border-color: var(--bh-ochre); }
.sub-nav .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sub-nav .nav-link { white-space: nowrap; }

.prose { font-size: 1.0625rem; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 .75rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose blockquote { border-left: 3px solid var(--bh-ochre); padding-left: 1.25rem; font-family: var(--bh-font-display); font-size: 1.25rem; color: var(--bh-ink); margin: 2rem 0; }
.prose img { border-radius: var(--bh-radius-lg); margin: 1rem 0; }
.prose table { width: 100%; margin-bottom: 1.5rem; font-size: .95rem; }
.prose th, .prose td { padding: .6rem .75rem; border-bottom: 1px solid var(--bh-line); vertical-align: top; }
.prose th { color: var(--bh-ink); font-weight: 600; background: var(--bh-sand); }
.prose a { color: var(--bh-clay); }
.prose > :first-child { margin-top: 0; }

.highlight-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem 2rem; }
.highlight-list li { position: relative; padding-left: 1.75rem; }
.highlight-list li::before { content: "\ea5e"; font-family: "tabler-icons"; position: absolute; left: 0; top: 0; color: var(--bh-ochre); font-size: 1.1rem; }

.itinerary { position: relative; }
.itinerary .day { position: relative; padding-left: 4.25rem; padding-bottom: 2rem; }
.itinerary .day::before { content: ""; position: absolute; left: 1.35rem; top: 2.8rem; bottom: 0; border-left: 1px dashed var(--bh-line); }
.itinerary .day:last-child::before { display: none; }
.itinerary .day-no {
  position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bh-forest);
  color: #fff; display: grid; place-items: center; font-family: var(--bh-font-display); font-weight: 600; font-size: 1.05rem;
}
.itinerary h3 { font-size: 1.3rem; margin-bottom: .5rem; padding-top: .45rem; }
.itinerary .day-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .84rem; color: var(--bh-stone); margin-top: .75rem; }
.itinerary .day-meta i { color: var(--bh-ochre); margin-right: .25rem; }
.itinerary .day p { margin-bottom: 0; }

.inc-list { list-style: none; padding: 0; margin: 0; }
.inc-list li { padding: .5rem 0 .5rem 1.75rem; border-bottom: 1px solid var(--bh-line); position: relative; font-size: .95rem; }
.inc-list li::before { font-family: "tabler-icons"; position: absolute; left: 0; top: .45rem; font-size: 1.1rem; }
.inc-list.yes li::before { content: "\ea5e"; color: #3f7a4b; }
.inc-list.no li::before { content: "\eb55"; color: var(--bh-clay); }

.booking-card { position: sticky; top: calc(var(--bh-header-h) + 72px); background: #fff; border: 1px solid var(--bh-line); border-radius: var(--bh-radius-lg); padding: 1.75rem; box-shadow: var(--bh-shadow); }
.booking-card .price-from strong { font-size: 2rem; }
.booking-card dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; font-size: .92rem; margin: 1.25rem 0; }
.booking-card dt { color: var(--bh-stone); font-weight: 500; }
.booking-card dd { margin: 0; text-align: right; font-weight: 600; color: var(--bh-ink); }
.reassure { list-style: none; padding: 0; margin: 1.25rem 0 0; font-size: .85rem; color: var(--bh-stone); }
.reassure li { display: flex; gap: .5rem; margin-bottom: .4rem; }
.reassure i { color: #3f7a4b; }

/* 10. Forms
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  border-color: #d9cfbd; border-radius: var(--bh-radius); padding: .72rem .95rem; font-size: 1rem; background-color: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--bh-ochre); box-shadow: 0 0 0 .2rem rgba(201, 130, 46, .18); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--bh-ink); margin-bottom: .4rem; }
.form-text { font-size: .82rem; color: var(--bh-stone); }
.form-check-input:checked { background-color: var(--bh-forest); border-color: var(--bh-forest); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .65rem; }
.choice-grid label {
  display: flex; align-items: center; gap: .6rem; border: 1px solid #d9cfbd; border-radius: var(--bh-radius);
  padding: .75rem .9rem; cursor: pointer; background: #fff; font-weight: 500; font-size: .95rem; transition: all .2s;
}
.choice-grid input { accent-color: var(--bh-forest); }
.choice-grid label:has(input:checked) { border-color: var(--bh-forest); background: #eef3ee; }

.form-steps { display: flex; gap: .5rem; margin-bottom: 2rem; }
.form-steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--bh-line); transition: background .3s; }
.form-steps span.done { background: var(--bh-ochre); }
.form-step { display: none; }
.form-step.active { display: block; animation: fade-up .35s ease both; }
.step-title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); margin-bottom: .35rem; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.plan-aside { background: var(--bh-forest); color: rgba(255, 255, 255, .82); border-radius: var(--bh-radius-lg); padding: 2rem; position: sticky; top: calc(var(--bh-header-h) + 1.5rem); }
.plan-aside h3 { color: #fff; }
.plan-aside a { color: #f0c58b; }

/* 11. FAQ / accordion
   -------------------------------------------------------------------------- */
.faq .accordion-item { border: 0; border-bottom: 1px solid var(--bh-line); background: transparent; }
.faq .accordion-button {
  background: transparent; font-family: var(--bh-font-display); font-size: 1.18rem; color: var(--bh-ink);
  padding: 1.25rem 0; box-shadow: none; font-weight: 500;
}
.faq .accordion-button:not(.collapsed) { color: var(--bh-clay); }
.faq .accordion-button::after { background-image: none; content: "\eb0b"; font-family: "tabler-icons"; font-size: 1.2rem; transform: none; width: auto; height: auto; }
.faq .accordion-button:not(.collapsed)::after { content: "\eaf2"; }
.faq .accordion-body { padding: 0 0 1.5rem; color: var(--bh-body); }

/* 12. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--bh-forest-3); color: rgba(255, 255, 255, .7); font-size: .93rem; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer h5 { color: #fff; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-tag { color: rgba(255, 255, 255, .55); }
.site-footer .footer-top { padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 1.75rem; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1rem 0; font-size: .82rem; }
.site-footer .social a {
  width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); font-size: 1.1rem; margin-right: .35rem;
}
.site-footer .social a:hover { background: #fff; color: var(--bh-forest); }
.newsletter .form-control { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
.newsletter .form-control::placeholder { color: rgba(255, 255, 255, .5); }
.licence-line { font-size: .8rem; color: rgba(255, 255, 255, .55); }

.whatsapp-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040; width: 56px; height: 56px; border-radius: 50%;
  background: #1f8f4e; color: #fff; display: grid; place-items: center; font-size: 1.75rem; box-shadow: var(--bh-shadow-lg);
  text-decoration: none; transition: transform .2s;
}
.whatsapp-float:hover { color: #fff; transform: scale(1.06); }

/* 13. Cookie notice
   -------------------------------------------------------------------------- */
.cookie-notice {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1050; max-width: 420px; background: var(--bh-cream);
  border: 1px solid var(--bh-line); border-radius: var(--bh-radius-lg); box-shadow: var(--bh-shadow-lg); padding: 1.25rem 1.35rem;
  font-size: .88rem; display: none;
}
.cookie-notice.show { display: block; animation: fade-up .4s ease both; }
.cookie-notice strong { font-family: var(--bh-font-display); font-size: 1.05rem; font-weight: 500; color: var(--bh-ink); display: block; margin-bottom: .3rem; }
@media (max-width: 575.98px) { .cookie-notice { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; } }

/* 14. Misc
   -------------------------------------------------------------------------- */
.pagination { --bs-pagination-color: var(--bh-ink); --bs-pagination-active-bg: var(--bh-forest); --bs-pagination-active-border-color: var(--bh-forest); --bs-pagination-border-color: var(--bh-line); --bs-pagination-hover-color: var(--bh-clay); --bs-pagination-focus-box-shadow: none; }
.alert { border-radius: var(--bh-radius); }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--bh-stone); }
.empty-state i { font-size: 2.5rem; color: var(--bh-ochre); }
.tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: .25rem .65rem; border-radius: 99px; background: var(--bh-sand); color: var(--bh-forest-2); }
/* Entrance animations for .reveal live in motion.css */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media img { animation: none; }
  html { scroll-behavior: auto; }
}
.compare-table { font-size: .93rem; }
.compare-table th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bh-stone); font-weight: 700; background: transparent; }
.compare-table td, .compare-table th { padding: .9rem .75rem; vertical-align: middle; border-color: var(--bh-line); }
.compare-table td strong { color: var(--bh-ink); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 14px; height: 6px; border-radius: 3px; background: var(--bh-line); display: inline-block; }
.meter i.on { background: var(--bh-ochre); }
.credit { font-size: .75rem; color: var(--bh-stone); }
.credit a { color: inherit; }
.toc { position: sticky; top: calc(var(--bh-header-h) + 1.5rem); font-size: .9rem; }
.toc a { display: block; color: var(--bh-stone); text-decoration: none; padding: .3rem 0 .3rem .9rem; border-left: 2px solid var(--bh-line); }
.toc a:hover { color: var(--bh-ink); border-color: var(--bh-ochre); }

/* 15. Cookie notice icon & back-to-top
   -------------------------------------------------------------------------- */
.cookie-notice { max-width: 380px; }
.cookie-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bh-ochre-soft); color: var(--bh-clay); font-size: 1.3rem;
}
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 5.5rem; z-index: 1039; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--bh-line); background: var(--bh-cream); color: var(--bh-ink); display: grid; place-items: center;
  font-size: 1.2rem; box-shadow: var(--bh-shadow); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background-color .2s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--bh-forest); color: #fff; border-color: var(--bh-forest); }

/* 16. How it works
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 32px; left: 12.5%; right: 12.5%; border-top: 2px dashed #d9cfbd; z-index: 0;
}
.steps li { position: relative; text-align: center; padding: 0 .5rem; }
.step-icon {
  position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.1rem;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--bh-line);
  color: var(--bh-forest); font-size: 1.6rem; box-shadow: var(--bh-shadow);
}
.step-icon small {
  position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bh-clay); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center;
}
.steps h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.steps p { font-size: .93rem; color: var(--bh-stone); margin: 0; }
@media (max-width: 991.98px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
  .steps::before { display: none; }
}
@media (max-width: 575.98px) { .steps { grid-template-columns: 1fr; } }

.terms-note { font-size: .82rem; color: var(--bh-stone); border-top: 1px dashed var(--bh-line); margin-top: 1.1rem; padding-top: .9rem; }
.terms-note a { color: var(--bh-clay); }

/* 17. Responsive header & footer
   -------------------------------------------------------------------------- */
.topbar .container-wide { height: 38px; min-height: 0; }
.topbar a { display: inline-flex; align-items: center; gap: .25rem; }
.navbar-toggler { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--bh-radius); }
.navbar-toggler:hover { background: var(--bh-sand); }
.site-footer .footer-legal a { white-space: nowrap; }
.newsletter .btn { white-space: nowrap; }

@media (max-width: 1399.98px) and (min-width: 1200px) {
  .site-header .nav-link { padding: .5rem .6rem !important; font-size: .92rem; }
  .site-header .nav-link::after { left: .6rem; right: .6rem; }
}
@media (max-width: 1199.98px) {
  .site-header .navbar-collapse { padding-top: .5rem; }
  .site-header .navbar-nav { margin: 0 !important; }
  .site-header .dropdown-menu.mega-menu { padding: 0 0 .5rem .75rem; margin: 0 !important; }
  .site-header .mega-link { padding: .45rem .5rem; }
  .site-header .mega-link span { display: none; }
  .site-header .btn-clay { width: 100%; padding-block: .85rem; }
}
@media (max-width: 575.98px) {
  :root { --bh-header-h: 68px; }
  .brand { gap: .55rem; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 1.35rem; }
  .brand-tag { font-size: .56rem; letter-spacing: .3em; }
  .topbar { font-size: .8rem; }
  .site-footer .footer-top { padding-top: 2rem; }
  .site-footer h5 { margin-bottom: .8rem; }
  .site-footer .footer-top .row { --bs-gutter-y: 1.5rem; }
  .site-footer .social { margin-top: .25rem; }
  .whatsapp-float { width: 50px; height: 50px; font-size: 1.55rem; right: 1rem; bottom: 1rem; }
  .back-to-top { right: 1.15rem; bottom: 4.75rem; }
}

/* Wide gutters only where there is room for them */
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 1199.98px) {
  .row.g-5, .row.g-lg-5 { --bs-gutter-x: 1.5rem; }
}
@media (max-width: 767.98px) {
  .site-footer .footer-bottom { padding-bottom: 5.5rem; }  /* clear the floating buttons */
}

/* 18. Maps
   -------------------------------------------------------------------------- */
.safari-map {
  height: clamp(360px, 55vh, 560px); border-radius: var(--bh-radius-lg); border: 1px solid var(--bh-line);
  background: #e9e3d6; z-index: 0; overflow: hidden;
}
.safari-map.map-sm { height: 300px; }
.safari-map .leaflet-tile-pane { filter: saturate(.75) sepia(.12); }
.safari-map .leaflet-control-zoom a { color: var(--bh-ink); }
.safari-map .leaflet-control-attribution { font-size: .68rem; background: rgba(251, 248, 242, .85); }
.map-pin {
  display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff;
  background: var(--pin, var(--bh-forest)); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .15s;
}
.map-pin:hover { transform: scale(1.2); }
.map-pin-northern { --pin: var(--bh-forest); }
.map-pin-kilimanjaro { --pin: #6c8fa3; }
.map-pin-southern { --pin: var(--bh-ochre); }
.map-pin-coast { --pin: var(--bh-ocean); }
.map-pin-western { --pin: #7a6a9a; }
.map-pin-home { --pin: var(--bh-clay); width: 26px; height: 26px; margin: -2px; box-shadow: 0 0 0 6px rgba(180, 81, 45, .25), 0 2px 6px rgba(0, 0, 0, .35); }
.map-popup .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; }
.map-popup .leaflet-popup-content { margin: 0; width: 240px !important; font-family: var(--bh-font-body); }
.map-popup img { width: 100%; height: 120px; object-fit: cover; display: block; }
.map-popup-body { padding: .8rem .95rem .95rem; }
.map-popup-kind { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bh-ochre); font-weight: 700; }
.map-popup-body strong { display: block; font-family: var(--bh-font-display); font-size: 1.1rem; font-weight: 500; color: var(--bh-ink); margin: .15rem 0 .3rem; }
.map-popup-body p { margin: 0 0 .4rem; font-size: .84rem; line-height: 1.45; color: var(--bh-stone); }
.map-popup-body small { display: block; font-size: .78rem; color: var(--bh-body); margin-bottom: .45rem; }
.map-popup-body a { font-weight: 600; font-size: .85rem; color: var(--bh-clay); }
.map-legend { display: flex; flex-wrap: wrap; gap: .5rem; }
.map-legend button {
  border: 1px solid var(--bh-line); background: #fff; border-radius: 99px; padding: .4rem .9rem; font-size: .85rem;
  font-weight: 600; color: var(--bh-ink); display: inline-flex; align-items: center; gap: .45rem;
}
.map-legend button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pin, var(--bh-ink)); }
.map-legend button.active { background: var(--bh-ink); color: #fff; border-color: var(--bh-ink); }
.map-legend [data-region=""]::before { display: none; }
.map-legend [data-region="northern"] { --pin: var(--bh-forest); }
.map-legend [data-region="kilimanjaro"] { --pin: #6c8fa3; }
.map-legend [data-region="southern"] { --pin: var(--bh-ochre); }
.map-legend [data-region="coast"] { --pin: var(--bh-ocean); }
.map-legend [data-region="western"] { --pin: #7a6a9a; }
.map-hint { font-size: .8rem; color: var(--bh-stone); }

/* Hide the page scrollbar; scrolling with wheel, touch and keyboard still works. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Trust strip under the hero trip finder */
.hero-trust {
  list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  font-size: .88rem; color: rgba(255, 255, 255, .85);
}
.hero-trust li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust i { color: #f0c58b; font-size: 1.05rem; }
@media (max-width: 575.98px) { .hero-trust { gap: .4rem 1rem; font-size: .82rem; } }

/* Promises sit in two columns beside the intro photos on wide screens */
@media (min-width: 768px) {
  .promise-list { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-top: 1.5rem; }
  .promise-list li { gap: .8rem; }
  .promise-list i { width: 38px; height: 38px; font-size: 1.1rem; }
  .promise-list span { font-size: .88rem; line-height: 1.5; display: block; }
}

/* On phones the travel-style cards become landscape so the stack stays short */
@media (max-width: 575.98px) {
  .card-style { aspect-ratio: 16 / 10; }
  .card-style .inner { padding: 1.1rem 1.2rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .card-style { aspect-ratio: 4 / 4; }
}

/* When two plain (cream) sections follow each other, don't stack both paddings */
.section:not([class*="bg-"]) + .section:not([class*="bg-"]),
.section:not([class*="bg-"]) + .section-sm:not([class*="bg-"]),
.section-sm:not([class*="bg-"]) + .section:not([class*="bg-"]),
.section-sm:not([class*="bg-"]) + .section-sm:not([class*="bg-"]),
.lightbox + .section:not([class*="bg-"]),
.lightbox + .section-sm:not([class*="bg-"]),
.saying + .section-sm:not([class*="bg-"]) { padding-top: 0; }
.saying { padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

/* 19. Screen-size tuning
   -------------------------------------------------------------------------- */
/* Long emails and words wrap instead of running off narrow phones */
.site-footer li, .prose, .card-post p, .card-tour p { overflow-wrap: anywhere; }
.site-footer .footer-email { overflow-wrap: normal; word-break: normal; }
@media (max-width: 359.98px) {
  .brand-tag { letter-spacing: .22em; }
  .btn-lg { --bs-btn-padding-x: 1.25rem; }
}

/* Big monitors and TVs: grow type, spacing and the content column together.
   Almost every size is in rem, so a larger root size scales the whole page. */
@media (min-width: 1800px) {
  html { font-size: 17px; }
  :root { --bh-wide: 1560px; }
  .hero { min-height: min(100vh, 1040px); }
  .gallery-strip { grid-template-rows: 15rem 15rem; }
}
@media (min-width: 2300px) {
  html { font-size: 19.5px; }
  :root { --bh-wide: 1840px; --bh-header-h: 88px; }
  .hero { min-height: min(100vh, 1240px); }
  .brand-mark { width: 50px; height: 50px; }
}
@media (min-width: 3200px) {
  html { font-size: 25px; }
  :root { --bh-wide: 2400px; --bh-header-h: 110px; }
  .hero { min-height: min(100vh, 1600px); }
  .brand-mark { width: 64px; height: 64px; }
}

/* Desktop: the wide container keeps 24px side padding so rows with g-5 gutters
   (24px overhang) never run past the screen edge on 1200-1420px laptops */
@media (min-width: 1200px) { .container-wide { padding-inline: 1.5rem; } }

/* 20. Compact footer
   -------------------------------------------------------------------------- */
.site-footer { line-height: 1.55; }
.site-footer .footer-top { padding: clamp(1.75rem, 1.25rem + 1.25vw, 2.5rem) 0 1.25rem; }
.site-footer .footer-bottom { padding: .8rem 0; }
.site-footer h5 { margin-bottom: .6rem; }
.site-footer li { margin-bottom: .25rem; }
.footer-about { margin: .9rem 0 1rem; max-width: 24rem; }
.footer-news { max-width: 24rem; margin-bottom: 1rem; }
.footer-news-label { display: block; font-size: .78rem; color: rgba(255, 255, 255, .6); margin-bottom: .4rem; }
.footer-news .form-control { padding: .5rem .75rem; font-size: .9rem; }
.site-footer .social a { width: 34px; height: 34px; font-size: 1rem; }
@media (max-width: 575.98px) {
  .site-footer .footer-top { padding-top: 1.5rem; }
  .site-footer .footer-top .row { --bs-gutter-y: 1.25rem; }
}