/* =============================================
   ASANTE TOURS — style.css
   Global styles, components, sections
   ============================================= */

/* ── SANGBLEU SUNRISE — SELF-HOSTED FONT (NOT YET PURCHASED)
   When you purchase the font, create a /fonts/ folder inside
   public_html/ and upload the .woff2 and .woff files there,
   then restore these @font-face blocks using RELATIVE paths:
     src: url('../fonts/SangBleuSunrise-Light.woff2') format('woff2')
   The CSS variables below already list Cormorant Garamond and
   Jost as fallbacks, so the site looks great in the meantime.
─────────────────────────────────────────────────────────────── */

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand-dark:    #3A2F3C;
  --brand-gold:    #C9A84C;
  --brand-gold-lt: #e0c070;
  --brand-green:   #4d8413;       /* ← PRIMARY BUTTON / PRICE / TAG COLOR */
  --brand-green-lt:#5e9e18;       /* hover state */
  --brand-cream:   #fdf9ec;       /* ← used for button text on green */
  --brand-cream-bg:#f8f5f0;       /* section backgrounds */
  --brand-white:   #ffffff;
  --text-primary:  #1a1a1a;
  --text-muted:    #6b6b6b;
  --text-light:    #9a9a9a;
  --border:        rgba(0,0,0,0.10);
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.06);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.14);
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;

  /* ── FONT VARIABLES ─────────────────────────────────
     Each variable lists SangBleu Sunrise first.
     If the font files haven't loaded yet, the browser
     falls back to Cormorant Garamond (for serif roles)
     or Jost (for sans roles) — both already loaded via
     Google Fonts on your pages — so text is always visible.

     Role mapping:
       --font-display  → serif headings, hero titles, pull quotes
                         SangBleuSunrise-Medium → Cormorant Garamond → Georgia → serif
       --font-body     → body copy, descriptions, paragraphs
                         SangBleuSunrise-Light  → Jost → system-ui → sans-serif
       --font-emphasis → labels, buttons, badges, callouts
                         SangBleuSunrise-Medium → Jost → system-ui → sans-serif
  ─────────────────────────────────────────────────── */
  --font-display:  'SangBleuSunrise-Medium', 'Cormorant Garamond', Georgia, serif;
  --font-body:     'SangBleuSunrise-Light',  'Jost', system-ui, sans-serif;
  --font-emphasis: 'SangBleuSunrise-Medium', 'Jost', system-ui, sans-serif;

  --transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --container:     1240px;
}

/* ── KENSINGTON-STYLE TYPOGRAPHY UTILITY CLASSES ─────────
   These mirror the exact role structure from Kensington Tours.
   Use them on any element in your HTML as needed.
   They are additive — they do not change any existing styles.

   SERIF DISPLAY (for editorial/hero moments):
     .serif-large   → big pull quotes, hero display text
     .serif-medium  → section intro text, feature labels
     .serif-small   → card titles, sidebar headings

   BODY COPY (light, readable):
     .text-large    → intro paragraphs, lead copy
     .text-regular  → standard body paragraphs
     .text-small    → secondary descriptions, card body
     .text-xsmall   → captions, footnotes, fine print

   EMPHASIS / LABELS (medium weight sans):
     .text-emphasis-regular → prices, callout labels, nav items
     .text-emphasis-small   → badges, tag lines, meta info
     .text-emphasis-xsmall  → all-caps labels, overlines
──────────────────────────────────────────────────────── */

/* Serif display — large */
.serif-large {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.625rem;
  font-weight: 400;
}
@media (min-width: 64rem) {
  .serif-large {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* Serif display — medium */
.serif-medium {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3125rem;
  font-weight: 400;
}
@media (min-width: 64rem) {
  .serif-medium {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }
}

/* Serif display — small */
.serif-small {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3125rem;
  font-weight: 400;
}

/* Body — large (intro / lead paragraphs) */
.text-large {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 300;
}

/* Body — regular (standard paragraphs) */
.text-regular {
  font-family: var(--font-body);
  font-size: 1rem !important;
  line-height: 1.375rem;
  font-weight: 300;
}
@media (min-width: 64rem) {
  .text-regular {
    font-size: 1.125rem !important;
    line-height: 1.75rem;
  }
}

/* Body — small (card descriptions, secondary) */
.text-small {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 300;
}
@media (min-width: 64rem) {
  .text-small {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Body — xsmall (captions, footnotes) */
.text-xsmall {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 300;
}
@media (min-width: 64rem) {
  .text-xsmall {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* Emphasis — regular (prices, callout labels) */
.text-emphasis-regular {
  font-family: var(--font-emphasis);
  font-size: 1rem;
  line-height: 1.375rem;
  font-weight: 500;
}
@media (min-width: 64rem) {
  .text-emphasis-regular {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* Emphasis — small (badges, meta info) */
.text-emphasis-small {
  font-family: var(--font-emphasis);
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 500;
}
@media (min-width: 64rem) {
  .text-emphasis-small {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Emphasis — xsmall (overlines, all-caps labels) */
.text-emphasis-xsmall {
  font-family: var(--font-emphasis);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}
@media (min-width: 64rem) {
  .text-emphasis-xsmall {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

html { scroll-behavior: smooth; font-size: 18px; } /* INCREASED from 16px — all rem values scale up */

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--brand-white);
  line-height: 1.75;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- TYPOGRAPHY ---- */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: 12px;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--brand-dark);
  margin-bottom: 16px;
}

.section-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 540px;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header .section-sub {
  margin: 0 auto;
}

/* ================================================================
   UNIVERSAL BUTTON SYSTEM — control all buttons from here
   Theme: Green (#4d8413) background + Cream (#fdf9ec) text
   Override inline styles by using !important on btn-green class
   ================================================================ */

/* PRIMARY ACTION BUTTON — green bg, cream text */
.btn-primary,
.btn-green,
.nav-cta,
.aib-btn,
.footer-cta,
.tour-card__btn,
.sc-btn-view,
.dsn-cta,
.is-book,
.mf-submit {
  display: inline-block;
  background: var(--brand-green) !important;
  color: var(--brand-cream) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary:hover,
.btn-green:hover,
.nav-cta:hover,
.aib-btn:hover,
.footer-cta:hover,
.tour-card__btn:hover,
.sc-btn-view:hover,
.dsn-cta:hover,
.is-book:hover,
.mf-submit:hover {
  background: var(--brand-green-lt) !important;
  color: var(--brand-cream) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(77,132,19,0.35);
}

/* GHOST / OUTLINE BUTTON — white border on dark backgrounds */
.btn-ghost {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.75);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 30px;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.btn-ghost-light {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 30px;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-ghost-light:hover {
  background: rgba(255,255,255,0.18);
}

.btn-outline {
  display: inline-block;
  border: 2px solid var(--brand-dark);
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: 30px;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-outline:hover {
  background: var(--brand-dark);
  color: #fff;
}

/* ITINERARY / OUTLINE TOUR BUTTON */
.sc-btn-itin {
  display: inline-block;
  background: transparent !important;
  color: var(--brand-green) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 20px;
  border: 2px solid var(--brand-green) !important;
  white-space: nowrap;
  transition: all .25s;
  text-decoration: none;
  cursor: pointer;
}

.sc-btn-itin:hover {
  background: var(--brand-green) !important;
  color: var(--brand-cream) !important;
  border-color: var(--brand-green) !important;
}

/* PRICE VALUES — green throughout site */
.tour-card__price strong,
.sc-price-val,
.is-amount,
.dest-card__from strong,
.of-num,
.trust-num {
  color: var(--brand-green) !important;
}

/* TOUR TAGS / BADGES — green theme */
.tour-card__country,
.sc-country,
.sc-badge--green,
.idea-card__tag,
.dest-card__tags,
.dh-label,
.th__badge,
.sc-badge--gold {
  background: var(--brand-green) !important;
  color: var(--brand-cream) !important;
  border-color: var(--brand-green) !important;
}

/* Keep gold for decorative/accent elements (stars, section eyebrow, etc.) */
.tour-card__highlights,
.section-eyebrow,
.mega-heading,
.footer-heading,
.brand-gold-text { color: var(--brand-gold); }

/* ---- SCROLL INFO BAR ---- */
#asante-infobar {
  position: fixed;
  bottom: -80px;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--brand-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.2);
  transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 16px;
  flex-wrap: wrap;
}
#asante-infobar.visible { bottom: 0; }
#asante-infobar.hidden  { bottom: -80px; }
.aib-left { display: flex; align-items: center; gap: 10px; }
.aib-text { color: rgba(255,255,255,0.88); font-size: 13px; }
.aib-text strong { color: var(--brand-gold); font-weight: 600; }
.aib-right { display: flex; align-items: center; gap: 16px; }
.aib-phone { color: var(--brand-gold); font-size: 14px; font-weight: 600; white-space: nowrap; }
.aib-phone:hover { color: var(--brand-gold-lt); }
.aib-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.2); }
.aib-btn {
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 8px 20px;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}
.aib-btn:hover { background: var(--brand-gold-lt); transform: translateY(-1px); }

/* ---- WHATSAPP FLOAT ---- */
.wa-float {
  position: fixed;
  bottom: 72px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  animation: wa-pop 0.5s 1s ease both;
}
@keyframes wa-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.wa-float__bubble {
  background: #fff;
  color: #128C7E;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--transition), transform var(--transition);
}
.wa-float:hover .wa-float__bubble { opacity: 1; transform: translateX(0); }
.wa-float__icon {
  width: 54px;
  height: 54px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform var(--transition);
}
.wa-float__icon svg { width: 28px; height: 28px; }
.wa-float:hover .wa-float__icon { transform: scale(1.08); }

/* ---- HERO ---- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.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-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(30,20,32,0.72) 0%,
    rgba(30,20,32,0.35) 60%,
    rgba(30,20,32,0.10) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 0 40px;
  animation: fadeUp 1s 0.3s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--brand-gold);
  font-weight: 500;
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 20px;
}

.hero-title em {
  font-style: italic;
  color: var(--brand-gold);
}

.hero-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.82);
  margin-bottom: 36px;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.3);
  animation: scrollAnim 2s ease-in-out infinite;
}

@keyframes scrollAnim {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero-slide-nav {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.slide-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.slide-btn.active,
.slide-btn:hover {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-dark);
}
/* ---- NEW HERO TEXT SYSTEM ---- */
.hero-content--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  text-align: center;
}

/* All three main lines — same bold size, single line, no wrapping */
.hero-main {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.0;
  color: #fff;
  margin: 0;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 2px 28px rgba(0,0,0,0.4);
}

/* Safaritrips — lowercase, gold, italic */
.hero-main--lower {
  text-transform: lowercase;
  font-style: italic;
  color: var(--brand-gold);
  letter-spacing: 0.08em;
}

.hero-main--bold {
  font-weight: 700;
}

/* Artistic divider + calligraphy block */
.hero-art-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}

.hero-art-line {
  width: 220px;
  height: auto;
  display: block;
}

.hero-calligraphy {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.82);
}

/* Keep these for legacy compatibility */
.hero-mini {
  font-family: var(--font-body);
  font-size: 20px;
  letter-spacing: 6px;
  text-transform: lowercase;
  color: var(--brand-gold);
  margin: 0 0 10px 2px;
}

.hero-divider {
  width: 140px;
  height: 2px;
  margin: 18px 0;
  background: var(--brand-gold);
  position: relative;
}

.hero-divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.2);
  opacity: 0.6;
}

/* Bottom tagline */
.hero-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  margin-top: 8px;
}

/* Mobile hero text */
@media (max-width: 600px) {
  .hero-main { font-size: clamp(2.2rem, 11vw, 3.4rem); white-space: nowrap; }
  .hero-art-line { width: 160px; }
  .hero-calligraphy { font-size: 1rem; letter-spacing: 0.14em; }
}

/* ---- TRUST BAR ---- */
.trust-bar {
  background: var(--brand-dark);
  padding: 28px 0;
}

.trust-items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px;
}

.trust-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--brand-gold);
  line-height: 1.1;
}

.trust-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

.trust-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.12);
}

/* ---- DESTINATIONS ---- */
.destinations {
  padding: 100px 0;
  background: var(--brand-cream);
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.dest-card {
  background: var(--brand-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.dest-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.dest-card__img {
  position: relative;
  overflow: hidden;
  height: 240px;
}

.dest-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.dest-card:hover .dest-card__img img {
  transform: scale(1.07);
}

.dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,20,32,0.5) 0%, transparent 60%);
}

.dest-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}

.dest-card__body {
  padding: 20px 22px 22px;
}

.dest-card__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--brand-dark);
  margin-bottom: 4px;
}

.dest-card__tags {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--brand-gold);
  font-weight: 500;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.dest-card__desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.dest-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.dest-card__from {
  font-size: 12px;
  color: var(--text-muted);
}

.dest-card__from strong {
  color: var(--brand-dark);
  font-size: 15px;
  font-weight: 600;
}

.dest-card__link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--brand-gold);
  text-transform: uppercase;
  transition: color var(--transition);
}

.dest-card__link:hover { color: var(--brand-dark); }

/* ---- WHY US ---- */
.why-us {
  padding: 100px 0;
  background: var(--brand-white);
}

.why-us__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.why-us__image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.why-us__image img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.why-us__img-badge {
  position: absolute;
  bottom: 32px;
  right: -20px;
  background: var(--brand-gold);
  color: var(--brand-dark);
  padding: 20px 28px;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.badge-num {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.badge-txt {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

.why-us__lead {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
  font-weight: 300;
}

.why-us__points {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.why-point {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.why-point__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(201,168,76,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold);
}

.why-point h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-dark);
  margin-bottom: 4px;
}

.why-point p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- FEATURED TOURS ---- */
.featured-tours {
  padding: 100px 0;
  background: var(--brand-cream);
}

.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 48px;
}

.tour-card {
  background: var(--brand-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.tour-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.tour-card__img {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.tour-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tour-card:hover .tour-card__img img {
  transform: scale(1.05);
}

.tour-card__duration {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(30,20,32,0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.tour-card__badge-feat {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tour-card--featured {
  box-shadow: 0 0 0 2px var(--brand-gold), var(--shadow-md);
}

.tour-card__body {
  padding: 22px 22px 20px;
}

.tour-card__country {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-cream);
  font-weight: 700;
  margin-bottom: 6px;
  display: inline-block;
  background: var(--brand-green);
  padding: 2px 10px;
  border-radius: 12px;
}

.tour-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--brand-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}

.tour-card__excerpt {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 14px;
}

.tour-card__meta {
  margin-bottom: 16px;
}

.tour-card__highlights {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--brand-gold);
  font-weight: 500;
}

.tour-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.tour-card__price {
  font-size: 13px;
  color: var(--text-muted);
}

.tour-card__price strong {
  font-size: 18px;
  color: var(--brand-green);
  font-weight: 700;
}

.tour-card__btn {
  background: var(--brand-green);
  color: var(--brand-cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 20px;
  transition: background var(--transition);
  text-decoration: none;
  display: inline-block;
}

.tour-card__btn:hover { background: var(--brand-green-lt); color: var(--brand-cream); }

.tours-cta { text-align: center; }

/* ---- TRAVEL STYLES ---- */
.travel-styles {
  padding: 100px 0;
  background: var(--brand-white);
}

.styles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: repeat(2, 220px);
  gap: 16px;
}

.style-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  cursor: pointer;
  transition: transform var(--transition);
}

.style-card:hover { transform: scale(1.02); }

.style-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,20,32,0.72) 0%, rgba(30,20,32,0.1) 60%);
  transition: background var(--transition);
}

.style-card:hover .style-card__overlay {
  background: linear-gradient(to top, rgba(30,20,32,0.85) 0%, rgba(30,20,32,0.2) 60%);
}

.style-card h3 {
  position: relative;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 4px;
}

.style-card p {
  position: relative;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
}

/* ---- TESTIMONIALS ---- */
.testimonials {
  padding: 100px 0;
  background: var(--brand-dark);
}

.testimonials .section-eyebrow { color: var(--brand-gold); }
.testimonials .section-title { color: #fff; }

.testimonials-slider {
  max-width: 760px;
  margin: 0 auto 32px;
  position: relative;
  min-height: 200px;
}

.testimonial {
  display: none;
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.testimonial.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.testimonial__stars {
  color: var(--brand-gold);
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 24px;
}

.testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.88);
  line-height: 1.6;
  margin-bottom: 32px;
}

.testimonial__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.testimonial__author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-gold);
}

.testimonial__author strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.testimonial__author span {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.dot.active {
  background: var(--brand-gold);
  transform: scale(1.3);
}

/* ---- CTA BANNER ---- */
.cta-banner {
  position: relative;
  padding: 120px 0;
  background-color: #fdf9ec; /* solid background */
  text-align: center;
  overflow: hidden;
}

/* REMOVE DARK OVERLAY EFFECT */
.cta-banner__overlay {
  display: none;
}

.cta-banner__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

/* TEXT FIX FOR LIGHT BACKGROUND */
.cta-banner__content h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: #2b2b2b;
  margin-bottom: 16px;
}

.cta-banner__content p {
  font-size: 17px;
  color: #3a3a3a;
  margin-bottom: 36px;
  font-weight: 300;
}

/* ACTION BUTTONS */
.cta-banner__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* BUTTON FIX FOR LIGHT BG */
.cta-banner .btn-ghost-light {
  color: #2b2b2b;
  border-color: #2b2b2b;
}

.cta-banner .btn-ghost-light:hover {
  background: #2b2b2b;
  color: #fff;
}
/* ---- FOOTER ---- */
#site-footer {
  background: var(--brand-dark);
  color: #fff;
}

.footer-top { padding: 80px 0 60px; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr;
  gap: 48px;
}

.footer-logo {
  height: 52px;
  width: auto;
  margin-bottom: 16px;
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--brand-gold);
  margin-bottom: 12px;
}

.footer-about {
  font-size: 15px;
  color: rgba(253,249,236,0.72);
  line-height: 1.8;
  margin-bottom: 24px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  transition: all var(--transition);
}

.social-icon svg { width: 16px; height: 16px; }

.social-icon:hover {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-dark);
}

.footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 15px;
  color: #fdf9ec;
  opacity: 0.72;
  transition: color var(--transition), opacity var(--transition);
  text-decoration: none;
}

.footer-links a:hover { opacity: 1; color: #fdf9ec; }

.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: rgba(253,249,236,0.72);
}

.footer-contact-item svg {
  min-width: 16px;
  margin-top: 2px;
  color: var(--brand-gold);
}

.footer-contact-item a {
  display: block;
  color: rgba(253,249,236,0.72);
  transition: color var(--transition), opacity var(--transition);
}

.footer-contact-item a:hover { color: #fdf9ec; opacity: 1; }

.footer-cta {
  display: inline-block;
  background: var(--brand-green);
  color: var(--brand-cream);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 25px;
  transition: background var(--transition);
  border: none;
  cursor: pointer;
}

.footer-cta:hover { background: var(--brand-green-lt); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 14px;
  color: rgba(253,249,236,0.4);
  line-height: 1.8;
}
/*Destination pages*/
/* ============================================
       UGANDA PAGE — INLINE STYLES
       All page-specific styles live here so no
       extra CSS file is needed
    ============================================ */

    /* ---------- DESTINATION HERO ---------- */
    .dest-hero {
      position: relative;
      height: 92vh;
      min-height: 580px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* Slides */
    .dh-slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.4s ease;
    }
    .dh-slide.active { opacity: 1; }

    /* Fallback gradient when images not yet loaded */
    .dh-slide:nth-child(1) { background-color: #2d5a3d; background-image: url('img/uganda/hero-gorilla.jpg'); }
    .dh-slide:nth-child(2) { background-color: #4a7c59; background-image: url('img/uganda/hero-murchison.jpg'); }
    .dh-slide:nth-child(3) { background-color: #1a3d28; background-image: url('img/uganda/hero-queen-elizabeth.jpg'); }

    .dh-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(20,14,22,0.90) 0%,
        rgba(20,14,22,0.45) 45%,
        rgba(20,14,22,0.12) 100%
      );
    }

    /* Hero content */
    .dh-content {
      position: relative;
      z-index: 3;
      padding: 0 0 0 0;
    }

    .dh-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-bottom: 20px;
    }
    .dh-breadcrumb a { color: rgba(255,255,255,0.5); transition: color .3s; }
    .dh-breadcrumb a:hover { color: var(--brand-gold); }
    .dh-breadcrumb span { color: rgba(255,255,255,0.22); }

    .dh-label {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--brand-gold);
      border: 1px solid rgba(201,168,76,0.4);
      border-radius: 20px;
      padding: 4px 14px;
      margin-bottom: 16px;
    }

    .dh-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 300;
      color: #fff;
      line-height: 1.0;
      margin-bottom: 18px;
    }
    .dh-title em { font-style: italic; color: var(--brand-gold); }

    .dh-tagline {
      font-size: 16px;
      color: rgba(255,255,255,0.72);
      font-weight: 300;
      margin-bottom: 32px;
      max-width: 560px;
      line-height: 1.7;
    }

    .dh-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }

    /* Slide dots */
    .dh-dots {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 3;
    }
    .dh-dot {
      width: 28px;
      height: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,0.3);
      cursor: pointer;
      transition: background .3s, width .3s;
      border: none;
    }
    .dh-dot.active { background: var(--brand-gold); width: 44px; }

    /* Slide counter */
    .dh-counter {
      position: absolute;
      bottom: 32px;
      right: 40px;
      font-size: 11px;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.4);
      z-index: 3;
    }
    .dh-counter strong { color: rgba(255,255,255,0.8); font-size: 14px; }

    /* Thumbnail strip */
    .dh-thumbs {
      position: absolute;
      bottom: 80px;
      right: 40px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 3;
    }
    .dh-thumb {
      width: 64px;
      height: 48px;
      border-radius: 6px;
      background-size: cover;
      background-position: center;
      cursor: pointer;
      opacity: 0.55;
      border: 2px solid transparent;
      transition: opacity .3s, border-color .3s;
    }
    .dh-thumb.active, .dh-thumb:hover { opacity: 1; border-color: var(--brand-gold); }

    /* ---------- DESTINATION SUB-NAV ---------- */
    .dest-subnav {
      background: var(--brand-dark);
      position: sticky;
      top: 0;
      z-index: 95;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .dest-subnav__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .dest-subnav__inner::-webkit-scrollbar { display: none; }
    .dsn-link {
      display: block;
      padding: 16px 22px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: color .3s, border-color .3s;
    }
    .dsn-link:hover, .dsn-link.active {
      color: #fff;
      border-bottom-color: var(--brand-gold);
    }
    .dsn-cta {
      margin-left: auto;
      flex-shrink: 0;
      background: var(--brand-gold);
      color: var(--brand-dark);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 10px 24px;
      border-radius: 0;
      white-space: nowrap;
      transition: background .3s;
    }
    .dsn-cta:hover { background: var(--brand-gold-lt); }

    /* ---------- OVERVIEW STRIP ---------- */
    .overview-strip {
      background: var(--brand-cream);
      padding: 56px 0;
    }
    .overview-strip__inner {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 72px;
      align-items: center;
    }
    .overview-text h2 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 400;
      color: var(--brand-dark);
      line-height: 1.2;
      margin-bottom: 20px;
    }
    .overview-text p {
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.85;
      margin-bottom: 14px;
    }
    .overview-text a {
      font-size: 13px;
      font-weight: 600;
      color: var(--brand-gold);
      text-transform: uppercase;
      letter-spacing: 1px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      transition: gap .25s;
    }
    .overview-text a:hover { gap: 12px; }

    .overview-facts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .of-item {
      background: var(--brand-white);
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      border: 1px solid rgba(0,0,0,0.06);
      transition: box-shadow .3s;
    }
    .of-item:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
    .of-num {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 300;
      color: var(--brand-gold);
      line-height: 1;
      display: block;
      margin-bottom: 4px;
    }
    .of-label {
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    /* ---------- IDEAS SECTION ---------- */
    .ideas-section {
      padding: 80px 0;
      background: var(--brand-white);
    }
    .ideas-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 20px;
      margin-top: 48px;
    }
    .idea-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 260px;
      cursor: pointer;
    }
    .idea-card:first-child {
      grid-column: span 2;
      height: 320px;
    }
    .idea-card__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .5s ease;
    }
    .idea-card:hover .idea-card__bg { transform: scale(1.06); }
    .idea-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(20,14,22,0.78) 0%, rgba(20,14,22,0.08) 60%);
      transition: background .3s;
    }
    .idea-card:hover .idea-card__overlay {
      background: linear-gradient(to top, rgba(20,14,22,0.88) 0%, rgba(20,14,22,0.15) 60%);
    }
    .idea-card__body {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 24px;
    }
    .idea-card__tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--brand-gold);
      margin-bottom: 8px;
    }
    .idea-card__title {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 400;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 6px;
    }
    .idea-card:first-child .idea-card__title { font-size: 26px; }
    .idea-card__sub {
      font-size: 12px;
      color: rgba(255,255,255,0.65);
    }

    /* ---------- TOUR CARDS (Safari listing) ---------- */
    .tours-section {
      padding: 80px 0;
      background: var(--brand-cream);
    }

    .tours-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 40px;
      margin-top: 32px;
    }
    .tf-btn {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.5px;
      padding: 8px 20px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--brand-white);
      color: var(--text-muted);
      cursor: pointer;
      transition: all .25s;
    }
    .tf-btn:hover, .tf-btn.active {
      background: var(--brand-dark);
      border-color: var(--brand-dark);
      color: #fff;
    }

    .safari-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 28px;
    }

    /* Tour card */
    .safari-card {
      background: var(--brand-white);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(0,0,0,0.07);
      transition: transform .35s ease, box-shadow .35s ease;
      display: flex;
      flex-direction: column;
    }
    .safari-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 48px rgba(0,0,0,0.13);
    }

    /* Customize card spans 2 columns */
    .safari-card--customize {
      grid-column: span 1;
      background: var(--brand-dark);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 40px 32px;
      min-height: 340px;
    }

    .sc-img {
      position: relative;
      height: 230px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .sc-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .safari-card:hover .sc-img img { transform: scale(1.06); }

    .sc-badges {
      position: absolute;
      top: 14px;
      left: 14px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .sc-badge {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 14px;
    }
    .sc-badge--gold { background: var(--brand-gold); color: var(--brand-dark); }
    .sc-badge--dark { background: rgba(20,14,22,0.78); color: #fff; }
    .sc-badge--green { background: #2e7d32; color: #fff; }

    .sc-duration {
      position: absolute;
      bottom: 14px;
      right: 14px;
      background: rgba(20,14,22,0.8);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 12px;
    }

    .sc-body {
      padding: 20px 22px 22px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .sc-country {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--brand-gold);
      margin-bottom: 6px;
    }
    .sc-title {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 500;
      color: var(--brand-dark);
      line-height: 1.25;
      margin-bottom: 8px;
    }
    .sc-caption {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-light);
      margin-bottom: 10px;
    }
    .sc-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 14px;
      flex: 1;
    }
    .sc-route {
      font-size: 11px;
      color: var(--text-light);
      margin-bottom: 16px;
      display: flex;
      align-items: flex-start;
      gap: 5px;
      line-height: 1.5;
    }
    .sc-route svg { flex-shrink: 0; margin-top: 1px; color: var(--brand-gold); }

    .sc-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid rgba(0,0,0,0.07);
      padding-top: 14px;
      gap: 10px;
    }
    .sc-price {
      display: flex;
      flex-direction: column;
    }
    .sc-price-from { font-size: 10px; color: var(--text-light); letter-spacing: 0.5px; text-transform: uppercase; }
    .sc-price-val {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 500;
      color: var(--brand-dark);
      line-height: 1;
    }
    .sc-price-pp { font-size: 10px; color: var(--text-muted); }

    .sc-btns { display: flex; gap: 8px; }
    .sc-btn-view {
      background: var(--brand-dark);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 9px 16px;
      border-radius: 20px;
      white-space: nowrap;
      transition: background .25s;
    }
    .sc-btn-view:hover { background: var(--brand-gold); color: var(--brand-dark); }
    .sc-btn-itin {
      background: transparent;
      color: var(--brand-gold);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 9px 14px;
      border-radius: 20px;
      border: 1px solid rgba(201,168,76,0.35);
      white-space: nowrap;
      transition: all .25s;
    }
    .sc-btn-itin:hover {
      background: var(--brand-gold);
      color: var(--brand-dark);
      border-color: var(--brand-gold);
    }

    /* Customize card internals */
    .customize-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(201,168,76,0.15);
      border: 1px solid rgba(201,168,76,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }
    .customize-icon svg { color: var(--brand-gold); }
    .safari-card--customize h3 {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 400;
      color: #fff;
      margin-bottom: 12px;
      line-height: 1.2;
    }
    .safari-card--customize p {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      line-height: 1.7;
      margin-bottom: 28px;
    }
    .safari-card--customize .btn-primary { display: inline-block; }

    /* ---------- WHY UGANDA ---------- */
    .why-uganda {
      padding: 80px 0;
      background: var(--brand-dark);
    }
    .why-uganda .section-eyebrow { color: var(--brand-gold); }
    .why-uganda .section-title { color: #fff; margin-bottom: 48px; }

    .wu-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 24px;
    }
    .wu-item {
      text-align: center;
      padding: 32px 20px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      transition: background .3s, border-color .3s;
    }
    .wu-item:hover {
      background: rgba(201,168,76,0.1);
      border-color: rgba(201,168,76,0.2);
    }
    .wu-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(201,168,76,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      color: var(--brand-gold);
    }
    .wu-item h4 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 8px;
    }
    .wu-item p {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      line-height: 1.65;
    }
/*Itinerary Pages - Uganda Highlishts benchmark*/
/* ================================================================
   UGANDA HIGHLIGHTS — PAGE STYLES (v3 — Leaflet map, clean layout)
================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}

/* ── HERO ── */
.th{position:relative;height:88vh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.th__slides{position:absolute;inset:0}
.th__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.th__slide.active{opacity:1}
.th__slide:nth-child(1){background-image:url('img/uganda/hero-gorilla.jpg');background-color:#2d5a3d}
.th__slide:nth-child(2){background-image:url('img/uganda/hero-murchison.jpg');background-color:#4a7c59}
.th__slide:nth-child(3){background-image:url('img/uganda/hero-queen-elizabeth.jpg');background-color:#1a4d32}
.th__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,14,.92) 0%,rgba(10,6,14,.45) 48%,rgba(10,6,14,.08) 100%)}
.th__content{position:relative;z-index:3;width:100%;padding:0 0 72px 0}
.th__breadcrumb{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:22px}
.th__breadcrumb a{color:rgba(255,255,255,.45);transition:color .25s}
.th__breadcrumb a:hover{color:var(--brand-gold)}
.th__breadcrumb span{color:rgba(255,255,255,.2)}
.th__badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand-gold);border:1px solid rgba(201,168,76,.4);border-radius:20px;padding:4px 14px;margin-bottom:14px}
.th__title{font-family:var(--font-display);font-size:clamp(2.8rem,6.5vw,5.4rem);font-weight:300;color:#fff;line-height:1.0;margin-bottom:18px}
.th__title em{font-style:italic;color:var(--brand-gold)}
.th__sub{font-size:16px;color:rgba(255,255,255,.68);font-weight:300;max-width:560px;line-height:1.7;margin-bottom:32px}
.th__meta{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:36px}
.th__meta-item{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.75)}
.th__meta-item svg{color:var(--brand-gold);flex-shrink:0}
.th__meta-item strong{color:#fff}
.th__actions{display:flex;gap:12px;flex-wrap:wrap}
.th__thumbs{position:absolute;bottom:0;right:0;display:flex;gap:3px;z-index:4}
.th__thumb{width:88px;height:64px;background-size:cover;background-position:center;opacity:.5;border-top:3px solid transparent;transition:opacity .3s,border-color .3s;cursor:pointer}
.th__thumb.active,.th__thumb:hover{opacity:1;border-top-color:var(--brand-gold)}
.th__dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.th__dot{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);border:none;transition:background .3s,width .3s;cursor:pointer}
.th__dot.active{background:var(--brand-gold);width:40px}

/* ── INFOGRAPHIC BAR ── */
.info-bar{background:var(--brand-dark);border-bottom:1px solid rgba(255,255,255,.06)}
.info-bar__inner{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.info-bar__inner::-webkit-scrollbar{display:none}
.info-bar__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 28px;text-align:center;border-right:1px solid rgba(255,255,255,.07);min-width:130px;flex:1}
.info-bar__cell:last-child{border-right:none}
.info-bar__icon{color:var(--brand-gold);margin-bottom:8px}
.info-bar__label{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.info-bar__val{font-family:var(--font-display);font-size:17px;font-weight:400;color:#fff;line-height:1.1}
.info-bar__val small{font-size:12px;font-family:var(--font-body);font-weight:300;color:rgba(255,255,255,.5)}

/* ── INTRO ── */
.intro-section{background:var(--brand-white);padding:72px 0 56px}
.intro-section__inner{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.intro-section__heading{font-family:var(--font-display);font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:300;color:var(--brand-dark);line-height:1.15;margin-bottom:20px}
.intro-section__heading em{font-style:italic;color:var(--brand-gold)}
.intro-section__body{font-size:15px;color:var(--text-muted);line-height:1.85;margin-bottom:14px}
.intro-highlights{margin-top:24px}
.intro-highlights li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-primary);padding:7px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.intro-highlights li:last-child{border-bottom:none}
.intro-highlights li::before{content:"✦";color:var(--brand-gold);font-size:10px;flex-shrink:0;margin-top:3px}
.intro-img-wrap{position:relative;border-radius:14px;overflow:hidden}
.intro-img-wrap img{width:100%;height:480px;object-fit:cover;display:block}
.intro-img-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(10,6,14,.72) 0%,transparent 60%);padding:28px 24px}
.intro-img-overlay p{font-family:var(--font-display);font-size:20px;font-weight:300;color:#fff;font-style:italic}

/* ── TABS ── */
.tabs-section{background:var(--brand-cream)}
.tab-nav{background:var(--brand-white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:88;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.tab-nav__inner{display:flex;align-items:stretch;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
.tab-nav__inner::-webkit-scrollbar{display:none}
.tab-btn{background:none;border:none;border-bottom:3px solid transparent;padding:18px 24px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;transition:color .25s,border-color .25s;flex:1;text-align:center}
.tab-btn:hover{color:var(--brand-dark)}
.tab-btn.active{color:var(--brand-dark);border-bottom-color:var(--brand-gold)}
.tab-nav__actions{display:flex;align-items:center;gap:6px;padding:0 16px;border-left:1px solid var(--border);flex-shrink:0}
.dl-btn{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--border);color:var(--text-muted);font-size:11px;font-weight:500;padding:6px 12px;border-radius:16px;transition:all .25s}
.dl-btn:hover{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.dl-btn svg{flex-shrink:0}
.tab-panels{padding:0}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── TAB 1: AT A GLANCE — compact map layout ── */
.glance-layout{
  display:grid;
  grid-template-columns:1fr 340px;  /* timeline wide, map narrow */
  gap:0;
  min-height:500px;
}
.glance-timeline{
  padding:48px 48px 48px 56px;
  background:var(--brand-white);
  border-right:1px solid var(--border);
  overflow-y:auto;max-height:80vh;
}
.glance-timeline h3{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--brand-dark);margin-bottom:32px}
.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:rgba(201,168,76,.22)}
.tl-item{position:relative;margin-bottom:28px}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-26px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--brand-white);border:2px solid var(--brand-gold);transition:background .25s}
.tl-item:hover .tl-dot,.tl-item.tl-last .tl-dot{background:var(--brand-gold)}
.tl-day{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand-gold);margin-bottom:3px}
.tl-title{font-family:var(--font-display);font-size:16px;font-weight:500;color:var(--brand-dark);margin-bottom:5px;line-height:1.2}
.tl-activities{list-style:none;margin:0}
.tl-activities li{font-size:12px;color:var(--text-muted);padding:2px 0;display:flex;align-items:flex-start;gap:6px;line-height:1.4}
.tl-activities li::before{content:"·";color:var(--brand-gold);font-weight:700;flex-shrink:0}
.tl-location{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-light);margin-top:4px}
.tl-location svg{color:var(--brand-gold)}

/* ── MAP PANEL — compact right column ── */
.glance-map{
  display:flex;flex-direction:column;
  background:var(--brand-cream);
  border-left:1px solid var(--border);
  position:sticky;top:56px;
  height:calc(100vh - 56px);
  overflow:hidden;
}
.glance-map__header{
  padding:14px 18px;
  background:var(--brand-white);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.glance-map__header h4{
  font-size:12px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--brand-dark);
}
.expand-map-btn{
  display:flex;align-items:center;gap:5px;
  background:var(--brand-dark);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:5px 12px;border-radius:12px;border:none;transition:background .25s;
}
.expand-map-btn:hover{background:var(--brand-gold);color:var(--brand-dark)}

/* Leaflet map container */
#leaflet-mini{
  flex:1;
  width:100%;
  min-height:0;
  cursor:pointer;
}

/* Stop legend below map */
.map-legend{
  padding:10px 14px;
  background:var(--brand-white);
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:6px;
  flex-shrink:0;
}
.map-leg-item{
  display:flex;align-items:center;gap:5px;
  font-size:10px;color:var(--text-muted);
  padding:3px 8px;border-radius:10px;
  background:var(--brand-cream);cursor:pointer;
  transition:background .2s;
  border:1px solid transparent;
}
.map-leg-item:hover{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.3)}
.map-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.map-leg-dot--gold{background:var(--brand-gold)}
.map-leg-dot--dark{background:var(--brand-dark);border:1.5px solid var(--brand-gold)}

/* ── FULLSCREEN MAP MODAL ── */
.map-modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(10,6,14,.85);z-index:9999;
  align-items:center;justify-content:center;padding:20px;
}
.map-modal-overlay.open{display:flex}
.map-modal-box{
  background:var(--brand-white);border-radius:16px;
  width:92vw;max-width:1000px;height:85vh;
  overflow:hidden;display:flex;flex-direction:column;
}
.map-modal-head{
  padding:16px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.map-modal-head h3{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--brand-dark)}
.map-modal-close{
  background:var(--brand-cream);border:none;width:34px;height:34px;
  border-radius:50%;font-size:16px;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.map-modal-close:hover{background:var(--border)}
#leaflet-full{flex:1;min-height:0}

/* ── TAB 2: ITINERARY ── */
.itin-layout{display:grid;grid-template-columns:1fr 300px;gap:0}
.itin-day-strip{display:flex;gap:0;overflow-x:auto;background:var(--brand-dark);scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.08)}
.itin-day-strip::-webkit-scrollbar{display:none}
.iday-btn{background:none;border:none;border-bottom:3px solid transparent;padding:14px 18px;font-size:12px;font-weight:500;color:rgba(255,255,255,.45);white-space:nowrap;transition:color .2s,border-color .2s}
.iday-btn:hover{color:rgba(255,255,255,.8)}
.iday-btn.active{color:var(--brand-gold);border-bottom-color:var(--brand-gold)}
.itin-content-area{padding:0;min-width:0}
.itin-day-panel{display:none}
.itin-day-panel.active{display:block}
.itin-day-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:480px}
.itin-img-col{position:relative;overflow:hidden;background:#1a3d28}
.itin-slider{width:100%;height:100%;min-height:440px}
.itin-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease}
.itin-slide.active{opacity:1}
.itin-slide-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.isd{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);border:none;transition:background .3s;cursor:pointer}
.isd.active{background:var(--brand-gold)}
.itin-text-col{padding:40px 36px;background:var(--brand-white);overflow-y:auto}
.itin-day-num{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--brand-gold);margin-bottom:8px}
.itin-day-title{font-family:var(--font-display);font-size:26px;font-weight:400;color:var(--brand-dark);line-height:1.1;margin-bottom:12px}
.itin-day-meta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.idm{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted)}
.idm svg{color:var(--brand-gold);flex-shrink:0}
.itin-day-body{font-size:14px;color:var(--text-muted);line-height:1.85}
.itin-day-body p{margin-bottom:12px}
.itin-day-details{margin-top:20px;padding-top:20px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.idd{background:var(--brand-cream);border-radius:8px;padding:12px 14px}
.idd__label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand-gold);margin-bottom:4px}
.idd__val{font-size:12px;color:var(--text-primary);line-height:1.5}
.itin-sidebar{background:var(--brand-cream);border-left:1px solid var(--border);padding:28px 22px;display:flex;flex-direction:column;gap:20px}
.is-card{background:var(--brand-white);border-radius:12px;padding:20px;border:1px solid var(--border)}
.is-card h4{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand-gold);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.is-fact{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.05);font-size:12px}
.is-fact:last-child{border-bottom:none}
.is-fact__label{color:var(--text-muted)}
.is-fact__val{font-weight:600;color:var(--brand-dark);text-align:right}
.is-price-card{background:var(--brand-dark);border-radius:12px;padding:24px 20px;text-align:center;border-top:3px solid var(--brand-gold)}
.is-from{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.is-amount{font-family:var(--font-display);font-size:36px;font-weight:300;color:var(--brand-gold);line-height:1;margin-bottom:4px}
.is-pp{font-size:11px;color:rgba(255,255,255,.4);margin-bottom:18px}
.is-book{display:block;background:var(--brand-gold);color:var(--brand-dark);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px;border-radius:25px;margin-bottom:10px;transition:background .25s}
.is-book:hover{background:var(--brand-gold-lt)}
.is-enquire{display:block;font-size:12px;color:rgba(255,255,255,.5);transition:color .25s}
.is-enquire:hover{color:var(--brand-gold)}

/* ── TAB 3: ACCOMMODATION ── */
.accom-section{padding:56px;background:var(--brand-white)}
.accom-section h2{font-family:var(--font-display);font-size:28px;font-weight:300;color:var(--brand-dark);margin-bottom:8px}
.accom-section>p{font-size:14px;color:var(--text-muted);margin-bottom:40px}
.accom-list{display:flex;flex-direction:column;gap:24px}
.accom-card{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:box-shadow .3s}
.accom-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.1)}
.accom-card__img{height:220px;background-size:cover;background-position:center;background-color:#2d5a3d}
.accom-card__body{padding:28px 28px 24px}
.accom-card__nights{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand-gold);margin-bottom:8px}
.accom-card__name{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--brand-dark);margin-bottom:4px}
.accom-card__location{font-size:12px;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:4px}
.accom-card__location svg{color:var(--brand-gold)}
.accom-card__stars{color:var(--brand-gold);font-size:12px;letter-spacing:2px;margin-bottom:12px}
.accom-card__desc{font-size:13px;color:var(--text-muted);line-height:1.7}

/* ── TAB 4: NOTES ── */
.notes-section{padding:56px;background:var(--brand-white)}
.notes-section h2{font-family:var(--font-display);font-size:28px;font-weight:300;color:var(--brand-dark);margin-bottom:8px}
.notes-section>p{font-size:14px;color:var(--text-muted);margin-bottom:40px}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
.note-card{border-radius:12px;padding:28px;border:1px solid var(--border);background:var(--brand-white);transition:box-shadow .3s}
.note-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.note-card__icon{width:44px;height:44px;border-radius:10px;background:rgba(201,168,76,.1);display:flex;align-items:center;justify-content:center;color:var(--brand-gold);margin-bottom:14px}
.note-card h3{font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--brand-dark);margin-bottom:10px}
.note-card p,.note-card li{font-size:13px;color:var(--text-muted);line-height:1.75}
.note-card ul{list-style:none}
.note-card li{padding:5px 0;border-bottom:1px solid rgba(0,0,0,.05);display:flex;gap:8px;align-items:flex-start}
.note-card li:last-child{border-bottom:none}
.note-card li::before{content:"✦";color:var(--brand-gold);font-size:9px;flex-shrink:0;margin-top:4px}
.incl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.incl-col{border-radius:12px;padding:24px}
.incl-col--yes{background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2)}
.incl-col--no{background:rgba(58,47,60,.04);border:1px solid var(--border)}
.incl-col h4{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:18px;font-weight:500;margin-bottom:16px}
.incl-col--yes h4{color:var(--brand-dark)}
.incl-col--no h4{color:var(--text-muted)}
.incl-col ul{list-style:none}
.incl-col li{font-size:13px;color:var(--text-primary);padding:7px 0;border-bottom:1px solid rgba(0,0,0,.05);line-height:1.5}
.incl-col li:last-child{border-bottom:none}
.incl-col--yes li::before{content:"✓  ";color:#2e7d32;font-weight:700}
.incl-col--no li::before{content:"✗  ";color:#c0392b;font-weight:700}

/* ── SHARE / EMAIL MODALS ── */
#shareToast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--brand-dark);color:#fff;font-size:13px;font-weight:500;padding:10px 24px;border-radius:30px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:9999}
#shareToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,6,14,.7);z-index:9998;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:var(--brand-white);border-radius:16px;padding:40px;max-width:460px;width:100%;position:relative;animation:mIn .3s ease}
@keyframes mIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;top:16px;right:16px;background:var(--brand-cream);border:none;width:32px;height:32px;border-radius:50%;font-size:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:background .2s}
.modal-close:hover{background:var(--border)}
.modal-box h3{font-family:var(--font-display);font-size:24px;font-weight:400;color:var(--brand-dark);margin-bottom:6px}
.modal-box>p{font-size:13px;color:var(--text-muted);margin-bottom:22px}
.mf-label{display:block;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-dark);margin-bottom:6px}
.mf-input,.mf-textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:11px 14px;font-size:14px;font-family:var(--font-body);color:var(--text-primary);margin-bottom:14px;transition:border-color .25s}
.mf-input:focus,.mf-textarea:focus{outline:none;border-color:var(--brand-gold)}
.mf-textarea{resize:vertical}
.mf-submit{width:100%;background:var(--brand-gold);color:var(--brand-dark);border:none;border-radius:30px;padding:14px;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-top:4px;transition:background .25s}
.mf-submit:hover{background:var(--brand-gold-lt)}
.share-row{display:flex;gap:8px;margin-bottom:16px}
.share-row input{flex:1;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:12px;font-family:var(--font-body);color:var(--text-muted);background:var(--brand-cream)}
.share-row button{background:var(--brand-dark);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:12px;font-weight:600;transition:background .25s}
.share-row button:hover{background:var(--brand-gold);color:var(--brand-dark)}
.share-social-row{display:flex;gap:8px}
.share-soc{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:500;border:1px solid;transition:opacity .2s}
.share-soc:hover{opacity:.85}
.share-soc--wa{background:#25D366;color:#fff;border-color:#25D366}
.share-soc--em{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}


/* ================================================================
   WAYS TO TRAVEL — Travel Interest Cards Section (index.html)
   4 image cards: Budget / Luxury / Group / Family
================================================================ */
.travel-interests {
  padding: 100px 0;
  background: var(--brand-white);
}

.travel-interests .section-header {
  margin-bottom: 52px;
}

.ti-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px;
}

.ti-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}

.ti-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* Each card's background image — set via inline style or these classes */
.ti-card--budget   { background: url('img/destinations/budget-africa.jpg')  center/cover no-repeat, linear-gradient(135deg,#2d5a3d,#1a3d28); }
.ti-card--luxury   { background: url('img/destinations/luxury-africa.jpg')  center/cover no-repeat, linear-gradient(135deg,#4a3020,#2c1c0e); }
.ti-card--group    { background: url('img/destinations/group-trips.jpg')    center/cover no-repeat, linear-gradient(135deg,#1a3050,#0d1f38); }
.ti-card--family   { background: url('img/destinations/family-trips.jpg')   center/cover no-repeat, linear-gradient(135deg,#3d2d1a,#261c0e); }

.ti-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,6,14,0.88) 0%, rgba(10,6,14,0.12) 60%);
  transition: background var(--transition);
}

.ti-card:hover .ti-card__overlay {
  background: linear-gradient(to top, rgba(10,6,14,0.92) 0%, rgba(10,6,14,0.2) 55%);
}

.ti-card__body {
  position: relative;
  z-index: 2;
  padding: 24px 22px 28px;
}

.ti-card__num {
  display: block;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  color: rgba(255,255,255,0.18);
  line-height: 1;
  margin-bottom: 4px;
}

.ti-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-cream);
  background: var(--brand-green);
  padding: 3px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
}

.ti-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 8px;
}

.ti-card__sub {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin-bottom: 16px;
}

.ti-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-gold);
  transition: gap var(--transition);
}

.ti-card:hover .ti-card__arrow { gap: 12px; }

@media (max-width: 1024px) {
  .ti-grid { grid-template-columns: repeat(2, 1fr); }
  .ti-card { height: 320px; }
}

@media (max-width: 600px) {
  .ti-grid { grid-template-columns: 1fr; }
  .ti-card { height: 280px; }
}

/* ================================================================
   TESTIMONIALS — World Map Background
================================================================ */
.testimonials {
  position: relative;
}

.testimonials__map-bg {
  position: absolute;
  inset: 0;
  background-image: url('img/world-map-faded.png');
  background-size: 85% auto;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Make sure content sits above the map */
.testimonials .container {
  position: relative;
  z-index: 1;
}


/* ================================================================
   SCROLL TO TOP BUTTON
================================================================ */
#scrollTopBtn {
  position: fixed;
  bottom: 100px;        /* sits above the WhatsApp float */
  right: 24px;
  z-index: 994;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--brand-cream);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
  pointer-events: none;
}

#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scrollTopBtn:hover {
  background: var(--brand-green-lt);
  transform: translateY(-3px);
}

#scrollTopBtn svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  #scrollTopBtn {
    bottom: 90px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}