/* ============================================================
   Hike Nature Safaris — base + header + hero
   Brand: olive #3D3B2E · cream #F6F6D2 · mountain greys
   ============================================================ */

:root {
  --olive: #3D3B2E;
  --olive-2: #2c2b21;
  --cream: #F6F6D2;
  --gold: #C2883E;
  --ink: #1A1813;
  --white: #ffffff;

  --header-h: 80px;
  --ribbon-w: 200px;

  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* ---- skip-link (visually hidden until focused by keyboard users) ---- */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--olive);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--olive);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   HEADER — transparent, full width, gradient scrim top→bottom
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  /* darker scrim — more opaque at the top, fades to transparent at the bottom */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.89) 0%,
    rgba(0, 0, 0, 0.75) 65%,
    rgba(0, 0, 0, 0.00) 100%
  );
  pointer-events: none; /* re-enabled on children so video stays clickable elsewhere */
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* once the user has scrolled past the hero's top edge, the header drops the
   gradient scrim and locks to solid brand brown so it stays legible over any
   section beneath it */
.site-header.is-scrolled {
  background: #45432f;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.header-inner {
  pointer-events: auto;
  height: var(--header-h);
  width: 100%;
  margin: 0;
  padding: 0 clamp(16px, 2.6vw, 44px);
  display: flex;
  align-items: center;
  /* logo · primary nav · utility group */
  gap: clamp(16px, 2vw, 36px);
}

/* ---- primary nav (4 items, slim) ---- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  margin-left: auto;                 /* nav pushed to the right of the logo */
}

.nav-home { display: none; } /* mobile-only nav item — see RESPONSIVE block */
.nav a {
  position: relative;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 0;
  opacity: 0.92;
  transition: opacity 0.3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---- utility group: sound · lang select · contact CTA ---- */
.header-utility {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: clamp(14px, 1.6vw, 24px);
  margin-left: clamp(8px, 1vw, 20px);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

/* sound toggle */
.snd__btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.snd__btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); }
.snd__btn svg { width: 14px; height: 14px; display: block; }
.snd__btn .ic-on  { display: none; }
.snd__btn .ic-off { display: block; }
.snd__btn.is-on .ic-on  { display: block; }
.snd__btn.is-on .ic-off { display: none; }
.snd__btn.is-on { color: var(--gold); border-color: rgba(194, 136, 62, 0.7); background: rgba(194, 136, 62, 0.16); }

/* ---- mobile-only language strip (3 circles, EN/ES/FR) ---- */
/* hidden by default; the @media block at the bottom reveals it inside the
   open mobile overlay and positions it at the top via order */
.lang-mobile { display: none; }
.lang-mobile__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lang-mobile__opt:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); }
.lang-mobile__opt.is-active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(194, 136, 62, 0.18);
}

/* ---- language dropdown selector ---- */
.lang-select { position: relative; }
.lang-select__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lang-select__btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); }
.lang-select__code { color: var(--white); }
.lang-select__caret {
  width: 9px; height: 6px;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.25s var(--ease);
}
.lang-select.is-open .lang-select__caret { transform: rotate(180deg); }

.lang-select__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  min-width: 140px;
  list-style: none;
  background: #2a2920;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  z-index: 110;
}
.lang-select__menu li { margin: 0; }
.lang-select__opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lang-select__opt:hover { background: rgba(255, 255, 255, 0.06); }
.lang-select__opt.is-active { color: var(--gold); background: rgba(194, 136, 62, 0.10); }

/* flags (shared by trigger + menu) */
.flag {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
  background-size: cover;
  background-position: center;
}
.flag--us {
  background:
    linear-gradient(#3c3b6e, #3c3b6e) 0 0 / 48% 46% no-repeat,
    repeating-linear-gradient(#b22234 0 1.8px, #fff 1.8px 3.6px);
}
.flag--es {
  background: linear-gradient(#AA151B 0 27%, #F1BF00 27% 73%, #AA151B 73%);
}
.flag--fr {
  background: linear-gradient(90deg, #0055A4 0 33.3%, #fff 33.3% 66.6%, #EF4135 66.6%);
}
.flag--de {
  background: linear-gradient(#000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6%);
}

/* ---- Contact CTA (secondary) ---- */
.header-cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--cream);
  border-radius: 999px;
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.header-cta:hover { background: var(--cream); color: var(--olive); }

/* ---- centered logo ribbon (white banner) ---- */
.logo-ribbon {
  pointer-events: auto;
  align-self: start;
  width: var(--ribbon-w);
  margin-top: -2px;
  padding: 22px 24px 28px;
  background: var(--white);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  transition: transform 0.4s var(--ease);
}
.logo-ribbon img { width: 100%; height: auto; }
.logo-ribbon:hover { transform: translateY(2px); }

/* ---- mobile toggle (hidden on desktop) ---- */
.nav-toggle {
  pointer-events: auto;
  display: none;
  position: absolute;
  top: 50%; right: clamp(20px, 4vw, 56px);
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 7px;
}
.nav-toggle span {
  display: block;
  height: 2px; width: 100%;
  margin: 5px 0;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

/* ============================================================
   HERO — full-bleed background video
   ============================================================ */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--olive);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* legibility scrim — fine dot screen + subtle gradient darkening */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* tiny dot pattern — masks compression artifacts and lifts text contrast */
    radial-gradient(rgba(0, 0, 0, 0.55) 0.7px, transparent 0.9px) 0 0 / 3px 3px,
    /* darker toward the bottom for the title area */
    linear-gradient(
      to bottom,
      rgba(26, 24, 19, 0.10) 0%,
      rgba(26, 24, 19, 0.05) 40%,
      rgba(26, 24, 19, 0.55) 100%
    ),
    rgba(26, 24, 19, 0.22); /* subtle flat layer over the whole video */
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  /* lifts the copy + routes button ~60px higher (more breathing room
     between the text and the brush anchored to the hero's bottom edge) */
  padding: 0 clamp(20px, 4vw, 56px) clamp(138px, 16vh, 198px);
  color: var(--white);
  /* copy bottom-left · routes button bottom-right */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(20px, 4vw, 56px);
}

.hero__copy {
  text-align: left;
  max-width: 56ch;
}

.hero__eyebrow {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 20ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.hero__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

/* small editorial link below the lede, links into the immersive piece */
.hero__teaser {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid rgba(246, 246, 210, 0.45);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.hero__teaser:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
  gap: 14px;
}

/* on narrow screens the hero stacks — copy on top, routes button beneath it */
@media (max-width: 720px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 32px);
    padding-bottom: clamp(28px, 6vh, 56px);
  }
  .routes-btn { justify-self: end; }
}

/* ============================================================
   HERO BRUSH EDGE — wide PNG used as a mask, tinted to the
   next section's colour so it visually bridges into it
   ============================================================ */
.hero__brush {
  position: absolute;
  left: 0; right: 0; bottom: -1px;        /* -1 hides any sub-pixel seam */
  height: clamp(42px, 5.5vh, 78px);
  z-index: 3;
  pointer-events: none;
  background-color: var(--brush-color, var(--cream));
  -webkit-mask-image: url("../assets/img/brush-edge.png");
          mask-image: url("../assets/img/brush-edge.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
          mask-position: bottom center;
}

/* ============================================================
   BESPOKE SAFARIS — white section with intro + 3-col grid
   ============================================================ */
.safaris {
  background: #ffffff;
  color: var(--ink);
  padding: clamp(72px, 11vh, 140px) 0 clamp(40px, 5vh, 72px);
}
.safaris__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* ---- intro block (left-aligned, ~60% width) ---- */
.safaris__head {
  max-width: 60%;
  margin: 0 0 clamp(48px, 7vh, 80px);
}
.safaris__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  letter-spacing: 0;
  color: var(--gold);
}
.safaris__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--olive);
}
.safaris__lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.65;
  color: rgba(26, 24, 19, 0.78);
}

/* ---- 3-col tour grid ---- */
.safaris__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
}

.tour-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* square media tile with a hover-zoom + duration pill */
.tour-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--olive-2);
}
.tour-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.tour-card:hover .tour-card__media img { transform: scale(1.05); }

/* duration badge, top-right of the photo */
.tour-card__badge {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  color: var(--olive);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tour-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--olive);
}

/* "Explore" button — olive brand bg, cream/white text */
.tour-card__btn {
  align-self: flex-start;
  display: inline-block;
  padding: 12px 26px;
  margin-top: 4px;
  background: var(--olive);
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.tour-card__btn:hover {
  background: var(--olive-2);
  transform: translateY(-2px);
}
.tour-card__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* featured card — subtle gold ring on the photo (e.g. the 11-day flagship) */
.tour-card--featured .tour-card__media {
  box-shadow: 0 0 0 2px var(--gold) inset, 0 14px 30px -14px rgba(0,0,0,0.3);
}
.tour-card--featured .tour-card__badge {
  background: var(--gold);
  color: #ffffff;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .safaris__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safaris__head { max-width: 76%; }
}
@media (max-width: 640px) {
  .safaris__grid { grid-template-columns: 1fr; }
  .safaris__head { max-width: 100%; }
}

/* ============================================================
   REAL ADVENTURES. LASTING IMPACT. — text left, 2-photo carousel right
   ============================================================ */
.impact {
  background: #ffffff;
  color: var(--ink);
  padding: clamp(24px, 4vh, 56px) 0 clamp(72px, 11vh, 140px);
}
.impact__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 36vw, 520px);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.impact__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--olive);
}
.impact__lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.7;
  color: rgba(26, 24, 19, 0.78);
}

/* ---- carousel ---- */
.impact__carousel { width: 100%; }
.impact__slides {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  background: var(--olive-2);
}
.impact__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.impact__slide.is-active { opacity: 1; }
.impact__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.impact__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(26, 24, 19, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.impact__dot:hover { background: rgba(26, 24, 19, 0.4); }
.impact__dot.is-active { background: var(--olive); transform: scale(1.25); }

@media (max-width: 900px) {
  .impact__wrap { grid-template-columns: 1fr; }
  .impact__carousel { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   TEN YEARS OF THE PEARL OF AFRICA — mirror of .impact: photo left, text right
   ============================================================ */
.home-story {
  background: #ffffff;
  color: var(--ink);
  padding: 0 0 clamp(72px, 11vh, 140px);
}
.home-story__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: clamp(300px, 36vw, 520px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.home-story__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  background: var(--olive-2);
}
.home-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-story__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--olive);
}
.home-story__body {
  max-width: 62ch;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.7;
  color: rgba(26, 24, 19, 0.78);
}
.home-story__body p { margin: 0 0 1em; }
.home-story__body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .home-story__wrap { grid-template-columns: 1fr; }
  .home-story__media { max-width: 420px; margin: 0 auto; }
}

/* ---- button ---- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.btn:hover { background: var(--white); transform: translateY(-2px); }

/* ---- scroll cue ---- */
.hero__cue {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
}
.hero__cue span {
  display: block;
  width: 22px; height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  position: relative;
}
.hero__cue span::after {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  background: var(--white);
  border-radius: 2px;
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue {
  0%   { opacity: 0; transform: translateY(-2px); }
  40%  { opacity: 1; }
  80%  { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  :root { --header-h: 68px; --ribbon-w: 104px; }

  .nav-toggle { display: block; }

  /* closed bar = logo left · burger right; everything else hidden until overlay */
  .nav,
  .header-utility { display: none; }

  /* ---------- OPEN: full-screen menu ---------- */
  .header-inner.is-open {
    position: fixed;
    inset: 0;
    height: 100svh;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vh, 44px);
    padding: clamp(24px, 6vh, 60px) 24px;
    overflow-y: auto;
    background: linear-gradient(165deg, var(--olive) 0%, var(--olive-2) 100%);
  }
  .header-inner.is-open .logo-ribbon {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    z-index: 205;
    width: 104px;
    margin: 0 auto;
    padding: 10px 12px 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  }
  .header-inner.is-open .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2.6vh, 30px);
    margin-left: 0;
    width: 100%;
  }
  .header-inner.is-open .nav a {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 8vw, 2.7rem);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1;
    text-transform: none;
    color: #fff;
    opacity: 1;
    padding: 4px 0;
    animation: menu-link-in 0.5s var(--ease) both;
  }
  .header-inner.is-open .nav a::after { display: none; }
  .header-inner.is-open .nav a[aria-current="page"] { color: var(--gold); }

  /* mobile menu order: Home · About · Safaris · Destinations · Wildlife · Discover Uganda */
  .header-inner.is-open .nav-home { display: block; order: 1; }
  .header-inner.is-open .nav a[href="about"]          { order: 2; }
  .header-inner.is-open .nav a[href="./#safaris"]     { order: 3; }
  .header-inner.is-open .nav a[href="./#where"]       { order: 4; }
  .header-inner.is-open .nav a[href="wildlife"]       { order: 5; }
  .header-inner.is-open .nav a[href="discover-uganda"] { order: 6; }

  /* utility row inside the overlay: sound + Contact CTA only.
     The desktop language dropdown is hidden on mobile — we use the
     dedicated .lang-mobile strip instead (pinned to the top via order). */
  .header-inner.is-open .header-utility {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin: 18px 0 0;
    padding-left: 0;
    border-left: 0;
    order: 2;                                  /* push to the very bottom */
  }
  .header-inner.is-open .lang-select { display: none; }

  /* mobile language strip — 4 flag-circles with EN/ES/FR/DE, pinned to top */
  .header-inner.is-open .lang-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    order: -1;                                 /* above the nav links */
    margin-top: 12px;
  }
  .header-inner.is-open .nav        { order: 1; }   /* nav links between lang and footer */

  /* stagger the six nav links */
  .header-inner.is-open .nav a:nth-child(1) { animation-delay: 0.06s; }
  .header-inner.is-open .nav a:nth-child(2) { animation-delay: 0.12s; }
  .header-inner.is-open .nav a:nth-child(3) { animation-delay: 0.18s; }
  .header-inner.is-open .nav a:nth-child(4) { animation-delay: 0.24s; }
  .header-inner.is-open .nav a:nth-child(5) { animation-delay: 0.30s; }
  .header-inner.is-open .nav a:nth-child(6) { animation-delay: 0.36s; }

  /* toggle → X, pinned top-right above the overlay */
  .header-inner.is-open .nav-toggle {
    position: fixed;
    top: 14px; right: 16px;
    transform: none;
    z-index: 210;
  }
  .header-inner.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header-inner.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .header-inner.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   FOOTER-TOP BANNER — full-bleed photo above the site footer.
   Aspect-ratio matches the source image (2400×1262 ≈ 1.9:1) so the
   section's height tracks the photo's natural height as the viewport
   resizes, never cropping vertically.
   ============================================================ */
.footer-top {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 752;
  background: #1a1813 url("../assets/img/footer-top.png?v=44") center / cover no-repeat;
}

/* ============================================================
   SITE FOOTER — large brand block (#45432f, ≥500px) + tiny
   designer bar (#3A3827) underneath it.
   ============================================================ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.site-footer {
  background: #45432f;
  color: var(--cream);
  min-height: 500px;
  display: flex;
  align-items: stretch;
  padding: clamp(64px, 8vh, 110px) 0 clamp(56px, 7vh, 96px);
  position: relative;
}
.site-footer__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* ---- brand column ---- */
.site-footer__logo {
  display: inline-block;
  width: 138px;
  margin-bottom: 22px;
}
.site-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
  /* logo art is dark-on-cream; this puts it on a cream pill so it reads on #45432f */
  background: #fff;
  padding: 10px 14px;
  border-radius: 2px;
}
.site-footer__tagline {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  color: var(--gold);
}
.site-footer__about {
  margin: 0;
  max-width: 38ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(246, 246, 210, 0.78);
}

/* ---- nav + contact columns ---- */
.site-footer__col {
  min-width: 0;
}
.site-footer__h {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__col li,
.site-footer__col a {
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.site-footer__col a:hover { color: var(--gold); }

.site-footer__contact li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--cream);
}
.site-footer__lbl {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 246, 210, 0.5);
}

/* ---- signoff column ---- */
.site-footer__signoff { text-align: left; }
.site-footer__eyebrow {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-footer__big {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.1vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.site-footer__big span { white-space: nowrap; }

/* ---- social icons ---- */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(246, 246, 210, 0.32);
  border-radius: 50%;
  color: var(--cream);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.site-footer__social a:hover {
  background: rgba(194, 136, 62, 0.16);
  border-color: var(--gold);
  color: var(--gold);
}
.site-footer__social svg { width: 16px; height: 16px; }

/* ---- designer bar ---- */
.site-footer__bar {
  background: #3A3827;
  color: rgba(246, 246, 210, 0.6);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.site-footer__bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px clamp(20px, 4vw, 64px);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.site-footer__bar p { margin: 0; }
.site-footer__bar a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.site-footer__bar a:hover { border-bottom-color: var(--gold); }

/* ---- responsive: collapse 4-col → 2-col → 1-col ---- */
@media (max-width: 980px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 36px; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__bar-inner { justify-content: center; text-align: center; padding: 18px 20px; }
}

/* ============================================================
   WHATSAPP BUBBLE — floating, bottom-right, on every page.
   Icon-only at rest; the number slides out of it on hover/focus.
   ============================================================ */
.wa-fab {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2.4vh, 28px);
  z-index: 140;                       /* under the cookie banner (150) + shutter (9000) */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}
.wa-fab__icon {
  width: clamp(52px, 5vw, 60px);
  height: auto;
  border-radius: 26%;                 /* matches the squircle drawn in the SVG */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.38));
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.wa-fab:hover .wa-fab__icon,
.wa-fab:focus-visible .wa-fab__icon {
  transform: scale(1.06);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.46));
}
.wa-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 8px; }

/* the number: collapsed at rest, slides out on hover */
.wa-fab__label {
  padding: 9px 15px;
  background: #1A1813;
  color: var(--cream);
  border: 1px solid rgba(246, 246, 210, 0.16);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label {
  opacity: 1;
  transform: translateX(0);
}

/* out of the way of the cookie banner while it's on screen */
body:has(.cookie-banner.is-visible) .wa-fab { transform: translateY(-96px); }

/* the 3D-map side panel owns the right half — get out of its way */
body.panel-open .wa-fab { opacity: 0; pointer-events: none; transform: translateY(14px); }

/* no hover on touch: the label would never show, so drop it entirely */
@media (hover: none) {
  .wa-fab__label { display: none; }
}
@media (max-width: 640px) {
  body:has(.cookie-banner.is-visible) .wa-fab { transform: translateY(-152px); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab__icon, .wa-fab__label { transition-duration: 0.01ms; }
  .wa-fab:hover .wa-fab__icon { transform: none; }
}

/* ============================================================
   COOKIE BANNER — fixed bottom; hidden via [hidden] until JS reveals it
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vh, 24px);
  z-index: 150;                       /* above page content, below the shutter (9000) */
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #1A1813;
  color: var(--cream);
  border: 1px solid rgba(246, 246, 210, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.45;
  transform: translateY(120%);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.cookie-banner__msg { margin: 0; flex: 1 1 auto; }
.cookie-banner__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.cookie-banner__btn:hover { background: #d59855; transform: translateY(-1px); }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner__btn { justify-content: center; }
}

/* ============================================================
   TOUR CARDS — fade + lift in as they scroll into view
   JS adds .is-in once the card crosses the viewport.
   ============================================================ */
.tour-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.tour-card.is-in {
  opacity: 1;
  transform: none;
}
/* small stagger — each card waits a fraction longer than the one before it */
.tour-card:nth-child(1).is-in  { transition-delay: 0.00s; }
.tour-card:nth-child(2).is-in  { transition-delay: 0.06s; }
.tour-card:nth-child(3).is-in  { transition-delay: 0.12s; }
.tour-card:nth-child(4).is-in  { transition-delay: 0.18s; }
.tour-card:nth-child(5).is-in  { transition-delay: 0.24s; }
.tour-card:nth-child(6).is-in  { transition-delay: 0.30s; }
.tour-card:nth-child(7).is-in  { transition-delay: 0.36s; }
.tour-card:nth-child(8).is-in  { transition-delay: 0.42s; }
.tour-card:nth-child(9).is-in  { transition-delay: 0.48s; }
.tour-card:nth-child(10).is-in { transition-delay: 0.54s; }
.tour-card:nth-child(11).is-in { transition-delay: 0.60s; }
/* respect reduced-motion: cards always visible, no transform */
@media (prefers-reduced-motion: reduce) {
  .tour-card { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   ENQUIRY FORM — below "What to expect" (fichas) and at the foot
   of the home. LIGHT theme: shares the white background of the
   "Experience Luxury" (.safaris) section so it flows into the
   footer photo band + dark footer below.
   ============================================================ */
.enquiry {
  background: #ffffff;
  color: var(--ink);
  padding: clamp(40px, 5vh, 72px) 0 clamp(56px, 9vh, 120px);
  border-top: 1px solid rgba(26, 24, 19, 0.10);
}
.enquiry__wrap {
  width: min(760px, 90vw);
  margin: 0 auto;
}
.enquiry__head { text-align: center; margin-bottom: clamp(28px, 4vh, 44px); }
.enquiry__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.enquiry__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--ink);
}
.enquiry__lede {
  font-family: var(--font-ui);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(26, 24, 19, 0.68);
  margin: 0 auto;
  max-width: 52ch;
}

.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.field { display: flex; flex-direction: column; }
.field--wide { grid-column: 1 / -1; }
.field label,
.field-check span {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(26, 24, 19, 0.82);
  margin-bottom: 7px;
}
.field label span[aria-hidden] { color: var(--gold); }
.field__opt { font-weight: 400; color: rgba(26, 24, 19, 0.45); letter-spacing: 0.02em; }

.field input,
.field textarea,
.select-wrap select {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background: #faf9f4;
  border: 1px solid rgba(26, 24, 19, 0.18);
  border-radius: 3px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(26, 24, 19, 0.38); }
.field input:focus,
.field textarea:focus,
.select-wrap select:focus {
  outline: none;
  border-color: var(--gold);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(194, 136, 62, 0.14);
}

/* custom select (native arrow removed, brand caret added) */
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.select-wrap select option { color: #1A1813; background: #ffffff; }
.select-wrap__caret {
  position: absolute;
  right: 15px;
  top: 50%;
  width: 12px;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
}

/* consent checkbox */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 20px 0 0;
  cursor: pointer;
}
.field-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid rgba(26, 24, 19, 0.35);
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.field-check input:checked { background: var(--gold); border-color: var(--gold); }
.field-check input:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.field-check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field-check span { margin-bottom: 0; font-weight: 400; line-height: 1.5; color: rgba(26, 24, 19, 0.72); }
.field-check a { color: var(--gold); text-decoration: underline; }

/* honeypot — off-screen, never shown */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.enquiry__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}
.enquiry__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  background: #E08A2F;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.enquiry__submit:hover { background: #C2883E; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(224, 138, 47, 0.30); }
.enquiry__submit:focus-visible { outline: 2px solid #E08A2F; outline-offset: 3px; }
.enquiry__submit[disabled] { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.enquiry__req { font-family: var(--font-ui); font-size: 0.74rem; color: rgba(26, 24, 19, 0.5); margin: 0; }

/* status banners */
.enquiry__status {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 14px 18px;
  border-radius: 3px;
  margin: 0 0 22px;
}
.enquiry__status a { color: inherit; text-decoration: underline; }
.enquiry__status--ok  { background: #eef5e4; border: 1px solid rgba(120, 160, 80, 0.55); color: #3f5a25; }
.enquiry__status--err { background: #fbece7; border: 1px solid rgba(190, 90, 60, 0.5);  color: #8a3a24; }
.enquiry__status.is-hidden { display: none; }

@media (max-width: 600px) {
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .enquiry__submit { width: 100%; }
  .enquiry__req { text-align: center; }
}