/* ============================================================
   Project Name: Cerise Leisure website 
   Author: Silvanux | Afribrainy | DH4C
   Cerise Leisure — design tokens
   Palette: warm parchment ground, espresso ink, terracotta &
   deep safari green as earth accents, cerise (bougainvillea
   pink) as the single signature accent used sparingly.
   Type: Fraunces (display serif) + Karla (body,
   humanist sans) + Wilma Mankiller modern (data/labels/prices).
   ============================================================ */

/* Google Fonts is loaded via a <link rel="stylesheet"> in each page's <head>
   instead of @import here on purpose: an @import inside this stylesheet
   would force the browser to download and parse the whole file before it
   even discovers the Google Fonts request, turning one render-blocking
   chain into two serial ones. A <head> <link> lets the browser's preload
   scanner fetch both in parallel. See index.html <head>. */

@font-face{
  font-family: 'Wilma Mankiller modern';
  /* woff2 first (44 KB, ~60% smaller) — modern browsers use this and never
     fetch the .ttf at all. .ttf stays as a fallback for the rare browser
     that doesn't support woff2. */
  src: url('fonts/WilmaMankillermodern.woff2') format('woff2'),
       url('fonts/WilmaMankillermodern.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:            #F2E8D6;   /* warm parchment */
  --bg-deep:       #2A2016;   /* espresso — dark sections */
  --bg-deep-2:     #382C1E;   /* espresso, one step up */
  --card:          #FBF5E8;   /* card surface on parchment */
  --ink:           #2A2016;   /* primary text on light */
  --ink-soft:      #5B4B39;   /* secondary text on light */
  --ink-on-dark:   #F2E8D6;   /* primary text on dark */
  --ink-on-dark-soft: #C9B79E;/* secondary text on dark */
  --terracotta:    #B5622F;   /* earth accent */
  --terracotta-dp: #8F4A21;
  --green:         #3F4A34;   /* foliage accent */
  --green-lt:      #6B7A5B;
  --gold:          #C79A46;   /* highlight / rule accent */
  --orange:        #8F4A21;   /* eyebrow accent on light/parchment backgrounds — AA contrast on --bg/--card */
  --orange-on-dark:#E8AC5C;   /* eyebrow accent on dark backgrounds (on-dark sections, cta-band, page-banner) — AA contrast on --bg-deep/--green */
  --cerise:        #C6355B;   /* signature accent — bougainvillea */
  --cerise-dp:      #9E2749;
  --line:          rgba(42,32,22,0.14);
  --line-on-dark:  rgba(242,232,214,0.16);
  --bg-black: black;

  --font-display: 'Fraunces', serif;
  --font-body:    'Karla', sans-serif;
  --font-mono:    'Wilma Mankiller modern', monospace;

  --maxw: 1180px;
  --radius: 2px;

  --header-h: 66px; /* actual rendered height of header.site-nav */

  /* Tell browsers this site is light-only, so native form controls (select,
     checkbox, scrollbar) don't get auto-switched to a dark UA theme that
     clashes with our custom light backgrounds and fails contrast checks. */
  color-scheme: light;
}

/* Safety net: every native form control gets an explicit foreground color,
   even the ones styled with inline `style=""` attributes that only set a
   background. Without this, some browsers render low-contrast text inside
   <select>/<input>/<textarea> depending on OS theme. */
input, select, textarea{ color: var(--ink); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

/* ---------- scrollbar: hidden until the cursor hovers the page ---------- */
html{
  scrollbar-width: thin;                 /* Firefox: reserve a slim gutter */
  scrollbar-color: transparent transparent; /* Firefox: invisible by default */
}
html:hover{
  scrollbar-color: var(--terracotta-dp) var(--bg); /* Firefox: reveal on hover */
}
::-webkit-scrollbar{ width: 12px; height: 12px; } /* Chrome/Edge/Safari: keep the
  gutter reserved at all times so the page never shifts width on hover */
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: transparent;
  border-radius: 20px;
  border: 3px solid transparent; /* shrinks the visible thumb inside the track */
  transition: background-color .2s ease, border-color .2s ease;
}
html:hover::-webkit-scrollbar-track{ background: var(--bg); }
html:hover::-webkit-scrollbar-thumb{
  background: var(--terracotta-dp);
  border-color: var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background: var(--cerise); }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100vw;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 0.4em 0;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 400; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.55rem); }
p{ margin: 0 0 1em 0; }
.lede{ font-size: 1.18rem; color: var(--ink-soft); max-width: 46em; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  display:flex; align-items:center; gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: var(--terracotta);
  display:inline-block;
}
section.on-dark .eyebrow{ color: var(--orange-on-dark); }
section.on-dark .eyebrow::before{ background: var(--orange-on-dark); }
.cta-band .eyebrow{ color: var(--orange-on-dark); }
.cta-band .eyebrow::before{ background: var(--orange-on-dark); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background .25s ease, color .25s ease, transform .25s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--cerise);
  border-color: var(--cerise);
  color: #FBF5E8;
}
.btn-primary:hover{ background: var(--cerise-dp); border-color: var(--cerise-dp); transform: translateY(-1px); }
.btn-ghost{ color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--bg); }
.btn-ghost-dark{ color: var(--ink-on-dark); }
.btn-ghost-dark:hover{ background: var(--ink-on-dark); color: var(--bg-deep); }

/* ---------- nav ---------- */
header.site-nav{
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
header.site-nav::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: rgba(242,232,214,0.92);
  backdrop-filter: blur(6px);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  max-width: var(--maxw); margin:0 auto;
}
.logo{
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.logo em{ font-style: italic; color: var(--cerise); }
.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg-black);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); border-color: var(--cerise); }
.nav-inner .nav-cta{
    display: inline-block;
    margin-left: 0px;
    padding: 8px 10px;
    border-radius: 20px;
    line-height: 1;
    box-sizing: border-box;
    color: white;
}
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .nav-links{
    position: fixed; top:66px; left:0; right:0; bottom:0; z-index: 210;
    background: var(--bg);
    flex-direction: column; align-items: flex-start; gap: 22px;
    padding: 34px 32px; transform: translateX(100%);
    transition: transform .3s ease; overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    font-family: var(--font-mono); font-size: 1rem; letter-spacing:.08em;
    text-transform:uppercase; color: var(--ink);
    position: relative; z-index: 220;
  }
}

/* ---------- signature motif: bougainvillea vine divider ---------- */
.vine-divider{ width:100%; overflow:hidden; line-height:0; }
.vine-divider svg{ width:100%; height:auto; display:block; }
.vine-divider .paw{ transform-box: fill-box; transform-origin: center; }
@media (max-width: 620px){
  .vine-divider .paw{ transform: scale(1.7); }
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  padding: 118px 0 96px;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(198,53,91,0.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #EEE1C9 100%);
  overflow: hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero-kicker{
  font-family: var(--font-mono); font-size: .78rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--terracotta-dp); margin-bottom:18px;
}
.hero-stats{
  display:flex; gap: 34px; margin-top: 40px; flex-wrap:wrap;
}
.hero-stat b{
  display:block; font-family: var(--font-display); font-size: 1.7rem; color: var(--ink);
}
.hero-stat span{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-soft);
}
.hero-actions{ display:flex; gap: 16px; margin-top: 38px; flex-wrap:wrap; }

/* ---------- generic sections ---------- */
section{ padding: 96px 0; }
section.on-dark{ background: var(--bg-deep); color: var(--ink-on-dark); }
section.on-dark .ink-soft, section.tight.on-dark p{ color: var(--ink-on-dark-soft); }
section.tight{ padding: 25px 0; }
.section-head{ margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- pillar / card grids ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 1100px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid-4{ grid-template-columns: 1fr; } }

.pillar-card{
  background: #fff;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(42,32,22,.09);
  display:flex; flex-direction:column; height:100%;
  color: var(--ink); /* card surface is always light, so its text stays dark even inside an on-dark section */
  transition: transform .25s ease, box-shadow .25s ease;
}
.pillar-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 36px rgba(42,32,22,.15); }
.pillar-media{
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
}
.pillar-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.pillar-card:hover .pillar-media img{ transform: scale(1.05); }
.pillar-body{
  padding: 26px 28px 30px;
  display:flex; flex-direction:column; align-items:center; text-align:center; flex:1;
}
.pillar-num{
  font-family: var(--font-mono); font-size: .68rem; color: var(--terracotta-dp);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom: 12px;
}
.pillar-badge{
  position:absolute; top:14px; right:14px; z-index:1;
  background: var(--ink); color: var(--ink-on-dark);
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  padding: 7px 15px; border-radius: 999px;
}
.pillar-body h3{
  font-family: var(--font-display); font-size: 1.15rem; line-height:1.35;
  text-transform: uppercase; letter-spacing:.01em; color: var(--ink); margin-bottom: 12px;
}
.pillar-body p{
  font-size: .9rem; line-height:1.65; color: var(--ink-soft); max-width: 30ch; margin-bottom: 22px;
}
.pillar-card .tag-row{ padding-top: 0; margin-bottom: 22px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tag{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing:.04em;
  border: 1px solid var(--line); padding: 5px 10px; border-radius: 20px; color: var(--ink-soft);
}
a.card-link{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing:.05em; text-transform:uppercase;
  background: var(--ink); color: #fff;
  padding: 7px 15px; border-radius: 999px;
  margin-top: auto; display:inline-block;
  transition: background .2s ease;
}
a.card-link:hover{ background: var(--cerise); }

/* Whole-card clickable pillar-card (used on corridors-parks.html) */
a.pillar-card{ text-decoration: none; }
span.card-link{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing:.05em; text-transform:uppercase;
  background: var(--ink); color: #fff;
  padding: 7px 15px; border-radius: 999px;
  margin-top: auto; display:inline-block;
  transition: background .2s ease;
}
a.pillar-card:hover span.card-link{ background: var(--cerise); }

/* ---------- plan-trip form card (kept separate from the image pillar-card) ---------- */
.form-card{
  background: var(--card);
  border: 1px solid var(--line);
  padding: 38px 32px;
  border-radius: var(--radius);
  display:flex; flex-direction:column;
}

.title-rule{ width: 46px; height: 2px; background: var(--gold); margin: 16px auto 0; }

/* ---------- trip detail page ---------- */
.trip-hero{
  position: relative;
  height: 440px;
  margin-top: 0px;
  background-size: cover; background-position: center;
  display:flex; align-items:center; justify-content:center;
}
.trip-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(42,32,22,.42), rgba(42,32,22,.72));
}
.trip-hero .wrap{ position:relative; z-index:1; text-align:center; }
.trip-badge{
  width:54px; height:54px; border-radius:50%;
  border:2px solid var(--gold); color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
}
.trip-badge svg{ width:26px; height:26px; }
.trip-hero .eyebrow{ justify-content:center; color: var(--ink-on-dark-soft); }
.trip-hero .eyebrow::before{ background: var(--ink-on-dark-soft); }
.trip-hero h1{ color: var(--ink-on-dark); margin:0; font-size: clamp(2rem, 4.2vw, 3rem); }
@media (max-width: 620px){ .trip-hero{ height: 360px; } }

.trip-info-strip{
  background: var(--card); border-bottom: 1px solid var(--line);
  display:grid; grid-template-columns: repeat(4, 1fr) auto; align-items:center;
}
.trip-info-item{
  padding: 22px 20px; text-align:center;
  border-right: 1px solid var(--line);
}
.trip-info-item svg{ width:20px; height:20px; color: var(--terracotta-dp); margin-bottom:8px; }
.trip-info-item .label{
  display:block; font-family: var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--terracotta-dp); margin-bottom: 4px;
}
.trip-info-item .value{ font-family: var(--font-body); font-weight:600; color: var(--ink); font-size:.92rem; }
.trip-info-cta{ padding: 22px 26px; text-align:center; }
@media (max-width: 900px){
  .trip-info-strip{ grid-template-columns: repeat(2, 1fr); }
  .trip-info-item{ border-bottom: 1px solid var(--line); }
  .trip-info-cta{ grid-column: 1 / -1; }
}

.gallery-strip{ width:100%; overflow:hidden; }
.gallery-track{ display:flex; width:max-content; animation: gallery-scroll 32s linear infinite; }
.gallery-strip:hover .gallery-track{ animation-play-state: paused; }
.gallery-track img{ height: 280px; width:auto; flex: 0 0 auto; object-fit: cover; display:block; }
@media (max-width: 900px){ .gallery-track img{ height:220px; } }
@keyframes gallery-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.gallery-track img{ cursor: zoom-in; }

.lightbox{
  position: fixed; inset:0; z-index: 1000;
  background: rgba(24,18,12,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 30px;
  opacity:0; visibility:hidden;
  transition: opacity .25s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width: 90vw; max-height: 90vh; object-fit:contain;
  border-radius: 6px;
  cursor: zoom-out;
  transform: scale(.92); transition: transform .25s ease;
}
.lightbox.is-open img{ transform: scale(1); }
.lightbox-close{
  position:absolute; top:22px; right:26px;
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1; cursor:pointer; border:none;
}
.lightbox-close:hover{ background: rgba(255,255,255,.22); }

.day-card{ margin-bottom: 34px; }
.day-pill{
  display:table; margin: 0 auto 0; transform: translateY(50%);
  background: var(--ink); color: var(--ink-on-dark);
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  padding: 11px 24px; border-radius: 999px;
  position:relative; z-index:1; text-align:center;
}
.day-body{
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 40px 32px 26px;
}
.day-body ul{ margin:0; padding-left: 20px; color: var(--ink-soft); }
.day-body li{ margin-bottom: 8px; line-height:1.6; }
.day-body p{ color: var(--ink-soft); margin:0; }

.incl-excl-card{
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 30px; text-align:center;
}
.incl-excl-icon{
  width:44px; height:44px; border-radius:50%; margin: 0 auto 16px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.incl-excl-icon.yes{ background: var(--green); }
.incl-excl-icon.no{ background: var(--terracotta-dp); }
.incl-excl-icon svg{ width:20px; height:20px; }
.incl-excl-card h3{ margin-bottom: 16px; }
.incl-excl-card ul{ text-align:left; margin:0; padding-left: 20px; color: var(--ink-soft); }
.incl-excl-card li{ margin-bottom: 8px; line-height:1.55; }

.related-card{ text-align:center; }
.related-card img{ width:100%; height:150px; object-fit:cover; border-radius: 12px; margin-bottom: 12px; transition: transform .35s ease; }
.related-card a{ display:block; overflow:hidden; border-radius:12px; }
.related-card a:hover img{ transform: scale(1.06); }
.related-card .related-title{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.02em;
  color: var(--terracotta-dp);
}
.related-card .related-title:hover{ color: var(--cerise); }

.enquiry-section{ background: var(--card); }
.enquiry-form{ max-width: 860px; margin: 0 auto; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.field-row.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px){ .field-row, .field-row.cols-3{ grid-template-columns: 1fr; } }
.field label{
  display:block; font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--ink-soft); margin-bottom: 6px;
}
.field label .req{ color: var(--cerise); }
.field input, .field select, .field textarea{
  width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius: 6px;
  background: var(--bg); font-family: var(--font-body); font-size:.95rem; color: var(--ink);
}
.field textarea{ resize: vertical; }
.consent-row{ display:flex; align-items:flex-start; gap:10px; margin: 6px 0 22px; font-size:.85rem; color: var(--ink-soft); }
.consent-row a{ color: var(--terracotta-dp); text-decoration: underline; }
.captcha-box{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:6px; padding:12px 18px; background: var(--bg);
  font-size:.85rem; color: var(--ink-soft); margin-bottom: 22px;
}
.page-banner{
  position: relative;
  height: 300px;
  background-size: cover;
  background-position: center;
  display:flex; align-items:center; justify-content:center;
  margin-top: 0px;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(42,32,22,.5), rgba(42,32,22,.74));
}
.page-banner .wrap{ position:relative; z-index:1; text-align:center; }
.page-banner .eyebrow{ justify-content:center; color: var(--orange-on-dark); }
.page-banner h1{ color: var(--ink-on-dark); margin:0; font-size: clamp(2rem, 4vw, 2.8rem); }
@media (max-width: 620px){ .page-banner{ height:220px; } }

/* ---------- review / testimonial cards ---------- */
.review-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px 22px;
  display:flex; flex-direction:column;
  position:relative;
  transition: border-color .25s ease, transform .25s ease;
}
.review-card:hover{ border-color: var(--cerise); transform: translateY(-3px); }
.review-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 16px; }
.review-stars{ display:flex; gap:3px; }
.review-stars svg{ width:15px; height:15px; }
.review-source{
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-soft); border:1px solid var(--line); padding:4px 9px; border-radius:20px;
  white-space:nowrap;
}
.review-card h3{ font-size:1.05rem; margin-bottom:10px; padding-right: 10px; }
.review-card p{ font-size:.9rem; color: var(--ink-soft); line-height:1.65; margin-bottom:16px; }
.review-name{ font-family: var(--font-display); font-style:italic; font-size:.95rem; color:var(--ink); }
.review-foot{ margin-top:auto; padding-top:16px; border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-foot a{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--terracotta-dp); }
.review-foot a:hover{ color:var(--cerise); }

/* ---------- trust strip ---------- */
.trust-strip{
  display:flex; flex-wrap:wrap; gap: 40px 56px; align-items:center; justify-content: space-between;
  padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-item{ display:flex; align-items:baseline; gap: 10px; }
.trust-item b{ font-family: var(--font-display); font-size: 1.4rem; }
.trust-item span{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }

/* ---------- numbered feature rows ---------- */
.feature-row{
  display:grid; grid-template-columns: 90px 1fr; gap: 24px;
  padding: 34px 0; border-top: 1px solid var(--line-on-dark);
}
/* .feature-row:last-child{ border-bottom: 1px solid var(--line-on-dark); } */
.feature-num{ font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); }

/* ---------- route / park cards — 3D flip (hover to reveal detail) ---------- */
.route-card{
  height: 440px;
  perspective: 1400px;
  cursor: pointer;
  border-radius: 25px;
}
.route-flip-inner{
  position: relative; width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
}
@media (hover: hover) and (pointer: fine){
  .route-card:hover .route-flip-inner{ transform: rotateY(180deg); }
  .route-card:hover .pillar-media img{ transform: scale(1.05); }
}
.route-card:focus-within .route-flip-inner{ transform: rotateY(180deg); }
.route-card.is-flipped .route-flip-inner{ transform: rotateY(180deg); }
.route-card.is-flipped .pillar-media img{ transform: scale(1.05); }

.route-front, .route-back{
  position:absolute; inset:0;
  border-radius: 16px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* front face — matches .pillar-card exactly (see Other Destinations cards) */
.route-front{
  background: #fff; border: none;
  box-shadow: 0 6px 24px rgba(42,32,22,.09);
}
.route-meta{ display:flex; gap: 18px; flex-wrap:wrap; font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.route-meta b{ color: var(--terracotta-dp); }

/* back face */
.route-back{
  background: var(--bg-deep);
  transform: rotateY(180deg);
  padding: 26px 26px;
  color: var(--ink-on-dark);
}
.route-back .back-tag{
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.route-back h4{ font-family: var(--font-display); font-size: 1.22rem; line-height:1.3; margin-bottom: 10px; color: var(--ink-on-dark); }
.route-back p{ font-size:.88rem; line-height:1.6; color: var(--ink-on-dark-soft); flex:1; margin-bottom: 16px; }
.route-back .route-meta{ color: var(--ink-on-dark-soft); margin-bottom: 6px; }
.route-back .route-meta b{ color: var(--gold); }
.route-back-price{
  font-family: var(--font-mono); font-size: 1.28rem; color: var(--ink-on-dark);
  margin-bottom: 18px;
}
.route-back-price span{ font-size:.7rem; color: var(--ink-on-dark-soft); }
.route-back-cta{
  display:block; text-align:center;
  background: var(--cerise); color: var(--ink-on-dark);
  font-family: var(--font-mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
  padding: 13px; border-radius: var(--radius); text-decoration:none;
  transition: background .2s ease;
}
.route-back-cta:hover{ background: var(--cerise-dp); }

@media (max-width: 620px){
  .route-card{ height: 460px; }
}

/* ---------- quote / CTA band ---------- */
.cta-band{
  background: var(--green); color: var(--ink-on-dark);
  padding: 72px 0; text-align:center;
}
.cta-band h2{ color: var(--ink-on-dark); }

/* ---------- procedure timeline rows (works on light or dark sections) ---------- */
.num-row{
  display:grid; grid-template-columns: 112px 1fr; gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.num-row:last-child{ border-bottom: 1px solid var(--line); }
.num-time{
  font-family: var(--font-mono); font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; color: var(--terracotta-dp);
}
section.on-dark .num-row{ border-top-color: var(--line-on-dark); }
section.on-dark .num-row:last-child{ border-bottom-color: var(--line-on-dark); }
section.on-dark .num-time{ color: var(--gold); }
@media (max-width: 560px){
  .num-row{ grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- responsive comparison table ---------- */
.compare-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
}
.compare-table{
  width: 100%; min-width: 640px; border-collapse: collapse;
  font-family: var(--font-body); font-size: .93rem;
}
.compare-table th, .compare-table td{
  padding: 16px 22px; text-align:left; border-bottom: 1px solid var(--line-on-dark);
  vertical-align: top;
}
.compare-table thead th{
  font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  font-weight: 500; color: var(--ink-on-dark-soft); background: var(--bg-deep-2);
  white-space: nowrap;
}
.compare-table tbody th{
  font-weight: 500; color: var(--ink-on-dark); white-space: nowrap;
}
.compare-table th:first-child, .compare-table td:first-child{
  position: sticky; left: 0; z-index: 1;
}
.compare-table tbody th:first-child{ background: var(--bg-deep); }
.compare-table thead th:first-child{ background: var(--bg-deep-2); }
.compare-table td.col-cerise{ color: var(--gold); font-weight: 500; }
.compare-table td.col-other{ color: var(--ink-on-dark-soft); }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th{ border-bottom: none; }
@media (max-width: 620px){
  .compare-table{ font-size: .84rem; min-width: 560px; }
  .compare-table th, .compare-table td{ padding: 12px 16px; }
}

/* ---------- scroll-to-top (bear paw) ---------- */
/* ---------- accommodation listing (Accommodation page) ---------- */
.stay-filter{
  display:flex; align-items:center; gap: 10px; flex-wrap:wrap;
  margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.stay-filter .filter-label{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--ink-soft); margin-right: 6px;
}
.stay-filter button{
  font-family: var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em;
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 9px 18px; border-radius: 999px; cursor:pointer; transition: all .2s ease;
}
.stay-filter button:hover{ border-color: var(--terracotta-dp); color: var(--terracotta-dp); }
.stay-filter button.active{ background: var(--ink); border-color: var(--ink); color: #fff; }

.stay-card{
  display:flex; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow:hidden; margin-bottom: 26px; position:relative;
  transition: box-shadow .25s ease, transform .25s ease;
}
.stay-card:hover{ box-shadow: 0 14px 34px rgba(42,32,22,.12); transform: translateY(-2px); }
.stay-media{ position:relative; width: 300px; flex: 0 0 300px; overflow:hidden; }
.stay-media img{ width:100%; height:100%; object-fit:cover; display:block; min-height: 240px; }
.stay-offer{
  position:absolute; top:16px; left:-38px;
  background: var(--cerise); color:#fff;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  padding: 5px 42px; transform: rotate(-45deg); box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.stay-body{ padding: 26px 30px; flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.stay-body h3{ font-family: var(--font-display); font-size: 1.3rem; margin:0; }
.stay-tags{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color: var(--terracotta-dp); }
.stay-body p{ color: var(--ink-soft); font-size:.92rem; line-height:1.6; margin:0; }
.stay-rating{ display:flex; align-items:center; gap:6px; }
.stay-rating svg{ width:14px; height:14px; }
.stay-rating span{ font-family: var(--font-mono); font-size:.76rem; color: var(--ink-soft); margin-left:4px; }
.stay-side{
  flex: 0 0 190px; padding: 26px 26px; border-left: 1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:12px; text-align:right;
}
.stay-price-label{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }
.stay-price{ font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.stay-price span{ font-size:.62rem; font-family: var(--font-mono); color: var(--ink-soft); display:block; margin-top:2px; }

@media (max-width: 860px){
  .stay-card{ flex-direction: column; }
  .stay-media{ width:100%; flex-basis: auto; height: 220px; }
  .stay-side{ border-left:none; border-top: 1px solid var(--line); align-items:flex-start; text-align:left; flex-direction:row; justify-content:space-between; }
}

.scroll-top-btn{
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--cerise); color: #fff; border: none; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(42,32,22,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.scroll-top-btn.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top-btn:hover{ background: var(--cerise-dp); }
.scroll-top-btn svg{ width:22px; height:22px; display:block; }
@media (max-width: 780px){
  .scroll-top-btn{ right:16px; bottom:16px; width:44px; height:44px; }
  .scroll-top-btn svg{ width:19px; height:19px; }
}

/* ---------- fixed social rail (left edge) ---------- */
.social-rail{
  position: fixed; top: 50%; left: 0; transform: translateY(-50%);
  z-index: 500; display:flex; flex-direction:column;
}
.social-rail a{
  width: 42px; height: 42px; display:flex; align-items:center; justify-content:center;
  background: var(--ink); color: var(--ink-on-dark);
  transition: background .2s ease;
}
.social-rail a svg{ width:18px; height:18px; }
.social-rail a:hover{ background: var(--cerise); }
@media (max-width: 780px){
  .social-rail{ top: auto; bottom: 90px; transform: none; }
  .social-rail a{ width: 36px; height: 36px; }
  .social-rail a svg{ width:16px; height:16px; }
}

/* ---------- footer ---------- */
footer{ background: var(--bg-deep-2); color: var(--ink-on-dark-soft); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
footer h4{ color: var(--ink-on-dark); font-size: .95rem; margin-bottom: 16px; }
footer .flogo{ font-family: var(--font-display); font-size: 1.3rem; color: var(--ink-on-dark); margin-bottom: 14px; }
footer .flogo em{ font-style: italic; color: var(--cerise); }
footer a{ display:block; margin-bottom: 10px; font-size: .92rem; color: var(--ink-on-dark-soft); }
footer a:hover{ color: var(--ink-on-dark); }
.footer-social{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width: 38px; height: 38px; margin-bottom:0;
  border: 1px solid var(--line-on-dark); border-radius: 50%;
  color: var(--ink-on-dark-soft);
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ color: var(--ink-on-dark); border-color: var(--gold); }
.footer-address{ font-size:.92rem; color: var(--ink-on-dark-soft); line-height:1.6; margin-bottom: 14px; }
.footer-affiliation{
  border-top: 1px solid var(--line-on-dark); padding: 28px 0;
  display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap;
}
.affiliation-logos{ display:flex; align-items:center; gap: 28px; flex-wrap:wrap; }
.affiliation-logos img{ height: 34px; width:auto; object-fit:contain; }
.payment-badge{ display:inline-block; line-height:0; }
.payment-badge img{ height: 24px; width:auto; object-fit:contain; }
@media (max-width: 620px){
  .footer-affiliation{ justify-content:center; text-align:center; }
  .affiliation-logos{ justify-content:center; }
}
.footer-bottom{
  border-top: 1px solid var(--line-on-dark); padding-top: 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing:.03em; text-transform:uppercase;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* ---------- focus states ---------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--cerise); outline-offset: 3px;
}

/* ---------- banner slider (service pages) ---------- */
.banner-slider{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  touch-action: pan-y;
  max-width: 100%;
}
.slider-track{
  display:flex;
  transition: transform .65s cubic-bezier(.65,0,.35,1);
}
.slide{ min-width:100%; position:relative; }
.slide svg{ width:100%; height:auto; display:block; }
.slide-caption{
  position:absolute; left:28px; bottom:24px;
  color:#F2E8D6;
  font-family: var(--font-mono);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  background: rgba(42,32,22,0.55);
  padding: 9px 16px;
  border-left: 2px solid var(--cerise);
}
.slider-dots{
  position:absolute; right:14px; bottom:14px;
  display:flex; align-items:center; gap:2px; z-index:3;
}
/* The visible dot stays a slim 9px, but the tappable button itself is
   expanded to a 24x24 touch target (with spacing) so it's easy to hit
   on mobile without changing the visual design. */
.slider-dot{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: transparent;
  border: none; cursor:pointer; padding:0;
}
.slider-dot::after{
  content:"";
  width:9px; height:9px; border-radius:50%;
  background: rgba(255,255,255,.55);
  transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.slider-dot.active::after{ background: var(--cerise); width:22px; border-radius:5px; }
.slider-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  z-index:3;
  width:42px; height:42px; border-radius:50%;
  background: rgba(42,32,22,.5);
  border: 1px solid rgba(242,232,214,0.35);
  color:#F2E8D6;
  font-family: var(--font-mono); font-size:1.05rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.slider-arrow:hover{ background: var(--cerise); border-color: var(--cerise); }
.slider-arrow.prev{ left:18px; }
.slider-arrow.next{ right:18px; }
@media (max-width: 620px){
  .slider-arrow{ width:34px; height:34px; }
  .slide-caption{ font-size:.66rem; left:16px; bottom:16px; padding:7px 12px; }
}

/* ---------- hero as slider background (service pages) ---------- */
.hero.hero-slider{
  padding: 0;
  /* fill exactly what's left below the sticky header, so the slider's
     bottom edge lands on the fold — no scroll needed to see it end */
  height: calc(100vh - var(--header-h));
  min-height: 460px;
  display:flex;
  /* no align-items:center here on purpose — with the default "stretch",
     .hero-overlay is forced to exactly the container's real height,
     so its own centering below can never push content past the fold */
  background: var(--bg-deep);
}
@supports (height: 100dvh){
  /* dvh tracks the real visible viewport on mobile (accounts for the
     browser address/toolbar showing or hiding), so the section still
     ends exactly at screen-bottom instead of overflowing it */
  .hero.hero-slider{ height: calc(100dvh - var(--header-h)); }
}
.hero-slider .banner-slider{
  position:absolute; inset:0;
  border:none; border-radius:0;
  height:100%;
}
.hero-slider .slider-track{ height:100%; }
.hero-slider .slide{ height:100%; }
.hero-slider .slide svg{ height:100%; }
/* Picha (img) za slide, si SVG tu — hiki ndicho kilichokuwa kikikosekana
   kwenye hiking.html na vacation.html: bila hii, <img> haichukui urefu
   kamili wa slide (--height:100%--) kwenye simu/iPad, tofauti na
   index.html iliyokuwa na class ya ziada .hero-slider-wide pekee
   iliyokuwa na sheria hii. Sasa kurasa zote za .hero-slider zinafanana. */
.hero-slider .slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-slider .banner-slider::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background: linear-gradient(100deg, rgba(42,32,22,0.82) 0%, rgba(42,32,22,0.5) 44%, rgba(42,32,22,0.12) 78%);
}
.hero-overlay{
  position:relative;
  z-index:2;
  width:100%;
  /* stretched to the exact hero height by the parent flex rule above;
     center the text block inside that real, fixed height */
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 64px 0;
  overflow-y: auto; /* only kicks in on the rare screen too short for
    the text even after centering — scrolls inside the hero instead of
    spilling past its bottom edge */
}
.hero-overlay .hero-kicker{ color: var(--gold); }
.hero-overlay .hero-kicker::before{ background: var(--gold); }
.hero-overlay h1{ color: var(--ink-on-dark); }
.hero-overlay .lede{ color: var(--ink-on-dark-soft); }
.hero-overlay .hero-stat b{ color: var(--ink-on-dark); margin-top: -0px;}
.hero-overlay .hero-stat span{ color: var(--ink-on-dark-soft); }
@media (max-width: 900px){
  .hero.hero-slider{ min-height: 520px; }
  .hero-overlay{ padding: 40px 0; }
  .hero-overlay .hero-stats{ margin-top: 22px; }
  .hero-overlay .hero-actions{ margin-top: 22px; }
  .hero-slider .banner-slider::before{
    background: linear-gradient(180deg, rgba(42,32,22,0.4) 0%, rgba(42,32,22,0.88) 68%);
  }
}
/* Small phones (e.g. Galaxy S20, ~360-412px): the kicker + long h1 +
   lede can be taller than the hero itself, so centering (justify-content:
   center) pushes the overflow upward until the kicker text sits flush
   against the sticky nav bar above it. Anchor the block to the top with
   real padding instead, so there's always breathing room under the nav
   no matter how much the text wraps. */
@media (max-width: 480px){
  .hero-overlay{
    justify-content: flex-start;
    padding: 28px 0 40px;
  }
}

/* ---------- home hero: full-width single-image slider ---------- */
.hero-slider-wide{ overflow: hidden; }
/* .slide img height/object-fit sasa inashughulikiwa na
   .hero-slider .slide img (juu), ambayo inagusa index.html,
   hiking.html na vacation.html kwa pamoja. */

/* NAVIGATION NEW */

/* Styling ya dropdown kwa ajili ya desktop na simu */
.dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dropbtn {
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1000;
  border-radius: 4px;
  padding-top: 8px;
}

.dropdown-content a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: var(--cerise);
}

/* Hover effect kwa desktop pekee (si touch/mobile — vinginevyo tap
   inaacha .dropdown-content ikiwa "imekwama" wazi kwa CSS hata JS
   ikijaribu kuifunga/kuifungua, jambo linalogongana na .show ya JS
   na kusababisha submenu za ndani (Northern/Southern Corridor)
   kuonekana kama hazifunguki kwenye simu) */
@media (hover: hover) and (pointer: fine) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
}

/* Mobile: class ya .show itatumika na JS */
.dropdown-content.show {
  display: block;
}

/* Offset ya anchor links (#serengeti, #routes, n.k.) isije ikafichwa na sticky header */
.route-card[id],
.pillar-card[id],
#routes,
#northern,
#southern {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Mega-menu style ya Safari & Tours (makundi ya corridor) */
.dropdown-content-wide {
  min-width: 260px;
}

.dropdown-content .dropdown-label {
  display: block;
  padding: 10px 16px 4px;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.dropdown-content a.dropdown-divider {
  border-top: 1px solid #eee;
  margin-top: 6px;
  padding-top: 12px;
}

.dropdown-content a.dropdown-cta {
  color: var(--cerise);
  font-weight: 600;
}

/* Nested submenu (Northern/Southern Corridor) ndani ya Safari & Tours */
.dropdown-sub {
  position: relative;
}

.dropbtn-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.dropbtn-sub:hover {
  background-color: #f1f1f1;
  color: var(--cerise);
}

.dropdown-sub-content {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #ffffff;
  min-width: 220px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 8px 0;
  z-index: 1001;
}

.dropdown-sub-content a {
  color: #333;
  padding: 11px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-sub-content a:hover {
  background-color: #f1f1f1;
  color: var(--cerise);
}

/* Hover effect kwa desktop pekee (si touch). Hii ndiyo ilikuwa CHANZO
   halisi cha submenu za Northern/Southern Corridor kutofungua simu:
   `.dropdown-sub:hover .dropdown-sub-content{display:none}` ya zamani
   (ndani ya media query ya mobile) ilikuwa na specificity kubwa kuliko
   `.dropdown-sub-content.show{display:block}`, hivyo mara simu
   ikishika hali ya ":hover" (jambo la kawaida baada ya kugusa/tap kwenye
   touchscreen), sheria ya "display:none" ilishinda JS class ya .show —
   ndiyo maana submenu ilionekana "haifunguki" ingawa JS ilikuwa
   ikifanya kazi sahihi. */
@media (hover: hover) and (pointer: fine) {
  .dropdown-sub:hover .dropdown-sub-content {
    display: block;
  }
}

.dropdown-sub-content.show {
  display: block;
}

/* Submenu "inayoshuka chini" (badala ya kutoka kando) kwa skrini finyu
   AU kwa kifaa chochote cha kugusa (simu, iPad/tablet) — bila hii,
   kwenye iPad ya "landscape" (upana >=1024px) submenu ingejaribu
   kutoka kando (flyout) ambako ni rahisi kutoka nje ya skrini kwa
   kidole badala ya mouse sahihi. */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .dropdown-sub-content {
    position: static;
    box-shadow: none;
    padding: 0 0 0 16px;
  }
  .dropdown-sub-content.show {
    display: block;
  }
}

/* Kilimanjaro Dates & Prices page */
.depart-filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom: 28px;
}
.depart-filter-bar .filter-label{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color: var(--ink-soft); margin-right:4px;
}
.depart-filter-bar button{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.04em; padding:8px 16px; border:1px solid var(--line);
  border-radius: 999px; background:#fff; cursor:pointer; color: var(--ink-soft);
  transition: all .15s;
}
.depart-filter-bar button:hover{ border-color: var(--terracotta-dp); color: var(--terracotta-dp); }
.depart-filter-bar button.active{ background: var(--ink); border-color: var(--ink); color:#fff; }

.depart-list{ display:flex; flex-direction:column; gap:14px; }
.depart-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px 28px;
  transition: box-shadow .2s, transform .2s;
}
.depart-card:hover{ box-shadow: 0 14px 34px rgba(42,32,22,.10); transform: translateY(-2px); }
.depart-code{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.06em; color: var(--ink-soft); }
.depart-route{ min-width: 190px; }
.depart-route h3{ margin:2px 0 6px; font-family: var(--font-display); font-size:1.15rem; }
.depart-meta{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-soft); }
.depart-dates{ font-family: var(--font-mono); font-size:.88rem; color: var(--ink); white-space:nowrap; min-width:150px; }
.depart-dates span{ display:block; font-size:.66rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.depart-spots{ font-size:.78rem; color: var(--green-dp, #3a6b4a); font-family: var(--font-mono); min-width:110px; }
.depart-spots.filling{ color: var(--terracotta-dp); }
.depart-price-block{ text-align:right; min-width:150px; }
.depart-price{ font-family: var(--font-display); font-size:1.5rem; color: var(--ink); }
.depart-price span{ display:block; font-size:.64rem; font-family: var(--font-mono); color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

.depart-availability{ min-width:180px; display:flex; flex-direction:column; gap:7px; }
.depart-status-badge{
  align-self:flex-start; font-family: var(--font-mono); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; padding:3px 11px; border-radius:999px;
}
.depart-status-badge.open{ background: rgba(58,107,74,.12); color: var(--green-dp, #3a6b4a); }
.depart-status-badge.filling{ background: rgba(196,90,50,.14); color: var(--terracotta-dp); }
.depart-status-badge.full{ background: rgba(80,70,60,.12); color: var(--ink-soft); }
.depart-bar{ width:150px; height:6px; border-radius:999px; background: var(--line); overflow:hidden; }
.depart-bar-fill{ height:100%; background: var(--cerise); border-radius:999px; }
.depart-bar-fill.full{ background: var(--ink-soft); }
.depart-spots-text{ font-size:.74rem; color: var(--ink-soft); font-family: var(--font-mono); }
.depart-spots-text b{ color: var(--ink); font-weight:600; }

@media (max-width: 860px){
  .depart-card{ flex-direction:column; align-items:flex-start; gap:12px; }
  .depart-price-block{ text-align:left; }
}

.compare-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.compare-table th, .compare-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
.compare-table th{ font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); font-weight:600; }
.compare-table td:last-child, .compare-table th:last-child{ text-align:right; }
.compare-table-wrap{ overflow-x:auto; }

.include-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.include-list li{ display:flex; gap:12px; align-items:flex-start; }
.include-list .ico{ flex:0 0 20px; width:20px; height:20px; margin-top:2px; }
.include-list.yes .ico{ color: var(--cerise); }
.include-list.no .ico{ color: var(--ink-soft); }
.include-list b{ display:block; font-size:.94rem; }
.include-list span{ display:block; color: var(--ink-soft); font-size:.86rem; margin-top:2px; }