/* ═══════════════════════════════════════════════════════
   MASONDA AFRICAN ADVENTURES — FRONTEND CSS
   ═══════════════════════════════════════════════════════ */
:root {
  --gold:        #B8935A;
  --gold-l:      #D4AA72;
  --gold-pale:   #F2E8D9;
  --dark:        #1C1008;
  --forest:      #2D5742;
  --forest-l:    #3D6B3A;
  --brown:       #6B3D1E;
  --brown-warm:  #9C6340;
  --cream:       #FBF6EE;
  --cream2:      #F2E8D9;
  --white:       #FFFFFF;
  --sand:        #E8D5B0;
  --text:        #2D1A0A;
  --text-mid:    #6B4A2A;
  --text-soft:   #A08060;
  --border:      rgba(184,147,90,.25);
  --border-md:   rgba(184,147,90,.5);
  --shadow:      rgba(44,26,10,.1);
  --green:       #4CAF82;
  --red:         #E05757;
  --nav-h:       74px;
  --radius:      5px;
  --transition:  .25s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Outfit',sans-serif; background:var(--cream); color:var(--text); line-height:1.7; overflow-x:hidden; }
img  { max-width:100%; height:auto; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }
::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:var(--cream2); } ::-webkit-scrollbar-thumb { background:var(--gold); border-radius:3px; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:'Outfit',sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:.9rem 2.2rem; border-radius:3px; border:none; cursor:pointer; transition:all var(--transition); text-decoration:none; white-space:nowrap; }
.btn--primary     { background:var(--gold); color:var(--white); }
.btn--primary:hover { background:var(--brown); transform:translateY(-2px); box-shadow:0 8px 24px rgba(107,61,30,.28); }
.btn--outline-dark  { background:transparent; color:var(--brown); border:1px solid var(--border-md); }
.btn--outline-dark:hover { background:var(--gold); color:var(--white); border-color:var(--gold); }
.btn--outline-light { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.4); }
.btn--outline-light:hover { border-color:var(--gold-l); color:var(--gold-l); }
.btn--small { padding:.5rem 1.2rem; font-size:.72rem; }
.btn--gold  { background:var(--gold); color:var(--white); }
.btn--gold:hover { background:var(--brown); }
.btn--block { width:100%; justify-content:center; }
.btn--whatsapp { background:#25D366; color:var(--white); } .btn--whatsapp:hover { background:#1da851; }
.btn-link { color:var(--gold); font-size:.78rem; font-weight:500; transition:color var(--transition); } .btn-link:hover { color:var(--brown); }

/* EYEBROW */
.eyebrow { display:flex; align-items:center; gap:.8rem; font-size:.68rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:.75rem; }
.eyebrow::before { content:""; display:block; width:26px; height:1px; background:var(--gold); }
.eyebrow--light { color:var(--gold-l); }
.eyebrow--light::before { background:var(--gold-l); }

/* SECTION */
.section { padding:5.5rem 5rem; }
.section--cream  { background:var(--cream); }
.section--white  { background:var(--white); }
.section--dark   { background:var(--dark); }
.section--brown  { background:var(--brown); }
.section--cream2 { background:var(--cream2); }
.section__inner  { max-width:1240px; margin:0 auto; }
.section__inner--center { text-align:center; }
.section__header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3.5rem; flex-wrap:wrap; gap:1rem; }
.section__title  { font-family:'Cormorant Garamond',serif; font-size:clamp(2.2rem,3.8vw,3.2rem); font-weight:400; line-height:1.15; color:var(--text); margin-bottom:1rem; }
.section__title em { font-style:italic; color:var(--brown); }
.section__title--light { color:var(--white); }
.section__title--light em { color:var(--gold-l); }
.section__lead   { font-size:1rem; color:var(--text-soft); line-height:1.85; font-weight:300; max-width:560px; }
.section__lead--light  { color:rgba(255,255,255,.65); }
.section__lead--center { margin:0 auto 2rem; }

/* FLASH / TOAST */
.flash { position:fixed; top:calc(var(--nav-h)+1rem); left:50%; transform:translateX(-50%); background:var(--white); border:1px solid var(--border); border-radius:3px; padding:.75rem 1.5rem; font-size:.85rem; z-index:9999; box-shadow:0 4px 20px var(--shadow); display:flex; align-items:center; gap:1rem; transition:opacity .3s; }
.flash--success { border-color:var(--green); color:#1a5c35; }
.flash--error   { border-color:var(--red);   color:#8c2020; }
.flash--hidden  { opacity:0; pointer-events:none; }
.toast { position:fixed; bottom:5rem; right:2rem; background:var(--text); color:var(--white); padding:.75rem 1.25rem; border-radius:3px; font-size:.82rem; z-index:9999; opacity:0; transform:translateY(10px); transition:all .3s; }
.toast--visible { opacity:1; transform:translateY(0); }
.toast--error   { background:var(--red); }
.toast--success { background:#2d7a55; }

/* WA FLOAT */
.wa-float { position:fixed; bottom:2rem; right:2rem; z-index:999; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4); transition:transform .3s; }
.wa-float:hover { transform:scale(1.1); }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:0 5rem; height:var(--nav-h); background:rgba(251,246,238,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:height var(--transition),background var(--transition); }
.nav--scrolled { height:64px; box-shadow:0 2px 20px var(--shadow); }
.nav__logo img { height:48px; width:auto; transition:height var(--transition); }
.nav--scrolled .nav__logo img { height:40px; }
.nav__links { display:flex; align-items:center; gap:0; list-style:none; }
.nav__link { color:var(--text-mid); font-size:.79rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; transition:color var(--transition); position:relative; padding:.25rem 0; }
.nav__link::after { content:""; position:absolute; bottom:-3px; left:0; right:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
.nav__link:hover,.nav__link.active { color:var(--gold); }
.nav__link:hover::after,.nav__link.active::after { transform:scaleX(1); transform-origin:left; }
.nav__link--cta { background:var(--gold); color:var(--white)!important; padding:.5rem 1.3rem; border-radius:3px; }
.nav__link--cta:hover { background:var(--brown)!important; }
.nav__link--cta::after { display:none!important; }
.nav__currency select { background:transparent; border:1px solid var(--border); border-radius:3px; font-size:.72rem; padding:.3rem .5rem; color:var(--text-mid); font-family:'Outfit',sans-serif; cursor:pointer; }
.nav__hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav__hamburger span { display:block; width:24px; height:1.5px; background:var(--text-mid); transition:all .3s; }

/* MOBILE NAV */
.mobile-nav { display:none; position:fixed; inset:0; z-index:999; background:var(--dark); flex-direction:column; align-items:center; justify-content:center; gap:2rem; }
.mobile-nav--open { display:flex; }
.mobile-nav__close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; cursor:pointer; color:var(--gold); font-size:1.8rem; line-height:1; }
.mobile-nav__link { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; color:var(--sand); transition:color .2s; }
.mobile-nav__link:hover { color:var(--gold-l); }
.mobile-nav__link--cta { color:var(--gold-l); }

/* HERO */
.hero { min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero__bg { position:absolute; inset:0; background:linear-gradient(to right,rgba(28,16,8,.78) 0%,rgba(28,16,8,.3) 60%,rgba(28,16,8,.15) 100%),url('/assets/images/hero-serengeti.jpg') center/cover no-repeat; }
.hero__bottom-fade { position:absolute; bottom:0; left:0; right:0; height:200px; background:linear-gradient(to bottom,transparent,var(--cream)); z-index:2; }
.hero__content { position:relative; z-index:3; max-width:720px; padding:8rem 5rem 6rem; }
.hero__badge { display:inline-flex; align-items:center; gap:.6rem; background:rgba(184,147,90,.15); border:1px solid rgba(184,147,90,.5); color:var(--gold-l); font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; padding:.4rem 1rem; border-radius:30px; margin-bottom:1.5rem; }
.hero__badge-dot { width:6px; height:6px; border-radius:50%; background:var(--gold-l); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1;transform:scale(1); } 50% { opacity:.5;transform:scale(.8); } }
.hero__headline { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,6vw,5.5rem); font-weight:300; line-height:1.08; color:var(--white); margin-bottom:1.25rem; }
.hero__headline em { font-style:italic; color:var(--gold-l); }
.hero__tagline { font-size:1rem; color:rgba(255,255,255,.75); font-weight:300; line-height:1.8; max-width:500px; margin-bottom:2.5rem; }
.hero__actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero__stats { position:absolute; bottom:0; left:0; right:0; z-index:4; display:flex; justify-content:center; padding:0 5rem; }
.stats-bar { display:flex; background:var(--white); border:1px solid var(--border); border-bottom:none; border-radius:6px 6px 0 0; box-shadow:0 -8px 40px var(--shadow); overflow:hidden; max-width:880px; width:100%; }
.stat { flex:1; padding:1.4rem 2rem; text-align:center; border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat__num { font-family:'Cormorant Garamond',serif; font-size:2.1rem; font-weight:600; color:var(--brown); line-height:1; display:block; }
.stat__lbl { font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-soft); margin-top:.3rem; display:block; }

/* BOOKING WIDGET */
.booking-section { background:var(--white); padding:0 5rem 4rem; }
.booking-box { max-width:1240px; margin:0 auto; border:1px solid var(--border); border-radius:6px; overflow:hidden; box-shadow:0 8px 40px var(--shadow); }
.booking-box__head { background:var(--dark); padding:1.75rem 2.5rem; }
.booking-box__title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:400; color:var(--white); }
.booking-box__sub { font-size:.82rem; color:rgba(255,255,255,.45); margin-top:.25rem; }
.booking-form { display:grid; grid-template-columns:repeat(5,1fr) auto; background:var(--cream); }
.booking-form__field { padding:1.4rem 1.8rem; border-right:1px solid var(--border); cursor:pointer; transition:background .2s; }
.booking-form__field:hover { background:var(--gold-pale); }
.booking-form__field label { display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.45rem; font-weight:500; }
.booking-form__field select,.booking-form__field input { width:100%; background:transparent; border:none; outline:none; font-family:'Outfit',sans-serif; font-size:.88rem; color:var(--text); cursor:pointer; appearance:none; }
.booking-form__hint { font-size:.68rem; color:var(--text-soft); margin-top:.2rem; display:block; }
.booking-form__submit { background:var(--gold); border:none; cursor:pointer; font-family:'Outfit',sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--white); padding:0 2rem; display:flex; align-items:center; gap:.5rem; transition:background .2s; white-space:nowrap; }
.booking-form__submit:hover { background:var(--brown); }

/* PACKAGES GRID */
.packages-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; }
.pkg-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:all .3s; display:flex; flex-direction:column; }
.pkg-card:hover { border-color:var(--border-md); transform:translateY(-5px); box-shadow:0 16px 48px var(--shadow); }
.pkg-card__img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; }
.pkg-card__img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .55s; }
.pkg-card:hover .pkg-card__img-wrap img { transform:scale(1.04); }
.pkg-card__days { position:absolute; top:1rem; right:1rem; background:rgba(28,16,8,.75); color:var(--sand); font-size:.7rem; padding:.25rem .7rem; border-radius:2px; border:1px solid rgba(184,147,90,.3); }
.pkg-card__body { padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.pkg-card__name { font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:400; color:var(--text); margin-bottom:.5rem; }
.pkg-card__name a { color:var(--text); text-decoration:none; }
.pkg-card__name a:hover { color:var(--gold); }
.pkg-card__desc { font-size:.8rem; color:var(--text-soft); line-height:1.72; flex:1; margin-bottom:1rem; }
.pkg-card__footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:1rem; }
.pkg-card__from { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); display:block; }
.pkg-card__amount { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:600; color:var(--brown); line-height:1; }
.pkg-card__pp { font-size:.68rem; color:var(--text-soft); }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-grid__media { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; }
.about-grid__media img { width:100%; height:100%; object-fit:cover; }
.about-quote { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-style:italic; color:rgba(255,255,255,.88); line-height:1.75; border-left:2px solid var(--gold); padding-left:1.5rem; margin:2rem 0; }
.about-quote cite { display:block; font-size:.82rem; font-style:normal; color:var(--gold-l); margin-top:.75rem; }

/* CUSTOMISATION */
.custom-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }
.custom-card { background:var(--cream2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; transition:all .3s; }
.custom-card:hover { background:var(--white); border-color:var(--border-md); transform:translateY(-3px); box-shadow:0 8px 28px var(--shadow); }
.custom-card__icon { font-size:1.8rem; margin-bottom:.6rem; display:block; }
.custom-card__title { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:400; color:var(--text); margin-bottom:.35rem; }
.custom-card__desc { font-size:.78rem; color:var(--text-soft); line-height:1.65; }

/* CTA ACTIONS */
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* FORM SUCCESS */
.form-success { text-align:center; padding:3rem 1rem; }
.form-success__icon { font-size:3rem; margin-bottom:1rem; }
.form-success h3 { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--text); margin-bottom:.5rem; }
.form-success p  { color:var(--text-soft); line-height:1.8; }

/* FIELD ERROR */
.field-error { color:var(--red); font-size:.72rem; margin-top:.3rem; display:block; }
.input--error { border-color:var(--red)!important; }

/* REVEAL */
/* Reveal animation: starts hidden only when JS marks body as JS-ready */
.js-ready .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.js-ready .revealed { opacity:1; transform:translateY(0); }
/* Elements already in viewport at load get revealed immediately */
.reveal-instant { opacity:1 !important; transform:none !important; }

/* FOOTER */
.footer { background:var(--dark); border-top:3px solid var(--gold); }
.footer__inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3.5rem; padding:4.5rem 5rem 3.5rem; }
/* Logo container — adds a subtle glow ring so the light logo pops */
.footer__logo-wrap { display:inline-block; padding:.5rem; border-radius:8px; background:rgba(184,147,90,.08); border:1px solid rgba(184,147,90,.2); margin-bottom:.5rem; }
.footer__logo-wrap img { display:block; max-width:160px; height:auto; }
.footer__desc { font-size:.8rem; color:rgba(255,255,255,.82); line-height:1.8; margin:1rem 0; }
.footer__contacts { display:flex; flex-direction:column; gap:.5rem; }
.footer__contacts a,
.footer__contacts span { display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.78); font-size:.78rem; transition:color .2s; }
.footer__contacts a:hover { color:var(--gold-l); }
.footer__contacts svg { flex-shrink:0; opacity:.7; }
.footer__social { display:flex; gap:.6rem; margin-top:1.25rem; }
.footer__social a { width:34px; height:34px; border:1px solid rgba(184,147,90,.3); border-radius:4px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:all .2s; }
.footer__social a:hover { border-color:var(--gold); color:var(--gold); background:rgba(184,147,90,.12); }
.footer__col h4 { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer__col ul { display:flex; flex-direction:column; gap:.52rem; }
.footer__col a { color:rgba(255,255,255,.76); font-size:.8rem; transition:color .2s; }
.footer__col a:hover { color:var(--gold-l); }
/* Bottom bar */
.footer__bottom { border-top:1px solid rgba(184,147,90,.18); max-width:1240px; margin:0 auto; padding:1.2rem 5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer__bottom p { font-size:.68rem; color:rgba(255,255,255,.55); }
/* Accreditation badges with icons */
.footer__accreds { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.footer__badge { display:flex; align-items:center; gap:.45rem; padding:.35rem .75rem .35rem .5rem; border:1px solid rgba(184,147,90,.3); border-radius:4px; background:rgba(184,147,90,.07); transition:background .2s; }
.footer__badge:hover { background:rgba(184,147,90,.15); border-color:rgba(184,147,90,.6); }
.footer__badge-icon { width:18px; height:18px; flex-shrink:0; }
.footer__badge span { font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); white-space:nowrap; font-weight:500; }

/* RESPONSIVE */
@media(max-width:1100px) {
  .nav { padding:0 2rem; }
  .nav__links { display:none; }
  .nav__hamburger { display:flex; }
  .section { padding:4rem 2rem; }
  .booking-section { padding:0 2rem 3rem; }
  .booking-form { grid-template-columns:1fr 1fr; }
  .hero__content { padding:7rem 2rem 5rem; }
  .hero__stats { padding:0 2rem; }
  .about-grid { grid-template-columns:1fr; gap:3rem; }
  .packages-grid { grid-template-columns:1fr 1fr; }
  .custom-grid { grid-template-columns:1fr 1fr; }
  .footer__inner { grid-template-columns:1fr 1fr; gap:2rem; padding:3rem 2rem; }
  .footer__bottom { padding:1.2rem 2rem; flex-direction:column; text-align:center; }
  .footer__accreds { justify-content:center; }
  .stats-bar { width:calc(100% - 4rem); }
}
@media(max-width:680px) {
  .packages-grid { grid-template-columns:1fr; }
  .booking-form { grid-template-columns:1fr; }
  .custom-grid { grid-template-columns:1fr; }
  .footer__inner { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; text-align:center; gap:.75rem; }
  .hero__headline { font-size:2.8rem; }
  .stats-bar { flex-wrap:wrap; }
  .stat { min-width:50%; }
}

/* ── Customer Account Pages (registration / login / my bookings) ──────── */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table thead th { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); padding:.75rem 1.25rem; text-align:left; border-bottom:1px solid var(--border); font-weight:600; white-space:nowrap; }
.data-table tbody tr { border-bottom:1px solid rgba(184,147,90,.1); }
.data-table tbody tr:last-child { border-bottom:none; }
.data-table td { padding:.85rem 1.25rem; font-size:.82rem; color:var(--text-mid); }
.status { display:inline-flex; align-items:center; font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .6rem; border-radius:2px; }
.status--inquiry,.status--new       { background:rgba(184,147,90,.15); color:var(--gold-l); }
.status--quoted,.status--contacted  { background:rgba(91,143,212,.15); color:#5B8FD4; }
.status--confirmed,.status--paid,.status--completed { background:rgba(76,175,130,.15); color:#4CAF82; }
.status--deposit_paid               { background:rgba(76,175,130,.1);  color:#6fcca0; }
.status--in_progress                { background:rgba(224,145,58,.15); color:#E0913A; }
.status--cancelled,.status--failed,.status--lost,.status--refunded { background:rgba(224,87,87,.15); color:#E05757; }
.form-group label { display:block; margin-bottom:.3rem; }

/* ── Page Hero (inner pages) ────────────────────────────────────── */
.page-hero { position:relative; width:100%; height:420px; max-height:420px; display:flex; align-items:flex-end; overflow:hidden; background:#1a3a2e; }
.page-hero--medium { height:500px; max-height:500px; }
.page-hero--tall   { height:580px; max-height:580px; }
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center top; z-index:0; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.1) 100%); z-index:1; }
.page-hero-content { position:relative; z-index:2; padding:3rem 5%; padding-top:calc(var(--nav-h) + 2rem); width:100%; color:#fff; }
.page-hero-content .eyebrow { color:var(--gold-l); }
.page-hero-content h1 { color:#fff; font-size:clamp(2rem,5vw,3.2rem); }
@media(max-width:768px){ .page-hero { min-height:38vh; } .page-hero-content { padding:2rem 1.25rem; padding-top:calc(var(--nav-h) + 1rem); } }

/* ── Performance: prevent CLS on lazy images ───────────────────── */
.pkg-card__img-wrap img,
.blog-card img,
.carousel-img { aspect-ratio: 16/9; width:100%; height:auto; object-fit:cover; }
.pkg-card__img-wrap { overflow:hidden; aspect-ratio:16/9; }
/* ── Package card image height fix ─────────────────────────────── */
.pkg-card__img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }


/* ── WebP background images via @supports ────────────────────────
   When the browser supports WebP, serve .webp instead of .jpg
   This is the CSS approach that doesn't require markup changes ── */
@supports (background-image: url("data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=")) {
    .hero__bg--serengeti   { background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.65)),url('/assets/images/hero-serengeti.webp') !important; }
    .hero__bg--migration   { background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.65)),url('/assets/images/hero-migration.webp') !important; }
    .hero__bg--kilimanjaro { background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.65)),url('/assets/images/hero-sunset.webp') !important; }
    .hero__bg--culture     { background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.65)),url('/assets/images/hero-culture.webp') !important; }
    .hero__bg--elephant    { background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.65)),url('/assets/images/hero-elephant.webp') !important; }
}

/* ════════════════════════════════════════════════════════════════
   CONTRAST & COLOUR FIXES — no white on light backgrounds
   ════════════════════════════════════════════════════════════════ */

/* Buttons on light backgrounds must have dark/gold text, not white */
.btn--outline-dark  { color:var(--brown)!important; background:transparent; border:2px solid var(--border-md)!important; }
.btn--outline-dark:hover { color:#fff!important; background:var(--gold)!important; border-color:var(--gold)!important; }

/* Nav CTA button — gold bg, white text — fine */
.nav__link--cta { background:var(--gold)!important; color:#fff!important; border-radius:3px; padding:.55rem 1.25rem!important; }
.nav__link--cta:hover { background:var(--brown)!important; color:#fff!important; }

/* Section leads — only white when actually on dark bg */
.section--dark  .section__lead, .section--dark  p, .section--dark  h2 { color:rgba(255,255,255,.88); }
.section--brown .section__lead, .section--brown p, .section--brown h2 { color:rgba(255,255,255,.88); }
.section--cream .section__lead, .section--cream2 .section__lead { color:var(--text-mid); }
.section__lead--light { color:rgba(255,255,255,.75)!important; } /* only used inside .section--dark */

/* Stat numbers/labels — gold on cream, NOT white */
.stat__num { color:var(--gold)!important; }
.stat__lbl { color:var(--text-soft)!important; }

/* ── BOOKING SIDEBAR BELOW PACKAGE STATS — dark bg, white is fine ── */
.booking-box__sub { color:rgba(255,255,255,.72)!important; }

/* Eyebrow on light pages */
.eyebrow { color:var(--gold)!important; }
.eyebrow--light { color:var(--gold-l)!important; } /* inside dark heroes */

/* Ensure all pkg-card text is dark */
.pkg-card { background:#fff; color:var(--text); }
.pkg-card__name, .pkg-card__name a { color:var(--text)!important; }
.pkg-card__desc { color:var(--text-soft)!important; }
.pkg-card__footer .btn--small { color:#fff!important; background:var(--gold); }
.pkg-card__footer .btn--small:hover { background:var(--brown); }

/* ════════════════════════════════════════════════════════════════
   FULL RESPONSIVE — mobile-first improvements
   ════════════════════════════════════════════════════════════════ */

/* Fluid type scale */
h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); }

/* Nav — collapse at 900px */
@media (max-width: 900px) {
  .nav { padding: 0 1.25rem; }
  .nav__links { display: none!important; }
  .nav__hamburger { display: flex!important; }
}
@media (min-width: 901px) {
  .nav__hamburger { display: none!important; }
  .nav__links { display: flex!important; }
}

/* Hero slider — responsive */
@media (max-width: 768px) {
  .hero-slider-outer { height: 100svh; min-height: 480px; }
  .hs-content { padding: 0 1.25rem 0; }
  .hs-h1 { font-size: clamp(1.6rem, 7vw, 2.5rem); }
  .hs-body { font-size: .88rem; }
  .hs-actions { flex-direction: column; gap: .6rem; }
  .hs-btn { text-align: center; justify-content: center; }
  .hs-arrow { display: none; }
  .hs-stats { grid-template-columns: repeat(2, 1fr); }
  .hs-stat:nth-child(2) { border-right: none; }
}

/* Packages grid — responsive */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .packages-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* Package show — stack on mobile */
@media (max-width: 768px) {
  .pkg-detail-grid { display: block!important; }
  .pkg-detail-grid > div:last-child { margin-top: 1.5rem; }
  .pkg-detail-grid > div:last-child > div { position: static!important; }
}

/* Blog grid — responsive */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
}
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* Booking wizard — responsive */
@media (max-width: 640px) {
  .wiz-steps { flex-wrap: wrap; }
  .wiz-step { font-size: .68rem; padding: .5rem .25rem; }
  #bookingWizard { padding: 1.25rem; }
  .wiz-nav { flex-direction: column; }
  .wiz-btn { width: 100%; text-align: center; justify-content: center; }
}

/* Section padding responsive */
@media (max-width: 768px) {
  .section { padding: 3rem 1.25rem; }
  .section__inner { padding: 0; }
}
@media (max-width: 480px) {
  .section { padding: 2rem 1rem; }
}

/* Footer — responsive */
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr!important; gap: 2rem!important; }
  .footer__grid > div:first-child { grid-column: 1/-1; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr!important; }
}

/* Stats bar on homepage */
@media (max-width: 480px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr)!important; }
}

/* Destinations grid */
@media (max-width: 600px) {
  .destinations-grid { grid-template-columns: 1fr!important; }
}

/* Dashboard KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Admin sidebar — always scrollable */
.sidebar { height: 100vh; max-height: 100vh; overflow-y: auto; overflow-x: hidden; }

/* Images always fluid */
img { max-width: 100%; height: auto; }
.pkg-card__img-wrap img,
.pkg-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* Table responsive wrapper */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Remove any hardcoded pixel widths that break on small screens */
@media (max-width: 480px) {
  [style*="max-width:"] { max-width: 100%!important; }
  [style*="min-width:"] { min-width: 0!important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr!important; }
}


/* Responsive page hero banners */
@media (max-width: 900px) {
  .page-hero, .page-hero--medium { height: 340px; max-height: 340px; }
  .page-hero--tall { height: 420px; max-height: 420px; }
}
@media (max-width: 600px) {
  .page-hero, .page-hero--medium, .page-hero--tall { height: 280px; max-height: 280px; }
  .page-hero-content h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
}