/*
Neslo Tours and Safaris — homepage stylesheet, gold/white luxury system
A bright, airy shell built entirely from white/ivory grounds and a single
gold accent family — gold serif wordmark and accents, a literal animated
water divider, and badge-style destination cards. Fraunces for display,
Manrope for UI/body.
Prefix: .cs-
*/

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  /* -- Earthy palette (client revision: gold/white replaced with earth
     tones + a green accent family). --near-black added for this pass:
     the one deep, near-black tone used sparingly — final CTA and hero
     text-legibility only — so the palette can hold a genuine dark
     "room" without turning into a second gold-on-dark system. */
  --cs-white:      #f6f1e6;  /* base page background — warm off-white/sand */
  --cs-ivory:      #efe6d3;  /* alternating section background — clay/linen */
  --cs-champagne:  #ddc9a3;  /* darkest fill (hero base / deep sections) — desert tan */
  --cs-near-black: #17130c;  /* one deep neutral: final CTA room, hero legibility only */
  --cs-gold-deep:  #6b5a2e;  /* deep bronze: emphasis text, headings accent */
  --cs-gold:       #8a6d35;  /* primary accent: CTAs, kickers, borders — bronze/ochre */
  --cs-gold-soft:  #a98f4f;  /* light bronze: hovers, glows */
  --cs-green-deep: #45562f;  /* deep olive green — headline accent word */
  --cs-green:      #6f7d45;  /* primary green accent */
  --cs-green-soft: #96a468;  /* light sage green: hovers, glows */

  --cs-ink:      #2c2517;   /* primary text — warm near-black earth brown */
  --cs-ink-soft: rgba(44, 37, 23, .74);
  --cs-ink-faint:rgba(44, 37, 23, .52);
  --cs-hair: rgba(44, 37, 23, .16);

  --cs-display: "Fraunces", Georgia, serif;
  --cs-display-serif: "Fraunces", Georgia, serif;
  --cs-hand: "Caveat", cursive;   /* used once now — a single signature-style detail, not the hero voice */
  --cs-mono: "SF Mono", "Courier New", monospace; /* coordinates, field-instrument details — system stack, no extra font load for a handful of characters */
  --cs-sans: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --cs-radius: 2px;   /* architectural, not app-UI: was 3px/10px/999px in places, pulled in across the board */
  --cs-max: 1320px;
}

.cs { background: var(--cs-white); color: var(--cs-ink); font-family: var(--cs-sans); }
.cs * { box-sizing: border-box; }
.cs a { color: inherit; text-decoration: none; }
.cs img { max-width: 100%; display: block; }
.cs-wrap { max-width: var(--cs-max); margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 64px); position: relative; }

.cs-kick { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-gold); font-weight: 600; margin-bottom: 1rem; }
.cs-kick--green { color: var(--cs-green-deep); }
.cs-h2 { font-family: var(--cs-display-serif); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.14; margin: 0 0 .7rem; }
.cs-h2 em { font-style: italic; font-weight: 300; color: var(--cs-green-deep); }
.cs-sub { color: var(--cs-ink-soft); max-width: 50ch; font-size: 1.02rem; line-height: 1.6; }
.cs-shead { margin-bottom: clamp(30px, 5vw, 54px); max-width: 640px; }
.cs-textlink { display: inline-flex; gap: .4rem; font-size: .88rem; font-weight: 600; color: var(--cs-gold); margin-top: 1.4rem; }

.cs-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: .92rem; border: 1px solid transparent; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
/* Premium shining gold: a slow-moving gradient sweep for constant
   "catching the light" shimmer, plus a brighter diagonal streak that
   sweeps across on hover — same trick as foil business cards / gold
   foil print. */
@keyframes cs-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.cs-btn--primary,
.cs-btn--pill {
  background: linear-gradient(120deg, #fdeec0 0%, #f0c14c 18%, #b6821c 38%, #7c5710 50%, #b6821c 62%, #f0c14c 82%, #fdeec0 100%);
  background-size: 240% 100%;
  color: #241705;
  border-color: transparent;
  animation: cs-shimmer 6s linear infinite;
  box-shadow: 0 6px 18px rgba(122, 84, 15, .35), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(60,40,4,.25);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.cs-btn--primary::after,
.cs-btn--pill::after {
  content: ""; position: absolute; top: 0; left: -65%; width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg); pointer-events: none; transition: left .65s cubic-bezier(.2,.7,.2,1);
}
.cs-btn--primary:hover,
.cs-btn--pill:hover {
  transform: translateY(-2px);
  animation-duration: 1.6s;
  box-shadow: 0 12px 28px rgba(122, 84, 15, .45), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 2px rgba(60,40,4,.25);
}
.cs-btn--primary:hover::after,
.cs-btn--pill:hover::after { left: 130%; }
.cs-btn--pill { padding: .62rem 1.35rem; font-size: .82rem; }
.cs-btn--lg { padding: 1.1rem 2.2rem; font-size: 1rem; }

/* == 0 · NAV ==
   Starts transparent over the hero photo (white text), becomes an opaque
   white/gold bar once scrolled (ink text) — same two palette colors,
   used against two different grounds. */
.cs-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-top: clamp(20px, 3vw, 30px); transition: background-color .4s ease, padding .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; color: var(--cs-white); }
/* Nav lives outside the .cs wrapper (it's printed by header.php, before
   front-page.php's <div class="cs">), so it never inherited the .cs
   reset (sans font, no underline, ink color). Without this, every nav
   link and the "Plan My Safari" pill fall back to bare browser defaults —
   blue, underlined, serif — which is what was showing up oversized in
   the dropdown menu. Scoped here directly instead of depending on .cs. */
.cs-nav, .cs-nav * { font-family: var(--cs-sans); }
.cs-nav a { color: inherit; text-decoration: none; }
.cs-nav.is-scrolled { position: fixed; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); padding-top: 12px; padding-bottom: 12px; border-color: var(--cs-hair); color: var(--cs-ink); box-shadow: 0 2px 20px rgba(36,29,15,.06); }
.cs-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cs-nav__mark { display: flex; align-items: center; gap: 10px; color: var(--cs-gold-soft); overflow: hidden; height: clamp(32px, 4vw, 44px); }
.cs-nav.is-scrolled .cs-nav__mark { color: var(--cs-gold-deep); }
.cs-nav__glyph { color: var(--cs-gold); }
.cs-nav__logo { display: flex; align-items: center; max-height: clamp(32px, 4vw, 44px); }
.cs-nav__logo a { display: flex; align-items: center; max-height: inherit; }
/* Belt-and-suspenders sizing: the.custom-logo-link/.custom-logo classes
   below are WordPress's own markup from the_custom_logo(), not classes
   this theme controls — targeted directly (with !important as a
   deliberate safety net, not a habit) so an uploaded logo of any
   native pixel size is always constrained to the nav's height,
   regardless of what other CSS on the page might also be trying to
   size it. */
.cs-nav__logo,
img.cs-nav__logo,
.cs-nav__logo img,
.cs-nav__logo .custom-logo-link,
.cs-nav__logo .custom-logo {
  height: clamp(32px, 4vw, 44px) !important;
  max-height: clamp(32px, 4vw, 44px) !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
}
img.cs-nav__logo { display: block !important; }
.cs-nav__word { font-family: var(--cs-display-serif); font-size: 1.15rem; letter-spacing: .1em; color: inherit; }
.cs-nav__word em { display: block; font-style: normal; font-size: .58rem; letter-spacing: .38em; color: currentColor; opacity: .68; font-weight: 500; margin-top: 1px; }
/* Hamburger/dropdown nav is the universal style now — always collapsed,
   at every screen width, not just below the old 1180px breakpoint. */
.cs-nav__links {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 21;
  background: rgba(255,255,255,.98); backdrop-filter: blur(10px);
  border-top: 1px solid var(--cs-hair); box-shadow: 0 16px 32px rgba(36,29,15,.14);
  color: var(--cs-ink);
  padding: 6px clamp(20px, 4.5vw, 64px) 14px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .3s ease;
}
.cs-nav__links.is-open { max-height: 60vh; opacity: 1; overflow-y: auto; }
.cs-nav__links a { padding: 9px 0; border-bottom: 1px solid var(--cs-hair); opacity: 1; font-size: .86rem; font-weight: 500; }
.cs-nav__links a:last-child { border-bottom: none; }
.cs-nav__actions { display: flex; align-items: center; gap: 14px; }
.cs-nav__burger { display: flex; width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor; opacity: .9; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; position: relative; z-index: 22; }
.cs-nav__burger span { width: 14px; height: 1px; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.cs-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.cs-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cs-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* == 1 · HERO ==
   The hero sits on a photo/video, so its text stays white for legibility —
   the same white used everywhere else in the palette, just read against an
   image instead of a flat fill. Everything below the fold returns to ink
   on white/ivory/gold. */
.cs-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: var(--cs-white); }
/* Belt-and-suspenders legibility: the wash gradient above is the main
   protection, but a soft shadow directly on the hero text (see
   .cs-hero__in below) guarantees it stays readable even over an
   unexpectedly bright patch of photo. */
.cs-hero__stage { position: absolute; inset: 0; z-index: 0; background: var(--cs-champagne); }
.cs-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.cs-hero__fluid { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; opacity: .55; pointer-events: none; }
/* Legibility fade only — the mood/darkness comes from the photo's own grading, not a tint over it. */
/* Legibility fade — kept lighter than a full scrim for the photo's own
   grading to carry most of the mood, but never fully transparent: a
   bright/light uploaded photo would otherwise leave white hero text
   with no contrast protection at all in the middle of the hero,
   which is exactly what was happening. */
.cs-hero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,4,.42) 0%, rgba(20,15,4,.2) 22%, rgba(20,15,4,.22) 55%, rgba(20,15,4,.6) 82%, var(--cs-white) 100%); }

.cs-hero__rail { position: absolute; left: clamp(20px, 4.5vw, 64px); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .72rem; color: rgba(255,255,255,.65); letter-spacing: .05em; }
.cs-hero__rail-line { width: 1px; height: 86px; background: linear-gradient(180deg, rgba(255,255,255,.65), transparent); }

.cs-weather { position: absolute; right: clamp(20px, 4.5vw, 64px); top: 128px; z-index: 3; width: 200px; background: rgba(255,255,255,.08); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.22); border-radius: 3px; padding: 18px; display: grid; gap: 4px; color: var(--cs-white); }
.cs-weather__icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(201,162,39,.32); color: var(--cs-gold-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.cs-weather__place { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.cs-weather__temp { font-family: var(--cs-display-serif); font-size: 2.1rem; line-height: 1.2; }
.cs-weather__desc { font-size: .78rem; color: rgba(255,255,255,.85); line-height: 1.4; margin: 6px 0 14px; }
.cs-weather__sun { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.28); padding-top: 12px; font-size: .7rem; }
.cs-weather__sun span { display: block; color: rgba(255,255,255,.65); margin-bottom: 3px; }
.cs-weather__sun strong { font-weight: 600; }

.cs-social-rail { position: absolute; right: clamp(20px, 4.5vw, 64px); bottom: 96px; z-index: 3; display: flex; flex-direction: column; gap: 10px; }
.cs-social-rail a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); transition: border-color .3s ease, color .3s ease; }
.cs-social-rail a:hover { border-color: var(--cs-gold); color: var(--cs-gold-soft); }

.cs-hero__in { position: relative; z-index: 2; width: 100%; padding: 0 clamp(20px, 4.5vw, 64px); max-width: var(--cs-max); margin: 0 auto; padding-top: 40px; padding-bottom: clamp(110px, 14vw, 170px); text-shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 16px rgba(0,0,0,.25); }
.cs-hero__coords { display: block; font-family: var(--cs-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 1.4rem; font-weight: 500; }
.cs-hero__title { font-family: var(--cs-display); font-weight: 400; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1.03; margin: 0 0 1.3rem; letter-spacing: -.01em; }
.cs-hero__title em {
  font-style: italic; font-weight: 400; color: var(--cs-green-soft);
  /* The general hero text-shadow (see .cs-hero__in) only adds
     darkness — it doesn't help when the text color itself is close in
     hue to the photo behind it, which is exactly the risk with green
     text over grass/foliage (very likely photography for this brand).
     A stroke creates a hard edge that works regardless of hue, not
     just luminance, so it stays legible over green backgrounds too. */
  -webkit-text-stroke: 1px rgba(20,15,4,.6);
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 20px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.3);
}
.cs-hero__sub { font-family: var(--cs-sans); font-weight: 400; font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 40ch; color: rgba(255,255,255,.86); line-height: 1.65; margin-bottom: 2.4rem; }
.cs-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.cs-btn--ghost { border: 1px solid rgba(255,255,255,.55); color: var(--cs-white); background: transparent; }
.cs-btn--ghost:hover { border-color: var(--cs-white); background: rgba(255,255,255,.1); }

/* WhatsApp CTA — the hero's third button, brand-green on purpose (this is
   one of the "more green" spots), with the handwritten label riding on
   top of the icon for a personal, direct-line feel. */
.cs-btn--whatsapp { background: #25D366; color: #0b3d1f; border: 1px solid #25D366; }
.cs-btn--whatsapp:hover { background: #1fb857; border-color: #1fb857; transform: translateY(-2px); }
.cs-hand-note { display: block; font-family: var(--cs-hand); font-size: 1.35rem; font-weight: 600; color: var(--cs-green-soft); transform: rotate(-2deg); margin-bottom: .6rem; }
.cs-hand { font-family: var(--cs-hand); font-size: 1.1rem; font-weight: 600; line-height: 1; }

.cs-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: clamp(90px, 11vw, 150px); pointer-events: none; }
.cs-wave__svg { width: 100%; height: 100%; display: block; }
.cs-wave__path--back { fill: rgba(231,207,142,.32); }
.cs-wave__path--front { fill: var(--cs-white); }
.cs-wave__line { stroke: var(--cs-gold); stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(201,162,39,.5)); }

/* == 2 · DESTINATIONS — "the map" ==
   Asymmetric hierarchy per the editorial-grid brief: one dominant
   destination (tall, left) with three supporting ones stacked beside
   it, rather than four equal cards. A single faint route-contour sits
   behind the grid as a map-annotation detail — decorative only, aria-
   hidden, not meant to be read as literal cartography. */
.cs-destinations { padding-top: clamp(30px, 6vw, 64px); padding-bottom: clamp(56px, 8vw, 90px); background: var(--cs-white); position: relative; }
.cs-destinations__row { display: grid; grid-template-columns: 300px 1fr 40px; gap: 28px; align-items: start; margin-bottom: clamp(48px, 7vw, 76px); }
.cs-destinations__intro .cs-h2 { max-width: 12ch; }

.cs-dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
.cs-dest-route { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.cs-dest-card { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 5; border: 1px solid rgba(255,255,255,.18); transition: border-color .35s ease, transform .35s ease; }
.cs-dest-card--dominant { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.cs-dest-card--active { border-color: rgba(201,162,39,.6); }
.cs-dest-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.35); }
.cs-dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.05); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.cs-dest-card:hover img { transform: scale(1.06); }
.cs-dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(20,15,4,.5) 78%, rgba(20,15,4,.85) 100%); }
/* glossy sheen: a soft diagonal light streak, like light catching glass */
.cs-dest-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 18%, transparent 32%, transparent 100%); mix-blend-mode: overlay; pointer-events: none; }
.cs-dest-card__badge { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(20,15,4,.4); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); color: var(--cs-white); display: flex; align-items: center; justify-content: center; }
.cs-dest-card__coords { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--cs-mono); font-size: .62rem; letter-spacing: .04em; color: rgba(255,255,255,.72); font-weight: 500; }
.cs-dest-card__in { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; padding: 14px 14px 12px; border-radius: 3px; background: rgba(20,15,4,.4); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); color: var(--cs-white); }
.cs-dest-card--dominant .cs-dest-card__title { font-size: 1.7rem; }
.cs-dest-card__title { display: block; font-family: var(--cs-display-serif); font-weight: 500; font-size: 1.05rem; margin-bottom: .55rem; color: var(--cs-white); }
.cs-dest-card__title em { display: block; font-style: normal; font-weight: 400; font-size: .74rem; color: rgba(255,255,255,.7); margin-top: 2px; }
.cs-dest-card__link { display: inline-flex; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--cs-gold-soft); padding-top: 8px; border-top: 1px solid rgba(201,162,39,.4); width: max-content; }
.cs-dest-next { position: absolute; right: 0; top: 50%; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cs-hair); background: transparent; color: var(--cs-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; }

.cs-features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-top: clamp(36px, 5vw, 54px); border-top: 1px solid var(--cs-hair); }
.cs-feature { display: flex; gap: 12px; align-items: flex-start; color: var(--cs-gold); }
.cs-feature div { display: flex; flex-direction: column; gap: 3px; }
.cs-feature strong { font-size: .88rem; color: var(--cs-ink); font-weight: 600; }
.cs-feature span { font-size: .78rem; color: var(--cs-ink-faint); line-height: 1.45; }

/* == 3 · PACKAGES == */
.cs-packages { position: relative; padding: clamp(64px, 9vw, 120px) 0; background: var(--cs-ivory); overflow: hidden; }
.cs-wave-sm { position: absolute; left: 0; right: 0; height: clamp(34px, 4.5vw, 56px); z-index: 1; pointer-events: none; }
.cs-wave-sm svg { width: 100%; height: 100%; display: block; }
.cs-wave-sm--top { top: -1px; }
.cs-wave-sm--bottom { bottom: -1px; transform: scaleY(-1); }
.cs-wave-sm__fill { fill: var(--cs-ivory); }
.cs-wave-sm__fill--white { fill: var(--cs-white); }
.cs-wave-sm__fill--champagne { fill: var(--cs-champagne); }
.cs-wave-sm__fill--near-black { fill: var(--cs-near-black); }
.cs-wave-sm__line { stroke: rgba(201,162,39,.55); stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(201,162,39,.35)); }

/* -- Contour-line divider (Destinations -> Packages): topographic
      elevation bands, echoing the coordinate/map motif above. -- */
.cs-contour-divider { position: absolute; top: -1px; left: 0; right: 0; height: clamp(34px, 4.5vw, 56px); z-index: 1; pointer-events: none; }
.cs-contour-divider svg { width: 100%; height: 100%; display: block; }
.cs-contour-divider__line { stroke: var(--cs-gold); stroke-width: 1; }
.cs-contour-divider__line--1 { opacity: .35; }
.cs-contour-divider__line--2 { opacity: .24; }
.cs-contour-divider__line--3 { opacity: .16; }
.cs-contour-divider__fill { fill: var(--cs-ivory); }

/* -- Torn-paper divider (Trust "the letters" -> Conservation): an
      irregular deckle edge instead of a clean curve, generated with
      randomized-but-smoothed points rather than a repeating zigzag.
      Needs its own stroked line (not just a fill) to actually read as
      an edge — the fill alone sits on a same-colored background and
      is invisible without it, the same reason every other divider in
      this system pairs a __fill path with a __line stroke. -- */
.cs-torn-divider { position: absolute; bottom: -1px; left: 0; right: 0; height: clamp(34px, 4.5vw, 56px); z-index: 1; pointer-events: none; }
.cs-torn-divider svg { width: 100%; height: 100%; display: block; }
.cs-torn-divider__fill { fill: var(--cs-champagne); }
.cs-torn-divider__line { fill: none; stroke: var(--cs-ink); stroke-width: 1; opacity: .18; }

/* Packages now read as a horizontal, photographic row (moving left to
   right, most compact/affordable trip first) instead of stacked text
   rows — each card carries its own destination photo so the section
   isn't just flat cream-on-cream. */
.cs-pkg-row { position: relative; }
.cs-pkg-track {
  list-style: none; margin: 0; padding: 4px 4px 28px;
  display: flex; gap: clamp(16px, 2vw, 24px);
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cs-pkg-track::-webkit-scrollbar { display: none; }

.cs-pkg {
  position: relative; overflow: hidden;
  flex: 0 0 clamp(270px, 27vw, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--cs-white);
  box-shadow: 0 4px 18px rgba(20,15,4,.12);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.cs-pkg:hover { transform: translateY(-6px); box-shadow: 0 10px 28px rgba(20,15,4,.18); }
.cs-pkg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12) contrast(1.04); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.cs-pkg:hover .cs-pkg__img { transform: scale(1.06); }
/* Strong bottom-weighted scrim — this is what actually fixes "washed
   out": real dark-to-light contrast under the text instead of a hairline
   border on a pale card. */
.cs-pkg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,15,4,.05) 0%, rgba(20,15,4,.1) 38%, rgba(20,15,4,.68) 78%, rgba(20,15,4,.92) 100%); }

.cs-pkg__num { position: absolute; left: 20px; top: 16px; z-index: 2; font-family: var(--cs-display-serif); font-style: italic; font-weight: 300; font-size: 1rem; color: rgba(255,255,255,.75); }
.cs-pkg__days {
  position: absolute; right: 16px; top: 16px; z-index: 2;
  display: inline-flex; align-items: center; padding: .4rem .8rem;
  border-radius: 999px; background: linear-gradient(135deg, var(--cs-gold-soft), var(--cs-gold));
  color: #26190a; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.cs-pkg__in { position: relative; z-index: 2; padding: 0 22px 22px; display: flex; flex-direction: column; gap: .55rem; }
.cs-pkg__name { font-family: var(--cs-display-serif); font-size: 1.3rem; line-height: 1.15; }
.cs-pkg__desc { font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-pkg__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.25); margin-top: .2rem; }
.cs-pkg__price { font-family: var(--cs-display-serif); font-size: 1.2rem; white-space: nowrap; color: var(--cs-gold-soft); }
.cs-pkg__price span { display: block; font-family: var(--cs-sans); font-size: .68rem; font-weight: 500; color: rgba(255,255,255,.68); }
.cs-pkg__link { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--cs-white); white-space: nowrap; padding-bottom: 3px; }
.cs-pkg:hover .cs-pkg__link { color: var(--cs-gold-soft); }

.cs-pkg-nav { position: absolute; top: 40%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cs-hair); background: var(--cs-white); color: var(--cs-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 20px rgba(36,29,15,.12); transition: border-color .3s ease, color .3s ease, opacity .3s ease; }
.cs-pkg-nav:hover { border-color: var(--cs-gold); color: var(--cs-gold-deep); }
.cs-pkg-nav[disabled] { opacity: .35; cursor: default; }
.cs-pkg-nav--prev { left: -8px; }
.cs-pkg-nav--next { right: -8px; }
@media (min-width: 1180px) {
  .cs-pkg-nav--prev { left: -22px; }
  .cs-pkg-nav--next { right: -22px; }
}

/* == 4 · TRUST == */
.cs-trust { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0; background: var(--cs-white); }
.cs-trust__label { display: block; text-align: center; color: var(--cs-ink-faint); font-size: .85rem; margin-bottom: 1.6rem; }
.cs-trust__logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 56px); flex-wrap: wrap; opacity: .8; margin-bottom: clamp(40px, 6vw, 72px); }
.cs-trust__logos img { height: 28px; width: auto; filter: grayscale(1) contrast(.6) brightness(.4); opacity: .55; }
/* "The letters" — one dominant testimonial (large, centered, quote-led),
   one smaller supporting letter beside it, rather than two equal boxes. */
.cs-testimonials { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 64px); border-top: 1px solid var(--cs-hair); padding-top: clamp(36px, 5vw, 56px); align-items: center; }
.cs-testimonial { position: relative; transition: transform .4s ease; }
.cs-testimonial:hover { transform: translateY(-2px); }
.cs-testimonial::before { content: "\201C"; position: absolute; top: -.3em; left: -.05em; font-family: var(--cs-display-serif); font-size: 3.2rem; color: var(--cs-gold-soft); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.cs-testimonial:hover::before { opacity: .35; }
.cs-testimonial--dominant p { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.4; }
.cs-testimonial p { font-family: var(--cs-display-serif); font-style: italic; font-weight: 300; font-size: 1.1rem; line-height: 1.55; margin: 0 0 1rem; color: var(--cs-ink); }
.cs-testimonial cite { display: block; font-style: normal; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-gold-deep); font-weight: 600; }
.cs-testimonial--dominant cite { font-family: var(--cs-display-serif); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: .01em; text-transform: none; color: var(--cs-ink-soft); border-top: 1px solid var(--cs-hair); padding-top: .8rem; margin-top: .4rem; display: inline-block; }

/* == 5 · CONSERVATION & IMPACT == */
.cs-impact { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0; background: var(--cs-champagne); }
.cs-impact__ghost { position: absolute; top: clamp(20px, 4vw, 40px); right: clamp(20px, 4.5vw, 64px); font-family: var(--cs-display-serif); font-size: clamp(4rem, 9vw, 9rem); font-weight: 300; color: rgba(44,37,23,.06); line-height: 1; pointer-events: none; z-index: 0; }
.cs-impact__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.cs-impact__copy p { color: var(--cs-ink-soft); line-height: 1.65; margin-bottom: 1.8rem; max-width: 48ch; }
.cs-impact__stats { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(24px, 4vw, 44px); }
.cs-impact__stats li { display: flex; flex-direction: column; gap: .2rem; transition: transform .3s ease; }
.cs-impact__stats li:hover { transform: translateY(-2px); }
.cs-impact__stats strong { font-family: var(--cs-display-serif); font-size: 2rem; color: var(--cs-gold); transition: color .3s ease; }
.cs-impact__stats li:hover strong { color: var(--cs-green-deep); }
.cs-impact__stats span { font-size: .82rem; color: var(--cs-ink-faint); max-width: 14ch; }
.cs-impact__media { position: relative; }
.cs-impact__media img { border-radius: 3px; filter: saturate(.92) hue-rotate(-2deg) brightness(.98); }
.cs-impact__note { position: absolute; bottom: -14px; left: -14px; background: var(--cs-white); border: 1px solid var(--cs-hair); padding: 8px 14px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-ink-faint); font-weight: 600; }

/* == 6 · SEASONAL GUIDE == */
.cs-season { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0; background: var(--cs-ivory); }
.cs-season-list { list-style: none; margin: 0; padding: 0; }
.cs-season-row { position: relative; display: grid; grid-template-columns: 60px 140px 180px 1fr; gap: 20px; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--cs-hair); transition: padding-left .35s ease, background-color .35s ease; }
.cs-season-row:hover { padding-left: 14px; background-color: rgba(138,109,53,.05); }
.cs-season-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cs-gold); transform: scaleY(0); transition: transform .35s ease; transform-origin: center; }
.cs-season-row:hover::before { transform: scaleY(1); }
.cs-season-row:first-child { border-top: 1px solid var(--cs-hair); }
.cs-season-row__num { font-family: var(--cs-display-serif); font-weight: 300; font-size: 1.4rem; color: var(--cs-gold-soft); opacity: .5; }
.cs-season-row__months { font-family: var(--cs-display-serif); font-size: 1.1rem; }
.cs-season-row__label { font-size: .86rem; font-weight: 600; color: var(--cs-gold); }
.cs-season-row p { margin: 0; color: var(--cs-ink-soft); font-size: .95rem; line-height: 1.55; }

/* == 7 · CLOSE — "the blank canvas" ==
   The one deliberately dark room on the page: near-black ground, huge
   negative space, minimal typography. Everything else on the homepage
   stays in the warm earth palette — this is the sole exception, used
   once, for the final emotional beat. */
.cs-close { position: relative; overflow: hidden; padding: clamp(120px, 16vw, 220px) 0; background: var(--cs-near-black); text-align: center; color: var(--cs-white); }
.cs-close__in { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; }
.cs-close .cs-kick { color: var(--cs-gold-soft); }
.cs-close .cs-h2 { max-width: 20ch; color: var(--cs-white); }
.cs-close .cs-h2 em { color: var(--cs-green-soft); }

/* == VIDEO BACKGROUND MODE (front page) ==
   Once a site-wide background video/poster is set (Customize → Site
   Background), body gets .has-bg-video (see chanua_body_classes() in
   inc/chanua-bg-system.php) and the fixed video layer sits behind
   *everything*, nav to footer. Without this block the homepage's own
   flat white/ivory/champagne section fills would paint straight over
   that footage and it would only ever be visible on interior pages.
   This extends the same "water divider revealing what's beneath it"
   idea from the hero to every seam on the page: sections turn
   transparent, the small wave dividers turn translucent instead of
   solid, and every block of copy becomes its own glass card — the same
   frosted-gold-edge treatment as the hero weather card — instead of
   floating unreadably over moving footage. */
body.has-bg-video .cs { background: transparent; }
body.has-bg-video .cs-destinations,
body.has-bg-video .cs-packages,
body.has-bg-video .cs-trust,
body.has-bg-video .cs-impact,
body.has-bg-video .cs-season,
body.has-bg-video .cs-close { background: transparent; }

body.has-bg-video .cs-wave-sm__fill,
body.has-bg-video .cs-wave-sm__fill--white,
body.has-bg-video .cs-wave-sm__fill--champagne,
body.has-bg-video .cs-wave-sm__fill--near-black { fill: rgba(255,255,255,.4); }

body.has-bg-video .cs-shead,
body.has-bg-video .cs-destinations__intro,
body.has-bg-video .cs-features,
body.has-bg-video .cs-testimonials,
body.has-bg-video .cs-trust__partners,
body.has-bg-video .cs-impact__copy,
body.has-bg-video .cs-season-list {
  position: relative;
  background:
    linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 42%),
    rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(201,134,26,.28);
  box-shadow: 0 10px 34px rgba(28,22,10,.16), inset 0 1px 0 rgba(255,255,255,.5);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 40px);
}
body.has-bg-video .cs-destinations__intro { max-width: none; }
body.has-bg-video .cs-features { border-top: none; margin-top: clamp(24px, 4vw, 40px); }
body.has-bg-video .cs-testimonials { border-top: none; padding-top: clamp(24px, 3vw, 40px); }
body.has-bg-video .cs-season-list { padding-top: 4px; }
/* .cs-close stays its own dark near-black room even without a bg video,
   so its glass treatment needs to read against a dark ground rather
   than reuse the light-glass rule above — same frost mechanism, dark
   variant. */
body.has-bg-video .cs-close__in {
  position: relative;
  background:
    linear-gradient(120deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 42%),
    rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 40px);
}
body.has-bg-video .cs-impact__media img {
  box-shadow: 0 18px 40px rgba(28,22,10,.24);
  border: 1px solid rgba(255,255,255,.35);
}
/* Engines without backdrop-filter (older Safari/iOS): a flatter, more
   opaque card instead of the blurred-glass look — still legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.has-bg-video .cs-shead,
  body.has-bg-video .cs-destinations__intro,
  body.has-bg-video .cs-features,
  body.has-bg-video .cs-testimonials,
  body.has-bg-video .cs-trust__partners,
  body.has-bg-video .cs-impact__copy,
  body.has-bg-video .cs-season-list,
  body.has-bg-video .cs-close__in { background: rgba(23,19,12,.82); }
}

/* == Motion == */
.cs-reveal { opacity: 0; transform: translateY(28px); }
.cs-reveal.is-in { opacity: 1; transform: translateY(0); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.cs-wave__line { stroke-dasharray: 1700; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .cs-reveal { opacity: 1; transform: none; }
  .cs-dest-card img { transition: none; }
  .cs-hero__fluid { display: none; }
}

/* == Responsive ==
   The hamburger/dropdown nav (see .cs-nav__links / .cs-nav__burger
   near the top of the file) is now universal at every width, not
   gated to this breakpoint. What's left here is genuinely
   width-dependent layout: hiding the weather card and collapsing the
   destinations/features grids on narrower viewports. */
@media (max-width: 1180px) {
  .cs-weather { display: none; }
  .cs-destinations__row { grid-template-columns: 1fr; }
  .cs-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; min-height: 0; }
  .cs-dest-card--dominant { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .cs-features { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}

@media (max-width: 720px) {
  .cs-pkg { flex-basis: 78vw; }
  .cs-pkg-nav { display: none; }
  .cs-testimonials { grid-template-columns: 1fr; }
  .cs-impact__grid { grid-template-columns: 1fr; }
  .cs-impact__media { order: -1; }
  .cs-season-row { grid-template-columns: 1fr; gap: 4px; }
  .cs-season-row__num { display: none; }
  .cs-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cs-dest-card { aspect-ratio: 1 / 1; }
  .cs-dest-card--dominant { aspect-ratio: 4 / 3; }
  .cs-features { grid-template-columns: 1fr 1fr; }
  .cs-social-rail { bottom: auto; top: 128px; }
}

/* == Hero image carousel ==
   Manual controls (prev/next + dots) plus autoplay, a dynamic "01/05"
   rail count, and two fallback paths — see chanua-scroll.js:
     - a broken hero video reveals this slider (removes
       .cs-hero__slides--fallback, which is otherwise display:none)
     - a broken individual slide image swaps to the hero poster
   Falls back gracefully to a static first image if JS never runs. */
.cs-hero__slides { position: absolute; inset: 0; }
.cs-hero__slides--fallback { display: none; }
.cs-hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease;
}
.cs-hero__slide.is-active { opacity: 1; }

.cs-hero__nav { position: absolute; left: clamp(20px, 4.5vw, 64px); bottom: 96px; z-index: 3; display: flex; align-items: center; gap: 14px; }
.cs-hero__nav--hidden { display: none; }
.cs-hero__arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--cs-white); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color .3s ease, background-color .3s ease; }
.cs-hero__arrow:hover { border-color: var(--cs-gold-soft); background: rgba(255,255,255,.08); }
.cs-hero__dots { display: flex; align-items: center; gap: 9px; }
.cs-hero__dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: transparent; padding: 0; cursor: pointer; transition: transform .3s ease, background-color .3s ease, border-color .3s ease; }
.cs-hero__dot:hover { border-color: var(--cs-white); }
.cs-hero__dot.is-active { background: var(--cs-gold-soft); border-color: var(--cs-gold-soft); transform: scale(1.5); }

@media (prefers-reduced-motion: reduce) {
  .cs-hero__slide { transition: none; }
}

@media (max-width: 720px) {
  .cs-hero__nav { bottom: 76px; }
}

/* == FOOTER ==
   Never had any CSS written for it at all — the markup in
   template-parts/chanua-footer.php existed with zero matching rules,
   so every link rendered as a bare, underlined, browser-default blue
   anchor. This is the fix, not a loading problem. */
/* Footer — light, green-accented, four columns + newsletter strip,
   matching the neslosafaris.com reference footer (About / Quick Links /
   Popular Destinations / Contact). Swapped from the old dark near-black
   gold footer: this section is one of the deliberate "more green" spots
   in the Neslo palette. */
.cs-footer { background: var(--cs-white); color: var(--cs-ink-soft); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--cs-hair); }
.cs-footer a { text-decoration: none; color: inherit; transition: color .25s ease; }
.cs-footer__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(32px, 5vw, 48px); }
.cs-footer__col h4 { font-family: var(--cs-sans); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-green-deep); font-weight: 700; margin: 0 0 16px; }
.cs-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-footer__col a { font-size: .92rem; color: var(--cs-ink-soft); }
.cs-footer__col a:hover { color: var(--cs-green); }
.cs-footer__about { font-size: .92rem; line-height: 1.7; color: var(--cs-ink-soft); margin: 0; max-width: 40ch; }
.cs-footer__contact-list { gap: 12px !important; }
.cs-footer__contact-list li { display: flex; align-items: center; gap: 10px; color: var(--cs-green); }
.cs-footer__contact-list a { font-size: .9rem; color: var(--cs-ink-soft); }
.cs-footer__contact-list a:hover { color: var(--cs-green); }
.cs-footer__wa-tag { font-size: .74rem; color: var(--cs-ink-faint); }
.cs-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.cs-footer__social a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cs-hair); display: flex; align-items: center; justify-content: center; color: var(--cs-green-deep); }
.cs-footer__social a:hover { background: var(--cs-green); color: var(--cs-white); border-color: var(--cs-green); }
.cs-footer__news { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: clamp(24px, 3.5vw, 36px) 0; border-top: 1px solid var(--cs-hair); }
.cs-footer__news-label { font-family: var(--cs-display-serif); font-size: 1.15rem; font-weight: 500; color: var(--cs-ink); }
.cs-footer__news-form { display: flex; gap: 10px; flex: 1 1 360px; max-width: 480px; }
.cs-footer__news-input { flex: 1; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--cs-hair); background: var(--cs-ivory); color: var(--cs-ink); font-family: var(--cs-sans); font-size: .88rem; }
.cs-footer__news-input:focus { outline: none; border-color: var(--cs-green); }
.cs-footer__news-btn { padding: 12px 26px; border-radius: 999px; border: none; background: var(--cs-green-deep); color: var(--cs-white); font-family: var(--cs-sans); font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .25s ease; white-space: nowrap; }
.cs-footer__news-btn:hover { background: var(--cs-green); }
.cs-footer__bottom { border-top: 1px solid var(--cs-hair); padding: 18px 0; }
.cs-footer__bottom p { margin: 0; font-size: .8rem; color: var(--cs-ink-faint); }
@media (max-width: 900px) {
  .cs-footer__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .cs-footer__in { grid-template-columns: 1fr; gap: 32px; }
}