/* ================================================================
   ZEST CEYLON TOURS — stylesheet
   Pure CSS + HTML, no JavaScript anywhere.
   Edit the CSS variables below to re-theme the whole site at once.

   Fonts are loaded from index.html's <head> (a <link rel="stylesheet">,
   not an @import here) — @import blocks CSS parsing until it finishes
   fetching, so it's deliberately kept out of this file. If you ever add
   a new font weight, add it to that <link>'s URL, not here.
   ================================================================ */

:root{
  --teal:        #0E6670;
  --teal-dark:   #094950;
  --teal-dim:    #0a3d44;
  --navy:        #0D2535;
  --amber:       #C97B2E;
  --amber-soft:  #D4915A;
  --stone:       #F5F4F1;
  --mist:        #ECEAE5;
  --ink:         #1C2B33;
  --slate:       #4A5B65;
  --pale:        #8A9BA5;
  --whatsapp:    #25A244;
  --whatsapp-dark:#1d8a39;

  /* How fast the reviews strip scrolls — raise this if you add more
     reviews and want the pace to stay the same (bigger number = slower). */
  --review-speed: 34s;

  --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
ul{margin:0;padding:0;list-style:none;}
::-webkit-scrollbar{width:0;}

.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.font-display{font-family:var(--font-display);}

/* ---------- Section backgrounds ---------- */
.section-teal{background:var(--teal-dark);border-top:1px solid rgba(255,255,255,.08);}
/* Softens the hard cut from the hero photo straight into the solid
   teal stats bar with a subtle diagonal seam, without touching the
   stats bar's own content/padding. */
.hero + .section-teal{position:relative;border-top:none;}
.hero + .section-teal::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;height:36px;
  background:var(--teal-dark);
  clip-path:polygon(0 100%, 100% 40%, 100% 100%);
}
.section-stone{background:var(--stone);border-top:1px solid rgba(14,102,112,.08);}
.section-white{background:#fff;border-top:1px solid rgba(14,102,112,.08);}
.section-mist{background:var(--mist);border-top:1px solid rgba(14,102,112,.08);}
.section-navy{background:var(--navy);border-top:1px solid rgba(255,255,255,.08);}

section{padding:80px 24px;}
.section-inner{max-width:1280px;margin:0 auto;}
.section-head{text-align:center;margin-bottom:56px;}
.section-label{
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);
  display:block;margin-bottom:12px;
}
.section-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,4vw,2.25rem);color:var(--navy);margin:0;line-height:1.25;}
.section-head p{color:var(--slate);font-size:.9rem;margin-top:12px;max-width:420px;margin-left:auto;margin-right:auto;font-weight:300;}

/* ================= NAV ================= */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid rgba(14,102,112,.1);
  isolation:isolate;
}
/* ---------- Scroll progress bar, pure CSS ----------
   Grows from 0 to full width as the page scrolls top to bottom,
   using the browser's native scroll-driven animation timeline. */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:100;
  background:linear-gradient(90deg,var(--teal),var(--amber));
  transform-origin:left center;
  transform:scaleX(0);
  animation-name:scrollProgress;
  animation-timing-function:linear;
  animation-fill-mode:both;
  animation-timeline:scroll(root);
}
@keyframes scrollProgress{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
/* Base nav background — a plain solid fallback. The "REWORK THEME"
   block further down (search "White-tinted glass nav") overrides this
   with the actual translucent/blurred look; this rule just guarantees
   something sensible is painted before that cascade applies, and is
   what stays in effect if that block is ever removed. */
.site-nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#F5F4F1;
}
.nav-inner{max-width:1280px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;}
.brand-logo-link{display:flex;align-items:center;gap:10px;transition:transform .25s ease;}
.brand-logo-link:hover{transform:scale(1.03);}
.brand-logo{height:46px;width:auto;object-fit:contain;}
.brand-text{font-family:var(--font-display);line-height:1.05;text-align:left;}
.brand-text .l1{display:block;font-weight:800;font-size:1.05rem;color:var(--teal);letter-spacing:.01em;}
.brand-text .l2{display:block;font-weight:700;font-size:.68rem;color:var(--amber);letter-spacing:.32em;text-transform:uppercase;margin-top:1px;}
.nav-links{display:none;align-items:center;gap:32px;}
.nav-links a:not(.btn){position:relative;color:var(--slate);font-size:.85rem;font-weight:500;transition:color .2s;}
.nav-links a:not(.btn)::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:var(--teal);transition:width .25s;}
.nav-links a:not(.btn):hover{color:var(--teal);}
.nav-links a:not(.btn):hover::after{width:100%;}

.burger{display:flex;flex-direction:column;gap:6px;padding:8px;cursor:pointer;grid-area:1/1;z-index:1;}
.burger span{display:block;width:20px;height:2px;background:var(--teal);transition:transform .25s, opacity .2s;}
.site-nav:has(#mobileMenu:target) .burger span:nth-child(1){transform:rotate(45deg) translate(4px,5px);}
.site-nav:has(#mobileMenu:target) .burger span:nth-child(2){opacity:0;}
.site-nav:has(#mobileMenu:target) .burger span:nth-child(3){transform:rotate(-45deg) translate(4px,-5px);}
/* Real close hit-target, stacked exactly on the burger's grid cell; only
   reachable (and only needed) once the menu is actually open. z-index:2
   is needed because the burger's own rotated spans (transform:rotate)
   create their own stacking context that would otherwise paint above
   this despite coming later in the source. */
.burger-stack{display:grid;}
.menu-close{grid-area:1/1;display:none;z-index:2;}
.site-nav:has(#mobileMenu:target) .menu-close{display:block;}
.mobile-menu{display:none;flex-direction:column;gap:16px;background:#fff;border-top:1px solid #eee;padding:20px 24px;}
#mobileMenu:target{display:flex;}
.mobile-menu a.link{font-size:.9rem;font-weight:500;color:var(--slate);}
.mobile-menu a.link:hover{color:var(--teal);}

/* ================= BUTTONS ================= */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;font-weight:500;letter-spacing:.02em;border-radius:999px;padding:13px 26px;transition:background .25s, transform .2s, box-shadow .25s, color .25s, border-color .25s;white-space:nowrap;overflow:hidden;isolation:isolate;transform:translateZ(0);}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);transform:translateX(-120%);transition:transform .6s ease;}
.btn:hover::before{transform:translateX(120%);}
.btn-sm::before{content:none;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,102,112,.25);}
.btn-ghost{border:1.5px solid rgba(14,102,112,.4);color:var(--teal);background:transparent;}
.btn-ghost:hover{border-color:var(--teal);background:var(--teal);color:#fff;}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.85);color:#fff;background:rgba(6,44,49,.4);text-shadow:0 1px 6px rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.btn-ghost-light:hover{background:#fff;color:var(--teal-dark);border-color:#fff;text-shadow:none;}
.btn-wa{background:var(--whatsapp);color:#fff;}
.btn-wa:hover{background:var(--whatsapp-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,162,68,.3);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px;font-size:.75rem;border-radius:12px;}

/* ================= HERO ================= */
.hero{position:relative;min-height:640px;height:100vh;display:flex;align-items:center;overflow:hidden;}
.hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:kenBurns 22s ease-in-out infinite alternate;transform-origin:center;}
@keyframes kenBurns{from{transform:scale(1);}to{transform:scale(1.08);}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(115deg, rgba(6,44,49,.94) 0%, rgba(9,73,80,.82) 42%, rgba(9,73,80,.5) 68%, rgba(9,73,80,.32) 100%);}
.hero-content{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:80px 24px 0;width:100%;}
.hero-inner{max-width:480px;}
.hero-inner .section-label{color:#7DD9E0;text-shadow:0 2px 10px rgba(0,0,0,.35);}
.hero-inner h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,7vw,4rem);line-height:1.05;color:#fff;margin:16px 0;text-shadow:0 2px 18px rgba(0,0,0,.4);}
.hero-sub{color:rgba(255,255,255,.9);font-size:1rem;line-height:1.7;margin:0 0 32px;max-width:340px;font-weight:300;text-shadow:0 1px 10px rgba(0,0,0,.35);}
.hero-sub strong{color:#fff;font-weight:500;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;}
.trust-row span{font-size:.72rem;color:rgba(255,255,255,.78);letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px;text-shadow:0 1px 6px rgba(0,0,0,.35);}
.trust-row svg{color:#7DD9E0;flex-shrink:0;}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.5;animation:bounceY 1.8s ease-in-out infinite;}
.scroll-hint .bar{width:1px;height:32px;background:#fff;}
.scroll-hint svg{display:block;}
@keyframes bounceY{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}

/* ================= STATS ================= */
.stats-grid{max-width:900px;margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px;text-align:center;}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.stat-val{font-family:var(--font-display);font-weight:800;font-size:clamp(1.75rem,4vw,2.25rem);color:#fff;line-height:1;transition:color .3s ease;}
.stat-label{color:rgba(255,255,255,.55);font-size:.72rem;letter-spacing:.03em;margin-top:8px;font-weight:300;}
.stat-block{transition:transform .3s ease;}
.stat-block:hover{transform:translateY(-4px);}
.stat-block:hover .stat-val{color:var(--amber-soft);}

/* ---------- Count-up numbers ----------
   Each number is driven by one custom property: set --target to
   whatever value you want on the <span class="stat-count"> — that's
   still the only thing to edit to change a number, see README.

   Default state (no JS, or JS hasn't run yet) shows the final target
   number straight away — never a frozen "0". The actual 0→target
   count-up only runs once JS (see index.html, near </body>) confirms
   the page can animate AND an IntersectionObserver confirms this
   stat has scrolled into view, by adding "js-anim" to <html> and
   "is-visible" to the element. That keeps the counter from finishing
   its count before the visitor has even scrolled to it. */
@property --num{
  syntax:'<integer>';
  inherits:false;
  initial-value:0;
}
.stat-count{
  --num:var(--target);
  counter-reset:num var(--num);
}
.stat-count::before{content:counter(num);}
html.js-anim .stat-count{--num:0;}
html.js-anim .stat-count.is-visible{animation:countUp 1.8s ease-out forwards;}
@keyframes countUp{
  from{--num:0;}
  to{--num:var(--target);}
}
.delay-1 .stat-count{animation-delay:.15s;}
.delay-2 .stat-count{animation-delay:.3s;}
.delay-3 .stat-count{animation-delay:.45s;}
.delay-4 .stat-count{animation-delay:.6s;}

/* ================= BOOK STEPS ================= */
.book-box{max-width:560px;margin:0 auto;text-align:center;}
.book-box p.lede{color:var(--slate);font-size:.9rem;line-height:1.75;max-width:380px;margin:0 auto 32px;font-weight:300;}
.book-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.book-steps{display:flex;justify-content:center;gap:40px;margin-top:40px;flex-wrap:wrap;}
.book-step{text-align:center;}
.book-step .num{width:28px;height:28px;border-radius:50%;border:2px solid var(--teal);color:var(--teal);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.book-step p{font-size:.75rem;color:var(--slate);font-weight:500;margin:0;}

.teal-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(14,102,112,.3),transparent);}

/* ================= CARDS (fleet / tours / reviews) ================= */
.card{background:#fff;border:1px solid rgba(14,102,112,.08);border-radius:16px;box-shadow:0 2px 10px rgba(13,37,53,.05);transition:box-shadow .3s, transform .3s, border-color .3s;}
.card:hover{box-shadow:0 12px 40px rgba(14,102,112,.14);transform:translateY(-4px);border-color:rgba(14,102,112,.18);}

.fleet-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:640px){.fleet-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.fleet-grid{grid-template-columns:repeat(4,1fr);}}
.fleet-card{overflow:hidden;display:flex;flex-direction:column;}
.fleet-img{position:relative;height:176px;background:var(--mist);overflow:hidden;}
.fleet-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1);}
.fleet-card:hover .fleet-img img{transform:scale(1.06);}
.fleet-tag{position:absolute;top:12px;left:12px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;border-radius:999px;padding:4px 10px;}
.fleet-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.fleet-body h3{font-size:1rem;font-weight:600;color:var(--navy);margin:0 0 4px;}
.fleet-meta{font-size:.75rem;color:var(--pale);margin:0 0 14px;}
.fleet-features{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.feature-pill{font-size:.65rem;font-weight:500;letter-spacing:.03em;border:1px solid rgba(14,102,112,.2);color:var(--teal);border-radius:999px;padding:2px 10px;}
.fleet-body .btn{margin-top:auto;}

/* ================= WHY US ================= */
.why-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(3,1fr);}}
.why-card{border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,.08);transition:border-color .3s, background .3s, transform .3s;}
.why-card:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);transform:translateY(-3px);}
.why-card .icon-wrap{
  width:42px;height:42px;border-radius:11px;
  background:rgba(201,123,46,.14);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s;
}
.why-card:hover .icon-wrap{transform:rotate(8deg) scale(1.08);background:rgba(201,123,46,.22);}
.why-card h3{color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.02em;margin:0 0 8px;}
.why-card p{color:rgba(255,255,255,.5);font-size:.85rem;line-height:1.7;margin:0;font-weight:300;}

/* ---- Services (light cards, mirrors why-card layout on a white section) ---- */
.services-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr);}}
.service-card{padding:28px 24px;}
.service-card .service-icon{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:rgba(14,102,112,.08);color:var(--teal);margin-bottom:18px;transition:transform .3s, background .3s;
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(13,37,53,.09);}
.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.08);background:rgba(201,123,46,.14);color:var(--amber);}
.service-card h3{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 8px;}
.service-card p{color:var(--slate);font-size:.85rem;line-height:1.7;margin:0;font-weight:300;}

/* ================= DESTINATIONS ================= */
.dest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:768px){.dest-grid{grid-template-columns:repeat(3,1fr);}}
.dest-item{position:relative;border-radius:16px;overflow:hidden;background:var(--mist);min-height:210px;}
.dest-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.dest-item:hover img{transform:scale(1.06);}
.dest-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(9,73,80,.78), transparent 65%);}
.dest-info{position:absolute;bottom:0;left:0;right:0;padding:16px;z-index:1;}
.dest-info h3{color:#fff;font-size:.9rem;font-weight:600;margin:0 0 2px;}
.dest-info p{color:rgba(255,255,255,.6);font-size:.72rem;margin:0;font-weight:300;}

/* ================= TOURS ================= */
.tours-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:768px){.tours-grid{grid-template-columns:repeat(3,1fr);}}
.tour-card{padding:28px;display:flex;flex-direction:column;height:100%;}
.tour-top{display:flex;align-items:flex-start;margin-bottom:20px;}
.tour-tag{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 10px;color:#fff;}
.tour-card h3{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.15rem;margin:0 0 16px;}
.tour-card ul{margin-bottom:28px;flex:1;display:flex;flex-direction:column;gap:10px;}
.tour-card li{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--slate);}
.tour-card li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber);flex-shrink:0;}
.tours-note{text-align:center;color:var(--pale);font-size:.75rem;margin-top:32px;font-weight:300;}

/* ================= REVIEWS — auto-cycling marquee, pure CSS =================
   How to add more reviews: just add another .review-card inside BOTH
   copies inside .reviews-track — marked "COPY 1" and "COPY 2" in
   index.html, identical on purpose (see the HTML comment above the
   reviews section for why there are two). The more cards you add, the
   longer the loop automatically gets; you
   never need to touch the CSS or timing. */
.reviews-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.reviews-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:reviewCycle var(--review-speed, 42s) linear infinite;
}
.reviews-viewport:hover .reviews-track{animation-play-state:paused;}
@keyframes reviewCycle{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.review-card{
  padding:28px;
  display:flex;
  flex-direction:column;
  width:340px;
  flex:0 0 auto;
}
.stars{color:var(--amber);font-size:.85rem;letter-spacing:1px;margin-bottom:16px;}
.review-text{color:var(--slate);font-size:.875rem;line-height:1.75;font-style:italic;font-weight:300;flex:1;margin:0 0 24px;}
.reviewer{display:flex;align-items:center;gap:12px;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.reviewer .name{font-size:.85rem;font-weight:600;color:var(--navy);margin:0;}
.reviewer .from{font-size:.72rem;color:var(--pale);margin:0;}
@media (prefers-reduced-motion: reduce){
  .reviews-track{animation:none;}
  .reviews-viewport{overflow-x:auto;}
}

/* ================= CTA ================= */
.section-navy{position:relative;overflow:hidden;}
.section-navy::before{
  content:'';position:absolute;left:50%;top:50%;width:640px;height:640px;
  background:radial-gradient(circle, rgba(201,123,46,.18) 0%, transparent 70%);
  transform:translate(-50%,-50%);
  animation:ctaGlow 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaGlow{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}}
.cta-box{position:relative;max-width:520px;margin:0 auto;text-align:center;}
.cta-box .section-label{color:#7DD9E0;}
.cta-box h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,4vw,2.25rem);color:#fff;margin:0 0 16px;line-height:1.3;}
.cta-box h2 span{color:var(--amber);}
.cta-box p{color:rgba(255,255,255,.5);font-size:.875rem;line-height:1.7;max-width:340px;margin:0 auto 32px;font-weight:300;}
/* .cta-box p (margin:0 auto 32px) has higher specificity (class+element)
   than a lone .cta-note class, so it was silently overriding margin-top
   here — the 70px gap never actually applied. Scoping under .cta-box
   raises specificity enough to win, restoring the intended spacing. */
.cta-box .cta-note{color:rgba(255,255,255,.3);font-size:.72rem;margin-top:70px;font-weight:300;}

.back-to-top{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:56px;color:rgba(255,255,255,.4);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s;
}
.back-to-top:hover{color:#7DD9E0;}
.back-to-top .chevron{animation:chevronBounce 1.8s ease-in-out infinite;}
@keyframes chevronBounce{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-6px);opacity:1;}}

/* ================= FOOTER ================= */
footer{background:var(--navy);padding:56px 24px 40px;border-top:1px solid rgba(255,255,255,.06);}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:28px;align-items:center;text-align:center;}
@media(min-width:768px){.footer-inner{flex-direction:row;justify-content:space-between;text-align:left;}}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:14px;}
@media(min-width:768px){.footer-brand{align-items:flex-start;}}
.footer-logo-row{display:flex;align-items:center;gap:10px;}
.footer-logo{height:42px;width:auto;object-fit:contain;display:block;}
.footer-brand-text{font-family:var(--font-display);line-height:1.05;text-align:left;}
.footer-brand-text .l1{display:block;font-weight:800;font-size:1rem;color:#fff;letter-spacing:.01em;}
.footer-brand-text .l2{display:block;font-weight:700;font-size:.64rem;color:var(--amber-soft);letter-spacing:.3em;text-transform:uppercase;margin-top:1px;}
.social-links{display:flex;gap:10px;}
.social-btn{
  width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);
  font-family:var(--font-display);font-weight:700;font-size:.62rem;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.18);
  transition:color .25s, border-color .25s, background .25s, transform .25s;
}
.social-btn:hover{color:var(--navy);background:var(--amber-soft);border-color:var(--amber-soft);transform:translateY(-3px) scale(1.08);}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;}
.footer-links a{font-size:.72rem;color:rgba(255,255,255,.35);font-weight:300;transition:color .2s;}
.footer-links a:hover{color:rgba(255,255,255,.7);}
.footer-copy{font-size:.72rem;color:rgba(255,255,255,.25);font-weight:300;margin:0;}
.footer-credit{color:rgba(255,255,255,.4);text-decoration:underline;text-underline-offset:2px;transition:color .2s;}
.footer-credit:hover{color:var(--amber-soft);}
.footer-contact{display:flex;flex-direction:column;gap:4px;margin-top:2px;}
.footer-contact a{font-size:.72rem;color:rgba(255,255,255,.45);font-weight:300;transition:color .2s;}
.footer-contact a:hover{color:var(--amber-soft);}

/* ================= FLOATING WHATSAPP ================= */
.float-wa{position:fixed;bottom:24px;right:24px;z-index:60;width:52px;height:52px;border-radius:50%;background:var(--whatsapp);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,162,68,.4);transition:transform .2s, box-shadow .2s;animation:floatY 3s ease-in-out infinite;}
.float-wa:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(37,162,68,.45);animation-play-state:paused;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

@media(min-width:768px){
  .nav-links{display:flex;}
  .burger-stack,.mobile-menu{display:none !important;}
}

/* ================================================================
   ANIMATIONS — pure CSS, run once as each element paints in.
   (No IntersectionObserver / JS: everything below fires on load,
   staggered with animation-delay so sections still feel sequential.)
   ================================================================ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeInLeft{
  from{opacity:0;transform:translateX(-30px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes fadeInRight{
  from{opacity:0;transform:translateX(30px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes popIn{
  from{opacity:0;transform:scale(.94);}
  to{opacity:1;transform:scale(1);}
}

/* Scroll-triggered reveals. Default state is fully visible, no
   animation — if JS doesn't run (or prefers-reduced-motion is on),
   content just sits there normally, never stuck invisible. Only once
   the early <head> script (see index.html) confirms it's safe to
   animate does it add "js-anim" to <html>, which is what the hidden
   starting state below is scoped under; "is-visible" (added per
   element by the IntersectionObserver near the end of <body>, the
   first time each one scrolls into view) then plays the actual
   animation from that hidden state. */
html.js-anim .reveal{opacity:0;}
html.js-anim .reveal-left{opacity:0;}
html.js-anim .reveal-right{opacity:0;}
html.js-anim .reveal-fade{opacity:0;}
html.js-anim .reveal-pop{opacity:0;}

html.js-anim .reveal.is-visible{animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both;}
html.js-anim .reveal-left.is-visible{animation:fadeInLeft .85s cubic-bezier(.22,1,.36,1) both;}
html.js-anim .reveal-right.is-visible{animation:fadeInRight .85s cubic-bezier(.22,1,.36,1) both;}
html.js-anim .reveal-fade.is-visible{animation:fadeIn 1s ease both;}
html.js-anim .reveal-pop.is-visible{animation:popIn .7s cubic-bezier(.22,1,.36,1) both;}

.delay-1{animation-delay:.08s;}
.delay-2{animation-delay:.16s;}
.delay-3{animation-delay:.24s;}
.delay-4{animation-delay:.32s;}
.delay-5{animation-delay:.4s;}
.delay-6{animation-delay:.48s;}

/* Hero entrance */
.hero-inner .section-label{animation:fadeUp .8s ease var(--zl-go) both;}
.hero-inner h1{animation:fadeUp .8s ease calc(var(--zl-go) + .1s) both;}
.hero-sub{animation:fadeUp .8s ease calc(var(--zl-go) + .2s) both;}
.hero-actions{animation:fadeUp .8s ease calc(var(--zl-go) + .3s) both;}
.trust-row{animation:fadeUp .8s ease calc(var(--zl-go) + .4s) both;}
.hero img.hero-bg{animation:fadeIn 1.3s ease both;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}


/* ================================================================
   PAGE LOADER — React Bits "LatticeLoader" (orbit, 3x3) in pure CSS.

   Timeline
     0 → --zl-dur   lattice orbits, progress line fills, timer counts up
     --zl-dur       grid flashes green, label swaps to "Ready in 3.0s"
     --zl-go        black curtain lifts, hero text rises in

   To change the length: edit --zl-dur below AND the "15" in @keyframes
   zl-tick (that is the duration in tenths of a second).
   ================================================================ */
:root{
  --zl-dur:1.5s;
  --zl-go:calc(var(--zl-dur) + .55s);
  --zl-green:#22c55e;
}

@property --zl-t{syntax:'<integer>';inherits:false;initial-value:0;}

/* ---------- Overlay ---------- */
.zl-loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 60% 50% at 50% 46%, rgba(14,102,112,.16), transparent 70%), #000;
  color:#fff;
  animation:zl-wipe .7s cubic-bezier(.77,0,.175,1) var(--zl-go) forwards;
}
.zl-inner{
  display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px;text-align:center;
  animation:zl-out .3s ease calc(var(--zl-go) - .12s) forwards;
}
.zl-inner > *{animation:zl-rise .7s cubic-bezier(.22,1,.36,1) both;}
.zl-inner > :nth-child(2){animation-delay:.12s;}
.zl-inner > :nth-child(3){animation-delay:.24s;}
.zl-inner > :nth-child(4){animation-delay:.4s;}

/* lock page scroll until the curtain has lifted */
html{animation:zl-unlock .001s linear calc(var(--zl-go) + .7s) both;}

/* ---------- Brand + supporting text ---------- */
.zl-brand{font-family:var(--font-display);line-height:1.05;}
.zl-l1{display:block;font-weight:800;font-size:clamp(1.9rem,6.5vw,2.7rem);letter-spacing:.01em;}
.zl-l2{display:block;margin-top:8px;padding-left:.45em;font-weight:700;font-size:.78rem;letter-spacing:.45em;text-transform:uppercase;color:var(--amber-soft);}
.zl-tag{font-size:.72rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);}

/* ---------- Progress line ---------- */
.zl-bar{width:min(190px,52vw);height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;}
.zl-bar::after{
  content:'';display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--teal),var(--zl-green));
  animation:zl-fill var(--zl-dur) cubic-bezier(.45,.05,.35,1) forwards;
}

/* ---------- LatticeLoader (from LatticeLoader.css, driven by time instead of status) ---------- */
.lattice-loader{
  --ll-cell:10px;--ll-gap:4px;--ll-font:14px;--ll-idle:.15;--ll-cycle:864ms;
  position:relative;display:inline-flex;align-items:center;gap:calc(var(--ll-font)*.7);
  font-family:var(--font-body);font-size:var(--ll-font);line-height:1;
}
.lattice-loader__grid{display:grid;flex:none;}
.lattice-loader__layer{grid-area:1/1;display:grid;grid-template-columns:repeat(3,var(--ll-cell));gap:var(--ll-gap);}
.lattice-loader__cell{width:var(--ll-cell);height:var(--ll-cell);border-radius:50%;background:#fff;opacity:var(--ll-idle);}

/* working: orbit */
.lattice-loader__run{animation:zl-hide .12s ease var(--zl-dur) forwards;}
.lattice-loader__run .lattice-loader__cell{animation:lattice-on var(--ll-cycle) cubic-bezier(.77,0,.175,1) infinite;}
.lattice-loader__run .lattice-loader__cell[data-hole]{animation:none;opacity:calc(var(--ll-idle)*.47);}

/* done: the whole 3x3 grid flashes green together */
.lattice-loader__mark .lattice-loader__cell{background:var(--zl-green);opacity:0;animation:zl-flash-on .6s ease var(--zl-dur) both;}

/* label + live timer */
.lattice-loader__label{display:inline-grid;font-weight:500;letter-spacing:.02em;}
.lattice-loader__text{grid-area:1/1;white-space:nowrap;}
.lattice-loader__text--work{animation:zl-text-out .2s ease var(--zl-dur) forwards;}
.lattice-loader__text--done{opacity:0;filter:blur(2px);animation:zl-text-in .25s ease var(--zl-dur) forwards;}
.lattice-loader__timer{
  min-width:3.4ch;opacity:.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(var(--ll-font)*.875);font-variant-numeric:tabular-nums;
  counter-reset:zs round(down,calc(var(--zl-t)/10),1) zd mod(var(--zl-t),10);
  animation:zl-tick var(--zl-dur) linear forwards;
}
.lattice-loader__timer::after{content:counter(zs) "." counter(zd) "s";}
.lattice-loader__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Keyframes ---------- */
@keyframes lattice-on{0%,100%{opacity:var(--ll-idle);}18%,42%{opacity:1;}62%{opacity:var(--ll-idle);}}
@keyframes zl-tick{from{--zl-t:0;}to{--zl-t:15;}}
@keyframes zl-fill{to{transform:scaleX(1);}}
@keyframes zl-hide{to{opacity:0;}}
@keyframes zl-flash-on{
  0%{opacity:0;transform:scale(.5);}
  30%{opacity:1;transform:scale(1.25);filter:drop-shadow(0 0 10px var(--zl-green));}
  100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 4px rgba(34,197,94,.5));}
}
@keyframes zl-text-out{to{opacity:0;filter:blur(2px);}}
@keyframes zl-text-in{to{opacity:1;filter:blur(0);}}
@keyframes zl-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes zl-out{to{opacity:0;transform:scale(.97);}}
@keyframes zl-wipe{from{transform:none;visibility:visible;}to{transform:translateY(-100%);visibility:hidden;}}
@keyframes zl-unlock{from{overflow-y:hidden;}to{overflow-y:auto;}}

/* ---------- Reduced motion: skip the loader ---------- */
@media (prefers-reduced-motion: reduce){
  :root{--zl-go:0s;}
  .zl-loader{display:none;}
  html{animation:none;}
}

/* ---------- Device tuning (loader + small site fixes) ---------- */
.zl-loader{
  will-change:transform;touch-action:none;overscroll-behavior:none;
  /* keep content clear of notches / rounded corners / home indicator */
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
@media (max-width:360px){                      /* small phones */
  .lattice-loader{--ll-cell:9px;--ll-gap:3px;--ll-font:13px;}
  .zl-inner{gap:22px;}
}
@media (max-height:480px){                     /* landscape phones */
  .zl-inner{gap:14px;padding:12px;}
  .zl-l1{font-size:1.6rem;}
  .zl-tag{display:none;}
}
@media (min-width:1280px){                     /* laptops / desktops */
  .lattice-loader{--ll-cell:12px;--ll-gap:5px;--ll-font:16px;}
  .zl-inner{gap:30px;}
  .zl-bar{width:220px;}
}
@media (min-width:1920px){                     /* large monitors / TVs */
  .lattice-loader{--ll-cell:14px;--ll-gap:6px;--ll-font:18px;}
  .zl-l1{font-size:3.3rem;}
  .zl-l2{font-size:.95rem;}
  .zl-tag{font-size:.85rem;}
  .zl-bar{width:260px;}
}
/* Browsers too old for the CSS-counter timer: hide it rather than show a stuck 0.0s */
@supports not (transition-behavior:allow-discrete){
  .lattice-loader__timer{display:none;}
}
@media print{.zl-loader{display:none;}}

/* Hero fills the *visible* screen on phones (100vh ignores the browser bar) */
@supports (height:100svh){.hero{height:100svh;}}
/* WhatsApp button clears the home indicator / rounded corners */
.float-wa{bottom:calc(24px + env(safe-area-inset-bottom,0px));right:calc(24px + env(safe-area-inset-right,0px));}

/* ================================================================
   ERROR HANDLING / GRACEFUL DEGRADATION
   Pure CSS, so there is no runtime to "catch" errors — this is the
   CSS equivalent: sensible behaviour when something upstream fails.
   ================================================================ */

/* Broken / slow images (e.g. client renames a file in images/ later):
   show a soft placeholder instead of a broken-image icon + raw alt text.
   NOTE: display:flex on <img> does NOT center the browser's built-in
   broken-image icon/alt text in Chrome — it still renders top-left,
   ignoring flex rules on a replaced element. text-indent instead pushes
   that icon+text far off the left edge, where overflow:hidden clips it,
   leaving just the clean background. Screen readers still read the real
   alt attribute either way; this only changes what's drawn on screen.
   Scoped to real photos only — logos/icons are transparent PNGs, so a
   background here would show through them even when they load fine. */
.fleet-img img,.dest-item img,.hero img.hero-bg{
  background:linear-gradient(135deg,#e9edf1,#d9e0e6);
  overflow:hidden;
  text-indent:100%;
  white-space:nowrap;
}
.brand-logo,.footer-logo{background:none;overflow:hidden;text-indent:100%;white-space:nowrap;}

/* If the Google Fonts request fails or is blocked (ad-blocker, offline,
   corporate firewall), the --font-display/--font-body fallback chain
   defined at the top of this file (Segoe UI / system-ui) takes over
   cleanly instead of dropping to a generic serif. */

/* WhatsApp deep link (float-wa / quote CTA): if the visitor is on desktop
   with no WhatsApp installed, wa.me shows its own "open WhatsApp Web"
   fallback page automatically — no site-side handling needed, noted here
   so it isn't mistaken for an oversight. */

/* Loader watchdog: if a tab is throttled in the background (e.g. switched
   away during load) and animations stall, this hard cutoff guarantees the
   overlay is gone and the site interactive by 6s no matter what. */
.zl-loader{animation-fill-mode:forwards,forwards;animation:zl-wipe .7s cubic-bezier(.77,0,.175,1) var(--zl-go) forwards, zl-failsafe 0s linear 6s forwards;}
@keyframes zl-failsafe{to{visibility:hidden;pointer-events:none;}}
html{animation:zl-unlock .001s linear calc(var(--zl-go) + .7s) both, zl-unlock .001s linear 6s forwards;}

/* ================================================================
   REWORK THEME — "Aurora"
   A distinct visual pass on top of the same working base: floating
   glass-free pill nav, glass hero card, bigger-radius gradient cards,
   pill gradient buttons, and organic blob dividers between sections.
   All original functionality (mobile menu, reveal animations, counters,
   review carousel, loader) is untouched — only how things look changes.
   ================================================================ */
:root{
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --gold-grad:linear-gradient(135deg,#C97B2E 0%,#E3A458 100%);
  --teal-grad:linear-gradient(135deg,#0E6670 0%,#12838F 100%);
}
body{background:#FBF8F4;}

/* generous, consistent anchor offset for the floating nav */
[id]{scroll-margin-top:104px;}

/* ---------- Floating pill nav ---------- */
.site-nav{
  top:14px;left:50%;right:auto;transform:translateX(-50%);
  width:min(1240px,92%);border-bottom:none;
  filter:drop-shadow(0 12px 28px rgba(13,37,53,.14));
}
/* White-tinted glass nav. An earlier pass worried backdrop-filter here would
   wash out the "Get a Quote" pill's text (a real Chromium quirk where a
   button's own decorative pseudo-elements can composite badly in front of a
   blurred ancestor), but that risk doesn't apply to this particular button:
   it's a .btn-sm, and ".btn-sm::before{content:none;}" above already strips
   its sheen layer. Tested with the blur on and the text stays crisp. */
.site-nav::before{
  border-radius:999px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-nav::before{background:#fff;} /* solid fallback, very old browsers only */
}
.site-nav:has(#mobileMenu:target)::before{border-radius:28px;}
.nav-inner{padding:8px 10px 8px 22px;}
.brand-logo{height:40px;}
.nav-links .btn-primary{background:var(--gold-grad)!important;box-shadow:0 6px 16px rgba(201,123,46,.35);}
.mobile-menu{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:0 0 28px 28px;
}

/* ---------- Pill / gradient buttons ---------- */
.btn{border-radius:999px!important;}
.btn-primary{background:var(--teal-grad);}
.btn-wa{background:var(--gold-grad)!important;box-shadow:0 10px 26px rgba(201,123,46,.3);}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(201,123,46,.4);}
.btn-ghost-light:hover{color:var(--teal-dark);}

/* ---------- Hero: glass content card over the photo ---------- */
.hero-overlay{background:linear-gradient(120deg, rgba(6,32,36,.72) 0%, rgba(9,73,80,.32) 55%, rgba(9,73,80,.12) 100%);}
.hero-content{padding-top:120px;}
.hero-inner{
  max-width:520px;background:rgba(8,36,40,.38);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:40px 36px;
}
.hero-inner h1{font-size:clamp(2.5rem,6vw,3.6rem);}
.hero-inner .section-label{color:#E3A458;}
.trust-row svg{color:#E3A458;}

/* ---------- Cards: bigger radius, warmer shadow, lift-on-hover ---------- */
.card{border-radius:var(--r-lg);box-shadow:0 4px 18px rgba(13,37,53,.06);}
.fleet-img{border-radius:var(--r-lg) var(--r-lg) 0 0;}
.fleet-card:hover,.tour-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(13,37,53,.12);}

/* ---------- Services: gradient icon chips, warmer accent ---------- */
.service-card{border-radius:var(--r-lg);}
.service-card .service-icon{background:var(--gold-grad);color:#fff;border-radius:var(--r-sm);box-shadow:0 6px 16px rgba(201,123,46,.3);}
.service-card:hover .service-icon{background:var(--teal-grad);box-shadow:0 6px 16px rgba(14,102,112,.3);transform:rotate(0) scale(1.08);}

/* ---------- Why-us cards: same treatment, gold icon chips on dark ---------- */
.why-card{border-radius:var(--r-lg);background:rgba(255,255,255,.03);}
.why-card .icon-wrap{background:var(--gold-grad);color:#fff;border-radius:var(--r-sm);}
.why-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);}
.why-card:hover .icon-wrap{transform:scale(1.08);background:var(--teal-grad);}

/* ---------- Destinations / tours: rounder photos ---------- */
.dest-item img,.dest-item{border-radius:var(--r-lg);}
.tour-card{border-radius:var(--r-lg);}

/* ---------- Organic blob divider instead of the flat teal-rule ---------- */
.teal-rule{
  height:64px;background:none;position:relative;overflow:hidden;
}
.teal-rule::before{
  content:'';position:absolute;left:50%;top:-160px;width:900px;height:320px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,102,112,.08), transparent 70%);
}

/* ---------- Section headings: gold label, tighter tracking ---------- */
.section-head .section-label{color:var(--amber);}

/* ---------- Loader: warm up the ambient glow to match the gold accent ---------- */
.zl-loader{background:radial-gradient(ellipse 60% 50% at 50% 46%, rgba(201,123,46,.14), transparent 70%), #000;}

/* ================================================================
   THEME SWITCH — pure CSS, styled after React Bits' "SquishSwitch"
   (sliding thumb + sun/moon crossfade). No JS/motion library here —
   #themeToggle (an ordinary checkbox, see index.html) holds the on/off
   state and every <label for="themeToggle"> anywhere on the page
   toggles the same one. ":has()" then reads that one checkbox from
   two different places:
     - ".site-nav:has(...)"  styles whichever switch is currently visible
       (desktop pill vs. mobile menu row)
     - ":root:has(...)"      drives the actual dark-mode retheming below
   ================================================================ */
.theme-toggle-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;}
/* The checkbox is 0x0, so a keyboard user tabbing to it would otherwise get no
   visible focus indicator at all. :has() borrows its focus-visible state onto
   whichever switch is currently shown (desktop pill vs. mobile row), the same
   way the checked-state styling below does. */
.site-nav:has(.theme-toggle-input:focus-visible) .theme-switch__track{
  outline:2px solid var(--amber);outline-offset:3px;
}

.theme-switch{display:inline-flex;align-items:center;cursor:pointer;line-height:0;}
.theme-switch__track{
  position:relative;display:block;width:50px;height:27px;border-radius:999px;
  background:var(--teal-dim);border:1px solid rgba(14,102,112,.25);
  transition:background .32s ease, border-color .32s ease, outline-color .2s ease;
}
.theme-switch__thumb{
  position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(13,37,53,.3);
  display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .32s ease;
}
.theme-switch:hover .theme-switch__thumb{transform:scale(1.06);}
.theme-switch__icon{grid-area:1/1;width:12px;height:12px;transition:opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);}
.theme-switch__icon--sun{color:#C97B2E;opacity:1;transform:scale(1) rotate(0);}
.theme-switch__icon--moon{color:#0E6670;opacity:0;transform:scale(.4) rotate(-90deg);}

/* checked state — applies wherever the switch currently sits (desktop
   pill nav or the mobile menu row), since both live inside .site-nav */
.site-nav:has(.theme-toggle-input:checked) .theme-switch__track{background:var(--navy);border-color:rgba(255,255,255,.2);}
.site-nav:has(.theme-toggle-input:checked) .theme-switch__thumb{transform:translateX(23px) scale(1);background:#1C2830;}
.site-nav:has(.theme-toggle-input:checked) .theme-switch:hover .theme-switch__thumb{transform:translateX(23px) scale(1.06);}
.site-nav:has(.theme-toggle-input:checked) .theme-switch__icon--sun{opacity:0;transform:scale(.4) rotate(90deg);}
.site-nav:has(.theme-toggle-input:checked) .theme-switch__icon--moon{opacity:1;transform:scale(1) rotate(0);color:#E3A458;}

.mobile-theme-row{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;margin-top:4px;border-top:1px solid rgba(14,102,112,.1);
  font-size:.85rem;font-weight:500;color:var(--slate);
}

/* ================================================================
   DARK MODE — a real light/dark retheme, not just a dim overlay.
   Pure CSS: ":root:has(#themeToggle:checked)" reads the one checkbox
   above from anywhere in the document and repaints every selector
   listed under it. No JS, nothing to persist — it resets to light on
   reload, same as the rest of this site has no memory between visits.
   Deliberately left alone: the photo hero, and the sections that are
   already dark in light mode (stats/why-us teal, the navy CTA and
   footer) — those already read correctly in a "dark" site.
   ================================================================ */
:root:has(#themeToggle:checked){color-scheme:dark;}
:root:has(#themeToggle:checked) body{background:#0E1316;}

:root:has(#themeToggle:checked) .section-stone{background:#12181c;border-top-color:rgba(255,255,255,.06);}
:root:has(#themeToggle:checked) .section-white{background:#171D21;border-top-color:rgba(255,255,255,.06);}
:root:has(#themeToggle:checked) .section-mist{background:#1B2227;border-top-color:rgba(255,255,255,.06);}

:root:has(#themeToggle:checked) .card{background:#1E262B;border-color:rgba(255,255,255,.07);box-shadow:0 2px 10px rgba(0,0,0,.35);}
:root:has(#themeToggle:checked) .card:hover{box-shadow:0 12px 40px rgba(0,0,0,.45);border-color:rgba(255,255,255,.14);}
:root:has(#themeToggle:checked) .fleet-img,
:root:has(#themeToggle:checked) .dest-item{background:#20282d;}

:root:has(#themeToggle:checked) .section-head h2,
:root:has(#themeToggle:checked) .fleet-body h3,
:root:has(#themeToggle:checked) .tour-card h3,
:root:has(#themeToggle:checked) .service-card h3,
:root:has(#themeToggle:checked) .reviewer .name,
:root:has(#themeToggle:checked) .brand-text .l1{color:#EDF1F2;}
/* .book-box h2 carries an inline style="color:var(--navy)" in the HTML, which
   normally beats any stylesheet rule — !important is needed here specifically
   to win against that inline declaration (it's the one heading on the page
   styled that way, everything else above is unaffected). */
:root:has(#themeToggle:checked) .book-box h2{color:#EDF1F2!important;}

:root:has(#themeToggle:checked) .section-head p,
:root:has(#themeToggle:checked) .fleet-meta,
:root:has(#themeToggle:checked) .book-box p.lede,
:root:has(#themeToggle:checked) .tour-card li,
:root:has(#themeToggle:checked) .review-text,
:root:has(#themeToggle:checked) .service-card p,
:root:has(#themeToggle:checked) .book-step p,
:root:has(#themeToggle:checked) .nav-links a:not(.btn),
:root:has(#themeToggle:checked) .mobile-menu a.link,
:root:has(#themeToggle:checked) .mobile-theme-row{color:#A9B7BD;}

:root:has(#themeToggle:checked) .tours-note,
:root:has(#themeToggle:checked) .dest-info p{color:#7C8B92;}

:root:has(#themeToggle:checked) .feature-pill{border-color:rgba(255,255,255,.15);color:#7DD9E0;}
:root:has(#themeToggle:checked) .book-step .num{border-color:#7DD9E0;color:#7DD9E0;}
/* .teal-rule itself is the organic-blob divider's invisible 64px-tall
   wrapper (see "Organic blob divider" above — background:none, overflow
   hidden) and must stay background:none here too; only its ::before
   (the actual soft glow) needs a dark-mode color. An earlier pass gave
   .teal-rule its own flat gradient background here, which — combined
   with the 64px height it inherits from the blob-divider rule — painted
   a solid gray bar across the page instead of a soft glow. */
:root:has(#themeToggle:checked) .teal-rule::before{background:radial-gradient(closest-side, rgba(255,255,255,.07), transparent 70%);}

:root:has(#themeToggle:checked) .site-nav::before{background:rgba(18,23,27,.84);border-color:rgba(255,255,255,.12);}
:root:has(#themeToggle:checked) .mobile-menu{background:rgba(23,29,33,.97);border-top-color:rgba(255,255,255,.08);}
:root:has(#themeToggle:checked) .burger span{background:#EDF1F2;}
:root:has(#themeToggle:checked) .nav-links a:not(.btn):hover{color:#7DD9E0;}
:root:has(#themeToggle:checked) .nav-links a:not(.btn)::after{background:#7DD9E0;}
:root:has(#themeToggle:checked) .footer-contact a,
:root:has(#themeToggle:checked) .footer-links a{color:rgba(255,255,255,.35);}

/* smooth crossfade between themes instead of an abrupt flip
   (prefers-reduced-motion already zeroes all transition-durations
   site-wide, so this is skipped automatically for anyone who needs it) */
body,.section-stone,.section-white,.section-mist,.card,.site-nav::before,.mobile-menu,
.section-head h2,.section-head p,.fleet-body h3,.fleet-meta,.tour-card h3,.tour-card li,
.service-card h3,.service-card p,.reviewer .name,.review-text,.nav-links a:not(.btn),
.book-step p,.book-box p.lede,.feature-pill,.book-step .num,.burger span,.dest-item,.fleet-img,
.tours-note,.dest-info p,.mobile-menu a.link,.mobile-theme-row,
.brand-text .l1,.book-box h2,.teal-rule,.teal-rule::before,.footer-contact a,.footer-links a{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}