/* =============================================================================
   SILVERBIRD TRAVEL PLUS — MAIN STYLESHEET
   Elite Designs Kenya | Ref: ED-SBT-SLA-2026-001
   Design: Luxury Safari Chic × Clean Corporate
   ============================================================================= */

/* ─── Google Fonts Import ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

/* ─── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
  --navy:       #0A1F44;   /* Deep Navy Blue */
  --navy-dark:  #061230;   /* Deeper Navy */
  --navy-light: #1a3a6e;   /* Lighter Navy */
  --green:      #2E6B4F;   /* Emerald Green */
  --green-lt:   #4a9e74;   /* Lighter Emerald */
  --green-deep: #163D2A;   /* Deep, richer Green — for small text accents needing extra contrast/weight */
  --orange:     #D4AF37;   /* Champagne Gold */
  --orange-lt:  #E8C85C;   /* Light Champagne Gold */
  --gold:       #D4AF37;   /* Champagne Gold */
  --gold-lt:    #E8C85C;   /* Light Gold */
  --cream:      #F8F5F0;   /* Ivory White */
  --cream-dk:   #F7F4EE;   /* Warm Sand Beige - updated to Ivory / Sand Beige */
  --sand:       #F7F4EE;   /* Clear Ivory / Sand Beige — client-approved (2-10-2026 Lot 1 & Lot 2) */
  --ivory-sand: #F7F4EE;   /* Clear Ivory / Sand Beige */
  --ivory:      #FDFBF7;   /* Clear Ivory */
  --white:      #FFFFFF;
  --grey-100:   #F8F9FA;
  --grey-200:   #EEEEEE;
  --grey-400:   #AAAAAA;
  --grey-600:   #666666;
  --text:       #1A1A1A;
  --text-muted: #2d3748; /* Darker charcoal for crisp readability per Lot 2 */

  /* Humanist Sans (client-requested, 8 Sep 2026 corrections): chosen as
     Nunito from the three options offered (Cabin / Nunito / IBM Plex Sans)
     — "rounded, friendly, excellent for mobile booking flows" fit best
     given how much of the site is enquiry/booking forms. Flag if a
     different one of the three was actually meant. */
  --font-heading: 'Nunito', system-ui, sans-serif;
  --font-sub:     'Nunito', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;
  --font-quote:   'Nunito', system-ui, sans-serif;

  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 6px 24px rgba(0,0,0,.12);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.18);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.24);

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --transition: .3s cubic-bezier(.4,0,.2,1);
  --transition-slow: .6s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

html, body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  max-width: 100%;
}
/* overflow-x:hidden lives on <html> only, not <body> — <html> is the real
   scrolling element, so this alone fully prevents horizontal overflow.
   Also setting it on <body> made <body> register as a CSS "scroll container"
   even though it never actually scrolls, which silently broke
   `position:sticky` for every sticky element on the site (sidebars, filter
   bars, sticky nav strips) — they computed their stuck position relative to
   body's (static) scrollport instead of the page's real scroll. */
html {
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* Content protection */
body { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
img  { -webkit-user-drag: none; pointer-events: none; }

/* ─── Typography ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  text-transform: uppercase;
}
/* Reduced one size step per 11 Sept 2026 client review ("subject titles
   are too large and noisy") — was clamp(2.4rem,5vw,4.2rem) / (1.8rem,3.5vw,3rem)
   / (1.3rem,2.5vw,1.9rem). */
h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.95rem); }
h4 { font-size: 1.32rem; }
h5 { font-size: 1.22rem; }

/* The clamp()s above are tuned for desktop scaling — their vw component
   never actually overtakes the rem floor below ~770–830px viewport width,
   so on real phones (320–480px) every plain heading renders at a fixed
   ~38px/29px/21px regardless of screen size. A page whose heading text is
   long enough not to fit that fixed size in ~330px of usable width (after
   container padding) overflows off the edge of the screen, forcing a
   pinch-zoom-out to read it. This override gives headings real mobile
   scaling without changing anything at tablet width and up. */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.35rem, 6.5vw, 1.8rem); }
  h3 { font-size: clamp(1.1rem, 5.5vw, 1.3rem); }
}

/* Body text sized up per 11 Sept 2026 client review ("content too small,
   eye straining — increase by two sizes"). Was 1rem / 1.15rem. */
p  { font-size: 1.15rem; font-weight: 500; line-height: 1.85; color: var(--text-muted); margin-bottom: 1rem; }

.lead { font-size: 1.25rem; line-height: 1.9; }

.section-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: block;
  margin-top: -1rem;
  margin-bottom: .5rem;
}

/* ─── Layout Helpers ──────────────────────────────────────────────────────── */
.container       { max-width: 1720px; margin: 0 auto; padding: 0 1.25rem; }
.container-wide  { max-width: 1820px; margin: 0 auto; padding: 0 1.25rem; }
.container-narrow{ max-width: 960px;  margin: 0 auto; padding: 0 1.25rem; }


.section         { padding: 2rem 0; }
.section-lg      { padding: 2.75rem 0; }
.section-sm      { padding: 1.5rem 0; }

.text-center { text-align: center; }
.text-white  { color: var(--white) !important; }
.bg-cream    { background: var(--cream); }
.bg-navy     { background: var(--navy); }
.bg-dark     { background: var(--navy-dark); }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: .875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .85rem 2rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--green); color: var(--white);
  box-shadow: 0 4px 16px rgba(46,107,79,.35);
}
.btn-primary:hover {
  background: var(--green-lt);
  box-shadow: 0 6px 24px rgba(46,107,79,.5);
  transform: translateY(-2px);
}
.btn-outline {
  border: 2px solid var(--white); color: var(--white);
}
.btn-outline:hover {
  background: var(--white); color: var(--navy);
  transform: translateY(-2px);
}
.btn-navy {
  background: var(--navy); color: var(--white);
}
.btn-navy:hover {
  background: var(--navy-light); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-emerald {
  background: var(--green); color: var(--white);
  box-shadow: 0 4px 16px rgba(46,107,79,.35);
}
.btn-emerald:hover {
  background: var(--green-lt); transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(46,107,79,.5);
}
.btn-ghost {
  color: var(--orange); border: 2px solid var(--orange);
}
.btn-ghost:hover { background: var(--orange); color: var(--white); }

.go-back-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; color: var(--navy);
  text-decoration: none; transition: color var(--transition);
}
.go-back-link i { font-size: .75rem; }
.go-back-link:hover { color: var(--orange); }

.btn-lg { padding: 1rem 2.5rem; font-size: .95rem; }
.btn-sm { padding: .55rem 1.25rem; font-size: .8rem; }

/* ─── Section Headings ────────────────────────────────────────────────────── */
.section-header { margin-bottom: 3rem; }
.section-header.center { text-align: center; }
.section-header h2 { margin-bottom: .75rem; }
.section-header p  { font-size: 1.05rem; }

.divider-ornament {
  display: flex; align-items: center; gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.divider-ornament.center { justify-content: center; }
.divider-ornament::before,
.divider-ornament::after {
  content: ''; flex: 1; height: 1px; background: var(--gold);
}
.divider-ornament.center::before,
.divider-ornament.center::after { max-width: 80px; }
.divider-ornament span {
  width: 8px; height: 8px; background: var(--orange);
  border-radius: 50%; flex-shrink: 0;
}

/* ─── Social icons (used in nav Tier 1) ─────────────────────────────────────── */
.top-bar-social { display: flex; align-items: center; gap: .9rem; }
.top-bar-social a {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  font-size: .75rem; color: rgba(255,255,255,.7);
  transition: var(--transition);
}
.top-bar-social a:hover {
  background: var(--orange); border-color: var(--orange); color: var(--white);
}

/* ─── Navigation — two-tier system ──────────────────────────────────────────
   Tier 1 (.nav-tier-top)    — branding: logo left · Get a Quote + social right
   Tier 2 (.nav-tier-bottom) — navigation: hamburger left · menu · hamburger right
   ─────────────────────────────────────────────────────────────────────────── */
#main-nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
  transition: box-shadow var(--transition);
}
#main-nav .container { max-width: 1720px; margin: 0 auto; padding: 0 1.25rem; }

/* Tier 1 — Branding & secondary actions */
.nav-tier-top { background: var(--navy); }
.nav-tier-top-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .65rem 0; min-height: 76px;
}
.nav-tier-top-right { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }

/* Tier 2 — Primary navigation */
.nav-tier-bottom {
  background: var(--navy);
  transition: background var(--transition), backdrop-filter var(--transition);
}
#main-nav.scrolled .nav-tier-bottom {
  background: rgba(10,31,68,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: .85rem 0;
}

.nav-inner-flat {
  display: flex; align-items: center; gap: 1.75rem;
  padding: .6rem 0; position: relative;
}

.nav-flat-links {
  display: flex; align-items: center; justify-content: space-evenly; gap: 1.7rem;
  flex: 1; min-width: 0;
}
/* Persistent gold/yellow highlight for Mice & Corporate */
.nav-flat-links > li.nav-flat-highlight > a { color: var(--gold-lt); }
.nav-flat-links > li.nav-flat-highlight > a:hover { color: var(--orange); }
.nav-flat-links > li { position: relative; flex-shrink: 0; }
.nav-flat-links > li.nav-flat-item { display: flex; align-items: center; }
.nav-flat-links > li > a,
.nav-flat-trigger {
  display: flex; align-items: center; gap: .3rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
  color: rgba(255,255,255,.9); padding: .5rem 0;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-flat-links > li > a:hover,
.nav-flat-trigger:hover,
.nav-flat-links > li.active > a,
.nav-flat-item.active > .nav-flat-trigger { color: var(--gold-lt); }
.nav-flat-trigger .nav-arrow { font-size: .55rem; transition: transform .25s; display: inline-block; }
.nav-flat-trigger.open .nav-arrow { transform: rotate(180deg); }
.nav-flat-caret { padding: .5rem .1rem .5rem .15rem; }

/* Hamburger-icon nav items (Tembea Kenya — left, Content Hub — right) */
.nav-hamburger-item { position: relative; flex-shrink: 0; }
.nav-hamburger-trigger {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,.9);
  padding: .5rem; border-radius: var(--radius-sm); transition: color var(--transition);
}
.nav-hamburger-item.active .nav-hamburger-trigger { color: var(--gold-lt); }
.nav-hamburger-bars { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-hamburger-bars span {
  display: block; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.9); transition: var(--transition), transform .25s, opacity .25s;
}
.nav-hamburger-trigger:hover .nav-hamburger-bars span,
.nav-hamburger-item.active .nav-hamburger-bars span { background: var(--gold-lt); }
.nav-hamburger-trigger.open .nav-hamburger-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger-trigger.open .nav-hamburger-bars span:nth-child(2) { opacity: 0; }
.nav-hamburger-trigger.open .nav-hamburger-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-flat-dropdown-left { left: 0; right: auto; }
.nav-flat-dropdown-right { left: auto; right: 0; }

/* ─── Nav Side Panels (Tembea Kenya / Content Hub) — dashboard-style drawers ── */
.nav-panel-overlay {
  position: fixed; inset: 0; background: rgba(6,18,48,.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  z-index: 299; opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav-panel-overlay.open { opacity: 1; visibility: visible; }

.nav-side-panel {
  position: fixed; top: 0; bottom: 0; width: 340px; max-width: 86vw;
  background: var(--cream); box-shadow: var(--shadow-xl);
  z-index: 300; padding: 1.5rem 1.75rem 2rem; overflow-y: auto;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: none;
}
.nav-side-panel-left  { left: 0; transform: translateX(-100%); border-right: 2px solid var(--gold); }
.nav-side-panel-right { right: 0; transform: translateX(100%); border-left: 2px solid var(--gold); }
.nav-side-panel.open  { transform: translateX(0); display: block; }

.nav-side-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(10,31,68,.12);
}
.nav-side-panel-title {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--navy);
}
.nav-side-panel-close {
  background: none; border: none; cursor: pointer;
  color: rgba(10,31,68,.7); font-size: 1.6rem; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.nav-side-panel-close:hover { background: rgba(10,31,68,.08); color: var(--navy); }

.nav-side-panel-links { display: flex; flex-direction: column; }
.nav-side-panel-links a {
  font-family: var(--font-heading); font-size: 1.15rem; color: var(--navy);
  padding: 1rem 0; border-bottom: 1px solid rgba(10,31,68,.08);
  transition: color var(--transition), transform var(--transition);
}
.nav-side-panel-links a:hover { color: var(--orange); transform: translateX(.4rem); }
.nav-side-panel-links a:last-child { border-bottom: none; }

/* Content Hub Side Panel Accordions — Lot 2 */
.nav-side-accordion {
  border-bottom: 1px solid rgba(10,31,68,.08);
}
.nav-side-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition), transform var(--transition);
}
.nav-side-accordion-toggle:hover {
  color: var(--orange);
  transform: translateX(.4rem);
}
.nav-acc-arrow {
  font-size: .85rem;
  transition: transform .25s ease;
  color: var(--gold);
}
.nav-side-accordion.open .nav-acc-arrow {
  transform: rotate(180deg);
}
.nav-side-accordion-body {
  display: none;
  padding: .35rem 0 .75rem .75rem;
  flex-direction: column;
  gap: .35rem;
}
.nav-side-accordion.open .nav-side-accordion-body {
  display: flex;
}
.nav-side-accordion-body a {
  font-size: .95rem !important;
  color: #2b3542 !important;
  padding: .5rem 0 !important;
  border-bottom: 1px dashed rgba(10,31,68,.08) !important;
  font-family: var(--font-body) !important;
  font-weight: 500;
}
.nav-side-accordion-body a:hover {
  color: var(--gold) !important;
  padding-left: .35rem !important;
}

/* Lot 2: Make 'Expertly Curated...' tagline sit in one line across on desktop */
@media (min-width: 900px) {
  .tagline-single-line {
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {
  .nav-side-panel { width: 300px; padding: 1.25rem 1.25rem 2rem; }
}

.nav-flat-dropdown {
  position: absolute; top: 100%; left: 0;
  background: var(--cream); box-shadow: var(--shadow-lg);
  border-top: 2px solid var(--gold);
  min-width: 260px; max-width: min(90vw, 640px);
  padding: 1.25rem 1.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index: 150;
  display: none; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .3rem 1.5rem;
  pointer-events: none;
}
.nav-flat-dropdown.open {
  display: grid;
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
}
/* Right-align dropdowns for items near the right edge to avoid horizontal overflow */
.nav-flat-links > li:nth-last-child(-n+4) .nav-flat-dropdown {
  left: auto;
  right: 0;
}
.nav-flat-dropdown a { font-size: .85rem; color: rgba(10,31,68,.75); padding: .4rem 0; transition: color var(--transition); }
.nav-flat-dropdown a:hover { color: var(--navy); }
/* "View All ..." links in any nav dropdown — green button, per client request */
.nav-flat-dropdown a.nav-flat-viewall {
  grid-column: 1 / -1;
  display: block;
  width: fit-content;
  margin: .5rem auto 0;
  background: var(--green);
  color: var(--white) !important;
  font-weight: 700;
  text-align: center;
  padding: .55rem 1.4rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.nav-flat-dropdown a.nav-flat-viewall:hover { background: var(--green-lt); color: var(--white) !important; }

.nav-logo {
  display: flex; align-items: center;
  line-height: 1;
  flex-shrink: 0;
}
.logo-img {
  height: 70px;
  width: auto;
  max-width: 260px;
  display: block;
  object-fit: contain;
  transition: opacity var(--transition);
}
.logo-img:hover { opacity: .85; }
.footer-brand .nav-logo {
  display: inline-flex;
  margin-bottom: 1rem;
}
.logo-img--footer {
  height: 110px;
  max-width: 360px;
  opacity: .95;
}

.nav-links {
  display: flex; align-items: center; gap: .15rem;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex; align-items: center; gap: .25rem;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  color: rgba(255,255,255,.88); padding: .6rem .55rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-links > li > a:hover,
.nav-links > li.active > a { color: var(--gold-lt); }
.nav-links > li > a .nav-arrow {
  font-size: .6rem; transition: transform var(--transition);
}
.nav-links > li:hover > a .nav-arrow { transform: rotate(180deg); }

/* Mega / dropdown */
.dropdown {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--navy-dark);
  border-radius: var(--radius-md);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: var(--shadow-xl);
  padding: 1.5rem;
  min-width: 220px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  border-top: 3px solid var(--gold);
}
.nav-links > li:hover .dropdown {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.82); font-weight: 500;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.dropdown a:hover { background: rgba(255,255,255,.08); color: var(--gold-lt); }
.dropdown a .dd-icon { width: 18px; text-align: center; color: var(--gold); font-size: .85rem; }

.dropdown.mega {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1rem; min-width: 560px; left: 0; transform: translateY(8px);
}
.nav-links > li:hover .dropdown.mega { transform: translateY(0); }
.dropdown.mega .dd-col h4 {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange);
  padding: 0 .75rem .5rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--grey-200);
}

.nav-cta { margin-left: .75rem; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 28px; cursor: pointer; padding: .25rem;
}
.hamburger span {
  display: block; height: 2px; background: rgba(255,255,255,.88);
  transition: var(--transition); border-radius: 2px;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile nav */
#mobile-nav {
  display: none; position: fixed; inset: 0;
  background: var(--navy-dark); z-index: 99; overflow-y: auto;
  padding: 6rem 2rem 3rem; flex-direction: column;
}
#mobile-nav.open { display: flex; }
#mobile-nav a {
  font-family: var(--font-heading); font-size: 1.8rem; font-weight: 600;
  color: var(--white); padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color var(--transition);
}
#mobile-nav a:hover { color: var(--orange-lt); }
#mobile-nav a.mobile-nav-sub {
  font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,.7);
  padding-left: 1.25rem;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
#hero {
  position: relative; height: 100svh; min-height: 600px;
  display: flex; align-items: center; overflow: hidden;
  background: var(--navy-dark);
}

.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }
/* Hero slides — no gradient overlay, full image shown */
.hero-slide:nth-child(1) {
  background-image: url('../images/hero/hero-1.jpg');
  background-color: #061230;
}
.hero-slide:nth-child(2) {
  background-image: url('../images/hero/hero-2.jpg');
  background-color: #061230;
}
.hero-slide:nth-child(3) {
  background-image: url('../images/hero/hero-3.jpg');
  background-color: #061230;
}

/* Video hero */
#hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; z-index: 1;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: none;
}

.hero-content {
  position: relative; z-index: 3;
  width: 100%; padding: 0;
}
.hero-label {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-lt);
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.2rem;
}
.hero-label::before {
  content: ''; width: 32px; height: 1px; background: var(--gold-lt);
}
.hero-content h1 {
  color: var(--white); font-weight: 300;
  margin-bottom: 1.2rem; line-height: 1.1;
}
.hero-content h1 em {
  font-style: italic; color: var(--gold-lt); font-weight: 400;
}
.hero-tagline {
  font-size: 1.1rem; color: rgba(255,255,255,.85);
  max-width: 520px; margin-bottom: 2.5rem; line-height: 1.7;
  font-weight: 300;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ─── Hero Intro & Search Block (Desktop 2-Col Split, Vertical Search on Right) ─── */
#hero-cta-strip {
  background: var(--ivory-sand);
  padding: 2.25rem 0 2rem;
  border-bottom: 1px solid rgba(10,31,68,.08);
  position: relative;
  z-index: 4;
}

.hero-intro-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.hero-intro-text-side {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

.hero-intro-label {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .5rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hero-intro-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--green-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
  line-height: 1.35;
}

.hero-intro-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
  font-weight: 600;
  max-width: 880px;
  margin: 0 auto 1.75rem;
}

.hero-intro-text-side .cta-pair-separated {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.hero-intro-search-side {
  width: 100%;
}

/* Desktop layout: 2-column with vertical search card on the right (992px and up) */
@media (min-width: 992px) {
  #hero-cta-strip {
    padding: 2.25rem 0 2rem;
  }
  .hero-intro-search-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(350px, 420px);
    gap: 2.5rem;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }
  .hero-intro-text-side {
    text-align: left;
    margin: 0;
    max-width: 100%;
  }
  .hero-intro-label {
    font-size: clamp(1.9rem, 2.5vw, 2.5rem);
    margin-bottom: .35rem;
  }
  .hero-intro-title {
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    margin-bottom: 1rem;
    line-height: 1.45;
  }
  .hero-intro-body {
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0 0 1.5rem 0;
    max-width: 780px;
  }
  .hero-intro-text-side .cta-pair-separated {
    display: flex;
    justify-content: flex-start;
    gap: 1.25rem !important;
    row-gap: 1rem !important;
    margin-bottom: 0;
  }

  /* Right column: Vertical Search Card on Desktop */
  .hero-intro-search-side {
    width: 100%;
    max-width: 420px;
    justify-self: end;
  }
  .hero-intro-search-side .hero-search-card {
    max-width: 100%;
    margin: 0;
    background: #ffffff;
    border: 1px solid rgba(10,31,68,.14);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 50px rgba(10,31,68,.14), 0 2px 8px rgba(0,0,0,.04);
    overflow: hidden;
  }
  .hero-intro-search-side .hero-search-inner {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .hero-intro-search-side .search-field {
    border-right: none;
    border-bottom: 1px solid rgba(10,31,68,.09);
    padding: 1rem 1.6rem;
    min-height: 72px;
  }
  .hero-intro-search-side .search-field:last-of-type {
    border-bottom: 1px solid rgba(10,31,68,.09);
  }
  .hero-intro-search-side .search-field.has-select::after {
    right: 1.6rem;
    color: var(--navy);
  }
  .hero-intro-search-side .search-btn {
    width: 100%;
    min-width: 100%;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: 1.15rem 1.5rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .1em;
    justify-content: center;
    background: #163D2A !important;
    color: #ffffff !important;
    border-top: none;
  }
  .hero-intro-search-side .search-btn:hover {
    background: #23543A !important;
  }
}

/* ─── Hero Search Bar (Plan Your Trip Tile Card) ─────────────────────────── */
.hero-search {
  position: relative;
  margin-top: -2rem;
  z-index: 4;
  padding: 2.5rem 1.5rem 2rem;
  background: var(--cream-dk);
}
.hero-search-card {
  max-width: 440px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(10, 31, 68, 0.14);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(10, 31, 68, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  text-align: left;
}
.hero-search-card::before {
  display: none;
}
.hero-search-header {
  padding: 1.35rem 1.6rem 0.95rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(10, 31, 68, 0.09);
  text-align: left;
}
.hero-search-header h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.hero-search-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}
.search-field {
  padding: 1rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: none;
  border-bottom: 1px solid rgba(10, 31, 68, 0.09);
  position: relative;
  background: #ffffff;
  transition: background var(--transition);
  min-height: 72px;
}
.search-field:hover {
  background: #fbfbfa;
}
/* Icon + label row in Deep Gold */
.search-field-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .28rem;
  cursor: pointer;
}
.search-field-label i {
  font-size: .72rem;
  color: #B8860B; /* Deep Gold */
  width: 14px;
}
.search-field-label span {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B8860B; /* Deep Gold */
}
.search-field select,
.search-field input[type="date"] {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #111827 !important; /* In Black */
  font-weight: 700;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  line-height: 1.35;
  color-scheme: light;
}
/* Extend the select's clickable hitbox over the field's right-hand padding
   (where the decorative dropdown arrow sits) so clicking the arrow itself
   always opens the dropdown, not just clicking the text to its left. */
.search-field.has-select select {
  width: calc(100% + 1.6rem);
  margin-right: -1.6rem;
  padding-right: 1.6rem;
}
.search-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .85;
}
.search-field select option {
  color: #111827;
  background: #ffffff;
  font-weight: 600;
  padding: 8px 12px;
}
/* Dropdown arrow in dark tone */
.search-field.has-select::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  color: #0A1F44;
  pointer-events: none;
}
/* Search button in Deep Green background */
.search-btn {
  background: #163D2A !important; /* Deep Green */
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.15rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  width: 100%;
  min-width: 100%;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.search-btn i {
  font-size: .95rem;
  color: #ffffff !important;
}
.search-btn:hover {
  background: #23543A !important;
  filter: brightness(1.08);
  transform: none;
}
.search-btn:active {
  filter: brightness(.95);
}

/* Hero pagination */
.hero-dots {
  position: absolute; bottom: 5.5rem; right: 2rem; z-index: 4;
  display: flex; flex-direction: column; gap: .5rem;
}
.hero-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.4); cursor: pointer;
  transition: var(--transition);
}
.hero-dot.active {
  background: var(--orange); width: 6px; height: 24px; border-radius: 3px;
}

/* ─── Trust Bar ───────────────────────────────────────────────────────────── */
#trust-bar {
  background: var(--cream-dk);
  border-bottom: 1px solid var(--gold);
  padding: 1.25rem 0;
}
.trust-items {
  display: flex; align-items: center;
  justify-content: space-around; gap: 1rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 600;
  color: var(--navy); letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.trust-item i { color: var(--orange); font-size: 1rem; }

/* ─── Segment Cards (4 pillars) ───────────────────────────────────────────── */
#segments { background: var(--white); }
.segments-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
/* Tile variant — separates each image into its own distinct card instead of
   one continuous strip (used on the MICE page). */
.segments-grid--tiles {
  gap: 1.5rem;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.segments-grid--tiles .segment-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.segments-grid--tiles .segment-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.segment-card {
  position: relative; overflow: hidden;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer;
}
.segment-card::before {
  content: '';
  position: absolute; inset: 0;
  background: none;
  z-index: 1; transition: var(--transition-slow);
}
.segment-card:hover::before {
  background: none;
}
.segment-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform var(--transition-slow);
}
.segment-card:hover .segment-bg { transform: scale(1.06); }

/* Placeholder backgrounds */
.seg-luxury    .segment-bg { background-color: #061230; background-image: url('../images/hero/seg-luxury.jpg'); }
.seg-corporate .segment-bg { background-color: #061230; background-image: url('../images/hero/seg-corporate.jpg'); }
.seg-domestic  .segment-bg { background-color: #0a1f44; background-image: url('../images/hero/seg-domestic.jpg'); }
.seg-youth     .segment-bg { background-color: #0d2b3a; background-image: url('../images/hero/seg-youth.jpg'); }

.segment-content {
  position: relative; z-index: 2;
  padding: 2rem 1.75rem;
}
.segment-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--orange); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
  transition: transform var(--transition);
}
.segment-card:hover .segment-icon { transform: scale(1.1); }
.segment-content h3 {
  color: var(--white); font-size: 1.35rem; margin-bottom: .4rem;
}
.segment-reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.segment-reveal p {
  color: rgba(255,255,255,.75); font-size: .84rem; line-height: 1.6;
  margin: 0 0 1rem; overflow: hidden; min-height: 0;
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.segment-card:hover .segment-reveal { grid-template-rows: 1fr; }
.segment-card:hover .segment-reveal p { opacity: 1; }
.segment-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-lt);
  transition: gap var(--transition);
}
.segment-card:hover .segment-link { gap: .7rem; }

/* ─── Featured Safaris ────────────────────────────────────────────────────── */
#featured-safaris { background: var(--cream); }
.safari-cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem;
}
.safari-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.safari-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
}
.safari-card-img {
  position: relative; overflow: hidden; height: 240px;
  background: var(--grey-200);
}
.safari-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-slow);
}
.safari-card:hover .safari-card-img img { transform: scale(1.07); }
.safari-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--orange); color: var(--white);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 3px;
}
.safari-card-body { padding: 1.5rem; }
.safari-meta {
  display: flex; gap: 1rem; margin-bottom: .75rem;
}
.safari-meta span {
  display: flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--text-muted);
}
.safari-meta i { color: var(--orange); font-size: .8rem; }
.safari-card-body h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.safari-card-body p  { font-size: .88rem; margin-bottom: 1.2rem; line-height: 1.6; }
.safari-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; background: var(--cream);
  border-top: 1px solid var(--grey-200);
}
.safari-price { font-family: var(--font-heading); }
.safari-price .from { font-size: .72rem; color: var(--text-muted); display: block; }
.safari-price strong { font-size: 1.3rem; color: var(--navy); }

/* ─── Destinations Map Section ────────────────────────────────────────────── */
#destinations { background: var(--cream); overflow: hidden; }

.destination-cards {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem;
  margin-top: 2.5rem;
}
.dest-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 3/4; cursor: pointer;
  background: var(--sand);
}
.dest-card:nth-child(1),
.dest-card:nth-child(5) { grid-row: span 2; aspect-ratio: unset; }

.dest-card-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform var(--transition-slow);
}
.dest-card:hover .dest-card-img { transform: scale(1.08); }
.dest-card-overlay {
  position: absolute; inset: 0;
  background: none;
  transition: var(--transition);
}
.dest-card:hover .dest-card-overlay {
  background: none;
}
.dest-card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.25rem;
}
.dest-card-body h4 { color: var(--white); font-size: 1.1rem; margin-bottom: .2rem; }
.dest-card-body span { font-size: .75rem; color: var(--gold-lt); }

/* Square-tile variant — used for the featured destinations strip on the
   Destinations landing page. Uniform 1:1 tiles with the name as a hyperlink
   below the image instead of overlaid text. */
.destination-cards--square .dest-card,
.destination-cards--square .dest-card:nth-child(1),
.destination-cards--square .dest-card:nth-child(5) {
  aspect-ratio: 1/1; grid-row: auto;
}
.dest-tile {
  display: flex; flex-direction: column; gap: .65rem;
  text-decoration: none;
}
.dest-tile-name {
  text-align: center; font-family: var(--font-heading); font-weight: 700;
  font-size: 1rem; color: var(--navy); transition: color var(--transition);
}
.dest-tile:hover .dest-tile-name { color: var(--orange); }

/* ─── Destinations landing page — region name list + region identity boxes ── */
.dest-name-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem 2.5rem; margin-top: 1rem;
}
.dest-name-list a {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: var(--navy); padding: .3rem 0;
  transition: color var(--transition);
}
.dest-name-list a:hover { color: var(--orange); }

.dest-region-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
.dest-region-box { display: block; text-decoration: none; }
.dest-region-box-img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.dest-region-box:hover .dest-region-box-img { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dest-region-box-img--placeholder {
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
}
.dest-region-box-img--placeholder > i { font-size: 2.2rem; color: rgba(255,255,255,.55); }
.dest-region-box-name {
  display: block; padding: .65rem 0 0;
  color: var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  text-align: center;
}
.dest-country-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
@media (max-width: 900px) {
  .dest-country-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 640px) {
  .dest-country-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.dest-name-list--fixed5 {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; margin-top: 1.5rem;
  border-top: 1px solid rgba(10,31,68,.14);
  border-left: 1px solid rgba(10,31,68,.14);
}
.dest-name-list--fixed5 a {
  padding: .9rem 1rem; margin: 0;
  border-right: 1px solid rgba(10,31,68,.14);
  border-bottom: 1px solid rgba(10,31,68,.14);
}
.dest-name-list--fixed5 a:hover { background: var(--cream); }
.dest-name-list--grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}
.dest-name-list--grid a { width: 100%; }
@media (max-width: 900px) {
  .dest-name-list--grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .dest-name-list--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .dest-name-list--fixed5 { grid-template-columns: repeat(3, 1fr); }
  /* cms_grid_center_style() pins last-row items to columns of the 5-col
     desktop grid via inline style; on 2/3-col mobile layouts that spawns
     extra squeezed columns (names wrapped letter-by-letter). Reset it. */
  .dest-name-list--fixed5 a { grid-column: auto !important; min-width: 0; text-align: center; }
}
@media (max-width: 640px) {
  .dest-region-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .dest-name-list { gap: .5rem 1.5rem; }
  .dest-name-list a { font-size: .92rem; }
  .dest-name-list--fixed5 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Tembea Kenya ────────────────────────────────────────────────────────── */
#tembea-kenya { background: var(--cream); }
.tembea-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.tembea-visual {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #061230, #1a3a6e);
}
.tembea-visual img { width: 100%; height: 100%; object-fit: cover; }
.tembea-badge {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  background: var(--white); border-radius: var(--radius-md);
  padding: 1rem 1.25rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: .75rem;
}
.tembea-badge-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--orange); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.tembea-badge p { margin: 0; font-size: .78rem; color: var(--text-muted); }
.tembea-badge strong { display: block; color: var(--navy); font-size: .9rem; }

.tembea-features { margin: 1.5rem 0 2rem; }
.tembea-feature {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .75rem 0; border-bottom: 1px solid var(--grey-200);
}
.tembea-feature:last-child { border: none; }
.tembea-feature-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: rgba(232,117,10,.1); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0; margin-top: .2rem;
}
.tembea-feature h4 { font-size: 1rem; margin-bottom: .2rem; }
.tembea-feature p  { margin: 0; font-size: .85rem; }

/* ─── Young at Heart ──────────────────────────────────────────────────────── */
#young-at-heart {
  background: var(--sand);
  position: relative; overflow: hidden;
}
#young-at-heart::before {
  content: 'ADVENTURE';
  position: absolute; right: -2rem; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--font-heading); font-size: 8rem; font-weight: 700;
  color: rgba(10,31,68,.04); letter-spacing: .2em;
  pointer-events: none;
}
.yah-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.yah-activities {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 2rem;
}
.yah-activity {
  background: rgba(10,31,68,.04); border-radius: var(--radius-md);
  padding: 1rem; border: 1px solid rgba(10,31,68,.08);
  transition: background var(--transition), border-color var(--transition);
}
.yah-activity:hover {
  background: rgba(232,117,10,.15); border-color: rgba(232,117,10,.3);
}
.yah-activity i { color: var(--orange); font-size: 1.25rem; margin-bottom: .5rem; display: block; }
.yah-activity span { font-size: .85rem; color: var(--navy); font-weight: 500; }

.yah-visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.yah-img {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--white);
}
.yah-img:nth-child(1) { grid-row: span 2; }
.yah-img img { width: 100%; height: 100%; object-fit: cover; }
.yah-img-placeholder {
  width: 100%; height: 200px;
  background: linear-gradient(135deg, rgba(232,117,10,.3), rgba(201,168,76,.2));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: rgba(255,255,255,.3);
}
.yah-img:nth-child(1) .yah-img-placeholder { height: 100%; }

/* ─── Testimonials ────────────────────────────────────────────────────────── */
#testimonials { background: var(--white); }
.testimonial-slider { position: relative; overflow: hidden; }
.testimonial-track {
  display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.testimonial-card {
  flex: 0 0 100%;
  display: grid; grid-template-columns: 1fr 2fr; gap: 3rem;
  align-items: center; padding: 2rem 0;
}
.testimonial-avatar {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1;
  background: var(--grey-200);
  box-shadow: var(--shadow-lg);
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-stars { color: var(--gold); font-size: .9rem; margin-bottom: .75rem; }
.testimonial-text {
  font-family: var(--font-heading); font-size: 1.4rem; font-style: italic;
  line-height: 1.6; color: var(--navy); margin-bottom: 1.25rem;
}
.testimonial-author strong { color: var(--navy); font-weight: 700; }
.testimonial-author span  { font-size: .85rem; color: var(--text-muted); }
.testimonial-nav {
  display: flex; justify-content: center; gap: .5rem; margin-top: 2rem;
}
.t-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grey-200); cursor: pointer; transition: var(--transition);
}
.t-dot.active { background: var(--orange); width: 24px; border-radius: 4px; }

/* ─── Why Silverbird (USPs) ───────────────────────────────────────────────── */
#why-us { background: var(--cream); }
.usp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.usp-card {
  text-align: center; padding: 2.5rem 2rem;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.usp-icon {
  width: 64px; height: 64px; margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--white);
}
.usp-card h4 { font-size: 1.15rem; margin-bottom: .6rem; }
.usp-card p  { font-size: .88rem; line-height: 1.7; }

/* ─── Newsletter ──────────────────────────────────────────────────────────── */
#newsletter {
  background: var(--cream);
  position: relative; overflow: hidden;
}
#newsletter::after {
  content: ''; position: absolute; right: -10%; top: 50%;
  transform: translateY(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(212,175,55,.12) 0%, transparent 70%);
  pointer-events: none;
}
.newsletter-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.newsletter-form { display: flex; flex-direction: column; gap: 1rem; }
.newsletter-input-row { display: flex; gap: .75rem; }
.newsletter-input-row input,
.newsletter-form input {
  flex: 1; padding: .9rem 1.2rem;
  background: var(--white); border: 1px solid rgba(10,31,68,.15);
  border-radius: var(--radius-sm); color: var(--navy);
  font-family: var(--font-body); font-size: .9rem;
  outline: none; transition: border-color var(--transition);
}
.newsletter-form input::placeholder { color: rgba(10,31,68,.4); }
.newsletter-form input:focus { border-color: var(--orange); }

/* ─── Footer CTA Strip ────────────────────────────────────────────────────── */
#footer-cta {
  background: var(--navy);
  padding: 1.25rem 0 1.1rem;
  text-align: center;
}
.footer-cta-script {
  font-family: var(--font-quote); font-style: italic; font-weight: 600;
  color: var(--gold-lt); font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: .25rem;
}
.footer-cta-head p { color: rgba(255,255,255,.75); margin-bottom: 1rem; font-size: .9rem; }
.footer-cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.12);
}
.footer-cta-contact { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-cta-contact a {
  display: flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.85); font-size: .9rem;
  transition: color var(--transition);
}
.footer-cta-contact a:hover { color: var(--gold-lt); }
.footer-cta-contact i { color: var(--gold); }
.footer-cta-social { display: flex; gap: .6rem; }
.footer-cta-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); font-size: .85rem;
  transition: var(--transition);
}
.footer-cta-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }

/* ─── Footer Wave Divider ─────────────────────────────────────────────────── */
.footer-wave { display: block; line-height: 0; background: var(--navy-dark); }
.footer-wave svg { display: block; width: 100%; height: 44px; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
#footer {
  /* Exact Warm Sand Beige (#D9C7A3) as the base colour, with a very
     subtle grain texture layered on top (CSS-generated noise, not a
     photo) for some visual richness — no colour shift, no brown bleed. */
  background-color: var(--sand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  padding: 2rem 0 0;
}
.footer-grid-3col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid rgba(10,31,68,.12);
  text-align: center;
}

.footer-col {
  display: flex; justify-content: center;
  padding: 0 1rem;
}
.footer-col:not(:first-child) { border-left: 1px solid rgba(10,31,68,.12); }
.footer-col-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  width: -moz-fit-content; width: fit-content;
}
.footer-col h5 {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700;
  letter-spacing: normal; text-transform: none;
  color: var(--navy); margin-bottom: .5rem;
  padding-bottom: .35rem; position: relative;
}
.footer-col h5::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 2px; background: var(--gold);
}
.footer-col ul {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}
.footer-col ul li + li { margin-top: .3rem; }
.footer-col ul li a {
  font-size: .85rem; color: rgba(10,31,68,.7);
  transition: color var(--transition);
  display: inline-flex; align-items: center; gap: .5rem;
}
.footer-col ul li a::before {
  content: '•'; color: var(--gold); font-size: .7rem;
}
.footer-col ul li a:hover { color: var(--navy); }

.footer-bottom {
  padding: .35rem 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  font-size: .78rem; color: rgba(10,31,68,.5);
}
.footer-bottom a { color: rgba(10,31,68,.65); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--navy); }
.footer-bottom-spacer { min-width: 0; }
.footer-bottom-center { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }

.footer-contact-item {
  display: flex; gap: .75rem; margin-bottom: .75rem;
  font-size: .84rem; color: var(--text-muted);
}
.footer-contact-item i { color: var(--green); width: 16px; margin-top: .2rem; flex-shrink: 0; }

/* ─── Footer Info Strip (Offices / Memberships / Payments) ────────────────── */
.footer-info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
  padding: 1.25rem 0; margin-bottom: .3rem;
  border-top: 2px solid var(--green); border-bottom: 1px solid rgba(10,31,68,.12);
  text-align: left;
}
.footer-info-col { padding: 0 1.5rem; }
.footer-info-col:not(:first-child) { border-left: 1px solid rgba(10,31,68,.12); }
.footer-info-col h5 {
  font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
  color: var(--navy); text-decoration: underline; text-underline-offset: 4px;
  margin-bottom: .75rem;
}
.footer-info-col p { font-size: .82rem; color: rgba(10,31,68,.75); margin: 0 0 .6rem; line-height: 1.65; }
.footer-info-col p strong { color: var(--navy); }
.footer-info-col a { color: inherit; transition: color var(--transition); }
.footer-info-col a:hover { color: var(--green); }
.footer-info-list { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.footer-info-list li { margin-bottom: .35rem; color: rgba(10,31,68,.75); }
.footer-info-logos { max-width: 100%; height: auto; display: block; margin-bottom: .5rem; }
.footer-info-logos--payment { max-width: 340px; }

@media (max-width: 780px) {
  .footer-grid-3col { grid-template-columns: 1fr; text-align: center; }
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-bottom-spacer { display: none; }
  .footer-payments { justify-self: center; }
  .footer-col { padding: 0 0 1.5rem; }
  .footer-col:not(:first-child) { border-left: none; border-top: 1px solid rgba(10,31,68,.12); padding-top: 1.5rem; }
  .footer-info-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-info-col { padding: 0 0 1.5rem; }
  .footer-info-col:not(:first-child) { border-left: none; border-top: 1px solid rgba(10,31,68,.12); padding-top: 1.5rem; }
  .footer-info-logos { margin: 0 auto .5rem; }
}

@media (max-width: 780px) {
  .footer-cta-row { flex-direction: column; text-align: center; }
}

/* ─── Blog Preview ────────────────────────────────────────────────────────── */
#blog-preview { background: var(--white); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.blog-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card-img { height: 200px; overflow: hidden; background: var(--grey-200); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-body { padding: 1.5rem; }
.blog-cat {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .5rem;
}
.blog-card-body h4 { font-size: 1.1rem; margin-bottom: .5rem; line-height: 1.4; }
.blog-card-body p  { font-size: .85rem; line-height: 1.6; }
.blog-meta {
  display: flex; gap: 1rem; margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--grey-200);
  font-size: .75rem; color: var(--text-muted);
}

/* ─── Animations ──────────────────────────────────────────────────────────── */
.fade-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up-delay-1 { transition-delay: .1s; }
.fade-up-delay-2 { transition-delay: .2s; }
.fade-up-delay-3 { transition-delay: .3s; }
.fade-up-delay-4 { transition-delay: .4s; }

/* ─── Loader ──────────────────────────────────────────────────────────────── */
#page-loader {
  position: fixed; inset: 0; background: var(--navy-dark); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo {
  font-family: var(--font-heading); font-size: 2rem; font-weight: 700;
  color: var(--white); margin-bottom: 2rem;
}
.loader-logo span { color: var(--orange); }
.loader-bar {
  width: 200px; height: 2px; background: rgba(255,255,255,.1);
  border-radius: 2px; overflow: hidden;
}
.loader-progress {
  height: 100%; background: var(--orange);
  animation: loader-fill 1.2s ease forwards;
}
@keyframes loader-fill { from { width: 0; } to { width: 100%; } }

/* ─── Utility: Image placeholders (replaced by real photos on deploy) ─────── */
.img-placeholder {
  background: linear-gradient(135deg, var(--sand), var(--cream-dk));
  display: flex; align-items: center; justify-content: center;
  color: rgba(10,31,68,.2); font-size: 3rem;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
/* Intermediate laptops: compact spacing for 10-item menu */
@media (min-width: 1101px) and (max-width: 1366px) {
  #main-nav .container { padding: 0 1.25rem; }
  .nav-inner-flat { gap: 1rem; }
  .nav-flat-links { gap: 0.95rem; }
  .nav-flat-links > li > a,
  .nav-flat-trigger {
    font-size: .8rem;
    gap: .2rem;
  }
}

@media (max-width: 1100px) {
  .nav-links, .nav-cta { display: none; }
  .nav-tier-bottom, .nav-tier-top-right { display: none; }
  .hamburger { display: flex; }
  .segments-grid   { grid-template-columns: repeat(2,1fr); }
  .destination-cards { grid-template-columns: repeat(3,1fr); }
  .dest-card:nth-child(1),
  .dest-card:nth-child(5) { grid-row: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .section { padding: 2rem 0; }
  .section-lg { padding: 2.5rem 0; }
  .hero-intro-search-side { max-width: 440px; margin: 0 auto; width: 100%; }
  .safari-cards  { grid-template-columns: 1fr 1fr; }
  .tembea-grid   { grid-template-columns: 1fr; }
  .tembea-visual { max-height: 320px; }
  .yah-grid      { grid-template-columns: 1fr; }
  .yah-visual    { grid-template-columns: repeat(3,1fr); }
  .yah-img:nth-child(1) { grid-row: auto; }
  .newsletter-inner { grid-template-columns: 1fr; }
  .usp-grid      { grid-template-columns: 1fr 1fr; }
  .blog-grid     { grid-template-columns: 1fr 1fr; }
  .section-header h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .trust-items   { gap: .75rem 1.5rem; }
  .destination-cards { gap: .75rem; }
  .segments-grid { grid-template-columns: repeat(2,1fr); }
  .segment-card  { min-height: 300px; }
}

@media (max-width: 640px) {
  .section { padding: 1.5rem 0; }
  .section-lg { padding: 1.75rem 0; }
  .section-header { margin-bottom: 2rem; }
  .segments-grid { grid-template-columns: 1fr; }
  .segment-card  { min-height: 260px; }
  .safari-cards  { grid-template-columns: 1fr; }
  .destination-cards { grid-template-columns: 1fr 1fr; }
  .dest-card     { aspect-ratio: 4/3; }
  .hero-intro-search-side { max-width: 100%; }
  .usp-grid      { grid-template-columns: 1fr; }
  .blog-grid     { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; }
  .testimonial-card { grid-template-columns: 1fr; }
  .newsletter-input-row { flex-direction: column; }
  .trust-items   { justify-content: center; flex-wrap: wrap; text-align: center;
                   padding-bottom: .5rem; gap: 1.25rem; }
  #trust-bar     { padding: .9rem 0; }
  .safari-card-img { height: 200px; }
  .section-header h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .btn-lg        { padding: .85rem 1.6rem; font-size: .85rem; }
  .container     { padding: 0 1rem; }
  .tembea-grid   { gap: 2rem; }
  .yah-grid      { gap: 2rem; }
  .yah-visual    { grid-template-columns: repeat(2,1fr); }
  .footer-grid   { gap: 2rem; }
}

/* --- Responsive Grid Utilities --- */
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; }
.grid-2-col-asym { display: grid; grid-template-columns: 1fr 1.3fr; }
.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4-col { display: grid; grid-template-columns: repeat(4, 1fr); }

.grid-align-center { align-items: center; }
.grid-align-start { align-items: flex-start; }

.grid-gap-1 { gap: 1rem; }
.grid-gap-3q { gap: 0.75rem; }
.grid-gap-1q { gap: 1.25rem; }
.grid-gap-3 { gap: 3rem; }
.grid-gap-4 { gap: 4rem; }

@media (max-width: 900px) {
  .grid-2-col, .grid-2-col-asym, .grid-3-col, .grid-4-col { grid-template-columns: 1fr; gap: 2rem !important; }
  .grid-4-col { grid-template-columns: repeat(2, 1fr); gap: 1rem !important; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-4-col { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}


/* --- Fix Inline Grids for Mobile --- */
@media (max-width: 900px) {
  div[style*='grid-template-columns:1fr 1fr'],
  div[style*='grid-template-columns: 1fr 1fr'],
  div[style*='grid-template-columns:1.2fr 1fr'],
  div[style*='grid-template-columns: 1.2fr 1fr'],
  div[style*='grid-template-columns:1fr 1.2fr'],
  div[style*='grid-template-columns: 1fr 1.2fr'],
  div[style*='grid-template-columns:repeat(3,1fr)'],
  div[style*='grid-template-columns: repeat(3, 1fr)'],
  div[style*='grid-template-columns:repeat(4,1fr)'],
  div[style*='grid-template-columns: repeat(4, 1fr)'],
  div[style*='grid-template-columns:repeat(2,1fr)'],
  div[style*='grid-template-columns: repeat(2, 1fr)'] {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  div[style*='grid-template-columns:repeat(4,1fr)'],
  div[style*='grid-template-columns: repeat(4, 1fr)'] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- Sitewide Mobile Hardening --- */
@media (max-width: 900px) {
  /* Handle inline page layouts that use fixed sidebars (e.g. 1fr 300px / 1fr 360px). */
  div[style*='grid-template-columns'][style*='1fr 300px'],
  div[style*='grid-template-columns'][style*='1fr 360px'],
  div[style*='grid-template-columns'][style*='300px 1fr'],
  div[style*='grid-template-columns'][style*='360px 1fr'] {
    grid-template-columns: 1fr !important;
  }

  /* Keep media and embeds inside the viewport on tablet/mobile widths. */
  iframe,
  video,
  embed,
  object {
    max-width: 100%;
    width: 100%;
  }

  /* Prevent very long labels/URLs from pushing horizontal overflow. */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  a,
  span,
  li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Hide decorative background word on smaller screens. */
  #young-at-heart::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .logo-img {
    height: 56px;
    max-width: 200px;
  }

  #mobile-nav {
    padding: 5.5rem 1rem 2rem;
  }

  #mobile-nav a {
    font-size: 1.15rem;
  }

  .hero-dots {
    right: 1rem;
    bottom: 6.5rem;
  }

  .hero-tagline {
    font-size: 1rem;
    line-height: 1.6;
  }
}


/* ─── Mobile: buttons wrap instead of running off-screen (21 Sept 2026) ────
   .btn is white-space:nowrap globally, so long labels ("View Our Safari &
   Tours Packages", Flights/Blog/Vacations buttons) overflowed narrow phones
   and were clipped by the body's overflow-x:hidden. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; justify-content: center; line-height: 1.35; max-width: 100%; }
  .btn-lg { padding: .9rem 1.4rem; }
}

/* ─── Mobile: inline flex rows / forms / footer columns must be allowed to
   shrink and wrap (21 Sept 2026) ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .flight-route-card { flex-wrap: wrap; gap: .75rem !important; }
  .flight-route-card > div:nth-child(2) { min-width: 0; flex: 1 1 180px; }
  form.ajax-form[style*="display:flex"] { flex-wrap: wrap; }
  form.ajax-form[style*="display:flex"] input { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 780px) {
  .footer-info-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-info-col { min-width: 0; overflow-wrap: anywhere; }
}

/* 320px phones: payment-logo strip and tour layout must never exceed the column */
.footer-info-logos--payment { max-width: min(340px, 100%); }
@media (max-width: 900px) {
  .tour-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .tour-layout > * { min-width: 0; }
}
@media (max-width: 480px) {
  .tour-layout ul[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* =============================================================================
   22 SEPT 2026 — CLIENT CORRECTIONS BATCH (per "PROPOSED AMENDMENTS AND
   CORRECTIONS TO WEBSITE" doc)
   ============================================================================= */

/* ── Item 20: text-over-image readability — bold white text + thin dark
   stroke/outline + soft drop shadow, so hero copy stays legible on any
   background (bright, dark or busy). Applied to every hero title/tagline
   sitewide. Ref: client's before/after DR Congo example + sitelint.com
   guidance they linked. ── */
.htxt-readable {
  font-weight: 800 !important;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.65),
     1px -1px 0 rgba(0,0,0,.65),
    -1px  1px 0 rgba(0,0,0,.65),
     1px  1px 0 rgba(0,0,0,.65),
     0 3px 12px rgba(0,0,0,.55);
}

/* ── Items 3 & 4: hero taglines (the text below every hero title, on every
   landing page — home, region, and single-destination heroes) must be
   BOLD and sized up, and the whole title+tagline block moved to the
   LEFT/TOP of the hero image or video instead of centered. ── */
.hero-lt-block {
  text-align: left;
  margin: 0 auto;
  width: 100%;
}
.hero-lt-wrap {
  width: 100%;
  justify-content: flex-start !important;
}

/* Ensure all hero containers across destinations, tours, and blogs span full width.
   Without this, a container with margin:0 auto and no explicit width shrinks to
   fit its own content when it's a flex/grid item (since auto margins override
   grid/flex stretch), instead of spanning the section and aligning flush left
   like every other container on the site. */
.hero-lt-block.container,
.container.hero-lt-block,
section[style*="display:flex"] > .container,
div[style*="display:flex"] > .container,
section[style*="display:grid"] > .container,
div[style*="display:grid"] > .container {
  width: 100%;
}
.hero-tagline-lg {
  font-weight: 800;
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  line-height: 1.45;
}
.hero-tagline-sm {
  font-weight: 700;
  font-size: clamp(.92rem, 1.5vw, 1.1rem);
  line-height: 1.5;
}

/* ── STANDING SITEWIDE RULE (client, 25 Oct 2026): every two-button (or
   three-button) CTA pair/trio on the site — in a hero band, a footer CTA
   section, anywhere two primary action buttons sit side by side — MUST use
   this class, never a one-off `justify-content:center` or `flex-start`
   flex row. On desktop this spans the full standard container width
   (1720px) with the first button flush left and the last button flush
   right, matching the site's own reference landmark: the footer CTA strip's
   phone-icon link (far left) and "Get in Touch" button (far right). This is
   not optional per-page styling — apply it to every current AND future
   two-button CTA row, without being asked each time.
   Exception: CTAs grouped under a narrower block of body text (a hero's
   text column, a 2-col sidebar layout) stay left-aligned/grouped via the
   .split-content-sidebar / .hero-intro-search-wrap overrides below — those
   are reading naturally with the paragraph above them, not a standalone
   CTA band, so they don't follow the landmark rule.
   Originally items 11, 13 & 19: "Talk to a Travel Expert" / "Plan Your
   Journey" / "Get in Touch" / "WhatsApp" CTA pairs must read as two
   separate, clearly-spaced buttons, never a joined pair. ── */
.cta-pair-separated,
.cta-trio-separated {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 769px) {
  .cta-pair-separated,
  .cta-trio-separated {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    align-items: center;
  }
  /* Inside 2-column sidebar layouts or split hero columns, maintain natural grouped alignment under editorial text */
  .split-content-sidebar .cta-pair-separated,
  .split-content-sidebar .cta-trio-separated,
  .region-about-layout .cta-pair-separated,
  .region-about-layout .cta-trio-separated,
  .hero-intro-search-wrap .cta-pair-separated,
  .hero-intro-search-wrap .cta-trio-separated {
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    width: auto !important;
  }
}

@media (max-width: 768px) {
  .cta-pair-separated,
  .cta-trio-separated {
    justify-content: center !important;
    gap: 1rem !important;
  }
}

/* ── Madam Caroline Directives (02 Oct 2026 Lot 1 & Lot 2) ── */
.bg-ivory-sand { background: var(--ivory-sand) !important; }
.bg-ivory      { background: var(--ivory) !important; }
.text-ivory-sand { color: var(--ivory-sand) !important; }

/* Standardized Page Margins across content pages — aligned to 1720px container (footer cta guide) */
.std-content-container {
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (max-width: 768px) {
  .std-content-container { padding: 0 1rem; }
}

/* Below ~1762px (1720 max-width + this padding) the auto-margin centering on
   .container/.std-content-container contributes nothing, so the side gutter
   collapses to the flat 1.25rem (20px) base padding alone — reads as "no
   margin" at ordinary laptop widths (1280/1366/1440) even though desktop
   (1920+) looks correctly inset. This scales the gutter up through exactly
   that gap, landing close to the 1920+ value right at the 1719px edge so
   the transition is seamless. Must stay last in the cascade (after both
   base rules above) to win at equal specificity.
   Client correction, 27 Oct 2026: recurring "margins" complaint on Why
   Choose Us / Reviews traced to this, not to those sections individually. */
@media (min-width: 641px) and (max-width: 1719px) {
  .container, .std-content-container { padding: 0 clamp(1.5rem, 5vw, 5.75rem); }
}

/* Enlarge body and bold content per client review to close discrepancy with headers */
.content-embolden {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.85;
}

@media (min-width: 992px) {
  body, p {
    font-size: 1.22rem;
    line-height: 1.85;
  }
  .content-embolden {
    font-size: 1.22rem;
    line-height: 1.85;
  }
  h3 {
    font-size: clamp(1.4rem, 2.3vw, 2.05rem);
  }
  h4 {
    font-size: 1.35rem;
  }
  h5 {
    font-size: 1.24rem;
  }
  .section-label {
    font-size: 1.05rem;
  }
}

/* ── Destination Highlights Bullet Grid & Read More (Lot 3) ── */
.dest-highlights-bullet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  width: 100%;
}
@media (max-width: 991px) {
  .dest-highlights-bullet-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.dest-highlight-bullet-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.6rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid rgba(10, 31, 68, 0.08);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.dest-highlight-bullet-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(198, 146, 20, 0.4);
}
.dest-highlight-arrow-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  text-decoration: none;
}
.dest-highlight-bullet-item:hover .dest-highlight-arrow-btn,
.dest-highlight-arrow-btn:hover {
  background: var(--green);
  color: var(--white);
  transform: scale(1.08);
}
@media (max-width: 991px) {
  .region-about-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ── Standardized Sitewide 2-Column Split: Narrative on Left, Sidebar / Plan Trip / Image on Right ── */
.split-content-sidebar {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
  width: 100%;
}

.split-content-image {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
}

@media (max-width: 991px) {
  .split-content-sidebar,
  .split-content-image {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}



/* Home page "Why Choose Silverbird Travel" tiles — now linked to
   /pages/why-choose-us.php (26 Oct 2026 client correction); subtle hover
   affordance so they read as clickable. */
.usp-bullet-item {
  transition: transform .18s ease;
}
.usp-bullet-item:hover h4 {
  color: var(--gold-dk, var(--gold));
}
.usp-bullet-item:hover {
  transform: translateX(3px);
}

/* =============================================================================
   29 OCT 2026 — 27-Oct illustrations doc (client)
   ============================================================================= */
/* Home section titles link to their own landing pages, without looking like
   body links. */
.title-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.title-link:hover, .title-link:focus-visible { color: var(--gold-dk, #a8843f); }

/* "Read More" was an easy-to-miss inline text link — client asked for it to
   be enlarged and look like the other call-to-action buttons. */
.read-more-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-left: .35rem; padding: .5rem 1.1rem;
  background: var(--orange); color: var(--white) !important;
  font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius-md, 8px); text-decoration: none; line-height: 1.2;
  vertical-align: middle; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.read-more-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.read-more-btn i { font-size: .75rem; }

/* READ MORE button closing each of the 4 home sections. */
.read-more-row { text-align: center; margin-top: 2.5rem; }
.read-more-cta { min-width: 220px; justify-content: center; }

/* Counter bar items are links now (client: "titles should be activated
   and hyperlinked"). */
a.trust-item { text-decoration: none; transition: color .2s ease; }
a.trust-item:hover span, a.trust-item:focus-visible span { color: var(--gold-dk, #a8843f); text-decoration: underline; text-underline-offset: 3px; }

/* Sidebar split layouts (`1fr 340px`): let the content column shrink below its
   widest child so the sidebar can't be pushed off-screen (was 43px past the
   viewport on /destinations at 1366px). */
.region-about-layout > *, .blog-layout > *, .tour-layout > * { min-width: 0; }
/* Destination-name button grids: equal tracks that may shrink, labels wrap,
   instead of long names (e.g. "Indian Ocean Beaches & Islands") forcing the
   grid wider than the screen at tablet widths. */
.dest-name-list--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dest-name-list--grid a { min-width: 0; white-space: normal; }
@media (max-width: 900px) { .dest-name-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dest-name-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }