/* ================================================================
   JAKADA TRAVEL — CONSOLIDATED STYLESHEET v1.0
   Single clean file replacing all 13 previous CSS files.
   
   Structure:
   01. Design Tokens (Light + Dark Mode)
   02. Reset & Base
   03. Accessibility
   04. Body — NO animation (prevents navbar containing-block bug)
   05. Navbar — Fixed, always visible, always legible
   06. Mobile Navigation
   07. Dropdown Menus
   08. Back-to-Top Button
   09. Hero — Video (Homepage)
   10. Hero — Inner Pages (listing-hero / inner-hero / region-hero)
   11. Destination Grid (3-column, gap-free)
   12. Image Cards — Alignment Fix
   13. Catalog / Experience Rows
   14. Quote Section — Image + Quote side-by-side
   15. Process Section
   16. Awards Section
   17. Image Strip
   18. Story Panel
   19. Journey Cards
   20. Stats / Marquee
   21. Contact Page
   22. Newsletter
   23. Footer
   24. Reveal Animations
   25. Sticky Enquiry Bar
   26. Modal
   27. Dark Mode Overrides
   28. Responsive Breakpoints
   29. Region Page Styles
   30. Admin (kept minimal)
   ================================================================ */


/* ================================================================
   01. DESIGN TOKENS
   ================================================================ */
:root {
  /* Brand palette — Safari Earth Tones */
  --ink:          #2c1a0e;
  --forest:       #7c4a1e;
  --forest-deep:  #4a2a0c;
  --forest-mid:   #9d6232;
  --sage:         #b8956a;
  --sand:         #e8d5b7;
  --paper:        #f7f0e4;
  --cream:        #fdf6ec;
  --gold:         #c8823a;
  --gold-light:   #e0a85a;
  --white:        #ffffff;

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Manrope', Arial, sans-serif;

  /* Layout */
  --gutter: clamp(24px, 5vw, 78px);
  --radius: 2px;

  /* Semantic surfaces */
  --bg-page:      var(--paper);
  --bg-section:   var(--cream);
  --bg-card:      var(--white);
  --bg-alt:       var(--sand);
  --text-primary: var(--ink);
  --text-muted:   #7a5c3a;
  --border:       rgba(44,26,14,0.14);
  --border-light: rgba(255,255,255,0.22);
  --t: 0.35s ease;
}

[data-theme="dark"] {
  --bg-page:      #1c1108;
  --bg-section:   #150d05;
  --bg-card:      #231608;
  --bg-alt:       #2a1c0a;
  --text-primary: #f0e4d0;
  --text-muted:   #b8956a;
  --border:       rgba(230,200,150,0.12);
  --border-light: rgba(230,200,150,0.18);
  --ink:          #f0e4d0;
  --paper:        #1c1108;
  --cream:        #150d05;
  --sand:         #2a1c0a;
  --gold:         #d4a870;
}


/* ================================================================
   02. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: 400 15px/1.75 var(--sans);
  overflow-x: hidden;
  transition: background var(--t), color var(--t);
  /* CRITICAL: No animation on body — prevents navbar containing-block bug
     (CSS animation with transform makes body a containing block, breaking
     position:fixed children). Animation lives on <main> instead. */
  animation: none !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}

body.nav-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.96;
}
h1 em, h2 em { font-weight: 400; font-style: italic; }

/* Page entrance animation — on <main>, NOT on body */
body > main {
  animation: jakadaPageIn 0.60s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
@keyframes jakadaPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   03. ACCESSIBILITY
   ================================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--gold);
  color: #fff;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 0 0 4px 4px;
  z-index: 999999;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

.eyebrow {
  font: 600 10px/1.4 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background var(--t), color var(--t), border-color var(--t), transform 0.25s;
  cursor: pointer;
}
.button:hover { transform: translateY(-2px); }
.button-dark {
  background: var(--forest-deep);
  color: #fff;
  border-color: var(--forest-deep);
}
.button-dark:hover { background: #2e1a07; border-color: #2e1a07; }
.button-outline { background: transparent; color: var(--text-primary); }
.button-outline:hover { background: var(--text-primary); color: var(--bg-page); }
.button-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.button-gold:hover { background: #a86a26; border-color: #a86a26; }


/* ================================================================
   05. NAVBAR — Always fixed, always legible
   ================================================================ */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 76px;
  padding: 0 clamp(18px, 4vw, 60px);
  /* Dark glass — always legible on any background */
  background: rgba(14, 8, 2, 0.92);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 2px 20px rgba(0,0,0,0.28);
  /* NEVER hide or transform the navbar */
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition:
    background 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease,
    box-shadow 0.35s ease,
    height 0.28s ease,
    border-bottom-color 0.35s ease;
}

/* Homepage only: transparent over video hero (not scrolled) */
body.page-home .site-header:not(.is-scrolled) {
  background: linear-gradient(
    to bottom,
    rgba(8, 4, 0, 0.55) 0%,
    rgba(8, 4, 0, 0.25) 60%,
    rgba(8, 4, 0, 0.0) 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.20);
  box-shadow: none;
}

/* Scrolled state: all pages → darker glass */
.site-header.is-scrolled {
  height: 66px;
  background: rgba(10, 5, 0, 0.97) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  box-shadow: 0 2px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Body padding so content isn't hidden under fixed navbar */
body:not(.page-home) > main { padding-top: 76px; }
body.page-home > main      { padding-top: 0; }

/* Pages with full-bleed hero images: hero has own top-padding to accommodate nav */
body.page-destinations main,
body.page-experiences main,
body.page-about main,
body.page-region main,
body.page-destinations-kenya main,
body.page-destinations-tanzania main,
body.page-destinations-botswana main,
body.page-destinations-south-africa main,
body.page-destinations-rwanda main,
body.page-experiences-private-safari main,
body.page-experiences-conservation main {
  padding-top: 0 !important;
}

/* Brand / Logo */
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-shrink: 0;
  color: #ffffff;
}
.brand span {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
}
.brand small {
  font-size: 9px;
  letter-spacing: 0.35em;
  opacity: 0.7;
  font-weight: 500;
  font-family: var(--sans);
  color: #ffffff;
}

/* Header right-side cluster */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.theme-toggle:hover { color: #ffffff; }
.theme-toggle svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.35s ease;
}
.theme-toggle .icon-sun-svg  { display: block; }
.theme-toggle .icon-moon-svg { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun-svg  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon-svg { display: block; }
.toggle-mode-label { display: none; }

/* Hamburger toggle (mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 8px;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  align-items: center;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #ffffff;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.menu-toggle b { font-weight: 400; color: #ffffff; font-size: 9px; }


/* ================================================================
   06. MAIN NAV
   ================================================================ */
.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.main-nav > .nav-item { position: relative; }

.main-nav > .nav-item > a,
.main-nav > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 26px 16px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  transition: color 0.2s;
  text-decoration: none;
}
.main-nav > .nav-item > a:hover,
.main-nav > a:hover { color: #ffffff; }

/* Underline hover effect */
.main-nav > .nav-item > a:not(.nav-cta)::after,
.main-nav > a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 16px; left: 16px; right: 16px;
  height: 1px;
  background: rgba(255,255,255,0.7);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.main-nav > .nav-item:hover > a:not(.nav-cta)::after,
.main-nav > a:not(.nav-cta):hover::after { transform: scaleX(1); }

/* Chevron */
.nav-arrow {
  display: inline-block;
  font-style: normal;
  font-size: 8px;
  opacity: 0.7;
  transition: transform 0.25s ease;
  line-height: 1;
  margin-top: 1px;
}
.nav-item:hover .nav-arrow,
.nav-item.is-open .nav-arrow { transform: rotate(180deg); }

/* CTA button in nav */
.nav-cta {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  margin-left: 8px;
  padding: 12px 22px !important;
  border: 1px solid rgba(200,130,58,0.85) !important;
  background: rgba(200,130,58,0.10) !important;
  color: #fff !important;
  transition: background 0.25s, border-color 0.25s !important;
}
.nav-cta:hover {
  background: rgba(200,130,58,0.28) !important;
  border-color: rgba(200,130,58,1) !important;
}
.nav-cta::after { display: none !important; }


/* ================================================================
   07. DROPDOWN MENUS
   ================================================================ */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 220px;
  background: rgba(18,11,4,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid #c8823a;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  padding: 16px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 999;
}
.nav-item:hover .nav-dropdown,
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Mega dropdown */
.nav-dropdown.mega {
  min-width: 680px;
  padding: 28px 32px;
  left: 0;
  transform: translateX(0) translateY(-8px);
}
.nav-item:hover .nav-dropdown.mega,
.nav-item.is-open .nav-dropdown.mega { transform: translateX(0) translateY(0); }

.nav-dropdown.mega-right {
  left: auto; right: 0;
  transform: translateX(0) translateY(-8px);
}
.nav-item:hover .nav-dropdown.mega-right,
.nav-item.is-open .nav-dropdown.mega-right { transform: translateX(0) translateY(0); }

/* Dropdown links */
.nav-dropdown a {
  display: block;
  padding: 10px 24px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  transition: color 0.18s, background 0.18s, padding-left 0.18s;
}
.nav-dropdown a:hover {
  color: #ffffff;
  background: rgba(200,130,58,0.12);
  padding-left: 30px;
}
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 24px;
}

/* Mega grid */
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0 32px;
}
.mega-col h4 {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: #c8823a;
  letter-spacing: 0.04em;
  text-transform: none;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200,130,58,0.3);
}
.mega-col a {
  padding: 7px 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.18s, padding-left 0.18s !important;
}
.mega-col a:hover {
  color: #fff !important;
  padding-left: 6px !important;
  background: transparent !important;
}
.mega-col a .dest-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(200,130,58,0.6);
  flex-shrink: 0;
}
/* Region link heading */
.mega-col a.region-link,
.mega-col .region-link {
  display: block;
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #d99b52 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(200,130,58,0.35) !important;
  text-decoration: none !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
.mega-col a.region-link:hover,
.mega-col .region-link:hover {
  color: #ffc78a !important;
  border-bottom-color: rgba(200,130,58,0.75) !important;
  background: transparent !important;
  padding-left: 0 !important;
}


/* ================================================================
   08. BACK-TO-TOP BUTTON — Elegant Circular Design
   ================================================================ */
.back-to-top {
  position: fixed !important;
  bottom: 36px !important;
  right: 36px !important;
  z-index: 90000 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: rgba(124,74,30,0.92) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1.5px solid rgba(200,130,58,0.4) !important;
  color: #fff !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(14px) scale(0.85) !important;
  pointer-events: none !important;
  transition:
    opacity 0.4s cubic-bezier(0.22,1,0.36,1),
    visibility 0.4s ease,
    transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
  box-shadow:
    0 4px 16px rgba(124,74,30,0.25),
    0 1px 3px rgba(0,0,0,0.12) !important;
}
.back-to-top::before {
  content: '' !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid #fff !important;
  border-right: 2px solid #fff !important;
  transform: rotate(-45deg) translateY(3px) !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}
.back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.back-to-top.visible:hover {
  background: rgba(200,130,58,0.95) !important;
  border-color: rgba(224,168,90,0.7) !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow:
    0 8px 28px rgba(200,130,58,0.35),
    0 0 0 4px rgba(200,130,58,0.1) !important;
}
.back-to-top.visible:hover::before {
  transform: rotate(-45deg) translateY(1px) !important;
}
.back-to-top.visible:active {
  transform: translateY(-1px) scale(1.02) !important;
}
[data-theme="dark"] .back-to-top {
  background: rgba(212,168,112,0.2) !important;
  border-color: rgba(212,168,112,0.4) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .back-to-top.visible:hover {
  background: rgba(212,168,112,0.42) !important;
  border-color: rgba(212,168,112,0.8) !important;
  box-shadow:
    0 8px 28px rgba(212,168,112,0.2),
    0 0 0 4px rgba(212,168,112,0.08) !important;
}


/* ================================================================
   09. VIDEO HERO (Homepage)
   ================================================================ */
.video-hero,
.home-hero.video-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(80px, 12vw, 160px);
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 3, 0, 0.85) 0%,
    rgba(15, 8, 2, 0.45) 40%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

/* Hero copy */
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 var(--gutter);
}
.hero-copy .eyebrow { color: rgba(255,255,255,0.75); }
.hero-copy h1 {
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 300;
  line-height: 0.93;
  color: #fff;
  margin: 16px 0 28px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.30);
}
.hero-copy h1 em { color: var(--gold-light); font-style: italic; }
.hero-copy p {
  font-size: clamp(16px, 1.4vw, 20px);
  color: rgba(255,255,255,0.88);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 36px;
}

/* Hero actions */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* Hero stats */
.hero-stats {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) clamp(40px, 6vw, 80px);
  display: flex;
  gap: clamp(32px, 6vw, 80px);
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,0.90);
}
.hero-stat strong {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 300;
  line-height: 1;
  color: #fff;
}
.hero-stat span {
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-top: 4px;
}


/* ================================================================
   10. INNER PAGE HEROES (listing-hero / inner-hero / region-hero)
   ================================================================ */

/* All inner/listing heroes: image comes from inline style on element */
.inner-hero,
.listing-hero {
  position: relative;
  min-height: clamp(380px, 60vh, 700px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 76px var(--gutter) clamp(60px, 8vw, 110px);
  overflow: hidden;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-color: #1a0e04;
}

/* Dark gradient overlay */
.inner-hero .hero-shade,
.listing-hero .hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.08) 40%,
    rgba(0,0,0,0.72) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* All direct children above overlay */
.inner-hero > *,
.listing-hero > * {
  position: relative;
  z-index: 1;
}

/* Hero copy text */
.inner-hero .hero-copy *,
.listing-hero .hero-copy * { color: #fff; }
.inner-hero .hero-copy .eyebrow,
.listing-hero .hero-copy .eyebrow { color: rgba(255,255,255,0.75) !important; }
.inner-hero .hero-copy h1,
.listing-hero .hero-copy h1 {
  font-size: clamp(52px, 8vw, 110px);
  font-weight: 300;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
  margin: 12px 0 20px;
}
.inner-hero .hero-copy p,
.listing-hero .hero-copy p {
  font-size: clamp(17px, 1.5vw, 21px);
  color: rgba(255,255,255,0.92);
  max-width: 620px;
  font-family: var(--serif);
  font-style: italic;
}

/* Region hero variant */
.region-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 76px var(--gutter) clamp(60px, 8vw, 120px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1a0e04;
  color: #fff;
}
.region-hero .hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.05) 40%,
    rgba(0,0,0,0.60) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.region-hero .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
}
.region-hero h1 {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 300;
  line-height: 1.02;
  margin: 12px 0 20px;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.region-hero .eyebrow.light {
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.22em;
  font-size: 12px;
  text-transform: uppercase;
}
.region-hero p:not(.eyebrow) {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.6;
  color: rgba(255,255,255,0.94);
  margin-bottom: 24px;
  max-width: 620px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
}

/* Contact hero */
.contact-hero {
  position: relative;
  min-height: 55vh;
  overflow: hidden;
}
.contact-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.40;
}
.contact-hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(100px,14vw,160px) var(--gutter) clamp(60px,8vw,100px);
  max-width: 900px;
}


/* ================================================================
   11. DESTINATION GRID — 3-COLUMN, GAP-FREE
   ================================================================ */

/* Section wrapper */
.world-destinations {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.world-destinations header {
  max-width: 780px;
  margin-bottom: 48px;
}
.world-destinations header h2 {
  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 0.95;
  margin: 12px 0 18px;
}
.world-destinations header p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 540px;
}

/* 3-column grid — fixes Europe/Latin America gap */
.destination-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.95fr;
  grid-auto-rows: auto;
  gap: 18px;
  align-items: stretch;
}

/* Card 1 (Africa): tall left anchor — spans rows 1 & 2 */
.destination-grid .image-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
  min-height: 860px !important;
}

/* Cards 2 (Europe) and 3 (Asia): top row, cols 2 & 3 */
.destination-grid .image-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.destination-grid .image-card:nth-child(3) { grid-column: 3; grid-row: 1; }

/* Cards 4 (Latin America) and 5 (Middle East): second row, cols 2 & 3 */
.destination-grid .image-card:nth-child(4) { grid-column: 2; grid-row: 2; }
.destination-grid .image-card:nth-child(5) { grid-column: 3; grid-row: 2; }

/* Cards 6-8: third row, all 3 columns */
.destination-grid .image-card:nth-child(6) { grid-column: 1; grid-row: 3; }
.destination-grid .image-card:nth-child(7) { grid-column: 2; grid-row: 3; }
.destination-grid .image-card:nth-child(8) { grid-column: 3; grid-row: 3; }

/* Card 9: full-width bottom row */
.destination-grid .image-card:nth-child(9) {
  grid-column: 1 / 4;
  grid-row: 4;
  min-height: 280px !important;
}


/* ================================================================
   12. IMAGE CARDS — Perfect Alignment
   ================================================================ */
.image-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 32px;
  min-height: 420px;
  background: #3a1f08;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.45s cubic-bezier(0.22,1,0.36,1);
}
.image-card:hover { box-shadow: 0 20px 55px rgba(0,0,0,0.35); }

/* First card (Africa): taller */
.destination-grid .image-card:nth-child(1) { padding: 42px; }

/* Background image — using <img class="card-bg-img"> pattern (all current cards) */
.image-card .card-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  z-index: 0 !important;
  display: block !important;
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1) !important;
  pointer-events: none !important;
  border: 0 !important;
}
.image-card:hover .card-bg-img { transform: scale(1.06) !important; }

/* Dark gradient overlay — for cards using card-bg-img */
.image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 3, 0, 0.88) 0%,
    rgba(20, 10, 2, 0.50) 42%,
    rgba(0, 0, 0, 0.10) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Also support legacy var(--image) CSS custom property background pattern */
.image-card[style*="--image"] {
  background-image:
    linear-gradient(0deg, rgba(8,3,0,0.88) 0%, rgba(20,10,2,0.45) 42%, rgba(0,0,0,0.10) 100%),
    var(--image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.image-card[style*="--image"]:hover {
  background-size: 106% 106%;
}
/* Hide ::after for legacy pattern cards (gradient is in background-image) */
.image-card[style*="--image"]::after { display: none; }

/* Card content above overlays */
.image-card > div,
.image-card .card-count {
  position: relative;
  z-index: 2;
}

/* Card count badge */
.card-count {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.50) !important;
  z-index: 3 !important;
  letter-spacing: 0.08em !important;
}

/* Card text */
.image-card p {
  font: 600 9px/1.4 var(--sans) !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.78) !important;
  margin: 0 0 4px !important;
}
.image-card h3 {
  color: #fff !important;
  font-size: clamp(32px, 3.5vw, 50px) !important;
  margin: 4px 0 12px !important;
  line-height: 0.95 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55) !important;
}
/* Africa card: larger heading */
.destination-grid .image-card:nth-child(1) h3 {
  font-size: clamp(42px, 5vw, 68px) !important;
  margin: 8px 0 18px !important;
}
/* Narrower column cards: smaller heading */
.destination-grid .image-card:nth-child(3) h3,
.destination-grid .image-card:nth-child(5) h3 {
  font-size: clamp(26px, 2.8vw, 42px) !important;
}

.image-card div > span:not(.card-count):not(.start-planning-btn) {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.60);
  display: block;
  margin-bottom: 4px;
}

/* Start planning CTA */
.start-planning-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 9px 18px !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  color: #fff !important;
  font: 600 9px/1 var(--sans) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 1px !important;
  transition: background 0.25s, border-color 0.25s !important;
  position: relative !important;
  z-index: 2 !important;
}
.start-planning-btn:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.90) !important;
}

/* Inner content flex layout */
.image-card > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}


/* ================================================================
   13. CATALOG / EXPERIENCE ROWS
   ================================================================ */
.catalog {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.catalog-header {
  max-width: 780px;
  margin-bottom: 60px;
}
.catalog-header h2 {
  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 0.95;
  margin: 12px 0 20px;
}
.catalog-header p { color: var(--text-muted); font-size: 17px; line-height: 1.75; }

.experience-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.35s ease;
}
.experience-row:first-child { border-top: 1px solid var(--border); }
.experience-row:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.10); }

.experience-image {
  position: relative;
  overflow: hidden;
}
.experience-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.experience-row:hover .experience-image img { transform: scale(1.04); }

.experience-copy {
  padding: clamp(40px, 5vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.experience-copy h3 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 0.95;
  margin: 12px 0 16px;
  color: var(--text-primary);
}
.experience-copy p { color: var(--text-muted); font-size: 16px; line-height: 1.75; }
.experience-copy a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 24px;
  transition: gap 0.25s;
}
.experience-copy a:hover { gap: 16px; }
.experience-row:nth-child(even) .experience-image { order: 2; }
.experience-row:nth-child(even) .experience-copy  { order: 1; }


/* ================================================================
   14. QUOTE SECTION — Image left + Quote right (side by side)
   ================================================================ */
.quote-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 680px;
  overflow: hidden;
}

/* Left: image fills the space */
.quote-section-image {
  position: relative;
  overflow: hidden;
  min-height: 600px;
}
.quote-section-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.quote-section:hover .quote-section-image img { transform: scale(1.04); }
.quote-section-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
}
.quote-img-caption {
  position: absolute;
  bottom: 28px;
  left: 28px;
  z-index: 2;
  font: 600 9px/1.4 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}

/* Right: quote card */
.quote-card {
  background: var(--forest, #7c4a1e);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(50px, 7vw, 90px) clamp(40px, 6vw, 80px);
  min-height: 600px;
  box-sizing: border-box;
}
[data-theme="dark"] .quote-card { background: #3a1c06; }

.quote-card::before {
  content: '\201C';
  display: block;
  font: 400 120px/1 var(--serif);
  color: rgba(255,255,255,0.12);
  margin-bottom: -30px;
}
.quote-card blockquote {
  font: 400 clamp(24px, 2.8vw, 38px)/1.28 var(--serif);
  color: #fff;
  margin: 0 0 32px;
  font-style: italic;
}
.quote-card cite {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}


/* ================================================================
   15. PROCESS SECTION
   ================================================================ */
.process-section {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--bg-alt);
}
.process-section header { max-width: 780px; margin-bottom: 60px; }
.process-section header h2 {
  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 0.95;
  margin: 12px 0;
}
.process-section ol {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px 48px;
}
.process-section ol li {
  padding-top: 32px;
  border-top: 2px solid var(--gold);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.process-section ol li.revealed {
  opacity: 1;
  transform: translateY(0);
}
.process-section ol li strong {
  display: block;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 16px;
}
.process-section ol li h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.process-section ol li p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
}


/* ================================================================
   16. AWARDS SECTION
   ================================================================ */
.awards-section {
  padding: clamp(60px, 8vw, 110px) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.awards-marquee-track {
  display: flex;
  gap: 64px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--t);
}
.award-item:hover { opacity: 1; }
.award-item strong {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.award-item span {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ================================================================
   17. IMAGE STRIP
   ================================================================ */
.image-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 600px;
  overflow: hidden;
}
.image-strip > .image-strip-item:first-child {
  position: relative;
  overflow: hidden;
  height: 600px;
}
.image-strip > .image-strip-item:last-child {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 600px;
}
.image-strip > .image-strip-item:last-child > .image-strip-item {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.image-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.image-strip .image-strip-item:hover img { transform: scale(1.05); }
.image-strip-caption {
  position: absolute;
  bottom: 14px; left: 18px;
  font: 600 9px/1.4 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  z-index: 2;
}


/* ================================================================
   18. STORY PANEL
   ================================================================ */
.story-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  overflow: hidden;
}
.story-image {
  position: relative;
  overflow: hidden;
}
.story-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.story-image:hover img { transform: scale(1.04); }
.story-copy {
  padding: clamp(60px, 8vw, 100px) clamp(50px, 7vw, 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-section);
}
.story-copy h2 {
  font-size: clamp(44px, 5.5vw, 74px);
  line-height: 0.95;
  margin: 12px 0 24px;
}
.story-copy p {
  font-size: 16px;
  line-height: 1.80;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 16px;
}
.story-copy .button { margin-top: 16px; }


/* ================================================================
   19. JOURNEY CARDS
   ================================================================ */
.journey-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  display: flex;
  gap: 20px;
  padding: 0 var(--gutter) clamp(60px, 8vw, 100px);
}
.journey-scroll::-webkit-scrollbar { display: none; }
.journey-card {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.journey-card-image {
  height: 240px;
  overflow: hidden;
  position: relative;
}
.journey-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.journey-card:hover .journey-card-image img { transform: scale(1.05); }
.journey-card-copy { padding: 28px 24px; }
.journey-card-copy h3 {
  font-size: 26px;
  margin-bottom: 8px;
  line-height: 1.05;
}
.journey-card-copy p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }


/* ================================================================
   20. STATS / MARQUEE
   ================================================================ */
.marquee-section {
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marqueeScroll 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.marquee-star { color: var(--gold); }


/* ================================================================
   21. CONTACT PAGE
   ================================================================ */
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
.contact-form-area {
  padding: clamp(60px, 8vw, 100px) clamp(50px, 7vw, 80px);
  background: var(--bg-section);
}
.contact-form-area h2 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 40px; }

.form-group { margin-bottom: 24px; }
.form-group label {
  display: block;
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,130,58,0.14);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.contact-map-area {
  position: relative;
  overflow: hidden;
}
.contact-map-area img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Phone CTA strip */
.phone-cta-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(40px, 6vw, 70px) var(--gutter);
  background: var(--forest-deep);
  color: #fff;
  flex-wrap: wrap;
}
.phone-cta-section h3 {
  font-size: clamp(28px, 3.5vw, 48px);
  color: #fff;
  margin: 0;
}
.phone-link {
  font: 400 clamp(24px, 3vw, 40px)/1 var(--serif);
  font-style: italic;
  color: var(--gold-light);
  transition: color var(--t);
}
.phone-link:hover { color: #fff; }


/* ================================================================
   22. NEWSLETTER
   ================================================================ */
.newsletter-section {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  background: var(--bg-alt);
  text-align: center;
}
.newsletter-section h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 12px; }
.newsletter-section p { color: var(--text-muted); margin-bottom: 36px; }

.newsletter {
  display: flex;
  gap: 0;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--border);
}
.newsletter input {
  flex: 1;
  padding: 16px 20px;
  background: var(--bg-card);
  border: none;
  color: var(--text-primary);
  font-size: 15px;
}
.newsletter input:focus { outline: none; }
.newsletter button {
  padding: 16px 24px;
  background: var(--forest-deep);
  border: none;
  color: #fff;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t);
}
.newsletter button:hover { background: #2e1a07; }


/* ================================================================
   23. FOOTER
   ================================================================ */
.site-footer {
  background: var(--forest-deep);
  color: rgba(255,255,255,0.75);
  padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(32px, 4vw, 48px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}
.footer-brand .brand { margin-bottom: 20px; }
.footer-brand p { font-size: 14px; line-height: 1.8; max-width: 300px; }

.footer-col h4 {
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color var(--t);
}
.footer-col ul a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom a { color: rgba(255,255,255,0.38); transition: color var(--t); }
.footer-bottom a:hover { color: rgba(255,255,255,0.72); }
.footer-socials { display: flex; gap: 20px; }
.footer-socials a { color: rgba(255,255,255,0.45); transition: color var(--t); }
.footer-socials a:hover { color: #fff; }


/* ================================================================
   24. REVEAL ANIMATIONS
   ================================================================ */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-row {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal         { transform: translateY(30px); }
.reveal-left    { transform: translateX(-40px); }
.reveal-right   { transform: translateX(40px); }
.reveal-scale   { transform: scale(0.94); }
.reveal-row     { transform: translateY(20px); }

.reveal.revealed,
.reveal.is-visible,
.reveal-left.revealed,
.reveal-left.is-visible,
.reveal-right.revealed,
.reveal-right.is-visible,
.reveal-scale.revealed,
.reveal-scale.is-visible,
.reveal-row.revealed,
.reveal-row.is-visible {
  opacity: 1;
  transform: none;
}


/* ================================================================
   25. STICKY ENQUIRY BAR
   ================================================================ */
.sticky-enquiry {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 8000;
  background: var(--forest-deep);
  color: #fff;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
  flex-wrap: wrap;
}
.sticky-enquiry.is-visible { transform: translateY(0); }
.sticky-enquiry p { margin: 0; font-size: 14px; }
.sticky-enquiry-close {
  background: none; border: none; color: rgba(255,255,255,0.55);
  cursor: pointer; font-size: 18px; padding: 4px 8px; line-height: 1;
}
.sticky-enquiry-close:hover { color: #fff; }


/* ================================================================
   26. MODAL
   ================================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg-card);
  max-width: 640px;
  width: 100%;
  padding: 48px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
}


/* ================================================================
   27. DARK MODE OVERRIDES
   ================================================================ */
[data-theme="dark"] .story-copy { background: var(--bg-section); }
[data-theme="dark"] .process-section { background: var(--bg-alt); }
[data-theme="dark"] .newsletter-section { background: var(--bg-alt); }
[data-theme="dark"] .awards-section { background: var(--bg-page); }
[data-theme="dark"] .contact-form-area { background: var(--bg-section); }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .site-header { background: rgba(8,4,0,0.94); }
[data-theme="dark"] .site-header.is-scrolled { background: rgba(6,3,0,0.98) !important; }
[data-theme="dark"] body.page-home .site-header:not(.is-scrolled) {
  background: linear-gradient(to bottom, rgba(4,2,0,0.65) 0%, rgba(4,2,0,0.28) 60%, rgba(4,2,0,0) 100%);
}


/* ================================================================
   28. RESPONSIVE
   ================================================================ */

/* 2-column grid at medium widths */
@media (max-width: 1100px) {
  .destination-grid {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: none;
  }
  .destination-grid .image-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 700px !important;
  }
  .destination-grid .image-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .destination-grid .image-card:nth-child(3) { grid-column: 2; grid-row: 2; }
  .destination-grid .image-card:nth-child(4) { grid-column: 1; grid-row: 3; }
  .destination-grid .image-card:nth-child(5) { grid-column: 2; grid-row: 3; }
  .destination-grid .image-card:nth-child(6) { grid-column: 1; grid-row: 4; }
  .destination-grid .image-card:nth-child(7) { grid-column: 2; grid-row: 4; }
  .destination-grid .image-card:nth-child(8) { grid-column: 1; grid-row: 5; }
  .destination-grid .image-card:nth-child(9) { grid-column: 2; grid-row: 5; min-height: 360px !important; }
}

@media (max-width: 1024px) {
  /* Show hamburger, hide desktop nav */
  .menu-toggle { display: flex; }
  .site-header { height: 68px; background: rgba(10,5,0,0.96) !important; }
  .site-header.is-scrolled { height: 68px; }
  body:not(.page-home) > main { padding-top: 68px; }

  /* Off-canvas navigation */
  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 96px 40px 40px;
    background: rgba(18,11,4,0.98);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
    gap: 0;
    z-index: 99998;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav > .nav-item,
  .main-nav > a { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .main-nav > .nav-item > a,
  .main-nav > a { padding: 18px 0; font-size: 13px; justify-content: space-between; }
  .main-nav > .nav-item > a::after,
  .main-nav > a::after { display: none !important; }

  /* Mobile dropdowns */
  .nav-dropdown,
  .nav-dropdown.mega,
  .nav-dropdown.mega-right {
    position: static;
    transform: none !important;
    min-width: 100%;
    box-shadow: none;
    border: none;
    border-top: none;
    background: rgba(255,255,255,0.04);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.3s ease;
  }
  .nav-item.is-open .nav-dropdown { max-height: 600px; padding: 8px 0 16px; }
  .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .mega-col { margin-bottom: 8px; }
  .mega-col h4 { font-size: 11px; padding: 12px 0 6px; margin: 0; border-bottom: none; }
  .mega-col a { padding: 8px 12px !important; font-size: 11px; }
  .nav-cta { margin: 20px 0 0 !important; padding: 16px 28px !important; }

  /* Quote section: stack vertically */
  .quote-section {
    grid-template-columns: 1fr;
  }
  .quote-section-image { min-height: 340px; }
  .quote-card { min-height: auto; padding: 50px 30px; }

  /* Experience rows */
  .experience-row { grid-template-columns: 1fr; }
  .experience-row:nth-child(even) .experience-image,
  .experience-row:nth-child(even) .experience-copy { order: unset; }
  .experience-image { height: 300px; }

  /* Story panel */
  .story-panel { grid-template-columns: 1fr; }
  .story-image { height: 380px; }

  /* Image strip */
  .image-strip { grid-template-columns: 1fr; height: auto; }
  .image-strip > .image-strip-item:first-child { height: 300px; }
  .image-strip > .image-strip-item:last-child  { height: 300px; }

  /* Contact */
  .contact-section { grid-template-columns: 1fr; }
  .contact-map-area { height: 360px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Back-to-top */
  .back-to-top { bottom: 24px !important; right: 24px !important; width: 46px !important; height: 46px !important; }
}

@media (max-width: 750px) {
  /* Destination grid: single column */
  .destination-grid {
    grid-template-columns: 1fr !important;
  }
  .destination-grid .image-card { grid-column: 1 !important; grid-row: auto !important; min-height: 360px !important; }
  .destination-grid .image-card:nth-child(1) { min-height: 420px !important; }
  .destination-grid .image-card:nth-child(9) { min-height: 280px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }

  /* Phone CTA */
  .phone-cta-section { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .back-to-top { bottom: 20px !important; right: 20px !important; width: 44px !important; height: 44px !important; }
}

@media print {
  .site-header,
  .back-to-top,
  .sticky-enquiry { display: none !important; }
}


/* ================================================================
   29. REGION PAGE STYLES
   ================================================================ */
.region-countries {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--bg-alt);
}
.region-countries-header { max-width: 780px; margin-bottom: 60px; }
.region-countries-header h2 {
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 12px 0 18px;
}
.region-countries-header h2 em { font-style: italic; color: var(--gold); }
.region-countries-header p { color: var(--text-muted); font-size: 17px; line-height: 1.75; }

.region-countries .region-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.region-countries .dest-mini-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4/5;
  text-decoration: none;
  color: #fff;
  background: #1a1108;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
}
.region-countries .dest-mini-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.region-countries .dest-mini-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.24); }
.region-countries .dest-mini-card:hover img { transform: scale(1.06); }
.region-countries .dest-mini-card-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 22px;
  background: linear-gradient(to top, rgba(10,5,0,0.9) 0%, rgba(10,5,0,0.4) 60%, rgba(10,5,0,0) 100%);
}
.region-countries .dest-mini-card-info p {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); margin: 0 0 6px;
}
.region-countries .dest-mini-card-info h4 {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  color: #fff; margin: 0; line-height: 1.1;
}

.region-practicals {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--bg-section);
}
.region-practicals-header { max-width: 780px; margin-bottom: 60px; }
.region-practicals-header h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 300; line-height: 1.05;
  color: var(--text-primary); margin: 12px 0 0;
}
.region-practicals-header h2 em { font-style: italic; color: var(--gold); }
.region-practicals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 40px;
}
.practical-item { padding: 28px 0 0; border-top: 1px solid rgba(200,130,58,0.35); }
.practical-item h4 {
  font-family: var(--serif); font-size: 24px; font-weight: 500; font-style: italic;
  color: var(--gold); margin: 0 0 12px;
}
.practical-item p { color: var(--text-muted); font-size: 15px; line-height: 1.75; margin: 0; }

.region-explore-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  padding: 14px 26px; font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  color: #fff; background: var(--gold); border: 1px solid var(--gold);
  border-radius: 2px; text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.region-explore-cta b { font-weight: 400; font-size: 14px; transition: transform 0.25s ease; }
.region-explore-cta:hover {
  background: #a86a26; border-color: #a86a26;
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(200,130,58,0.35); color: #fff;
}
.region-explore-cta:hover b { transform: translateX(4px); }

[data-theme="dark"] .region-countries { background: #1a0e04; }
[data-theme="dark"] .region-countries-header h2,
[data-theme="dark"] .region-practicals-header h2 { color: #f5efe3; }
[data-theme="dark"] .region-countries-header p { color: rgba(245,239,227,0.75); }
[data-theme="dark"] .region-practicals { background: #14090a; }
[data-theme="dark"] .practical-item p { color: rgba(245,239,227,0.75); }
[data-theme="dark"] .region-explore-cta { background: transparent; color: var(--gold); }
[data-theme="dark"] .region-explore-cta:hover { background: var(--gold); color: #14090a; }

@media (max-width: 900px) {
  .region-countries .region-destinations { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .region-hero h1 { font-size: clamp(48px, 12vw, 72px); }
}
@media (max-width: 560px) {
  .region-countries .region-destinations { grid-template-columns: 1fr; }
}


/* ================================================================
   30. PAGE-TITLE (team, 404) & MISC PAGE SECTIONS
   ================================================================ */
.page-title {
  padding: clamp(140px, 18vw, 200px) var(--gutter) clamp(60px, 8vw, 100px);
  background: var(--bg-alt);
}
.page-title h1 { font-size: clamp(48px, 7vw, 90px); margin-bottom: 16px; }
.page-title p  { font-size: 18px; color: var(--text-muted); max-width: 600px; }

/* Team page — hero image behind page-title */
body.page-team .page-title {
  min-height: 72vh;
  background-image:
    linear-gradient(to bottom, rgba(10,5,0,0.55) 0%, rgba(20,10,2,0.40) 45%, rgba(60,30,10,0.80) 80%, rgba(245,240,230,1) 100%),
    url('assets/images/team-safari.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
body.page-team .page-title h1,
body.page-team .page-title p,
body.page-team .page-title .eyebrow { color: #fff; }
body.page-team .page-title .eyebrow { color: rgba(255,255,255,0.72); }

/* 404 page */
body.page-not-found .page-title {
  min-height: 70vh;
  background-image:
    linear-gradient(to bottom, rgba(10,5,0,0.58) 0%, rgba(20,10,2,0.45) 50%, rgba(245,240,230,1) 100%),
    url('assets/images/giraffe-savanna.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
body.page-not-found .page-title h1,
body.page-not-found .page-title p,
body.page-not-found .page-title .eyebrow { color: #fff; }

/* Testimonials hero */
.testimonials-hero {
  position: relative;
  min-height: 65vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: clamp(130px, 18vw, 200px) var(--gutter) clamp(60px, 8vw, 100px);
  color: #fff;
  background-color: #2a1008;
}
.testimonials-hero .hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.08) 40%, rgba(0,0,0,0.72) 100%);
  z-index: 0; pointer-events: none;
}
.testimonials-hero > * { position: relative; z-index: 1; }
.testimonials-hero h1,
.testimonials-hero .eyebrow { color: #fff; }


/* ================================================================
   ADMIN (minimal — keep separate if possible but included for
   completeness)
   ================================================================ */
.admin-body { background: #f8f4f0; }



/* ================================================================
   31. MISSING STYLES — RESTORED FROM REFERENCE CSS
   Split sections, Catalog grid, Team, Testimonials, Contact,
   Destinations detail, Footer invite, Utility classes, etc.
   ================================================================ */

/* ── Premium Variables ─────────────────────────────────────────── */
:root {
  --glass-bg:       rgba(255,255,255,0.08);
  --glass-border:   rgba(255,255,255,0.18);
  --glass-blur:     20px;
  --anim-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --anim-slow:      cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card:    0 4px 32px rgba(44,26,14,0.12), 0 1px 8px rgba(44,26,14,0.06);
  --shadow-hover:   0 16px 60px rgba(44,26,14,0.2), 0 4px 20px rgba(44,26,14,0.12);
}


/* ── Accessibility Utilities ───────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.toggle-icon-wrap {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.label-light,
.label-dark {
  display: inline;
  transition: opacity 0.25s ease;
}

[data-theme="dark"] .label-light { display: none; }
[data-theme="light"] .label-dark,
:root:not([data-theme="dark"]) .label-dark { display: none; }


/* ── Hero base class ───────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
}


/* ── Lead text ─────────────────────────────────────────────────── */
.lead {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.6;
  color: var(--text-primary);
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  max-width: 680px;
}


/* ── Text link ─────────────────────────────────────────────────── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 0.25s ease, color 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}
.text-link:hover { gap: 14px; color: var(--gold-light); }
.text-link b { font-weight: 400; transition: transform 0.25s ease; }
.text-link:hover b { transform: translateX(4px); }
.text-link.light { color: rgba(255,255,255,0.85); }
.text-link.light:hover { color: #fff; }


/* ── Section Index (numbering) ─────────────────────────────────── */
.section-index {
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-index span {
  flex: 1;
  height: 1px;
  background: var(--border);
  display: block;
}


/* ── Section Heading ───────────────────────────────────────────── */
.section-heading {
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(24px, 4vw, 48px);
}
.section-heading h2 {
  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 0.95;
  margin: 12px 0 20px;
}
.section-heading p { color: var(--text-muted); font-size: 17px; max-width: 600px; }


/* ── Split Section Layout ──────────────────────────────────────── */
.split-section {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px 60px;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  align-items: start;
}
.split-section > .section-index {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: start;
}
.split-content {
  max-width: 780px;
}
.split-content h2 {
  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 0.95;
  margin: 12px 0 24px;
}
.split-content h2 em { color: var(--gold); }
.split-content p {
  font-size: 16px;
  line-height: 1.80;
  color: var(--text-muted);
  margin-bottom: 20px;
  max-width: 600px;
}

.detail-intro.split-section {
  background: var(--bg-section);
}

@media (max-width: 900px) {
  .split-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .split-section > .section-index {
    writing-mode: horizontal-tb;
    transform: none;
  }
}


/* ── Manifesto Section ─────────────────────────────────────────── */
.manifesto {
  background: var(--bg-alt);
}
.intro.split-section {
  background: var(--bg-page);
}


/* ── Values Section ────────────────────────────────────────────── */
.values {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: var(--bg-section);
}
.values h2 {
  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 0.95;
  margin: 12px 0 48px;
}
.values h3 {
  font-size: clamp(22px, 2.5vw, 32px);
  margin-bottom: 12px;
}
.values p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 560px;
}


/* ── Image Strip 3-column variant ──────────────────────────────── */
.image-strip.image-strip-3 {
  grid-template-columns: 1fr 1fr 1fr;
  height: auto;
}
.image-strip.image-strip-3 > .image-strip-item {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  height: auto;
}
.image-strip.image-strip-3 > .image-strip-item:first-child { height: auto; }
.image-strip.image-strip-3 > .image-strip-item:last-child {
  display: block;
  height: auto;
}

@media (max-width: 750px) {
  .image-strip.image-strip-3 {
    grid-template-columns: 1fr;
  }
  .image-strip.image-strip-3 > .image-strip-item { aspect-ratio: 16/9; }
}


/* ================================================================
   32. CATALOG GRID (Destinations & Experiences pages)
   ================================================================ */
.catalog-intro {
  max-width: 780px;
  margin-bottom: 60px;
}
.catalog-intro h2 {
  font-size: clamp(44px, 5.5vw, 78px);
  line-height: 0.95;
  margin: 12px 0 20px;
}
.catalog-intro p { color: var(--text-muted); font-size: 17px; line-height: 1.75; max-width: 600px; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.catalog-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.4s var(--anim-ease), box-shadow 0.4s ease;
  text-decoration: none;
  color: var(--text-primary);
}
.catalog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.catalog-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.catalog-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.catalog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--anim-ease);
}
.catalog-card:hover .catalog-image img { transform: scale(1.06); }
.catalog-image span {
  position: absolute;
  top: 14px;
  right: 14px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.60);
  z-index: 2;
}

.catalog-card .eyebrow { margin: 16px 20px 4px; }
.catalog-card h3 {
  font-size: clamp(24px, 2.5vw, 32px);
  margin: 4px 20px 10px;
  line-height: 1.05;
}
.catalog-card > a > p {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  line-height: 1.7 !important;
  margin: 0 20px 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.catalog-card .text-link {
  margin: 0 20px 20px;
}

@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .catalog-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   33. REGION ACCORDION (Destinations page)
   ================================================================ */
.regions-list {
  margin-top: 60px;
}
.region-accordion {
  border-bottom: 1px solid var(--border);
}
.region-accordion:first-child {
  border-top: 1px solid var(--border);
}
.region-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 28px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1;
  text-align: left;
  transition: color 0.25s ease;
}
.region-trigger:hover { color: var(--gold); }
.region-trigger .num {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-right: 18px;
}
.region-trigger b {
  font-size: 24px;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.35s var(--anim-ease);
  flex-shrink: 0;
}
.region-accordion.is-open .region-trigger b {
  transform: rotate(45deg);
}
.region-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--anim-ease), opacity 0.4s ease, padding 0.4s ease;
  opacity: 0;
  padding: 0;
}
.region-accordion.is-open .region-panel {
  max-height: 2000px;
  opacity: 1;
  padding: 0 0 40px;
}
.region-panel .region-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

/* Accordion dest-mini-card */
.region-panel .dest-mini-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4/5;
  text-decoration: none;
  color: #fff;
  background: #1a1108;
  transition: transform 0.4s var(--anim-ease), box-shadow 0.4s ease;
}
.region-panel .dest-mini-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--anim-ease);
}
.region-panel .dest-mini-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.22); }
.region-panel .dest-mini-card:hover img { transform: scale(1.06); }
.region-panel .dest-mini-card-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(10,5,0,0.88) 0%, rgba(10,5,0,0.3) 60%, rgba(10,5,0,0) 100%);
}
.region-panel .dest-mini-card-info p {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.70); margin: 0 0 4px;
}
.region-panel .dest-mini-card-info h4 {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  color: #fff; margin: 0; line-height: 1.1;
}

/* Site search bar */
.site-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 680px;
  margin-bottom: 32px;
}
.site-search input {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
}
.site-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,130,58,0.14); }
.site-search-btn {
  padding: 14px 22px;
  background: var(--gold);
  border: none;
  color: #fff;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.25s ease;
}
.site-search-btn:hover { background: #a86a26; }


/* ================================================================
   34. TEAM PAGE
   ================================================================ */
.team-hero {
  background-position: center 40% !important;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.35s var(--anim-ease), box-shadow 0.35s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.team-portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #1a1108;
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--anim-ease);
}
.team-card:hover .team-portrait img { transform: scale(1.04); }

.team-card h3 {
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 20px 22px 4px;
  line-height: 1.1;
}
.team-card h4 {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 22px 12px;
}
.team-speciality {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 22px 8px;
  letter-spacing: 0.04em;
}
.team-quote {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 8px 22px 22px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}


/* ================================================================
   35. TESTIMONIALS PAGE
   ================================================================ */
.testimonials-hero.hero.inner-hero {
  background-position: center center !important;
}

/* Trustpilot badge */
.trustpilot-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.tp-stars {
  display: flex;
  gap: 4px;
}
.tp-star {
  color: #00b67a;
  font-size: 18px;
  line-height: 1;
}
.stars {
  color: #00b67a;
  font-size: 16px;
  letter-spacing: 2px;
}
.trustpilot-badge span {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* Testimonial slider */
.testimonial-slider {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  overflow: hidden;
  position: relative;
}
.testimonial-slider h2 {
  font-size: clamp(36px, 4.5vw, 58px);
  margin-bottom: 40px;
}
.testimonial-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 16px;
}
.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial-slide {
  flex: 0 0 clamp(300px, 42vw, 480px);
  scroll-snap-align: start;
}

.slider-controls {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.slider-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.slider-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Testimonial grid */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 0 var(--gutter) clamp(80px, 10vw, 140px);
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 32px 28px;
  transition: transform 0.35s var(--anim-ease), box-shadow 0.35s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.testimonial-card .stars {
  margin-bottom: 16px;
}
.testimonial-card blockquote {
  font: 400 clamp(16px, 1.6vw, 20px)/1.55 var(--serif);
  font-style: italic;
  color: var(--text-primary);
  margin: 0 0 20px;
}
.testimonial-card cite {
  font-style: normal;
  display: block;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.testimonial-card p {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* ================================================================
   36. CONTACT PAGE — Extended styles
   ================================================================ */
.contact-page {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 600px;
}
.contact-intro {
  padding: clamp(60px, 8vw, 100px) clamp(40px, 5vw, 70px);
  background: var(--bg-section);
}
.contact-intro h2 {
  font-size: clamp(36px, 4vw, 56px);
  margin: 12px 0 24px;
}
.contact-details {
  margin-top: 32px;
}
.contact-details p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 8px;
}
.contact-details a {
  color: var(--gold);
  transition: color var(--t);
}
.contact-details a:hover { color: var(--gold-light); }

.contact-form-wrap {
  padding: clamp(60px, 8vw, 100px) clamp(40px, 5vw, 70px);
  background: var(--bg-page);
}

/* Contact quick strip */
.contact-quick-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
}
.contact-quick-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 32px;
  border-right: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.3s ease;
}
.contact-quick-item:last-child { border-right: none; }
.contact-quick-item:hover { background: var(--bg-card); }
.cq-icon { font-size: 24px; flex-shrink: 0; }
.contact-quick-item strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.contact-quick-item span:not(.cq-icon) {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Enquiry form */
.enquiry-form label {
  display: block;
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  border-radius: var(--radius);
  transition: border-color var(--t), box-shadow var(--t);
  margin-bottom: 20px;
  appearance: none;
  -webkit-appearance: none;
}
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,130,58,0.14);
}
.enquiry-form textarea { resize: vertical; min-height: 120px; }

.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

/* Phone CTA extended */
.phone-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.phone-cta-text h2 { color: #fff; font-size: clamp(36px,4vw,58px); margin-bottom: 16px; }
.phone-cta-text p:last-child { color: rgba(255,255,255,0.65); max-width: 440px; }
.phone-cta-action { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phone-cta-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 48px;
  background: var(--gold);
  color: var(--forest-deep);
  text-decoration: none;
  font: 600 22px/1 var(--sans);
  border-radius: 2px;
  transition: background 0.3s ease, transform 0.3s var(--anim-ease), box-shadow 0.3s ease;
}
.phone-cta-btn:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(200,130,58,0.35);
}
.phone-icon { font-size: 28px; }
.phone-note {
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* Payment section */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.payment-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 500 13px/1 var(--sans);
  color: var(--text-primary);
  transition: border-color 0.25s ease;
}
.payment-badge:hover { border-color: var(--gold); }
.payment-badge .icon { font-size: 18px; }

.payment-guarantee {
  margin-top: 24px;
}

.premium-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 32px;
  transition: transform 0.4s var(--anim-ease), box-shadow 0.4s ease;
}
.premium-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.notice {
  font-size: 13px;
  color: var(--text-muted);
  padding: 16px 20px;
  background: var(--bg-alt);
  border-left: 3px solid var(--gold);
  margin: 20px 0;
  line-height: 1.7;
}
.check {
  color: var(--gold);
  margin-right: 6px;
}

@media (max-width: 900px) {
  .contact-page { grid-template-columns: 1fr; }
  .contact-quick-strip { grid-template-columns: 1fr 1fr; }
  .form-pair { grid-template-columns: 1fr; }
  .phone-cta-inner { flex-direction: column; gap: 40px; text-align: center; }
  .phone-cta-text p:last-child { margin: 0 auto; }
}
@media (max-width: 600px) {
  .contact-quick-strip { grid-template-columns: 1fr; }
  .contact-quick-item { border-right: none; border-bottom: 1px solid var(--border); }
  .phone-cta-btn { font-size: 18px; padding: 22px 32px; }
}


/* ================================================================
   37. DESTINATION DETAIL PAGES (Kenya, Tanzania, etc.)
   ================================================================ */
.dest-highlights {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.dest-highlights h2 {
  font-size: clamp(38px, 4.5vw, 62px);
  margin: 12px 0 48px;
}
.dest-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
}
.dest-highlight-item {
  padding-top: 28px;
  border-top: 2px solid var(--gold);
}
.dest-highlight-num {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
}
.dest-highlight-item h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.dest-highlight-item p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
}

/* When to go */
.when-to-go {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  background: var(--bg-alt);
}
.when-to-go h2 {
  font-size: clamp(32px, 3.5vw, 48px);
  margin: 12px 0 32px;
}

.months-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}
.month-block {
  text-align: center;
  padding: 14px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}
.month-block:hover { transform: translateY(-2px); }
.month-block.good {
  background: rgba(200,130,58,0.12);
  border-color: rgba(200,130,58,0.35);
  color: var(--gold);
}
.month-block.peak {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

@media (max-width: 900px) {
  .months-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 560px) {
  .months-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Gallery strip */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px;
}
.gallery-strip-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.gallery-strip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-strip-item:hover img { transform: scale(1.05); }

/* Full image section */
.full-image {
  position: relative;
  overflow: hidden;
  max-height: 600px;
}
.full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ================================================================
   38. FOOTER — Invite section & Legal bar
   ================================================================ */
.footer-invite {
  text-align: center;
  padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(60px, 8vw, 100px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 60px;
}
.footer-invite .eyebrow { color: var(--gold); margin-bottom: 16px; }
.footer-invite .eyebrow.light { color: rgba(255,255,255,0.65); }
.footer-invite h2 {
  font-size: clamp(44px, 6vw, 88px);
  color: #fff;
  margin: 0 0 36px;
  line-height: 0.95;
}

/* Elegant CTA button in footer */
.circle-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 44px 18px 36px;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(200,130,58,0.18) 0%, rgba(200,130,58,0.08) 100%);
  border: 1.5px solid rgba(200,130,58,0.45);
  border-radius: 60px;
  position: relative;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.circle-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,130,58,0.35) 0%, rgba(200,130,58,0.12) 100%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.circle-link:hover {
  border-color: rgba(200,130,58,0.85);
  transform: translateY(-2px);
  box-shadow:
    0 8px 32px rgba(200,130,58,0.2),
    0 0 0 1px rgba(200,130,58,0.1),
    inset 0 1px 0 rgba(255,255,255,0.06);
  gap: 20px;
}
.circle-link:hover::before { opacity: 1; }
.circle-link span {
  position: relative;
  z-index: 1;
  padding-bottom: 2px;
}
.circle-link span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(200,130,58,0.7);
  transition: width 0.4s ease;
}
.circle-link:hover span::after { width: 100%; }
.circle-link b {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(200,130,58,0.4);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  background: rgba(200,130,58,0.12);
  transition: all 0.4s ease;
  flex-shrink: 0;
}
.circle-link:hover b {
  background: rgba(200,130,58,0.28);
  border-color: rgba(200,130,58,0.8);
  transform: translateX(3px);
  box-shadow: 0 0 16px rgba(200,130,58,0.15);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  flex-wrap: wrap;
  gap: 12px;
}

/* Footer grid nav headings */
.footer-grid nav h3 {
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.footer-grid nav a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color var(--t), padding-left 0.25s ease;
  margin-bottom: 10px;
}
.footer-grid nav a:hover { color: #fff; padding-left: 6px; }
.footer-grid > div h3 {
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.footer-grid > div > p {
  font-size: 14px;
  line-height: 1.8;
  max-width: 300px;
}
/* Footer newsletter */
.footer-grid .newsletter {
  margin-top: 12px;
  border-color: rgba(255,255,255,0.2);
}
.footer-grid .newsletter input {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: none;
  padding: 13px 16px;
  font-size: 13px;
}
.footer-grid .newsletter input::placeholder { color: rgba(255,255,255,0.40); }
.footer-grid .newsletter button {
  background: var(--forest-mid);
  padding: 13px 18px;
}
.footer-grid .newsletter button:hover { background: var(--gold); }


/* ================================================================
   39. AWARDS STRIP (About page variant)
   ================================================================ */
.awards-strip {
  padding: clamp(32px, 4vw, 56px) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.awards-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.award-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  border: 1px solid var(--border);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s var(--anim-ease);
  text-align: center;
  cursor: default;
}
.award-badge:hover {
  border-color: var(--gold);
  background: rgba(200,130,58,0.06);
  transform: translateY(-3px);
}
.award-badge strong {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.award-badge span {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ================================================================
   40. ANIMATIONS — Fade/slide-up, Glass effects
   ================================================================ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-up {
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--anim-slow) forwards;
}
.anim-delay-1 { animation-delay: 0.18s; }
.anim-delay-2 { animation-delay: 0.36s; }
.anim-delay-3 { animation-delay: 0.54s; }
.animate-hero .eyebrow { animation-delay: 0s; }

.glass-btn {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  transition: background 0.3s var(--anim-ease), border-color 0.3s var(--anim-ease), transform 0.3s var(--anim-ease), box-shadow 0.3s var(--anim-ease) !important;
}
.glass-btn:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
}
.glass-stats {
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  background: rgba(15,8,2,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(100px, 14vw, 160px);
  left: var(--gutter);
  z-index: 2;
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Regions marquee (homepage) */
.regions-marquee {
  background: var(--forest-deep);
  padding: 18px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.regions-marquee .marquee-track span {
  color: rgba(255,255,255,0.65);
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 28px;
  flex-shrink: 0;
}
.divider {
  color: var(--gold);
}

/* Destination card hover overlay */
.dest-card-hover {
  transition: transform 0.5s var(--anim-ease);
}

/* Journey card extras */
.journey-card-region {
  position: absolute;
  top: 14px; left: 14px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(44,26,14,0.6);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  z-index: 2;
}
.journey-card-body {
  padding: 20px 22px 24px;
}
.journey-card-body h3 {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  margin: 0 0 8px;
  line-height: 1.2;
}
.journey-card-body p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.6;
}
.journey-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Featured journeys */
.featured-journeys {
  padding: clamp(56px, 8vw, 112px) 0;
  background: var(--bg-section);
  overflow: hidden;
}
.featured-journeys-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--gutter);
  margin-bottom: 40px;
}
.featured-journeys-header h2 { margin: 0; }

/* Experience section / list */
.experience-section {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}
.experience-list {
  display: flex;
  flex-direction: column;
}

/* Destinations showcase */
.destinations-showcase {
  padding: clamp(80px, 10vw, 140px) var(--gutter);
}


/* ================================================================
   41. ABOUT HERO — specific position
   ================================================================ */
.about-hero {
  background-position: center 25% !important;
}


/* ================================================================
   42. NOT FOUND HERO
   ================================================================ */
.not-found-hero {
  min-height: 80vh;
  background-position: center 40% !important;
}


/* ================================================================
   43. RESPONSIVE — Additional missing breakpoints
   ================================================================ */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-page { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-slide { flex: 0 0 90vw; }
  .journey-card { flex: 0 0 82vw; }
  .form-pair { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .months-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ================================================================
   44. PAGE-SPECIFIC BODY CLASSES
   ================================================================ */
body.page-testimonials main,
body.page-region main { padding-top: 0 !important; }


/* ── Page-specific body classes (for JS hooks / targeting) ──────── */
body.page-contact main { padding-top: 0 !important; }

body.page-region-africa main,
body.page-region-asia main,
body.page-region-australasia main,
body.page-region-central-asia main,
body.page-region-europe main,
body.page-region-latin-america main,
body.page-region-middle-east main,
body.page-region-polar main { padding-top: 0 !important; }

/* Slider button directional variants */
.slider-btn-prev { /* inherits .slider-btn */ }
.slider-btn-next { /* inherits .slider-btn */ }


/* ================================================================
   45. ENHANCEMENT — Homepage Hero Top Section Fix
   Proper placement of text + stat cards
   ================================================================ */

/* Hero layout: flex column, text at bottom-left, stats as floating bar */
.video-hero,
.home-hero.video-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding-bottom: 0;
}

/* Hero copy: sits in bottom-left with proper breathing room */
.hero-copy {
  max-width: 720px;
  padding: 0 var(--gutter);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.hero-copy h1 {
  font-size: clamp(52px, 8vw, 120px);
  letter-spacing: -0.02em;
}
.hero-copy p {
  max-width: 480px;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.72;
  margin-bottom: 32px;
}
.hero-actions {
  margin-bottom: 0;
}

/* Hero stats bar: full-width glass strip pinned to bottom */
.hero-stats.glass-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  background: rgba(8,4,0,0.65);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(22px, 3vw, 40px) 16px;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 0.35s ease;
}
.hero-stat:last-child { border-right: none; }
.hero-stat:hover {
  background: rgba(200,130,58,0.10);
}
.hero-stat strong {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-bottom: 6px;
  background: linear-gradient(135deg, #fff 0%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat span {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.55);
}

/* Scroll cue repositioned above stats */
.scroll-cue {
  bottom: auto;
  top: auto;
  position: relative;
  margin: 0 0 24px var(--gutter);
  z-index: 2;
}

@media (max-width: 750px) {
  .hero-stats.glass-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-stat:nth-child(2) { border-right: none; }
  .hero-stat { padding: 18px 12px; }
}

@media (max-width: 480px) {
  .hero-stats.glass-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-stat strong { font-size: 28px; }
}


/* ================================================================
   46. ENHANCEMENT — Card Design Upgrade (Premium Cards)
   ================================================================ */

/* --- Destination image cards: premium glass overlay --- */
.image-card {
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  transition: box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.image-card:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,0.40);
  transform: translateY(-4px);
}
.image-card::after {
  background: linear-gradient(
    to top,
    rgba(6, 2, 0, 0.92) 0%,
    rgba(15, 8, 2, 0.55) 35%,
    rgba(0, 0, 0, 0.05) 70%,
    rgba(0, 0, 0, 0.0) 100%
  );
  transition: opacity 0.4s ease;
}
.image-card:hover::after {
  opacity: 0.85;
}

/* Card inner content: add subtle divider line above explore button */
.image-card > div {
  gap: 2px;
}
.start-planning-btn {
  border-radius: 3px !important;
  padding: 10px 20px !important;
  margin-top: 14px !important;
  background: rgba(200,130,58,0.12) !important;
  border-color: rgba(200,130,58,0.7) !important;
  color: #fff !important;
  font-size: 10px !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.start-planning-btn:hover {
  background: rgba(200,130,58,0.35) !important;
  border-color: var(--gold-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(200,130,58,0.25) !important;
}

/* Card count badge: upgraded */
.card-count {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 9px !important;
  color: rgba(255,255,255,0.65) !important;
}

/* Africa (first) card: extra large heading with glow */
.destination-grid .image-card:nth-child(1) h3 {
  text-shadow: 0 4px 24px rgba(200,130,58,0.25), 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* --- Journey scroll cards: premium redesign --- */
.journey-card {
  border-radius: 8px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 24px rgba(44,26,14,0.10), 0 1px 6px rgba(44,26,14,0.06);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s ease;
  background: var(--bg-card);
}
.journey-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(44,26,14,0.18), 0 8px 24px rgba(44,26,14,0.10);
}
.journey-card-image {
  height: 260px;
  position: relative;
}
.journey-card-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 100%);
  pointer-events: none;
}
.journey-card-region {
  border-radius: 3px;
  font-size: 9px;
  padding: 6px 12px;
  background: rgba(200,130,58,0.85);
  backdrop-filter: blur(8px);
  border: none;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.journey-card-body {
  padding: 24px 24px 28px;
}
.journey-card-body h3 {
  font-size: clamp(20px, 2.4vw, 24px);
  margin-bottom: 10px;
  color: var(--text-primary);
  transition: color 0.3s ease;
}
.journey-card:hover .journey-card-body h3 {
  color: var(--gold);
}
.journey-card-body p {
  font-size: 14px;
  line-height: 1.65;
}
.journey-card-meta {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}

/* --- Catalog cards: premium upgrade --- */
.catalog-card {
  border-radius: 8px;
  border: none;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s ease;
}
.catalog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(44,26,14,0.20), 0 8px 24px rgba(44,26,14,0.12);
}

/* --- Testimonial cards: glass-morphism --- */
.testimonial-card {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 2px 16px rgba(44,26,14,0.06);
  padding: 36px 32px;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(44,26,14,0.14);
  border-color: rgba(200,130,58,0.35);
}

/* --- Team cards: premium --- */
.team-card {
  border-radius: 8px;
  border: none;
  box-shadow: var(--shadow-card);
}
.team-card:hover {
  box-shadow: 0 24px 60px rgba(44,26,14,0.18);
}

/* --- Award badges: refined --- */
.award-badge {
  border-radius: 6px;
  padding: 18px 32px;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.award-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(200,130,58,0.12);
}

/* --- Process steps: premium card style --- */
.process-section ol li {
  padding: 32px 28px;
  background: var(--bg-card);
  border-radius: 8px;
  border-top: 3px solid var(--gold);
  box-shadow: 0 2px 16px rgba(44,26,14,0.06);
  transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.4s ease;
}
.process-section ol li:hover {
  box-shadow: 0 12px 40px rgba(44,26,14,0.12);
}
.process-section ol li span {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}

/* --- Quote card: elevated premium --- */
.quote-card {
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.quote-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(200,130,58,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Dest mini cards: elevated --- */
.dest-mini-card {
  border-radius: 8px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.dest-mini-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.30) !important;
}


/* ================================================================
   47. ENHANCEMENT — General Effects Upgrade
   ================================================================ */

/* Smooth page transitions */
body > main {
  animation: jakadaPageIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

/* Section entrance animations with stagger */
.intro.split-section,
.destinations-showcase,
.experience-section,
.featured-journeys,
.quote-section,
.story-panel,
.process-section,
.awards-strip {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro.split-section.jk-visible,
.destinations-showcase.jk-visible,
.experience-section.jk-visible,
.featured-journeys.jk-visible,
.quote-section.jk-visible,
.story-panel.jk-visible,
.process-section.jk-visible,
.awards-strip.jk-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image hover zoom: smoother across all images */
.image-card .card-bg-img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.image-card:hover .card-bg-img {
  transform: scale(1.08) !important;
}

/* Parallax tilt on image cards */
.image-card {
  transform-style: preserve-3d;
}

/* Button hover: polished micro-interactions */
.button {
  position: relative;
  overflow: hidden;
  transition: background var(--t), color var(--t), border-color var(--t), transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
.button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}
.button:hover::before {
  width: 300px;
  height: 300px;
}

/* Glass button shimmer */
.glass-btn {
  position: relative;
  overflow: hidden;
}
.glass-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.06) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.glass-btn:hover::after {
  transform: translateX(30%);
}

/* Text link: smoother arrow animation */
.text-link {
  transition: gap 0.35s cubic-bezier(0.22,1,0.36,1), color 0.25s ease;
}
.text-link span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.text-link:hover span {
  transform: translateX(4px);
}

/* Experience rows: premium hover with subtle border glow */
.experience-section .experience-list .experience-row {
  display: grid;
  grid-template-columns: 56px 1fr 1.4fr 48px;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  min-height: auto;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.35s ease, padding-left 0.35s ease;
  position: relative;
}
.experience-section .experience-list .experience-row:first-child {
  border-top: 1px solid var(--border);
}
.experience-section .experience-list .experience-row:hover {
  background: var(--bg-alt);
  padding-left: 16px;
  padding-right: 16px;
}
.experience-section .experience-list .experience-row span {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 300;
  transition: color 0.3s ease;
}
.experience-section .experience-list .experience-row:hover span {
  color: var(--gold);
}
.experience-section .experience-list .experience-row h3 {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  margin: 0;
  color: var(--text-primary);
  transition: color 0.3s ease;
}
.experience-section .experience-list .experience-row:hover h3 {
  color: var(--gold);
}
.experience-section .experience-list .experience-row p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.experience-section .experience-list .experience-row b {
  font-size: 20px;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform 0.3s ease, color 0.3s ease;
}
.experience-section .experience-list .experience-row:hover b {
  transform: translateX(8px);
  color: var(--gold);
}

@media (max-width: 750px) {
  .experience-section .experience-list .experience-row {
    grid-template-columns: 40px 1fr 40px;
  }
  .experience-section .experience-list .experience-row p {
    display: none;
  }
}

/* Marquee: smoother, speed-variable */
.marquee-track {
  animation: marqueeScroll 35s linear infinite;
}

/* Navigation dropdown: premium entrance */
.nav-dropdown {
  transition: opacity 0.28s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.16,1,0.3,1), visibility 0.28s;
  border-radius: 0 0 6px 6px;
}

/* Image strip: subtle zoom & caption reveal on hover */
.image-strip .image-strip-item {
  position: relative;
}
.image-strip-caption {
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.image-strip .image-strip-item:hover .image-strip-caption {
  transform: translateY(0);
  opacity: 1;
}

/* Circle link: pulse effect on the circle */
.circle-link b {
  animation: circlePulse 3s ease-in-out infinite;
}
@keyframes circlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,130,58,0.15); }
  50% { box-shadow: 0 0 0 10px rgba(200,130,58,0); }
}

/* Newsletter: focus glow */
.newsletter input:focus {
  box-shadow: 0 0 0 3px rgba(200,130,58,0.15);
  border-color: var(--gold);
}

/* Footer nav links: smooth slide-in hover */
.footer-grid nav a {
  position: relative;
}
.footer-grid nav a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.footer-grid nav a:hover::before {
  width: 100%;
}

/* Scroll-triggered counter glow for hero stats */
.hero-stat strong {
  transition: text-shadow 0.5s ease;
}


/* ================================================================
   48. ENHANCEMENT — Image Strip Enhancement (more images)
   ================================================================ */

/* Enhanced image strip with 3+ items */
.image-strip-enhanced {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  overflow: hidden;
}
.image-strip-enhanced .image-strip-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.image-strip-enhanced .image-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.image-strip-enhanced .image-strip-item:hover img {
  transform: scale(1.08);
}
.image-strip-enhanced .image-strip-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.image-strip-enhanced .image-strip-item:hover::after {
  opacity: 1;
}

@media (max-width: 1024px) {
  .image-strip-enhanced { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .image-strip-enhanced { grid-template-columns: 1fr; }
  .image-strip-enhanced .image-strip-item { aspect-ratio: 16/9; }
}


/* ================================================================
   49. ENHANCEMENT — Refined Typography & Spacing
   ================================================================ */

/* Section headings: subtle gold accent line */
.section-heading h2::after,
.featured-journeys-header h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-top: 16px;
}

/* Eyebrow text: refined */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 600;
}

/* Quote section image: parallax-ready */
.quote-section-image img {
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}


/* ================================================================
   50. ENHANCEMENT — Dark Mode Card Improvements
   ================================================================ */
[data-theme="dark"] .journey-card {
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
  border: 1px solid rgba(230,200,150,0.08);
}
[data-theme="dark"] .journey-card:hover {
  box-shadow: 0 20px 56px rgba(0,0,0,0.45);
  border-color: rgba(200,130,58,0.25);
}
[data-theme="dark"] .catalog-card {
  border: 1px solid rgba(230,200,150,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
}
[data-theme="dark"] .testimonial-card {
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
}
[data-theme="dark"] .process-section ol li {
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
[data-theme="dark"] .image-card {
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
[data-theme="dark"] .image-card:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}


/* ================================================================
   51. FIX — Better Font (Playfair Display for eyebrow / accent text)
   Replaces the generic sans-serif eyebrow with a refined display font
   across the entire site. Applied to all .eyebrow elements.
   ================================================================ */
:root {
  --display: 'Playfair Display', Georgia, serif;
}

/* Eyebrow text — use Playfair Display across all pages */
.eyebrow {
  font-family: var(--display) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

/* Hero eyebrow: slightly larger */
.hero-copy .eyebrow {
  font-size: 13px !important;
  letter-spacing: 0.20em !important;
}

/* Footer eyebrow */
.footer-invite .eyebrow {
  font-size: 13px !important;
}


/* ================================================================
   52. FIX — Navbar More Transparent
   Increase transparency on both homepage (over video) and inner pages.
   ================================================================ */

/* Default navbar: more transparent glass */
.site-header {
  background: rgba(14, 8, 2, 0.72) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Homepage over video: even more transparent */
body.page-home .site-header:not(.is-scrolled) {
  background: linear-gradient(
    to bottom,
    rgba(8, 4, 0, 0.35) 0%,
    rgba(8, 4, 0, 0.12) 60%,
    rgba(8, 4, 0, 0.0) 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

/* Scrolled state: slightly more solid but still transparent */
.site-header.is-scrolled {
  background: rgba(10, 5, 0, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.30) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .site-header {
  background: rgba(8,4,0,0.72) !important;
}
[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(6,3,0,0.85) !important;
}

/* Mobile: slightly more opaque for readability */
@media (max-width: 1024px) {
  .site-header {
    background: rgba(10,5,0,0.80) !important;
  }
}


/* ================================================================
   53. FIX — Stat Grid: White Text + Translucent Bar
   Stats bar matches navbar translucency. All text pure white.
   ================================================================ */

/* Stats bar: translucent glass like navbar */
.hero-stats.glass-stats {
  background: rgba(14, 8, 2, 0.55) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}

/* All stat text: pure white */
.hero-stat strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.hero-stat span {
  color: rgba(255,255,255,0.80) !important;
}
.hero-stat {
  color: #ffffff !important;
}


/* ================================================================
   54. FIX — Jakada Philosophy Section Layout (Compact, Less Empty Space)
   Complete redesign from split-section to a tighter grid layout.
   ================================================================ */

.philosophy-section {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  background: var(--bg-page);
}

.philosophy-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.philosophy-header {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.philosophy-header h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 300;
  line-height: 0.95;
  margin: 10px 0 0;
  color: var(--text-primary);
}
.philosophy-header h2 em {
  color: var(--gold);
  font-style: italic;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.philosophy-main {
  padding-right: clamp(16px, 3vw, 40px);
}
.philosophy-main .lead {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--text-primary);
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  margin-bottom: 24px;
  max-width: 580px;
}
.philosophy-main .text-link {
  margin-top: 8px;
}

.philosophy-values {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.philosophy-value {
  padding: 24px 0;
  border-top: 1px solid rgba(200,130,58,0.25);
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  gap: 0 16px;
}
.philosophy-value:last-child {
  border-bottom: 1px solid rgba(200,130,58,0.25);
}
.philosophy-num {
  grid-row: 1 / 3;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1.2;
}
.philosophy-value h3 {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.2;
}
.philosophy-value p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  max-width: 420px;
}

@media (max-width: 900px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .philosophy-main {
    padding-right: 0;
  }
}


/* ================================================================
   55. FIX — Inner Page Hero Top Bars: Better Text Placement
   Text in listing-hero and inner-hero gets centered-bottom placement
   with more breathing room and better visual hierarchy.
   ================================================================ */

/* Inner/listing hero: better vertical centering and text placement */
.inner-hero,
.listing-hero {
  min-height: clamp(420px, 65vh, 720px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 76px var(--gutter) clamp(64px, 10vw, 120px) !important;
}

/* Hero copy block: tighter, with max-width */
.inner-hero .hero-copy,
.listing-hero .hero-copy {
  max-width: 800px;
  position: relative;
  z-index: 2;
}

/* Eyebrow: slightly wider spacing for inner pages */
.inner-hero .hero-copy .eyebrow,
.listing-hero .hero-copy .eyebrow {
  margin-bottom: 14px !important;
}

/* H1: refined sizing and spacing */
.inner-hero .hero-copy h1,
.listing-hero .hero-copy h1 {
  font-size: clamp(48px, 7.5vw, 100px) !important;
  margin: 0 0 18px !important;
  line-height: 0.95 !important;
  letter-spacing: -0.01em;
}

/* Subtext below heading: better spacing */
.inner-hero .hero-copy p:not(.eyebrow),
.listing-hero .hero-copy p:not(.eyebrow) {
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.65 !important;
  max-width: 580px !important;
  margin-top: 0;
  margin-bottom: 0;
}

/* Region hero: better text positioning */
.region-hero .hero-copy {
  max-width: 760px;
}
.region-hero h1 {
  margin-bottom: 18px !important;
}
.region-hero p:not(.eyebrow) {
  max-width: 580px !important;
}

/* Stronger gradient overlay for text legibility */
.inner-hero .hero-shade,
.listing-hero .hero-shade {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.05) 35%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.78) 100%
  ) !important;
}


/* ================================================================
   56. IMPROVEMENT — "Start Planning" Navbar Button (Premium Design)
   Elevated CTA with gold gradient, glow effect, and refined typography.
   ================================================================ */

/* Nav CTA: premium gold button with subtle glow */
.nav-cta {
  margin-left: 16px !important;
  padding: 11px 28px !important;
  background: linear-gradient(135deg, var(--gold) 0%, #b8742e 100%) !important;
  border: 1px solid rgba(224,168,90,0.6) !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 12px rgba(200,130,58,0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.nav-cta span {
  display: inline-block !important;
  transition: transform 0.3s ease !important;
  font-size: 12px !important;
}
.nav-cta:hover {
  background: linear-gradient(135deg, #d4993e 0%, var(--gold) 100%) !important;
  border-color: rgba(224,168,90,0.9) !important;
  box-shadow: 0 4px 24px rgba(200,130,58,0.40), 0 0 0 2px rgba(200,130,58,0.12), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-1px) !important;
}
.nav-cta:hover span {
  transform: translateX(3px) !important;
}
/* Shimmer effect on hover */
.nav-cta::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%) !important;
  transition: left 0.5s ease !important;
}
.nav-cta:hover::before {
  left: 100% !important;
}
.nav-cta::after {
  display: none !important;
}

/* Mobile nav CTA */
@media (max-width: 1024px) {
  .nav-cta {
    margin: 24px 0 0 !important;
    padding: 16px 32px !important;
    text-align: center !important;
    justify-content: center !important;
    width: auto !important;
    display: inline-flex !important;
  }
}


/* ================================================================
   57. IMPROVEMENT — Philosophy Section Better Placement
   Tighter vertical rhythm, centered layout, refined spacing.
   ================================================================ */

.philosophy-section {
  padding: clamp(64px, 8vw, 96px) var(--gutter) !important;
  background: var(--bg-section) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.philosophy-inner {
  max-width: 1140px !important;
  margin: 0 auto !important;
}

.philosophy-header {
  text-align: center !important;
  margin-bottom: clamp(36px, 5vw, 56px) !important;
}
.philosophy-header .eyebrow {
  margin-bottom: 14px !important;
}
.philosophy-header h2 {
  font-size: clamp(38px, 5vw, 64px) !important;
  margin: 0 auto !important;
  max-width: 600px !important;
}
.philosophy-header h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 20px auto 0;
}

.philosophy-grid {
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(40px, 5vw, 72px) !important;
  align-items: start !important;
}

.philosophy-main {
  padding-right: clamp(20px, 3vw, 48px) !important;
  border-right: 1px solid var(--border);
}
.philosophy-main .lead {
  font-size: clamp(18px, 1.7vw, 23px) !important;
  line-height: 1.65 !important;
  margin-bottom: 28px !important;
  color: var(--text-primary) !important;
}

.philosophy-value {
  padding: 22px 0 !important;
}
.philosophy-value h3 {
  font-size: clamp(17px, 1.8vw, 21px) !important;
}
.philosophy-value p {
  font-size: 13.5px !important;
  line-height: 1.72 !important;
}

@media (max-width: 900px) {
  .philosophy-main {
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 32px !important;
  }
}


/* ================================================================
   58. IMPROVEMENT — Footer Logo: Refined Design & Placement
   More elegant logo with better spacing, a decorative divider, and
   refined typography.
   ================================================================ */

/* Footer brand logo: elevated design */
.footer-brand,
a.brand.footer-brand {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
  margin-bottom: 24px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  position: relative !important;
}
/* Decorative gold accent line under logo */
.footer-brand::after,
a.brand.footer-brand::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 48px !important;
  height: 2px !important;
  background: var(--gold) !important;
}
.footer-brand span,
a.brand.footer-brand span {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: 0.20em !important;
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(200,130,58,0.15) !important;
}
.footer-brand small,
a.brand.footer-brand small {
  font-size: 10px !important;
  letter-spacing: 0.40em !important;
  opacity: 0.55 !important;
  font-weight: 500 !important;
  font-family: var(--sans) !important;
  color: #ffffff !important;
  margin-top: 4px !important;
}

/* Footer grid first column: refined spacing */
.footer-grid > div:first-child > p {
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,0.60) !important;
  max-width: 320px !important;
}


/* ================================================================
   59. IMPROVEMENT — Stats Grid: Smaller Vertical Height
   Reduced padding to make the stats bar more compact.
   ================================================================ */

.hero-stat {
  padding: clamp(14px, 2vw, 24px) 16px !important;
}
.hero-stat strong {
  font-size: clamp(26px, 3.5vw, 42px) !important;
  margin-bottom: 4px !important;
}
.hero-stat span {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
}

@media (max-width: 750px) {
  .hero-stat {
    padding: 12px 10px !important;
  }
  .hero-stat strong {
    font-size: 24px !important;
  }
}


/* ================================================================
   60. IMPROVEMENT — About Page: Better Layout, Images, Less Empty Space
   Tighter sections, inline imagery, and refined text placement.
   ================================================================ */

/* About hero: slightly taller with better text position */
.about-hero {
  min-height: clamp(440px, 62vh, 680px) !important;
}

/* Manifesto section: tighter with side image */
.manifesto.split-section {
  padding: clamp(60px, 8vw, 100px) var(--gutter) !important;
  gap: 24px 48px !important;
}
.manifesto .split-content h2 {
  font-size: clamp(36px, 4.5vw, 62px) !important;
  margin-bottom: 20px !important;
}
.manifesto .split-content p {
  font-size: 15px !important;
  line-height: 1.78 !important;
  margin-bottom: 16px !important;
}

/* Values section: horizontal card layout with imagery feel */
.values {
  padding: clamp(56px, 7vw, 96px) var(--gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
.values article {
  padding: 32px 28px 28px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--gold) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 16px rgba(44,26,14,0.06) !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease !important;
}
.values article:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(44,26,14,0.12) !important;
}
.values article span {
  display: block !important;
  font-family: var(--serif) !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
}
.values article h3 {
  font-size: 20px !important;
  margin-bottom: 10px !important;
}
.values article p {
  font-size: 14px !important;
  line-height: 1.75 !important;
}

@media (max-width: 900px) {
  .values {
    grid-template-columns: 1fr !important;
  }
}

/* Positive impact section: tighter */
.intro.split-section {
  padding: clamp(56px, 7vw, 96px) var(--gutter) !important;
  gap: 24px 48px !important;
}
.intro .split-content h2 {
  font-size: clamp(36px, 4.5vw, 62px) !important;
}
.intro .split-content p {
  font-size: 15px !important;
  line-height: 1.78 !important;
  margin-bottom: 16px !important;
}

/* Story panel on about: tighter */
.page-about .story-panel {
  min-height: 560px !important;
}
.page-about .story-copy {
  padding: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 72px) !important;
}
.page-about .story-copy h2 {
  font-size: clamp(36px, 4.5vw, 62px) !important;
}
.page-about .story-copy p {
  font-size: 15px !important;
  line-height: 1.78 !important;
  margin-bottom: 14px !important;
}

/* Process section on about: compact */
.page-about .process-section {
  padding: clamp(56px, 7vw, 96px) var(--gutter) !important;
}
.page-about .process-section header {
  margin-bottom: 40px !important;
}
.page-about .process-section header h2 {
  font-size: clamp(36px, 4.5vw, 62px) !important;
}

/* About page image strip: full bleed, slightly taller */
.page-about .image-strip.image-strip-3 > .image-strip-item {
  aspect-ratio: 16/10 !important;
}

/* About full-width image break section - between manifesto and values */
.about-image-break {
  position: relative;
  overflow: hidden;
  height: clamp(280px, 40vw, 480px);
}
.about-image-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.about-image-break::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}
.about-image-break .image-break-caption {
  position: absolute;
  bottom: 24px;
  left: 28px;
  z-index: 2;
  font: 600 9px/1.4 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Inline image pair - for between text sections */
.about-image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  overflow: hidden;
}
.about-image-pair .image-pair-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.about-image-pair .image-pair-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.about-image-pair .image-pair-item:hover img {
  transform: scale(1.06);
}
.about-image-pair .image-pair-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.about-image-pair .image-pair-item:hover::after {
  opacity: 1;
}
.about-image-pair .image-pair-caption {
  position: absolute;
  bottom: 16px;
  left: 20px;
  z-index: 2;
  font: 600 9px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.about-image-pair .image-pair-item:hover .image-pair-caption {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .about-image-pair {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   61. IMPROVEMENT — General Luxury Polish (Subtle Refinements)
   Elevated typography, micro-interactions, and premium finishes.
   ================================================================ */

/* Body: refined base typography */
body {
  font-size: 15px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* All headings: refined letter-spacing for luxury feel */
h1, h2 {
  letter-spacing: -0.015em !important;
}
h3 {
  letter-spacing: 0 !important;
}

/* Section headings: refined underline */
.section-heading h2::after,
.featured-journeys-header h2::after {
  width: 40px !important;
  height: 1.5px !important;
  background: var(--gold) !important;
  margin-top: 18px !important;
  opacity: 0.8 !important;
}

/* Story panel copy: more refined */
.story-copy .eyebrow {
  margin-bottom: 14px !important;
}
.story-copy h2 {
  margin-bottom: 20px !important;
}

/* Journey scroll: narrower gap for tighter grid */
.journey-scroll {
  gap: 18px !important;
}

/* Award badges: more refined spacing */
.awards-strip-inner {
  gap: 24px !important;
}
.award-badge {
  padding: 16px 28px !important;
  background: rgba(200,130,58,0.03) !important;
}
.award-badge strong {
  font-size: 13px !important;
}

/* Footer invite: more refined */
.footer-invite h2 {
  font-size: clamp(40px, 5.5vw, 80px) !important;
  letter-spacing: -0.02em !important;
}
.circle-link b {
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(200,130,58,0.5) !important;
}

/* Footer legal bar: more refined */
.footer-legal {
  font-size: 11px !important;
  padding-top: 20px !important;
  color: rgba(255,255,255,0.30) !important;
}

/* Process section: refined */
.process-section header p {
  color: var(--text-muted) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 560px !important;
}

/* Experience rows: tighter dividers */
.experience-section .experience-list .experience-row {
  padding: 28px 0 !important;
}

/* Quote section: refined heights */
.quote-section {
  min-height: 600px !important;
}
.quote-section-image {
  min-height: 500px !important;
}
.quote-card {
  min-height: 500px !important;
  padding: clamp(44px, 6vw, 80px) clamp(36px, 5vw, 72px) !important;
}
.quote-card blockquote {
  font-size: clamp(22px, 2.6vw, 34px) !important;
  line-height: 1.32 !important;
}

/* Regions marquee: more refined */
.regions-marquee {
  padding: 14px 0 !important;
}
.regions-marquee .marquee-track span {
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
}

/* Image strip enhanced: slightly taller */
.image-strip-enhanced .image-strip-item {
  aspect-ratio: 5/3 !important;
}

/* Smoother all-page transitions */
a, button, .image-card, .journey-card, .catalog-card, .team-card,
.testimonial-card, .award-badge, .dest-mini-card {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* ================================================================
   31. PREMIUM LUXURY REFINEMENTS
   Subtle enhancements for a more expensive, editorial feel.
   ================================================================ */

/* — Typography refinements — */
h1, h2 {
  letter-spacing: -0.02em;
}
.hero-copy h1 {
  letter-spacing: -0.03em;
}
.hero-copy p {
  max-width: 540px;
}

/* Ensure "is extraordinary" stays on one line on homepage */
.page-home .hero-copy h1 {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .page-home .hero-copy h1 {
    white-space: normal;
    font-size: clamp(36px, 8vw, 56px);
  }
}

/* — Refined section spacing — */
.split-section {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

/* — Subtle gold accent lines — */
.manifesto .split-content::before,
.detail-intro .split-content::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 32px;
  opacity: 0.6;
}

/* — Elevated card shadows — */
.catalog-card:hover .catalog-image img {
  transform: scale(1.04);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.catalog-card .catalog-image img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* — Premium button refinement — */
.button-dark {
  font-weight: 500;
  letter-spacing: 0.18em;
  padding: 16px 32px;
  border-radius: 1px;
}
.nav-cta {
  letter-spacing: 0.16em !important;
}

/* — Refined image break captions — */
.image-break-caption,
.image-strip-caption,
.image-pair-caption {
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* — Premium values section — */
.values article {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.values article span {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold);
  opacity: 0.7;
}

/* — Smoother hero overlays — */
.hero-shade {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.65) 100%
  ) !important;
}
.inner-hero .hero-shade,
.about-hero .hero-shade {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.30) 40%,
    rgba(0,0,0,0.60) 100%
  ) !important;
}

/* — Refined eyebrow styling — */
.eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.26em;
  font-weight: 600;
}

/* — Premium footer refinement — */
.footer-invite h2 {
  letter-spacing: -0.03em;
}

/* — Subtle body texture (luxury paper feel) — */
[data-theme="light"] body {
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(200,130,58,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(200,130,58,0.02) 0%, transparent 40%);
}

/* — Premium link underlines — */
.text-link {
  position: relative;
}
.text-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.text-link:hover::after {
  width: 100%;
}

/* — Refined awards strip — */
.awards-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.award-badge {
  letter-spacing: 0.06em;
}

/* — Premium scroll cue — */
.scroll-cue {
  opacity: 0.5;
}

/* — Destination highlight cards premium feel — */
.dest-highlight-item {
  border-left: 2px solid var(--gold);
  padding-left: 24px;
}
.dest-highlight-num {
  font-family: var(--serif) !important;
  color: var(--gold) !important;
  opacity: 0.5;
}

/* — Story panel refinement — */
.story-panel {
  border-top: 1px solid var(--border);
}

/* — Process section numbers — */
.process-section ol li span {
  font-family: var(--serif);
  color: var(--gold);
  opacity: 0.5;
}

/* — Gallery strip subtle enhancement — */
.gallery-strip {
  gap: 3px;
}

/* — When-to-go premium months grid — */
.months-grid .month-block {
  border-radius: 1px;
  letter-spacing: 0.08em;
}

/* — Related destinations cards — */
section:last-of-type .image-card {
  border-radius: 2px;
  overflow: hidden;
}

/* — Responsive image-pair fix for 3-col related — */
@media (max-width: 768px) {
  section:last-of-type div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ================================================================
   62. FIX — Contact Page: Illegible Text in Light Mode
   The contact-intro panel used hardcoded white text over a light
   background. Now uses proper theme-aware colors with a dark 
   background in BOTH modes for the left panel.
   ================================================================ */

/* Contact intro panel: ALWAYS dark background for white text readability */
.contact-intro {
  background: var(--forest-deep) !important;
  color: #fff !important;
}
.contact-intro h2 {
  color: #fff !important;
}
.contact-intro .eyebrow {
  color: var(--gold-light) !important;
}
.contact-intro .contact-intro-desc {
  color: rgba(255,255,255,0.72) !important;
  margin-bottom: 40px !important;
  line-height: 1.8 !important;
  font-size: 15px !important;
}
.contact-intro .contact-details span {
  color: rgba(255,255,255,0.50) !important;
  font: 600 9px/1 var(--sans) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 6px !important;
  margin-top: 20px !important;
}
.contact-intro .contact-details span:first-child {
  margin-top: 0 !important;
}
.contact-intro .contact-details a {
  color: var(--gold-light) !important;
  transition: color 0.25s ease !important;
}
.contact-intro .contact-details a:hover {
  color: #fff !important;
}
.contact-intro .contact-phone-link {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.contact-intro .contact-details p {
  color: rgba(255,255,255,0.72) !important;
  font-size: 15px !important;
  margin: 0 !important;
}

/* Trust badges — contact page */
.contact-trust-badges {
  margin-top: 50px;
}
.contact-trust-label {
  font: 600 8px var(--sans) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.40) !important;
  margin-bottom: 16px !important;
}
.contact-trust-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.contact-badge {
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 2px;
  font: 600 10px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.contact-badge:hover {
  border-color: rgba(200,130,58,0.5);
  color: rgba(255,255,255,0.90);
}
.contact-trust-stars {
  display: flex;
  gap: 3px;
}
.tp-star-box {
  background: #00b67a;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  border-radius: 1px;
}
.contact-tp-score {
  font: 600 9px var(--sans);
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.06em;
}

/* Contact form wrap: always the page background for contrast */
.contact-form-wrap {
  background: var(--bg-page) !important;
}

/* Dark mode: slightly different dark for contact intro */
[data-theme="dark"] .contact-intro {
  background: #1a0e04 !important;
}


/* ================================================================
   63. IMPROVEMENT — Country/Destination Pages: Premium Redesign
   Elevated typography, refined spacing, luxury accents, and 
   sophisticated visual hierarchy for all destination detail pages.
   ================================================================ */

/* --- Hero: More cinematic & editorial --- */
.hero.inner-hero {
  min-height: clamp(480px, 72vh, 800px) !important;
}

/* Vignette overlay for a more cinematic feel */
.hero.inner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 80% 100% at 50% 100%,
    transparent 40%,
    rgba(0,0,0,0.25) 100%
  );
  pointer-events: none;
}

/* Hero title: refined editorial spacing */
.hero.inner-hero .hero-copy h1 {
  font-size: clamp(64px, 10vw, 140px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.88 !important;
  margin-bottom: 20px !important;
  text-shadow: 0 4px 40px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* Hero subtitle: refined serif italic */
.hero.inner-hero .hero-copy > p:not(.eyebrow) {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(17px, 1.6vw, 22px) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.88) !important;
  max-width: 560px !important;
  margin-bottom: 28px !important;
}

/* Hero eyebrow: refined with thin gold line */
.hero.inner-hero .hero-copy .eyebrow.light {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(255,255,255,0.75) !important;
}
.hero.inner-hero .hero-copy .eyebrow.light::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

/* --- Detail Intro: Editorial split layout --- */
.detail-intro.split-section {
  padding: clamp(72px, 9vw, 120px) var(--gutter) !important;
  background: var(--bg-page) !important;
  border-bottom: 1px solid var(--border);
}
.detail-intro .split-content {
  max-width: 720px;
}
.detail-intro .split-content h2 {
  font-size: clamp(38px, 4.5vw, 64px) !important;
  line-height: 0.96 !important;
  margin-bottom: 28px !important;
}
.detail-intro .split-content .lead {
  font-size: clamp(18px, 1.7vw, 23px) !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  color: var(--text-primary) !important;
  border-left: 2px solid var(--gold);
  padding-left: 24px;
}
.detail-intro .split-content p:not(.lead):not(.eyebrow) {
  font-size: 15px !important;
  line-height: 1.82 !important;
  color: var(--text-muted) !important;
}
/* Gold accent line above content */
.detail-intro .split-content::before {
  width: 40px !important;
  height: 1.5px !important;
  background: var(--gold) !important;
  opacity: 0.6 !important;
  margin-bottom: 28px !important;
}

/* Section index: more refined */
.detail-intro .section-index {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
  opacity: 0.7;
}

/* --- Gallery Strip: Cinematic treatment --- */
.gallery-strip {
  gap: 2px !important;
  position: relative;
}
.gallery-strip-item {
  position: relative;
  overflow: hidden;
}
.gallery-strip-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.25) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gallery-strip-item:hover::after {
  opacity: 1;
}
.gallery-strip-item img {
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1) !important;
}
.gallery-strip-item:hover img {
  transform: scale(1.06) !important;
}

/* --- Highlights Section: Premium card-based layout --- */
.dest-highlights {
  padding: clamp(88px, 10vw, 140px) var(--gutter) !important;
  background: var(--bg-section) !important;
  position: relative;
}
/* Subtle decorative background element */
.dest-highlights::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse at 100% 0%, rgba(200,130,58,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.dest-highlights > .eyebrow {
  position: relative;
  z-index: 1;
}
.dest-highlights > h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(40px, 5vw, 68px) !important;
  margin-bottom: 16px !important;
}
.dest-highlights > p {
  position: relative;
  z-index: 1;
  margin-bottom: 48px !important;
}

/* Highlight items: premium card style */
.dest-highlights-grid {
  position: relative;
  z-index: 1;
  gap: 0 !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
.dest-highlight-item {
  padding: 36px 32px !important;
  border-top: none !important;
  border-left: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative;
  transition: background 0.4s ease;
}
.dest-highlight-item:nth-child(-n+3) {
  border-top: 1px solid var(--border) !important;
}
.dest-highlight-item:nth-child(3n+1) {
  border-left: none !important;
}
.dest-highlight-item:hover {
  background: rgba(200,130,58,0.04);
}
/* Gold top accent on hover */
.dest-highlight-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.dest-highlight-item:hover::before {
  transform: scaleX(1);
}
.dest-highlight-num {
  font-size: 36px !important;
  opacity: 0.4 !important;
  margin-bottom: 18px !important;
}
.dest-highlight-item h4 {
  font-family: var(--serif) !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  margin-bottom: 12px !important;
  line-height: 1.15 !important;
}
.dest-highlight-item p {
  font-size: 14px !important;
  line-height: 1.78 !important;
}

@media (max-width: 900px) {
  .dest-highlights-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .dest-highlight-item:nth-child(3) {
    border-top: none !important;
  }
  .dest-highlight-item:nth-child(2n+1) {
    border-left: none !important;
  }
  .dest-highlight-item:nth-child(3n+1) {
    border-left: 1px solid var(--border) !important;
  }
}
@media (max-width: 600px) {
  .dest-highlights-grid {
    grid-template-columns: 1fr !important;
  }
  .dest-highlight-item {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    padding: 28px 0 !important;
  }
  .dest-highlight-item:first-child {
    border-top: 1px solid var(--border) !important;
  }
}

/* --- When To Go: Refined calendar --- */
.when-to-go {
  padding: clamp(72px, 9vw, 120px) var(--gutter) !important;
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.when-to-go h2 {
  font-size: clamp(36px, 4vw, 56px) !important;
  margin-bottom: 12px !important;
}
.months-grid {
  gap: 8px !important;
}
.month-block {
  padding: 18px 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease !important;
}
.month-block:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}
.month-block.peak {
  background: linear-gradient(135deg, var(--gold) 0%, #b8742e 100%) !important;
  box-shadow: 0 2px 12px rgba(200,130,58,0.20) !important;
}
.month-block.peak:hover {
  box-shadow: 0 6px 24px rgba(200,130,58,0.35) !important;
}
.month-block.good {
  background: rgba(200,130,58,0.10) !important;
  border-color: rgba(200,130,58,0.30) !important;
}

/* --- Process Section on dest pages: refined --- */
.process-section {
  border-top: 1px solid var(--border);
}
.process-section ol li {
  border-radius: 6px !important;
  border-top: 2px solid var(--gold) !important;
  position: relative;
  overflow: hidden;
}
/* Subtle gradient accent */
.process-section ol li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(200,130,58,0.03) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 6px 6px 0 0;
}
.process-section ol li h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(20px, 2.2vw, 26px) !important;
}
.process-section ol li p {
  position: relative;
  z-index: 1;
}

/* --- Related Destinations: Premium cards --- */
section[style*="bg-alt"] .image-card {
  border-radius: 4px !important;
  overflow: hidden !important;
}
section[style*="bg-alt"] .image-card h3 {
  font-size: clamp(28px, 3vw, 42px) !important;
}
section[style*="bg-alt"] .image-card > div > span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.70) !important;
  margin-top: 10px !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 2px !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}
section[style*="bg-alt"] .image-card:hover > div > span:last-child {
  background: rgba(200,130,58,0.20) !important;
  border-color: rgba(200,130,58,0.6) !important;
  color: #fff !important;
}

/* --- Full Image Section: more refined --- */
.full-image {
  max-height: 520px !important;
  position: relative;
}
.full-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    transparent 20%,
    transparent 80%,
    rgba(0,0,0,0.08) 100%
  );
  pointer-events: none;
}


/* ================================================================
   64. IMPROVEMENT — General Site-Wide Premium Enhancements
   Subtle luxury refinements affecting all pages.
   ================================================================ */

/* --- Ensure destination sections are visible (animated via child .reveal elements) --- */
.dest-highlights,
.when-to-go,
.detail-intro.split-section {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Refined selection color --- */
::selection {
  background: rgba(200,130,58,0.22);
  color: var(--text-primary);
}

/* --- Refined scrollbar (Webkit) --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
  background: rgba(200,130,58,0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(200,130,58,0.45);
}

/* --- Premium focus states --- */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Refined image loading (placeholder feel) --- */
img {
  background: var(--bg-alt);
}

/* --- Premium horizontal rule --- */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.3;
  margin: 48px 0;
}

/* --- Contact quick strip: refined in light mode --- */
.contact-quick-strip {
  background: var(--bg-page) !important;
  border-bottom: 1px solid var(--border) !important;
}
.contact-quick-item {
  border-right: 1px solid var(--border) !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
}
.contact-quick-item:hover {
  background: rgba(200,130,58,0.04) !important;
}
.contact-quick-item strong {
  color: var(--text-muted) !important;
}
.contact-quick-item span:not(.cq-icon) {
  color: var(--text-primary) !important;
}

/* --- Payment section: refined for both modes --- */
.payment-guarantee {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 24px !important;
  background: rgba(200,130,58,0.06) !important;
  border: 1px solid rgba(200,130,58,0.15) !important;
  border-radius: 4px !important;
  margin-top: 28px !important;
}
.payment-guarantee p {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}
.payment-guarantee strong {
  color: var(--text-primary) !important;
}

/* --- Phone CTA section: refined --- */
.phone-cta-section {
  background: var(--forest-deep) !important;
  border-top: 1px solid rgba(200,130,58,0.15);
  border-bottom: 1px solid rgba(200,130,58,0.15);
}
.phone-cta-text .eyebrow {
  color: var(--gold-light) !important;
}

/* --- Premium card surface treatment --- */
.premium-card {
  border-radius: 6px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 4px 32px rgba(44,26,14,0.08), 0 1px 4px rgba(44,26,14,0.04) !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease !important;
}
.premium-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 56px rgba(44,26,14,0.14), 0 4px 16px rgba(44,26,14,0.08) !important;
}

/* --- Refined notice/alert styling --- */
.notice {
  border-radius: 4px !important;
  border-left: 3px solid var(--gold) !important;
  background: rgba(200,130,58,0.06) !important;
  padding: 18px 24px !important;
  font-size: 14px !important;
}
.notice-error {
  border-left-color: #c0392b !important;
  background: rgba(192,57,43,0.06) !important;
}

/* --- Checkbox label refinement --- */
.enquiry-form .check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 24px 0 !important;
  cursor: pointer !important;
}
.enquiry-form .check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 0 !important;
  flex-shrink: 0 !important;
  accent-color: var(--gold) !important;
}
.enquiry-form .check span {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--text-muted) !important;
}

/* --- Submit button: premium feel --- */
.enquiry-form .button-dark {
  width: 100% !important;
  justify-content: center !important;
  padding: 18px 32px !important;
  font-size: 12px !important;
  letter-spacing: 0.20em !important;
  background: linear-gradient(135deg, var(--forest-deep) 0%, #3a1c08 100%) !important;
  border: 1px solid rgba(200,130,58,0.25) !important;
  border-radius: 3px !important;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1) !important;
}
.enquiry-form .button-dark:hover {
  background: linear-gradient(135deg, #3a1c08 0%, var(--forest-deep) 100%) !important;
  border-color: rgba(200,130,58,0.5) !important;
  box-shadow: 0 8px 32px rgba(74,42,12,0.30) !important;
  transform: translateY(-2px) !important;
}

/* --- Refined form placeholder text --- */
.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder,
.enquiry-form select option:first-child {
  color: rgba(122,92,58,0.45) !important;
  font-style: italic !important;
}
[data-theme="dark"] .enquiry-form input::placeholder,
[data-theme="dark"] .enquiry-form textarea::placeholder {
  color: rgba(184,149,106,0.40) !important;
}

/* ================================================================
   LUXURY REFINEMENTS — 2026 UPDATE
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   A. ENHANCED DROPDOWN DESIGN
   ──────────────────────────────────────────────────────────────── */

/* 1. Refined base dropdown — softer glass, more padding */
.nav-dropdown {
  background: rgba(14,9,3,0.96) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border: 1px solid rgba(200,130,58,0.12) !important;
  border-top: 2px solid rgba(200,130,58,0.55) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(200,130,58,0.06) inset,
    0 1px 0 rgba(255,255,255,0.03) inset !important;
  border-radius: 0 0 4px 4px !important;
  padding: 18px 0 !important;
  transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1),
              transform 0.28s cubic-bezier(0.22,1,0.36,1),
              visibility 0.28s !important;
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,130,58,0.2), transparent);
}

/* 2. Dropdown link refinements */
.nav-dropdown > a {
  padding: 11px 28px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.10em !important;
  color: rgba(255,255,255,0.68) !important;
  transition: color 0.22s ease, background 0.22s ease, padding-left 0.25s cubic-bezier(0.22,1,0.36,1) !important;
  position: relative;
}
.nav-dropdown > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 60%;
  background: var(--gold, #c8823a);
  border-radius: 1px;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.nav-dropdown > a:hover::before {
  transform: translateY(-50%) scaleY(1);
}
.nav-dropdown > a:hover {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(200,130,58,0.10), transparent) !important;
  padding-left: 32px !important;
}

/* 3. Experiences dropdown — exp-dropdown class */
.nav-dropdown.exp-dropdown {
  min-width: 270px !important;
  padding: 20px 0 !important;
}

/* 4. Exp icon diamond styling */
.exp-icon {
  display: inline-block;
  font-size: 6px;
  color: rgba(200,130,58,0.5);
  margin-right: 6px;
  vertical-align: middle;
  transform: translateY(-0.5px);
  transition: color 0.22s ease, transform 0.22s ease;
}
.nav-dropdown a:hover .exp-icon {
  color: var(--gold, #c8823a);
  transform: translateY(-0.5px) scale(1.3);
}

/* 5. Divider refinement */
.nav-dropdown-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(200,130,58,0.15), transparent) !important;
  margin: 12px 28px !important;
}

/* 6. Mega dropdown refinements */
.nav-dropdown.mega {
  border-radius: 0 0 6px 6px !important;
  padding: 32px 36px !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.55),
    0 0 0 1px rgba(200,130,58,0.06) inset !important;
}
.mega-col a .dest-dot {
  background: rgba(200,130,58,0.45) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.mega-col a:hover .dest-dot {
  background: var(--gold, #c8823a) !important;
  transform: scale(1.4) !important;
}

/* 7. About dropdown refinement — match min-width */
.nav-dropdown[style*="min-width:220px"] {
  min-width: 240px !important;
}


/* ────────────────────────────────────────────────────────────────
   B. TEAM PAGE PREMIUM REDESIGN
   ──────────────────────────────────────────────────────────────── */

/* Team hero enhancement */
.team-hero.inner-hero {
  min-height: 55vh !important;
}
.team-hero .hero-copy {
  max-width: 640px !important;
}
.team-hero .hero-copy h1 {
  font-size: clamp(42px, 5.5vw, 72px) !important;
}

/* Team intro section — new addition */
.team-intro {
  text-align: center;
  padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(20px, 3vw, 40px);
  max-width: 720px;
  margin: 0 auto;
}
.team-intro .eyebrow {
  margin-bottom: 16px;
}
.team-intro h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 16px;
}
.team-intro p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
}

/* Team grid — premium layout */
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px 36px !important;
  padding: clamp(40px, 5vw, 60px) var(--gutter) clamp(80px, 10vw, 140px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
@media (max-width: 960px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    max-width: 420px !important;
  }
}

/* Team card — luxury redesign */
.team-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
              border-color 0.35s ease !important;
  position: relative;
}
.team-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,130,58,0.3), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.team-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08) !important;
  border-color: rgba(200,130,58,0.2) !important;
}
[data-theme="dark"] .team-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.2) !important;
}
.team-card:hover::after {
  opacity: 1;
}

/* Portrait — luxury treatment */
.team-portrait {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 4/5 !important;
  background: #1a1108 !important;
}
.team-portrait::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
  pointer-events: none;
  z-index: 1;
}
.team-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
              filter 0.5s ease !important;
}
.team-card:hover .team-portrait img {
  transform: scale(1.05) !important;
}

/* Card text content */
.team-card .eyebrow {
  margin: 22px 26px 6px !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
}
.team-card h2 {
  font-family: var(--serif) !important;
  font-size: clamp(22px, 2.2vw, 26px) !important;
  font-weight: 400 !important;
  margin: 0 26px 6px !important;
  line-height: 1.15 !important;
  color: var(--text-primary) !important;
}
.team-speciality {
  font-size: 11.5px !important;
  color: var(--gold, #c8823a) !important;
  margin: 0 26px 14px !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  opacity: 0.85;
}
.team-card > p:not(.eyebrow):not(.team-speciality):not(.team-quote) {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
  margin: 0 26px 10px !important;
}
.team-quote {
  font-family: var(--serif) !important;
  font-size: 14.5px !important;
  font-style: italic !important;
  color: var(--text-muted) !important;
  line-height: 1.65 !important;
  margin: 12px 26px 26px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border) !important;
  position: relative;
}
.team-quote::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 0;
  font-family: var(--serif);
  font-size: 28px;
  color: rgba(200,130,58,0.3);
  line-height: 1;
}


/* ────────────────────────────────────────────────────────────────
   C. EXPERIENCE DETAIL PAGE STYLES
   ──────────────────────────────────────────────────────────────── */

/* Highlights grid for new experience pages */
.exp-highlights {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  max-width: 1100px;
  margin: 0 auto;
}
.exp-highlights header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.exp-highlights header .eyebrow {
  margin-bottom: 12px;
}
.exp-highlights header h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  line-height: 1.2;
}
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.highlight-card {
  text-align: center;
  padding: 32px 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: transform 0.35s var(--anim-ease), box-shadow 0.35s ease, border-color 0.35s ease;
  background: var(--bg-card);
}
.highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  border-color: rgba(200,130,58,0.2);
}
[data-theme="dark"] .highlight-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.highlight-card .highlight-num {
  display: block;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  color: var(--gold, #c8823a);
  margin-bottom: 12px;
  opacity: 0.7;
}
.highlight-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
}
.highlight-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Gallery section for experience pages */
.exp-gallery {
  padding: 0 var(--gutter) clamp(60px, 8vw, 100px);
  max-width: 1200px;
  margin: 0 auto;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.5s var(--anim-ease);
}
.gallery-grid img:hover {
  transform: scale(1.02);
}
@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Story panel for experience pages */
.exp-story-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 var(--gutter) clamp(60px, 8vw, 100px);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-card);
}
.exp-story-panel .story-image {
  overflow: hidden;
}
.exp-story-panel .story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 320px;
  transition: transform 0.6s var(--anim-ease);
}
.exp-story-panel:hover .story-image img {
  transform: scale(1.03);
}
.exp-story-panel .story-text {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.exp-story-panel .story-text h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 16px;
}
.exp-story-panel .story-text p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .exp-story-panel {
    grid-template-columns: 1fr;
  }
  .exp-story-panel .story-image img {
    aspect-ratio: 16/9;
    min-height: auto;
  }
}


/* ────────────────────────────────────────────────────────────────
   D. GENERAL LUXURY REFINEMENTS
   ──────────────────────────────────────────────────────────────── */

/* 1. Enhanced hero overlays — richer gradient */
.hero .hero-shade {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.60) 100%
  ) !important;
}

/* 2. Refined section headings — subtle tracking */
.manifesto h2,
.values h2,
.process-section h2,
.catalog-intro h2 {
  letter-spacing: -0.01em;
}

/* 3. Enhanced eyebrow labels */
.eyebrow {
  letter-spacing: 0.18em !important;
  font-size: 10.5px !important;
}

/* 4. Refined CTA button polish */
.nav-cta {
  border-radius: 3px !important;
  letter-spacing: 0.14em !important;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1) !important;
}
.nav-cta:hover {
  box-shadow: 0 4px 20px rgba(200,130,58,0.25) !important;
}

/* 5. Catalog card subtle enhancements */
.catalog-card {
  border-radius: 4px !important;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s ease !important;
}
.catalog-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.10) !important;
}
[data-theme="dark"] .catalog-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.30) !important;
}

/* 6. Footer invite section polish */
.footer-invite h2 {
  letter-spacing: -0.01em;
}
.circle-link {
  transition: all 0.45s cubic-bezier(0.22,1,0.36,1) !important;
}
.circle-link:hover {
  box-shadow: 0 8px 32px rgba(200,130,58,0.20) !important;
}

/* 7. Smoother reveal animations */
.reveal {
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1) !important;
}

/* 8. Process section number polish */
.process-section ol li span {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  opacity: 0.6;
}

/* 9. Text links — refined underline animation */
.text-link {
  transition: color 0.3s ease, letter-spacing 0.3s ease !important;
}
.text-link:hover {
  letter-spacing: 0.02em;
}

/* 10. Image break refinement */
.about-image-break {
  position: relative;
}
.image-break-caption {
  letter-spacing: 0.12em !important;
  font-size: 10px !important;
}

/* 11. Newsletter form subtle upgrade */
.newsletter input {
  border-radius: 3px 0 0 3px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.newsletter input:focus {
  box-shadow: 0 0 0 2px rgba(200,130,58,0.15) !important;
}
.newsletter button {
  border-radius: 0 3px 3px 0 !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* 12. Back-to-top refinement — circular preserved */
.back-to-top {
  border-radius: 50% !important;
  transition: all 0.4s cubic-bezier(0.22,1,0.36,1) !important;
}
.back-to-top:hover {
  box-shadow: 0 8px 28px rgba(200,130,58,0.35), 0 0 0 4px rgba(200,130,58,0.1) !important;
}

/* 13. Split section content polish */
.split-content .lead {
  font-size: clamp(17px, 1.8vw, 19px) !important;
  line-height: 1.7 !important;
}

/* 14. Section index label refinement */
.section-index {
  letter-spacing: 0.15em !important;
  opacity: 0.55;
}

/* 15. Values section card hover enhancement */
.values article {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s ease,
              border-color 0.35s ease !important;
}
.values article:hover {
  border-color: rgba(200,130,58,0.15) !important;
}

/* 16. Footer grid typography refinement */
.footer-grid h3 {
  letter-spacing: 0.12em !important;
}

/* 17. Subtle body text improvement */
body {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ================================================================
   FIX A — BACK-TO-TOP ICON: Perfectly Centered Arrow
   The chevron ::before pseudo-element was off-center due to
   translateY(3px). Now uses flexbox centering with no offset.
   ================================================================ */
.back-to-top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.back-to-top::before {
  content: '' !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid #fff !important;
  border-right: 2px solid #fff !important;
  transform: rotate(-45deg) !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease, margin-top 0.3s ease !important;
}
.back-to-top.visible:hover::before {
  margin-top: 1px !important;
  transform: rotate(-45deg) !important;
}


/* ================================================================
   FIX B — DESTINATIONS MEGA DROPDOWN: Elegant Layout & Spacing
   Properly proportioned columns, consistent spacing, refined
   typography, and elegant visual hierarchy.
   ================================================================ */

/* Mega dropdown: wider, better proportioned */
.nav-dropdown.mega {
  min-width: 760px !important;
  max-width: 820px !important;
  padding: 28px 0 28px 0 !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-8px) !important;
}
.nav-item:hover .nav-dropdown.mega,
.nav-item.is-open .nav-dropdown.mega {
  transform: translateX(-50%) translateY(0) !important;
}

/* Mega grid: 3 even columns with proper gutters */
.mega-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
  padding: 0 28px !important;
}

/* Each column: consistent internal spacing */
.mega-col {
  padding: 0 16px !important;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.mega-col:last-child {
  border-right: none;
}

/* Region heading links: refined and consistent */
.mega-col a.region-link,
.mega-col .region-link {
  display: block !important;
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #d99b52 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  margin: 0 0 8px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(200,130,58,0.25) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
/* Subsequent region links in same column get top margin */
.mega-col a.region-link + a + a + a + a + a + a + a + a + a.region-link,
.mega-col a.region-link ~ a.region-link {
  margin-top: 14px !important;
}
.mega-col a.region-link:hover,
.mega-col .region-link:hover {
  color: #ffc78a !important;
  border-bottom-color: rgba(200,130,58,0.6) !important;
  background: transparent !important;
  padding-left: 0 !important;
}

/* Country destination links: compact, well-spaced */
.mega-col a:not(.region-link) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  background: transparent !important;
  white-space: nowrap !important;
  transition: color 0.18s ease, padding-left 0.2s ease !important;
  line-height: 1.4 !important;
}
.mega-col a:not(.region-link):hover {
  color: #fff !important;
  padding-left: 4px !important;
  background: transparent !important;
}

/* Dest dot: small, consistent */
.mega-col a .dest-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(200,130,58,0.45) !important;
  flex-shrink: 0 !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.mega-col a:hover .dest-dot {
  background: var(--gold) !important;
  transform: scale(1.3) !important;
}

/* Mobile mega dropdown adjustments */
@media (max-width: 1024px) {
  .nav-dropdown.mega {
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  .nav-item:hover .nav-dropdown.mega,
  .nav-item.is-open .nav-dropdown.mega {
    transform: none !important;
  }
  .mega-grid {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .mega-col {
    padding: 8px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .mega-col:last-child { border-bottom: none; }
  .mega-col a:not(.region-link) {
    padding: 7px 12px !important;
    font-size: 11px !important;
  }
  .mega-col a.region-link ~ a.region-link {
    margin-top: 12px !important;
  }
}


/* ================================================================
   FIX C — BOOKING PAGE STYLES (booking.html)
   Professional multi-step booking flow with Pesapal payment.
   ================================================================ */

/* Booking page body padding */
body.page-booking main { padding-top: 76px; }

/* Hero */
.bk-hero {
  background: linear-gradient(135deg, var(--forest-deep) 0%, #2a1608 50%, var(--forest) 100%);
  padding: clamp(100px, 14vw, 160px) var(--gutter) clamp(50px, 7vw, 80px);
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(200,130,58,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.bk-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.bk-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 0.96;
  margin: 16px 0 18px;
  color: #fff;
}
.bk-hero h1 em { color: var(--gold-light); font-style: italic; }
.bk-hero p:not(.eyebrow) {
  font-size: clamp(14px, 1.2vw, 17px);
  color: rgba(255,255,255,0.72);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Wrap */
.bk-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px var(--gutter) 100px;
}

/* Stepper */
.bk-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
  padding-top: 8px;
}
.bk-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.45;
  transition: opacity .3s, color .3s;
  letter-spacing: 0.04em;
}
.bk-step.active { opacity: 1; color: var(--forest); }
.bk-step.done { opacity: 0.65; color: var(--forest-mid); }
.bk-step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  transition: background .3s, color .3s;
  flex-shrink: 0;
}
.bk-step.active .bk-step-num { background: var(--forest); color: #fff; }
.bk-step.done .bk-step-num { background: var(--forest-mid); color: #fff; }
.bk-step-label { white-space: nowrap; }
.bk-step-line {
  width: 56px; height: 2px;
  background: var(--sand);
  margin: 0 12px;
  transition: background .3s;
  flex-shrink: 0;
}
.bk-step.done + .bk-step-line,
.bk-step.active + .bk-step-line { background: var(--forest); }

/* Layout: main + sidebar */
.bk-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
}

/* Cards */
.bk-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 36px 38px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  margin-bottom: 24px;
  border: 1px solid var(--border);
}
.bk-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.bk-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(200,130,58,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.bk-card-icon-pay { background: rgba(34,139,34,0.08); color: #228b22; }
.bk-card-header h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 5px;
  line-height: 1.25;
}
.bk-card-sub {
  font-size: .83rem;
  color: var(--text-muted);
  font-family: var(--sans);
  margin: 0;
  line-height: 1.6;
}

/* Form fields */
.bk-field-group {
  margin-bottom: 22px;
}
.bk-field-group label {
  display: block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.bk-field-group .req { color: #c53030; }
.bk-field-group input,
.bk-field-group select,
.bk-field-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--sand);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.4;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
  background: var(--cream);
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.bk-field-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.bk-field-group input:focus,
.bk-field-group select:focus,
.bk-field-group textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(124,74,30,.10);
}
.bk-field-group textarea { resize: vertical; min-height: 90px; }
.bk-hint {
  display: block;
  font-size: .73rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Field row layouts */
.bk-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.bk-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: start; }

/* Radio group */
.bk-radio-group {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.bk-radio {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border: 1.5px solid var(--sand);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  font-size: .82rem;
  font-family: var(--sans);
  color: var(--text-primary);
  white-space: nowrap;
}
.bk-radio:hover { border-color: var(--forest-mid); }
.bk-radio input[type="radio"] {
  width: auto; padding: 0; margin: 0;
  accent-color: var(--forest);
}
.bk-radio input[type="radio"]:checked + span { font-weight: 600; }

/* Checkbox group */
.bk-checkbox-group { margin-top: 8px; }
.bk-checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
  cursor: pointer;
  font-size: .84rem;
  font-family: var(--sans);
  color: var(--text-primary);
  line-height: 1.55;
}
.bk-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; margin: 1px 0 0 0;
  flex-shrink: 0; accent-color: var(--forest);
}
.bk-checkbox a { color: var(--gold); text-decoration: underline; }

/* Navigation buttons */
.bk-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  margin-bottom: 32px;
}
.bk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
  letter-spacing: 0.02em;
}
.bk-btn-primary {
  background: var(--forest);
  color: #fff;
}
.bk-btn-primary:hover {
  background: var(--forest-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,74,30,.2);
}
.bk-btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--sand);
}
.bk-btn-outline:hover {
  border-color: var(--forest);
  color: var(--forest);
}
.bk-btn-submit {
  background: linear-gradient(135deg, #228b22 0%, #1a6b1a 100%);
  color: #fff;
  padding: 16px 32px;
  font-size: .95rem;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(34,139,34,0.25);
}
.bk-btn-submit:hover {
  background: linear-gradient(135deg, #1a6b1a 0%, #228b22 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34,139,34,0.3);
}
.bk-btn-submit:disabled {
  background: var(--sand);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Spinner */
.bk-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bkSpin .6s linear infinite;
}
@keyframes bkSpin { to { transform: rotate(360deg); } }

/* Review sections */
.bk-review-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.bk-review-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bk-review-section h3 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.bk-review-grid { display: flex; flex-direction: column; gap: 0; }
.bk-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-family: var(--sans);
  font-size: .84rem;
}
.bk-review-row:last-child { border-bottom: none; }
.bk-review-row span { color: var(--text-muted); }
.bk-review-row strong { color: var(--text-primary); font-weight: 600; text-align: right; }
.bk-review-notes {
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--text-muted);
  line-height: 1.65;
  background: var(--cream);
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 0;
}

/* Payment card */
.bk-payment-card {
  border: 2px solid rgba(34,139,34,0.15);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34,139,34,0.02) 100%);
}
.bk-pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.bk-pay-badge {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--text-primary);
  background: var(--cream);
  transition: border-color .2s;
}
.bk-pay-badge:hover { border-color: var(--gold); }
.bk-pay-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(34,139,34,0.05);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.5;
}
.bk-pay-notice svg { flex-shrink: 0; color: #228b22; }

/* Sidebar */
.bk-sidebar {
  position: sticky;
  top: 90px;
}
.bk-sidebar-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 26px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.bk-sidebar-card h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--forest);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.bk-sidebar-empty {
  color: var(--text-muted);
  font-size: .82rem;
  font-family: var(--sans);
  margin: 0;
  line-height: 1.6;
}

/* Summary rows */
.bk-sum-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: .8rem;
  padding: 7px 0;
  color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.bk-sum-row:last-of-type { border-bottom: none; }
.bk-sum-row span { color: var(--text-muted); }
.bk-sum-row strong { font-weight: 600; text-align: right; max-width: 55%; }
.bk-sum-divider { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.bk-sum-note {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  line-height: 1.55;
  font-family: var(--sans);
}

/* Trust card */
.bk-trust-card h4,
.bk-help-card h4 {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.bk-trust-list {
  list-style: none;
  padding: 0; margin: 0;
}
.bk-trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--text-primary);
  padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.bk-trust-list li:last-child { border-bottom: none; }
.bk-trust-list li svg { color: var(--forest); flex-shrink: 0; }

/* Help card */
.bk-help-card p {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 14px;
  font-family: var(--sans);
}
.bk-help-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 600;
  color: var(--gold) !important;
  margin-bottom: 10px;
  transition: color .2s;
}
.bk-help-link:hover { color: var(--gold-light) !important; }
.bk-help-link svg { flex-shrink: 0; color: var(--gold); }

/* Responsive */
@media (max-width: 900px) {
  .bk-layout { grid-template-columns: 1fr; }
  .bk-sidebar { position: static; }
  .bk-card { padding: 26px 22px; }
  .bk-row-2 { grid-template-columns: 1fr; gap: 0; }
  .bk-row-3 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .bk-stepper { flex-wrap: wrap; gap: 6px; }
  .bk-step-line { width: 28px; }
  .bk-step-label { font-size: .7rem; }
  .bk-card-header { flex-direction: row; align-items: center; }
}
@media (max-width: 500px) {
  .bk-row-3 { grid-template-columns: 1fr; gap: 0; }
  .bk-radio-group { flex-direction: column; }
  .bk-nav-buttons { flex-direction: column; }
  .bk-btn { width: 100%; justify-content: center; }
  .bk-card-header { flex-direction: column; align-items: flex-start; }
}

/* Dark mode booking overrides */
[data-theme="dark"] .bk-hero {
  background: linear-gradient(135deg, #1a0e04 0%, #0d0702 50%, #2a1608 100%);
}
[data-theme="dark"] .bk-card,
[data-theme="dark"] .bk-sidebar-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
[data-theme="dark"] .bk-field-group input,
[data-theme="dark"] .bk-field-group select,
[data-theme="dark"] .bk-field-group textarea {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .bk-radio {
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .bk-pay-badge {
  background: var(--bg-alt);
  border-color: var(--border);
}
[data-theme="dark"] .bk-review-notes {
  background: var(--bg-alt);
  border-color: var(--border);
}
[data-theme="dark"] .bk-sum-row span { color: var(--text-muted); }
[data-theme="dark"] .bk-payment-card {
  border-color: rgba(34,139,34,0.2);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34,139,34,0.04) 100%);
}


/* ================================================================
   END OF CONSOLIDATED STYLESHEET
   ================================================================ */