/* ============================================================
   YALA ETHICAL SAFARI — Design System
   Mobile-first. Plain CSS. Zero frameworks.
   Lora + DM Sans · Forest green · Warm sand · Gold
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ── */
:root {
  /* ── Yala Ethical Safari — Green-Dominant Palette (WCAG AAA) ── */

  /* Core greens */
  --color-bg:             #FDFAF5;  /* Warm white — page background, white cards */
  --color-dark:           #1B3828;  /* Deep forest green — header, hero, most sections, footer */
  --color-dark-mid:       #254D36;  /* Mid forest green — philosophy section, elements */
  --color-surface:        #F0EAE0;  /* Sand — the two light sections */
  --color-surface-2:      #F0EAE0;  /* Sand — same as surface */
  --color-surface-3:      #FDFAF5;  /* White — floating cards on dark sections */

  /* Accent / interactive */
  --color-accent:         #254D36;  /* Dark forest green — links, green icons */
  --color-accent-hover:   #1B3828;  /* Deeper green — hover on green links */
  --color-accent-muted:   rgba(37,77,54,0.10); /* Soft green tint — frequency badges */
  --color-gold:           #C9973A;  /* Gold — WhatsApp button background ONLY */
  --color-gold-hover:     #B8742A;  /* Gold hover */
  --color-gold-text:      #1A1008;  /* Text ON gold button — 7.11:1 AAA */

  /* Text on DARK sections (#1B3828 and #254D36) */
  --color-on-dark:        #FDFAF5;  /* Primary headings on dark green — 12.28:1 AAA */
  --color-on-dark-body:   #E8DFC8;  /* Body text on dark green — 9.63:1 AAA */
  --color-on-dark-muted:  #D4E0D4;  /* Muted / secondary text on dark green — 9.38:1 AAA */
  --color-on-dark-eyebrow:#C9973A;  /* Eyebrow labels on dark green — gold */

  /* Text on LIGHT sections (#F0EAE0 and #FDFAF5) */
  --color-text:           #1A1A18;  /* Body text on light — 14.57:1 on sand, 16.74:1 on white */
  --color-text-muted:     #4A4640;  /* Muted text on light — 7.83:1 on sand AAA */
  --color-text-dim:       #6B6862;  /* Tertiary / decorative only */
  --color-sienna:         #6B4309;  /* Eyebrow labels on light sections — 7.22:1 on sand AAA */

  /* Borders */
  --color-border:         #D5CCB8;  /* Dividers on light sections */
  --color-border-light:   #E4DAC8;  /* Subtle inner borders on light */
  --color-border-dark:    #254D36;  /* Dividers on dark sections */

  /* Cards */
  --color-card:           #FDFAF5;  /* White card floating on dark section */
  --color-card-img:       #E4DAC8;  /* Image placeholder bg inside white cards */
  --color-dark-surface:   rgba(253,250,245,0.06);  /* Subtle recessed surface on dark green bg */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-y:       52px;
  --container-max:   1200px;
  --container-narrow: 780px;
  --transition:      220ms ease;
  --transition-slow: 400ms ease;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --shadow-hover: 0 8px 32px rgba(27,56,40,0.18);
  --header-height: 130px;
}

/* ── 2. RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; touch-action: manipulation; }

/* ── 3. TYPOGRAPHY ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}
h3, h4 { font-weight: 500; }
/* ── Text on dark sections ── */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--dark .heading-section, .section--dark .page-hero__title,
.section--mid h1, .section--mid h2, .section--mid h3, .section--mid h4,
.section--mid .heading-section,
.site-footer h2, .site-footer h3,
.hero-content h1, .hero-title {
  color: var(--color-on-dark);
}
.section--dark p, .section--dark li, .section--dark .text-muted,
.section--mid p, .section--mid li, .section--mid .text-muted {
  color: var(--color-on-dark-body);
}
.section--dark .eyebrow, .section--dark .hero-tagline,
.section--mid .eyebrow {
  color: var(--color-on-dark-eyebrow);
}
/* White/sand cards and boxes inside dark sections — restore dark text */
.section--dark .wildlife-card h3,
.section--dark .wildlife-card__name { color: var(--color-dark); }
.section--dark .wildlife-card p,
.section--dark .wildlife-card__note { color: var(--color-text-muted); }
.section--dark .review-card__text { color: var(--color-text-muted); }
.section--dark .block-panel__title { color: var(--color-dark); }
.section--dark .block-panel p,
.section--dark .block-panel__body { color: var(--color-text-muted); }
.section--dark .block-panel__verdict { color: var(--color-text); }
.section--dark .faq-item p,
.section--dark .faq-item li { color: var(--color-text-muted); }
.section--dark .honest-choice__callout p,
.section--dark .honest-choice__text p { color: var(--color-text-muted); }

/* Links using .text-accent on dark sections — switch to readable amber */
.section--dark .text-accent,
.section--mid .text-accent { color: var(--color-on-dark-eyebrow); }
.section--dark .text-accent:hover,
.section--mid .text-accent:hover { color: var(--color-on-dark); }

/* Philosophy bars on dark-mid section */
.section--mid .philosophy-list li { border-left-color: var(--color-on-dark-eyebrow); }
.section--mid .philosophy-list li strong { color: var(--color-on-dark); }

/* Section headings on light sections — deep green */
.heading-section {
  color: var(--color-dark);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sienna);
  margin-bottom: var(--space-3);
}
.heading-section {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.heading-section--center { text-align: center; }
.heading-section--tight  { margin-bottom: var(--space-4); }
.heading-section--sm     { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-center { text-align: center; }

/* ── 4. LAYOUT ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: min(var(--container-narrow), 65ch); }
.section { padding-block: var(--section-y); }
.section--dark { background-color: var(--color-dark); }
.section--mid  { background-color: var(--color-dark-mid); }
.section--tinted { background-color: var(--color-surface); }
.section--tinted .eyebrow { color: var(--color-accent); }
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border-light), transparent);
  border: none;
  margin-block: var(--space-8);
}
.section--dark .divider,
.section--mid .divider {
  background: linear-gradient(to right, transparent, var(--color-border-dark), transparent);
}

/* ── 5. HEADER ── */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: transform 350ms ease, opacity 200ms ease;
}
/* opacity fades first (200ms) so the overflowing logo never peeks during the slide */
.site-header.header--hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo-img { display: block; height: 110px; width: auto; }

/* ── 6. NAV ── */
.main-nav {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--color-dark);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  padding-top: 130px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.main-nav.is-open { display: flex; opacity: 1; pointer-events: auto; }

/* Nav header row: logo + close button */
.nav-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-5);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo .logo-img { height: 110px; }
.nav-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-on-dark);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
}

.nav-list { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; }
.nav-link {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-on-dark-muted);
  transition: color var(--transition);
  padding-block: var(--space-2);
}
.nav-link:hover, .nav-link:focus { color: var(--color-on-dark); }
.nav-link--active { color: var(--color-gold); }
.nav-mobile-cta { margin-top: var(--space-6); }
.nav-overlay { display: none; position: fixed; inset: 0; z-index: 150; background-color: rgba(0,0,0,0.8); }
.nav-overlay.is-visible { display: block; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 12px 8px;
  flex-shrink: 0;
  z-index: 300;
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
}
.nav-toggle__bar {
  display: block;
  height: 1.5px;
  background-color: var(--color-on-dark);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.btn.btn--header { display: none; }

/* ── 7. BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  min-height: 48px;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — antique gold, dark text. Every WhatsApp CTA and primary action. */
.btn--whatsapp {
  background-color: var(--color-gold);
  color: var(--color-gold-text);
  border-color: var(--color-gold);
}
.btn--whatsapp:hover {
  background-color: var(--color-gold-hover);
  color: var(--color-gold-text);
  box-shadow: 0 6px 24px rgba(201,151,58,0.28);
  border-color: var(--color-gold-hover);
}

/* Secondary — outlined, transparent */
.btn--outline {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-border);
}
.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}
/* Outlined button on dark sections — invert to light */
.section--dark .btn--outline,
.section--mid .btn--outline,
.hero .btn--outline {
  color: var(--color-on-dark);
  border-color: rgba(253,250,245,0.30);
}
.section--dark .btn--outline:hover,
.section--mid .btn--outline:hover,
.hero .btn--outline:hover {
  color: var(--color-on-dark);
  border-color: rgba(253,250,245,0.60);
  background: rgba(253,250,245,0.08);
}

.btn--full { width: 100%; }

/* WhatsApp pulse — compositor thread, no JS repaint */
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  60%  { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.btn--whatsapp.is-pulsing,
.wa-float.is-pulsing {
  animation: wa-pulse 2.4s ease-out infinite;
}

/* ── 8. MAIN CONTENT OFFSET ── */
#main-content { padding-top: var(--header-height); }
.hero {
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
  min-height: 100vh;
  min-height: 100svh;
}

/* ── 9. HERO ── */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-20);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Left-to-right: dark on left where text lives, fades to clear by 60% so the right side is image-only */
  /* Bottom-to-top: dark at bottom for text, nav coverage at top */
  background:
    linear-gradient(to right,
      rgba(4,10,6,0.82) 0%,
      rgba(4,10,6,0.50) 32%,
      rgba(4,10,6,0.10) 52%,
      transparent 62%
    ),
    linear-gradient(to top,
      rgba(4,10,6,0.88) 0%,
      rgba(4,10,6,0.50) 28%,
      rgba(4,10,6,0.08) 52%,
      rgba(4,10,6,0.32) 80%,
      rgba(4,10,6,0.50) 100%
    );
}
.hero-content { position: relative; z-index: 2; width: 100%; }

/* Homepage only: compensate for hero-content's 4vw left offset so logo aligns with hero text */
@media (min-width: 1024px) {
  body.has-hero .site-logo {
    margin-left: calc(4vw - max(0px, (100vw - var(--container-max)) / 2));
  }
}
.hero-content .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.hero-tagline {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  font-weight: 500;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-on-dark);
  max-width: 16ch;
}
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-gold);
}
.hero-subtitle {
  font-size: var(--text-base);
  color: var(--color-on-dark-muted);
  max-width: 36ch;
  line-height: 1.7;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Hero slider controls — dots + pause */
.hero-slider-controls { display: flex; align-items: center; gap: var(--space-3); }
.hero-dots { display: flex; align-items: center; gap: 0; }
.hero-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: none;
}
.hero-dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(253,250,245,0.35);
  border: 1px solid rgba(253,250,245,0.55);
  transition: background 300ms ease, width 300ms ease, border-radius 300ms ease;
}
.hero-dot.is-active::before {
  width: 22px;
  border-radius: 4px;
  background: rgba(253,250,245,0.90);
  border-color: transparent;
}
.hero-dot:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.hero-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(253,250,245,0.12);
  border: 1px solid rgba(253,250,245,0.30);
  color: rgba(253,250,245,0.80);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 200ms ease, color 200ms ease;
}
.hero-pause:hover { background: rgba(253,250,245,0.22); color: var(--color-on-dark); }
.hero-pause:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.hero-pause__icon--play { display: none; }
.hero-pause.is-paused .hero-pause__icon--pause { display: none; }
.hero-pause.is-paused .hero-pause__icon--play { display: block; }

/* ── 10. PAGE HERO (inner pages) ── */
.page-hero {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background-color: var(--color-dark);
  border-bottom: 1px solid var(--color-border-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.page-hero--with-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 35%),
    linear-gradient(to top,    rgba(0, 0, 0, 0.55) 0%, transparent 65%);
  backdrop-filter: blur(0.4px);
  -webkit-backdrop-filter: blur(0.4px);
  z-index: 0;
}
.page-hero--with-image .container {
  position: relative;
  z-index: 1;
}
.page-hero .eyebrow { color: var(--color-on-dark-eyebrow); }
.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  color: var(--color-on-dark);
}
.page-hero__sub {
  font-size: var(--text-lg);
  color: var(--color-on-dark-body);
  max-width: 56ch;
  line-height: 1.65;
}
.page-hero--portrait {
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

/* ── 11. BRAND CONTEXT ── */
.brand-context { background-color: var(--color-surface-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.brand-context__inner { display: grid; gap: var(--space-12); }
.brand-context__about p { color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-5); }
.brand-context__about a { text-decoration: underline; text-underline-offset: 3px; }
.philosophy-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.philosophy-list li { color: var(--color-text-muted); line-height: 1.6; padding-left: var(--space-5); border-left: 2px solid var(--color-accent); }
.philosophy-list li strong { color: var(--color-text); display: block; margin-bottom: 0.2rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.01em; }

/* ── 12. HONEST CHOICE ── */
.honest-choice { border-top: 1px solid var(--color-border); }
.honest-choice__inner { display: grid; gap: var(--space-10); }
.honest-choice__text p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.8;
}
.honest-choice__text p + p { margin-top: var(--space-5); }

.honest-choice__callout {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.honest-choice__callout::before {
  content: '\201C';
  position: absolute;
  top: -0.15em;
  left: var(--space-4);
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--color-sienna);
  opacity: 0.30;
  line-height: 1;
  pointer-events: none;
}
.honest-choice__callout p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ── 12. WILDLIFE CARDS ── */
.wildlife-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.wildlife-card {
  background-color: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition);
  display: flex;
  flex-direction: column;
}
.wildlife-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-light);
}
.wildlife-card__image { aspect-ratio: 16/10; overflow: hidden; background-color: var(--color-surface-3); }
.wildlife-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.wildlife-card:hover .wildlife-card__image img { transform: scale(1.06); }
.wildlife-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; align-items: flex-start; gap: var(--space-3); }
.wildlife-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.wildlife-card__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 0;
}
.wildlife-card__freq {
  display: inline-block;
  margin-top: auto;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
}
.wildlife-card__freq--common { background-color: var(--color-accent-muted); color: var(--color-accent); }
.wildlife-card__freq--rare   { background-color: rgba(94,88,80,0.12); color: var(--color-text-muted); }

.wildlife-disclaimer {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.section--tinted .wildlife-disclaimer { background-color: var(--color-bg); }
.section--tinted .carousel-counter { color: var(--color-text-muted); }

/* ── WILDLIFE CAROUSEL ── */
.wildlife-carousel-wrapper { position: relative; }
.carousel-counter {
  display: none;
  text-align: right;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
}
.carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  color: var(--color-dark);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 16px rgba(0,0,0,0.22);
  transition: box-shadow var(--transition), transform var(--transition);
}
.carousel-arrow:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.38); transform: translateY(calc(-50% - 2px)); }
.carousel-arrow--prev { left: 4px; }
.carousel-arrow--next { right: 4px; }

/* Dot indicators — mobile only */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-4);
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(27,56,40,0.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 250ms ease, transform 250ms ease;
  flex-shrink: 0;
}
.carousel-dot.is-active {
  background-color: var(--color-gold);
  transform: scale(1.3);
}
.section--tinted .carousel-dot { background-color: rgba(27,56,40,0.15); }
.section--dark .carousel-dot { background-color: rgba(255,255,255,0.2); }
.section--dark .carousel-dot.is-active { background-color: var(--color-gold); }
@media (min-width: 1024px) {
  .carousel-dots { display: none; }
}

/* ── 13. PACKAGES ── */
.packages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.package-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-7, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.package-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.package-card--featured {
  border-color: var(--color-accent);
  background-color: var(--color-surface-2);
  position: relative;
}
.package-card__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.package-card__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: 0;
}
.package-card__duration {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.package-card__desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: 0;
}
.package-card__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-top: auto;
}
.package-card__price span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Packages swipe hint + dots (hidden on desktop, shown on mobile) */
.packages-swipe-hint { display: none; }
.packages-dots { display: none; }

/* Packages note */
.packages-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-8);
  text-align: center;
}
.packages-note__rule {
  width: 40px; height: 1px;
  background: var(--color-border);
  margin-bottom: 2px;
}
.packages-note__disclaimer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.packages-note__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(37,77,54,0.25);
  padding-bottom: 1px;
}
.packages-note__link:hover { border-bottom-color: var(--color-accent); }

/* ── 14. BLOCK COMPARISON ── */
.block-comparison { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.block-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}
.block-panel__number {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 300;
  color: var(--color-border-light);
  line-height: 1;
  margin-bottom: var(--space-2);
  user-select: none;
  letter-spacing: -0.04em;
}
.block-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.block-panel__body { color: var(--color-text-muted); line-height: 1.8; flex: 1; }
.block-panel__body p + p { margin-top: var(--space-4); }
.block-panel__verdict {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-muted);
  border: 1px solid rgba(37,77,54,0.15);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-style: italic;
}
.block-panel__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-5);
}
.block-panel__trait {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--color-accent-muted);
  border: 1px solid rgba(37,77,54,0.14);
  font-size: 11.5px;
  color: var(--color-accent);
  font-weight: 500;
}
/* Tab pills — hidden on desktop, shown on mobile via media query */
.block-tabs { display: none; }

/* ── 15. GALLERY ── */
/* Desktop: 4-column masonry — rows are transparent via display:contents */
.gallery-section {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 8px;
}
.gallery-row { display: contents; }
.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}
.gallery-item--wide { grid-column: span 2; }
.gallery-item img {
  width: 100%; height: auto; display: block;
  transition: transform 600ms ease;
}
.gallery-item:hover img { transform: scale(1.04); }

/* ── 16. REVIEWS ── */
.reviews-grid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.review-card {
  background-color: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
}
.review-card::before {
  content: '\201C';
  position: absolute;
  top: var(--space-3);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--color-sienna);
  opacity: 0.20;
  line-height: 1;
  pointer-events: none;
}
.review-card__stars { display: flex; gap: 3px; margin-bottom: var(--space-4); color: var(--color-gold); font-size: var(--text-base); }
.review-card__text {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-5);
}
.review-card__name { font-weight: 500; font-size: var(--text-sm); color: var(--color-text); display: block; }
.review-card__meta { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; }
.review-card__attribution { display: flex; flex-direction: column; gap: 3px; }
.reviews-dots { display: none; }
.review-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(200,221,209,0.25); transition: background 0.25s ease, transform 0.25s ease; }
.review-dot.is-active { background: var(--color-gold); transform: scale(1.3); }

/* ── 17. ABOUT SHORT & ABOUT PAGE ── */
.about-pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-dark);
  text-align: center;
  padding: var(--space-10) 0;
  margin: var(--space-10) 0;
  line-height: 1.55;
  position: relative;
}
.about-pullquote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-display);
  font-size: 5.5rem;
  color: var(--color-gold);
  line-height: 0.65;
  margin-bottom: var(--space-6);
  font-style: normal;
  font-weight: 600;
}
.about-pullquote::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--color-gold);
  margin: var(--space-8) auto 0;
}
/* About story — editorial structural classes */
.story-drop::first-letter {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 600;
  color: var(--color-gold);
  float: left;
  line-height: 0.82;
  margin-right: 0.1em;
  padding-top: 0.06em;
}
.story-phase-break {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-12) 0;
}
.story-phase-break::before,
.story-phase-break::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--color-border);
}
.story-phase-break__dots {
  display: flex;
  gap: 6px;
}
.story-phase-break__dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
}
.story-turn {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-dark);
  font-weight: 500;
  line-height: 1.55;
}
/* b5-em on dark sections — flip to light */
.section--dark .b5-em { color: var(--color-on-dark); }

/* ── 17b. ABOUT — editorial components ── */
/* Decision trade-off comparison */
.decision-tradeoff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: var(--space-8) 0;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.decision-tradeoff__col { padding: var(--space-6); }
.decision-tradeoff__col--b1 {
  background: var(--color-bg);
  border-right: 0.5px solid var(--color-border);
}
.decision-tradeoff__col--b5 { background: var(--color-surface); }
.decision-tradeoff__tag {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  margin-bottom: var(--space-3);
}
.decision-tradeoff__col--b5 .decision-tradeoff__tag { color: var(--color-accent); }
.decision-tradeoff__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}
/* Photography platforms */
.photo-platforms {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.photo-platform {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-4);
  border: 0.5px solid rgba(253, 250, 245, 0.25);
  border-radius: 2px;
  color: var(--color-on-dark-muted);
}
.photo-platform--link {
  color: var(--color-gold);
  border-color: rgba(201, 151, 58, 0.4);
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.photo-platform--link:hover { color: var(--color-on-dark); border-color: rgba(253, 250, 245, 0.5); }
/* Sister brand — split layout */
.sister-split {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.sister-split__text { flex: 1; }
.sister-split__text p:last-child { line-height: 1.75; }
.section--dark .sister-split__text p:last-child,
.section--mid .sister-split__text p:last-child { color: var(--color-on-dark-body); }
.sister-split__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-on-dark);
  line-height: 1.3;
  margin: var(--space-2) 0 var(--space-4);
}
.sister-split__action { flex-shrink: 0; }

/* ── 22b. CONTACT — redesigned channels & checklist ── */
.contact-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin: var(--space-10) 0;
}
.contact-channel {
  border-radius: var(--radius-md);
  padding: var(--space-8);
}
.contact-channel--primary { background: var(--color-dark); }
.contact-channel--secondary {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
}
.contact-channel__icon {
  width: 32px;
  height: 32px;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
  display: block;
}
.contact-channel--secondary .contact-channel__icon { color: var(--color-accent); }
.contact-channel__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-on-dark);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}
.contact-channel--secondary .contact-channel__label { color: var(--color-dark); }
.contact-channel__note {
  font-size: var(--text-sm);
  color: var(--color-on-dark-body);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.contact-channel--secondary .contact-channel__note { color: var(--color-text-muted); }
.contact-channel__trust {
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
  margin-top: var(--space-4);
  letter-spacing: 0.04em;
}
/* Contact checklist */
.contact-checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}
.contact-checklist__item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 0.5px solid var(--color-border);
  align-items: flex-start;
}
.contact-checklist__item:last-child { border-bottom: none; }
.contact-checklist__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  min-width: 1.5rem;
  line-height: 1.8;
  flex-shrink: 0;
}
.contact-checklist__title {
  display: block;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}
.contact-checklist__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* Location note */
.location-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.location-note svg { flex-shrink: 0; color: var(--color-accent); }
.location-note a { color: var(--color-accent); margin-left: auto; white-space: nowrap; }
.location-note a:hover { color: var(--color-accent-hover); }

.about-short { display: grid; gap: var(--space-10); }
.about-short__image {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface);
}
.about-short__image img { width: 100%; height: 100%; object-fit: cover; }
.about-short__text p { color: var(--color-text-muted); line-height: 1.8; }
.about-short__text p + p { margin-top: var(--space-4); }

/* ── 18. CTA SECTION ── */
.cta-section {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.cta-section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.cta-section__sub {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin-bottom: 0;
}

/* ── 18b. BLOCK 5 PAGE — EDITORIAL COMPONENTS ── */

/* History facts strip */
.b5-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: var(--space-8) 0;
  padding: var(--space-6) 0;
  border-top: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
}
.b5-fact {
  padding: 0 var(--space-5);
  border-left: 0.5px solid var(--color-border);
}
.b5-fact:first-child { padding-left: 0; border-left: none; }
.b5-facts--three { grid-template-columns: repeat(3, 1fr); }
.b5-fact__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.b5-fact__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  line-height: 1.5;
}

/* Vehicle comparison callout */
.b5-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-7) 0;
}
.b5-compare__block {
  padding: var(--space-6);
  border-radius: var(--radius-md);
}
.b5-compare__block--b1 {
  background: rgba(13,34,24,0.05);
  border: 0.5px solid var(--color-border);
}
.b5-compare__block--b5 {
  background: rgba(192,148,71,0.07);
  border: 0.5px solid rgba(192,148,71,0.28);
}
.b5-compare__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-dim);
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.b5-compare__count {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.b5-compare__block--b1 .b5-compare__count { color: var(--color-dark); }
.b5-compare__block--b5 .b5-compare__count { color: var(--color-accent); }
.b5-compare__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.b5-compare__peak {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

/* Emphasis transition sentences */
.b5-em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.5;
}

/* ── 18c. SUITS LIST ── */
.suits-list { margin-top: var(--space-8); display: flex; flex-direction: column; }
.suits-list__item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}
.suits-list__item:first-child { border-top: 1px solid var(--color-border); }
.suits-list__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}
.suits-list__icon--honest { color: var(--color-sienna); }
.suits-list__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}
.suits-list__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── 19. FAQ ── */
.faq-list { margin-top: var(--space-8); display: grid; gap: var(--space-2); }
.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item:hover { border-color: var(--color-border-light); }
.faq-item__question {
  width: 100%;
  text-align: left;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  background: none;
  border: none;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  transition: transform var(--transition);
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 320ms ease; }
.faq-item.is-open .faq-item__answer { max-height: 600px; }
.faq-item__answer-inner {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: var(--text-base);
}
.faq-item__answer-inner p + p { margin-top: var(--space-3); }

/* ── 20. ARTICLES ── */
.articles-grid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.article-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition);
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-accent);
}
.article-card__date { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.article-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.article-card:hover .article-card__title { color: var(--color-accent); }
.article-card__excerpt { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.65; margin-bottom: 0; }
.article-card__read { font-size: var(--text-sm); color: var(--color-accent); font-weight: 500; margin-top: auto; }

/* ── 21a. BREADCRUMB ── */
.breadcrumb { display: none; padding: var(--space-3) 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); list-style: none; padding: 0; }
.breadcrumb li { display: flex; align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--space-2); color: var(--color-text-dim); }
.breadcrumb a { color: var(--color-text-muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li[aria-current="page"] { color: var(--color-text); }
/* Dark breadcrumb on pages where a .page-hero follows (block-5, block-6, about, etc.) */
.breadcrumb:has(~ .page-hero) { margin-bottom: 0; background-color: var(--color-dark); border-bottom: 1px solid var(--color-border-dark); }
.breadcrumb:has(~ .page-hero) li { color: var(--color-on-dark-muted); }
.breadcrumb:has(~ .page-hero) li + li::before { color: var(--color-border-dark); }
.breadcrumb:has(~ .page-hero) a { color: var(--color-on-dark-muted); }
.breadcrumb:has(~ .page-hero) a:hover { color: var(--color-accent); }
.breadcrumb:has(~ .page-hero) li[aria-current="page"] { color: var(--color-on-dark); }
/* Dark breadcrumb on article pages — same technique */
.breadcrumb:has(~ article .article-header) { margin-bottom: 0; background-color: var(--color-dark); border-bottom: 1px solid var(--color-border-dark); }
.breadcrumb:has(~ article .article-header) li { color: var(--color-on-dark-muted); }
.breadcrumb:has(~ article .article-header) li + li::before { color: var(--color-border-dark); }
.breadcrumb:has(~ article .article-header) a { color: var(--color-on-dark-muted); }
.breadcrumb:has(~ article .article-header) a:hover { color: var(--color-accent); }
.breadcrumb:has(~ article .article-header) li[aria-current="page"] { color: var(--color-on-dark-muted); }

/* ── 21b. ARTICLE PAGE ── */
.article-header { margin-top: calc(-1 * var(--header-height)); padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-10); background-color: var(--color-dark); border-bottom: 1px solid var(--color-border-dark); }
.article-meta { font-size: var(--text-sm); color: var(--color-on-dark-muted); margin-bottom: var(--space-4); }
.article-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; margin-bottom: var(--space-4); color: var(--color-on-dark); }
.article-excerpt { font-size: var(--text-xl); color: var(--color-on-dark-body); line-height: 1.6; }
.article-body { padding: var(--space-12) 0; }
.article-body h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; margin-top: var(--space-10); margin-bottom: var(--space-4); }
.article-body h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article-body p { color: var(--color-text-muted); line-height: 1.85; margin-bottom: var(--space-5); }
.article-body ul, .article-body ol { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--space-2); }
/* ── Articles listing: simple centred CTA (warm parchment bg from .cta-section) ── */
.articles-cta-simple { text-align: center; }
.articles-cta-simple__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--color-dark); line-height: 1.2; margin-bottom: var(--space-5); }
.articles-cta-simple__sub { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: 0; max-width: 44ch; margin-inline: auto; }
.articles-cta-simple__action { margin-top: var(--space-8); }
.articles-cta-simple .btn--whatsapp { background-color: #25D366; border-color: #25D366; color: #fff; border-radius: 100px; padding: 16px var(--space-8); gap: 9px; font-size: 15px; }
.articles-cta-simple .btn--whatsapp:hover { background-color: #1EBD59; border-color: #1EBD59; box-shadow: 0 8px 24px rgba(37,211,102,0.28); }

.article-footer { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.article-author { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.link-back { font-size: var(--text-sm); color: var(--color-accent); }
.link-back:hover { text-decoration: underline; }
.article-cta { margin-top: var(--space-12); padding: var(--space-8); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; }
.article-cta h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.article-cta p { color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* ── 21c. ARTICLE UX UPGRADES ── */

/* Category tag */
.article-tag { display: inline-block; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sienna); margin-bottom: var(--space-3); }
.article-header .article-tag { color: var(--color-on-dark-eyebrow); }

/* Blockquote */
.article-body blockquote { border-left: 3px solid var(--color-gold); margin: var(--space-10) 0; padding: var(--space-5) var(--space-6); background: var(--color-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.article-body blockquote p { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; color: var(--color-accent); line-height: 1.65; margin: 0; }

/* Mid-article CTA */
.article-mid-cta { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-8); margin: var(--space-12) 0; text-align: center; }
.article-mid-cta__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); }
.article-mid-cta__sub { color: var(--color-text-muted); margin-bottom: var(--space-5); font-size: var(--text-base); line-height: 1.6; }

/* Dual-button layout */
.cta-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; align-items: center; }

/* Secondary outline button */
.btn--outline { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.7rem 1.4rem; border: 2px solid var(--color-accent); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); background: transparent; transition: background var(--transition), color var(--transition); text-decoration: none; }
.btn--outline:hover { background: var(--color-accent); color: var(--color-on-dark); }

/* Related articles section */
.related-articles { padding: var(--space-12) 0 var(--space-4); border-top: 1px solid var(--color-border); margin-top: var(--space-6); }
.related-articles__label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-sienna); margin-bottom: var(--space-2); }
.related-articles__heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-8); }
.related-articles__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-8); }

/* Category filter tabs */
.article-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.article-filter-btn { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-text-muted); background: transparent; cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); }
.article-filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.article-filter-btn.is-active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-dark); }
.article-card[hidden] { display: none; }

/* Back-to-top button */
.back-to-top { position: fixed; bottom: var(--space-8); right: var(--space-6); width: 44px; height: 44px; background: var(--color-dark); color: var(--color-on-dark); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition), background var(--transition); z-index: 50; box-shadow: 0 2px 12px rgba(27,56,40,0.25); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--color-accent); }
.article-expand { margin-bottom: var(--space-5); }
.article-expand__toggle { list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-accent); font-size: var(--text-sm); font-family: var(--font-body); cursor: pointer; padding: var(--space-2) 0; font-weight: 500; letter-spacing: 0.04em; }
.article-expand__toggle::-webkit-details-marker,
.article-expand__toggle::marker { display: none; }
.article-expand__toggle::after { content: ' ↓'; display: inline-block; transition: transform 0.25s ease; }
details[open] .article-expand__toggle::after { transform: rotate(180deg); }
.article-expand__body { padding-top: var(--space-4); }

/* ── 22. CONTACT ── */
.contact-grid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
.contact-item { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
.contact-item__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.contact-item__value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-4); }
.contact-item__desc { font-size: var(--text-sm); margin-bottom: var(--space-5); }

.info-list { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
.info-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }
.info-card__title { display: block; margin-bottom: 4px; color: var(--color-text); font-weight: 500; }
.info-card__note { font-size: var(--text-sm); }

/* ── 23. FOOTER ── */
.site-footer { background-color: var(--color-dark); border-top: 1px solid var(--color-dark-surface); }
.site-footer,
.site-footer h2,
.site-footer h3,
.site-footer p,
.site-footer a { color: var(--color-on-dark-muted); }
.site-footer .footer-tagline,
.site-footer .footer-whatsapp,
.site-footer .footer-email,
.site-footer .footer-sister a { color: var(--color-gold); }
.site-footer a:hover,
.site-footer .footer-bottom a:hover { color: var(--color-on-dark); }
.footer-main { display: grid; gap: var(--space-8); padding-block: var(--space-8); }
.footer-logo { display: flex; align-items: center; margin-bottom: var(--space-4); }
.footer-logo .logo-img { height: 60px; }
.footer-tagline { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-dark-muted); margin-bottom: var(--space-4); }
.footer-description { color: var(--color-on-dark-muted); font-size: var(--text-sm); line-height: 1.7; max-width: 38ch; }
.footer-nav { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-nav a { font-size: var(--text-sm); color: var(--color-on-dark-muted); transition: color var(--transition); }
.footer-nav a:hover { color: var(--color-on-dark); }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-whatsapp, .footer-email { font-size: var(--text-sm); color: var(--color-gold); transition: color var(--transition); }
.footer-whatsapp:hover, .footer-email:hover { color: var(--color-on-dark); }

.footer-sister {
  margin-top: var(--space-4);
  padding: 10px 12px 10px 15px;
  background-color: var(--color-dark-surface);
  border: 1px solid rgba(253,250,245,0.08);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
  line-height: 1.6;
}
.footer-sister a { color: var(--color-gold); transition: color var(--transition); }
.footer-sister a:hover { color: var(--color-on-dark); text-decoration: underline; }
.footer-contact-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-dark-muted); margin-bottom: var(--space-1); }
.footer-contact .footer-contact-item,
.footer-link-row .footer-contact-item { display: flex; align-items: center; gap: 9px; }
.footer-contact .footer-contact-item svg,
.footer-link-row .footer-contact-item svg { flex-shrink: 0; opacity: 0.7; }
.footer-maps { color: var(--color-gold); font-size: var(--text-sm); transition: color var(--transition); }
.footer-maps:hover { color: var(--color-on-dark); }
.footer-social .footer-social-btn { display: flex; align-items: center; gap: 9px; }
.footer-social .footer-social-btn svg { flex-shrink: 0; opacity: 0.7; }

.footer-social { margin-top: var(--space-4); }
.footer-social-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-dark-muted); margin-bottom: var(--space-3); }
.footer-social-link { display: block; font-size: var(--text-sm); color: var(--color-on-dark-muted); transition: color var(--transition); line-height: 1.6; margin-bottom: var(--space-2); }
.footer-social-link:hover { color: var(--color-on-dark); }

/* New structural elements — desktop: invisible labels, normal block flow */
.footer-group-label { display: none; }
.icon-label { display: none; }
.contact-text { display: inline; }
.footer-link-row { display: block; }
.footer-contact-group, .footer-social-group { display: block; }
.footer-link-icons { display: block; }
.footer-social-group .footer-social { margin-top: var(--space-4); }

.footer-bottom {
  padding-block: var(--space-5);
  border-top: 1px solid rgba(253,250,245,0.10);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-bottom p { font-size: var(--text-xs); color: var(--color-on-dark-muted); margin-bottom: 0; }
.footer-bottom a { color: var(--color-on-dark-muted); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--color-on-dark); }

/* ── 24. PACKAGES DETAIL ── */
.pkg-detail-grid { display: grid; gap: var(--space-8); }
.pkg-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  transition: border-color var(--transition);
}
.pkg-card:hover { border-color: var(--color-border-light); }
.pkg-card--featured { background-color: var(--color-surface-2); border-color: var(--color-accent); }
.pkg-card__badge { font-size: var(--text-xs); color: var(--color-sienna); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: var(--space-5); }
.pkg-card__label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-sienna); }
.pkg-card__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; margin-bottom: var(--space-4); }
.pkg-card__desc { margin-bottom: var(--space-5); }
.pkg-card__subhead { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-3); margin-top: var(--space-5); }
.pkg-checklist { list-style: none; padding: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.8; margin-bottom: var(--space-5); }
.pkg-checklist li { padding-left: 1.6em; position: relative; }
.pkg-checklist__icon { position: absolute; left: 0; }
.pkg-checklist__icon--ok { color: var(--color-accent); }
.pkg-stats { display: flex; flex-direction: column; gap: var(--space-4); }
.pkg-stat { background-color: var(--color-dark-surface); border: 1px solid rgba(184,196,184,0.15); border-radius: var(--radius-md); padding: var(--space-5); }
.pkg-stat__label { font-size: var(--text-xs); color: var(--color-on-dark-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.pkg-stat__value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.pkg-stat__value--price { font-size: var(--text-2xl); }
.pkg-stat__unit { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 400; }

/* ── 24b. PACKAGE CARDS (adapted from Slow Safaris) ── */
.package {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-8);
}
.package:hover { border-color: var(--color-border-light); }
.package.featured { border-color: rgba(201,151,58,0.45); box-shadow: 0 2px 24px rgba(27,56,40,0.12); }

.package-inner { display: grid; grid-template-columns: 1fr; }

.package-aside {
  background: var(--color-dark);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  border-bottom: 0.5px solid rgba(184,196,184,0.15);
}
.package-main { padding: 2rem; display: flex; flex-direction: column; }

.package-badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 0.75rem;
  width: fit-content;
}
.package-duration { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(184,196,184,0.55); margin-bottom: 0.85rem; }

.package-price-hero { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.package-from { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(184,196,184,0.45); margin-bottom: 0.2rem; }
.package-price { font-family: var(--font-display); font-size: 2.6rem; color: var(--color-on-dark); line-height: 1; margin-bottom: 3px; font-weight: 300; }
.package-price-note { font-size: var(--text-xs); color: rgba(184,196,184,0.48); }

.price-table { width: 100%; border-collapse: collapse; }
.price-table thead th { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(184,196,184,0.40); padding: 0 0 0.5rem; border-bottom: 0.5px solid rgba(184,196,184,0.12); text-align: left; }
.price-table thead th:last-child { text-align: right; }
.price-table tbody td { font-size: var(--text-sm); color: rgba(184,196,184,0.65); padding: 0.4rem 0; border-bottom: 0.5px solid rgba(184,196,184,0.08); }
.price-table tbody td:last-child { text-align: right; color: var(--color-on-dark); font-weight: 500; }
.price-table tbody tr:last-child td { border-bottom: none; }

.aside-exclusions { margin-top: auto; padding-top: 1.5rem; }
.aside-exclusions--priced-around { border-top: 0.5px solid rgba(184,196,184,0.12); }
.aside-exclusions-label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(184,196,184,0.40); margin-bottom: 0.6rem; }
.aside-excl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.aside-excl-list li { font-size: var(--text-xs); color: rgba(184,196,184,0.52); display: flex; gap: 7px; align-items: flex-start; line-height: 1.5; }
.aside-excl-list li::before { content: "–"; color: rgba(184,196,184,0.25); flex-shrink: 0; }
.aside-excl-list li.muted-visible { color: var(--color-on-dark-muted); font-size: var(--text-sm); }
.aside-excl-list li.muted-visible::before { color: rgba(201,151,58,0.5); }

.package-name { font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.8rem); font-weight: 400; color: var(--color-text); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.package-tagline { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; }

.package-section-title { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-sienna); margin-bottom: 0.85rem; padding-top: 1.5rem; border-top: 0.5px solid var(--color-border); margin-top: 1.5rem; }

.included-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.included-list li { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.included-2col { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 1.25rem; }
.included-2col li { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.check-icon { color: var(--color-accent); font-size: var(--text-sm); flex-shrink: 0; margin-top: 1px; }
.cross-icon { color: var(--color-text-dim); font-size: var(--text-sm); flex-shrink: 0; margin-top: 1px; }

.package-photo-addon { background: rgba(13,34,24,0.05); border-left: 2px solid rgba(37,77,54,0.3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 0.85rem 1rem; margin-top: 1.25rem; margin-bottom: 1.25rem; }
.package-photo-addon__label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.35rem; }
.package-photo-addon p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin: 0; }

.package-best-for { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: auto; padding-top: 1.25rem; }
.package-best-for strong { color: var(--color-text); font-weight: 500; }
.pkg-inclusions-grid { display: grid; gap: var(--space-5); }

/* Park entrance fees */
.tickets-assumptions { background: var(--color-bg); border: 0.5px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-6); }
.tickets-assumptions__title { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 0.5px solid var(--color-border); }
.tickets-assumptions__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); }
.tickets-assumption-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.tickets-dot { width: 5px; height: 5px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; }
.tickets-scroll-hint { position: relative; margin-bottom: var(--space-4); }
.tickets-scroll-hint::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 72px; background: linear-gradient(to top, var(--color-surface) 0%, transparent 100%); pointer-events: none; border-radius: 0 0 var(--radius-md) var(--radius-md); z-index: 3; opacity: 1; transition: opacity 0.25s; }
.tickets-scroll-hint.at-bottom::after { opacity: 0; }
.tickets-table-wrap { overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin-bottom: 0; border-radius: var(--radius-md); max-height: 500px; border: 0.5px solid var(--color-border); }
.tickets-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.tickets-table-wrap::-webkit-scrollbar-track { background: transparent; }
.tickets-table-wrap::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; }
.tickets-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }
.tickets-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tickets-table thead tr { background: var(--color-dark); }
.tickets-table th { padding: 0.85rem 1rem; text-align: left; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); position: sticky; top: 0; z-index: 2; background: var(--color-dark); }
.tickets-table th:last-child, .tickets-table td:last-child { text-align: right; border-left: 0.5px solid rgba(0,0,0,0.06); }
.tickets-table tbody tr:nth-child(odd) td { background: #fff; }
.tickets-table tbody tr:nth-child(even) td { background: var(--color-surface); }
.tickets-table tbody tr.group-start td { border-top: 1.5px solid var(--color-border); }
.tickets-table td { padding: 0.7rem 1rem; color: var(--color-text-muted); border-bottom: 0.5px solid var(--color-border-light); }
.tickets-table td.price { color: var(--color-dark); font-weight: 600; }
.tickets-table td.zero { color: var(--color-accent); font-weight: 500; }
.tickets-note { font-size: var(--text-xs); color: var(--color-text-dim); margin-top: var(--space-4); line-height: 1.7; }
.tickets-note a { color: var(--color-text-dim); text-decoration: underline; text-underline-offset: 2px; }

/* Package responsive — all breakpoints in one place */
@media (min-width: 681px) {
  .package-inner { grid-template-columns: 260px 1fr; }
  .package-aside { border-bottom: none; border-right: 0.5px solid var(--color-border); min-height: 420px; }
  .package-main { padding: 2rem 2.25rem; }
  .included-2col { grid-template-columns: 1fr 1fr; }
  .pkg-inclusions-grid { grid-template-columns: 1fr 1fr; }
  .tickets-assumptions__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 901px) {
  .package-inner { grid-template-columns: 280px 1fr; }
}

/* ── 25. SCROLL ANIMATIONS (CSS fallback) ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in--d1.is-visible { transition-delay: 0.1s; }
.fade-in--d2.is-visible { transition-delay: 0.2s; }
.fade-in--d3.is-visible { transition-delay: 0.3s; }

/* When GSAP is active, disable CSS transitions on .fade-in */
.js-gsap .fade-in {
  transition: none !important;
}

/* ── 26. IMG PLACEHOLDER ── */
.img-placeholder {
  width: 100%;
  background-color: var(--color-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--space-4);
}

/* ── 27. UTILITY CLASSES ── */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.btn-row--center { justify-content: center; }
.section-lead { max-width: 54ch; margin-inline: auto; margin-bottom: var(--space-2); }
.section-note { margin-top: var(--space-8); font-size: var(--text-sm); }
.mt-10 { margin-top: var(--space-10); }

/* ── 27a. SCREEN READER ONLY ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── 27. SKIP LINK ── */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-dark);
  color: var(--color-on-dark);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  white-space: nowrap;
  transition: transform 200ms ease;
  text-decoration: none;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: 2px solid var(--color-gold); outline-offset: -2px; }

/* ── 28. FOCUS VISIBLE ── */
a:focus-visible,
button:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── 29. REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .btn--whatsapp.is-pulsing, .wa-float.is-pulsing { animation: none; }
  .wa-float { transition: none !important; }
}

/* ── 33. PRASANNA ANCHOR QUOTE ── */
.prasanna-anchor {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.prasanna-anchor__eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  padding-left: calc(var(--space-8) + 3px);
}
.prasanna-anchor__quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.5;
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-8);
  margin: 0 0 var(--space-5);
}
.prasanna-anchor__attribution {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: calc(var(--space-8) + 3px);
}

/* ── 34. FLOATING WHATSAPP BUTTON ── */
.wa-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-5);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.20);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease, background-color var(--transition), box-shadow var(--transition);
  min-height: unset;
}
.wa-float.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wa-float:hover {
  background-color: #1EBD59;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.40);
}
.wa-float svg { flex-shrink: 0; }
.wa-float span { display: none; }
/* ── MOBILE REDESIGN ── */
/* All rules below target < 1024px only and do not affect the desktop view */

/* 1. Hero: lighter overlay + hero text tweaks (mobile only) */
@media (max-width: 1023px) {
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(4,10,6,0.90) 0%,
      rgba(4,10,6,0.65) 20%,
      rgba(4,10,6,0.20) 44%,
      rgba(4,10,6,0.06) 60%,
      rgba(4,10,6,0.35) 100%
    );
  }
  .hero { padding-bottom: var(--space-6); }
  .hero-tagline { white-space: nowrap; color: rgba(255,255,255,0.85); }
  .hero-subtitle { font-size: var(--text-sm); max-width: 32ch; color: rgba(255,255,255,0.92); }
  .hero-cta .btn--whatsapp { width: 100%; justify-content: center; }
  .hero-cta .btn--outline {
    background: transparent;
    border: none;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.875rem;
    color: rgba(253,250,245,0.80);
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .hero-dot.is-active::before {
    background: #C9973A;
    border-color: transparent;
  }
  .hero-pause { display: none; }
  .hero-slide-counter {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(253,250,245,0.55);
    font-family: system-ui, sans-serif;
    user-select: none;
  }
  .hero-content .container { gap: var(--space-3); }
  .hero-title { margin-top: -8px; }
  .hero-slider-controls { justify-content: center; }
  /* Honest Choice — tighter layout on mobile */
  .honest-choice .eyebrow { font-size: 9px; letter-spacing: 0.10em; }
  .honest-choice__inner { gap: var(--space-6); }
  .honest-choice__text p { font-size: var(--text-base); }
  .honest-choice__text p + p { margin-top: var(--space-3); }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }

  /* Team note — subtle tinted background + compact sizing */
  .honest-choice__quote {
    background: #eef3ef;
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-5);
    margin: 0 calc(-1 * var(--space-5));
  }
  .prasanna-anchor__eyebrow { padding-left: 0; }
  .prasanna-anchor__quote { font-size: 1rem; padding-left: var(--space-5); }

  /* Brand Context — tighter about text, philosophy on tinted panel */
  .brand-context__about p { line-height: 1.65; }
  .brand-context__about p + p { margin-top: var(--space-3); }
  .brand-context__philosophy {
    background: #eef3ef;
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-5);
    margin: var(--space-6) calc(-1 * var(--space-5)) 0;
  }
  .brand-context__philosophy .philosophy-list { gap: var(--space-3); margin-top: var(--space-3); }

  /* Wildlife — horizontal swipe carousel on mobile */
  .wildlife-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: var(--space-4) !important;
    padding: 0 var(--space-5) var(--space-3) 0 !important;
    margin-inline: 0 !important;
    margin-top: var(--space-6) !important;
    scrollbar-width: none !important;
    grid-template-columns: none !important;
  }
  .wildlife-grid::-webkit-scrollbar { display: none; }
  .wildlife-card {
    flex: 0 0 72vw !important;
    max-width: 280px !important;
    min-width: 200px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    background-color: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }
  .wildlife-grid .wildlife-card:last-child { grid-column: unset !important; flex: 0 0 72vw !important; }
  .section--dark .wildlife-card__name { color: var(--color-dark) !important; }
  .section--dark .wildlife-card__note { color: var(--color-text-muted) !important; }
  .wildlife-card__image { aspect-ratio: 4 / 3; }
  .wildlife-card__body { padding: var(--space-4); gap: var(--space-2); }
  .wildlife-card__name { font-size: var(--text-base); font-family: var(--font-display); font-weight: 600; color: var(--color-dark); margin-bottom: 0; }
  .wildlife-card__freq { margin-top: var(--space-2); font-size: 10px; padding: 3px 8px; white-space: nowrap; }
  .wildlife-card__note { display: none; }
  /* Badge colours — light card background */
  .wildlife-card__freq--common { background-color: var(--color-accent-muted) !important; color: var(--color-accent) !important; }
  .wildlife-card__freq--rare   { background-color: rgba(94,88,80,0.12) !important; color: var(--color-text-muted) !important; }

  /* Also found list */
  .wildlife-also-found {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5) 36px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
  }
  .wildlife-also-found__label {
    font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; color: var(--color-gold) !important; margin-bottom: var(--space-2);
  }
  .wildlife-also-found__list {
    font-size: 13px; line-height: 1.9; color: var(--color-on-dark-muted);
  }

  /* Packages — swipe hint (only on small phones, not tablet range) */
  .packages-swipe-hint {
    display: none; /* shown only at <= 479px via rule below */
  }

  /* Packages — card overrides for mobile */
  .package-card {
    border-radius: 10px;
    padding: var(--space-5);
  }
  /* Featured card: light green tint + subtle border + gold label */
  .package-card--featured {
    background-color: #F0F6F2 !important;
    border-color: rgba(37,77,54,0.22) !important;
    box-shadow: 0 2px 12px rgba(37,77,54,0.07);
  }
  .package-card--featured .package-card__label {
    color: var(--color-gold) !important;
  }
  /* Regular cards: near-white */
  .packages-grid .package-card:not(.package-card--featured) {
    background-color: #FDFAF5 !important;
    border-color: var(--color-border) !important;
  }

  /* Packages — dots */
  .packages-dots {
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-4);
  }
  .packages-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 0.25s ease, width 0.25s ease;
  }
  .packages-dot.is-active {
    background: var(--color-accent);
    width: 18px;
    border-radius: 3px;
  }

  /* Packages — note */
  .packages-note { margin-top: var(--space-6); }
  .packages-note__disclaimer { font-size: 11px; opacity: 0.8; }
  .packages-note__link { font-size: 13px; }

  /* Block comparison — tab pills */
  .block-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: var(--space-5);
    margin-top: var(--space-6);
  }
  .block-tab-pill {
    flex: 1;
    max-width: 148px;
    padding: 10px 0;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid rgba(200,221,209,0.30);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    color: var(--color-on-dark-muted);
    opacity: 0.65;
    transition: opacity 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
    font-family: var(--font-body);
  }
  .block-tab-pill--active,
  .block-tab-pill[aria-selected="true"] {
    background: rgba(240,234,224,0.10);
    border-color: rgba(200,221,209,0.60);
    color: var(--color-on-dark);
    opacity: 1;
  }

  /* Block comparison — hide non-active cards, show active */
  .block-comparison { margin-top: 0; gap: var(--space-5); }
  .block-panel { display: none; }
  .block-panel.is-active { display: block; }
  .block-panel { padding: 24px 22px 22px; }
  .block-panel__number { color: rgba(37,77,54,0.12); }
  .block-panel__body p + p { margin-top: 12px; }

  /* Block comparison — btn-row becomes two slim links */
  .block-comparison + .btn-row {
    flex-direction: row;
    gap: var(--space-3);
  }
  .block-comparison + .btn-row .btn--outline {
    flex: 1;
    font-size: 12.5px;
    padding: 11px var(--space-3);
  }

  /* CTA — mobile redesign: generous rhythm, prominent button */
  .cta-section {
    background-color: #EDE5D8;
    border-top: 1px solid rgba(37,77,54,0.08);
    border-bottom: 1px solid rgba(37,77,54,0.08);
    padding-block: 72px;
  }
  .cta-section .eyebrow {
    color: var(--color-accent);
    display: inline-block;
    margin-bottom: var(--space-4);
  }
  .cta-section .cta-section__title {
    color: var(--color-dark);
    margin-bottom: var(--space-5);
    line-height: 1.2;
  }
  .cta-section .cta-section__sub {
    color: var(--color-text-muted);
    margin-bottom: var(--space-10);
    max-width: 36ch;
    margin-inline: auto;
    line-height: 1.7;
  }
  .cta-section .btn--whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: #fff;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    padding-inline: var(--space-8);
    padding-block: 18px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .cta-section .btn--whatsapp:hover {
    background-color: #1EBD59;
    border-color: #1EBD59;
    box-shadow: 0 8px 24px rgba(37,211,102,0.25);
    color: #fff;
  }
  .btn__icon { flex-shrink: 0; }
  .cta-section__action { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .cta-section__trust {
    font-size: 12px;
    color: rgba(28,43,34,0.38);
    letter-spacing: 0.03em;
  }

  /* Gallery — row-based editorial layout */
  .gallery-section {
    columns: unset;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-4);
    margin-inline: calc(-1 * var(--space-5));
    padding: 4px 16px 32px;
  }
  .gallery-row { display: flex; gap: 4px; }
  .gallery-item { margin-bottom: 0; border-radius: 4px; }
  .gallery-row--full .gallery-item { flex: 1; }
  .gallery-row--pair .gallery-item { flex: 1; height: 132px; }
  .gallery-row--pair img { height: 100%; object-fit: cover; }
}

@media (max-width: 1023px) {
  /* Subtle radial backdrop behind hero text — blends seamlessly, improves readability */
  .hero-content {
    background: radial-gradient(
      ellipse 120% 100% at 50% 100%,
      rgba(4,10,6,0.22) 0%,
      rgba(4,10,6,0.06) 55%,
      transparent 100%
    );
  }
}

@media (max-width: 1023px) {
  /* ── Reviews — swipeable carousel ── */
  .reviews-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: calc(-1 * var(--space-5));
    padding: 4px var(--space-5) 20px;
    scroll-padding-left: var(--space-5);
    margin-top: var(--space-6);
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card {
    flex-shrink: 0;
    width: calc(100% - 34px);
    scroll-snap-align: start;
    border: 1px solid rgba(37,77,54,0.08);
    border-left: 3px solid rgba(201,151,58,0.55);
    border-radius: 14px;
    padding: 20px 20px 18px;
  }
  .review-card::before { display: none; }
  .review-card__stars { font-size: 13px; margin-bottom: 12px; }
  .review-card__text { font-size: 14px; margin-bottom: 14px; }
  .review-card__attribution { padding-top: 12px; border-top: 1px solid rgba(37,77,54,0.10); }
  .reviews-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 1023px) {
  /* ── FAQ — switch to light section, divider-style list ── */

  /* Override section background and heading/eyebrow colors */
  .section--dark[aria-labelledby="faq-heading"] {
    background-color: var(--color-bg);
  }
  .section--dark[aria-labelledby="faq-heading"] .eyebrow {
    color: var(--color-accent);
  }
  .section--dark[aria-labelledby="faq-heading"] .heading-section {
    color: var(--color-text);
  }

  /* Divider-style items — remove the card boxes */
  .section--dark[aria-labelledby="faq-heading"] .faq-list {
    gap: 0;
    margin-top: var(--space-7);
  }
  .section--dark[aria-labelledby="faq-heading"] .faq-item {
    background: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(37,77,54,0.11);
  }
  .section--dark[aria-labelledby="faq-heading"] .faq-item:first-child {
    border-top: 1px solid rgba(37,77,54,0.11);
  }
  .section--dark[aria-labelledby="faq-heading"] .faq-item__question {
    padding: 18px 0;
    font-size: 14.5px;
    color: var(--color-text);
  }
  .section--dark[aria-labelledby="faq-heading"] .faq-item__answer-inner {
    padding: 0 0 18px;
    font-size: 14px;
    color: var(--color-text-muted);
  }
  .section--dark[aria-labelledby="faq-heading"] .faq-item p,
  .section--dark[aria-labelledby="faq-heading"] .faq-item li {
    color: var(--color-text-muted);
  }
}

@media (max-width: 1023px) {
  /* ── Footer — block layout with dividers ── */
  .footer-main {
    display: block;
    padding-block: 0;
    gap: 0;
  }
  .footer-brand {
    padding: 40px var(--space-5) 28px;
    border-bottom: 1px solid rgba(253,250,245,0.06);
  }
  .footer-nav-col, .footer-contact-col { padding: 0; }
  /* "Navigate" label has no mobile styling — hide it; nav's own top padding handles spacing */
  .footer-col-label { display: none; }

  /* Nav — 2-column grid */
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    padding: 28px var(--space-5) 24px;
    border-bottom: 1px solid rgba(253,250,245,0.06);
    margin-bottom: 0;
  }
  .footer-nav a { font-size: 13.5px; }
  .footer-nav li:nth-child(2) { order: -1; } /* Yala Block 5 → col 1, same column as Block 6 */

  /* Contact + Social — three-tier hierarchy */
  .footer-contact-col {
    display: flex;
    flex-direction: column;
    padding: 20px var(--space-5) 16px;
    border-bottom: 1px solid rgba(253,250,245,0.06);
    gap: 8px;
  }
  .footer-contact-label,
  .footer-social-label { display: none; }

  /* WhatsApp already present as floating button + throughout page — hide from footer on mobile */
  .footer-contact { display: none; }

  /* Two-group icon row — fills full width, labeled, clearly grouped */
  .footer-link-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
  }
  .footer-contact-group,
  .footer-social-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .footer-group-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(253,250,245,0.28);
    padding: 0 2px;
  }
  .footer-link-icons {
    display: flex;
    flex-direction: row;
    gap: 6px;
  }

  /* Email + Maps — equal-width, labelled, 54px tall */
  .footer-email,
  .footer-maps {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 54px;
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    font-size: 0;
    min-width: 0;
  }
  .footer-email svg,
  .footer-maps svg { width: 16px; height: 16px; opacity: 0.65; flex-shrink: 0; }

  /* Social group — equal-width, labelled, slightly lower weight */
  .footer-social {
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: none;
  }
  .footer-social-group .footer-social { margin-top: 0; }
  .footer-social-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 54px;
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    font-size: 0;
    margin: 0;
    min-width: 0;
  }
  .footer-social-link svg { width: 15px; height: 15px; opacity: 0.45; }

  /* Icon labels — visible on mobile only */
  .icon-label {
    display: block;
    font-size: 10px;
    color: rgba(253,250,245,0.4);
    letter-spacing: 0.01em;
    font-weight: 400;
  }
  .footer-social-link .icon-label { color: rgba(253,250,245,0.28); }
  .contact-text { display: none; }

  /* Sister brand — inside footer-brand on mobile, use left-border accent */
  .footer-sister {
    margin: var(--space-4) 0 0 0;
    padding: 14px 0 0 16px;
    background: none;
    border: none;
    border-left: 2px solid rgba(201,151,58,0.30);
    border-radius: 0;
    font-size: 12px;
    color: rgba(200,221,209,0.38);
  }

  /* Bottom bar */
  .footer-bottom {
    margin-top: 24px;
    padding: 16px var(--space-5) 28px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
  }
  .footer-bottom p:last-child { text-align: right; }
}

/* 2. Tablet / large phone (480px – 1023px): two-column grids for dense sections */
@media (min-width: 480px) and (max-width: 1023px) {
  .wildlife-grid  { grid-template-columns: repeat(2, 1fr); }
  .packages-grid  { grid-template-columns: repeat(2, 1fr); }
  .articles-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* 3. Small phone (<= 479px): reviews, wildlife, packages as horizontal scroll strips */
@media (max-width: 479px) {
  /* Wildlife — horizontal scroll */
  .wildlife-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    margin-inline: 0;
    padding: 0 var(--space-5) var(--space-4) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .wildlife-grid::-webkit-scrollbar { display: none; }
  .wildlife-card {
    flex-shrink: 0;
    width: 72vw;
    max-width: 290px;
    scroll-snap-align: start;
  }

  /* Packages — horizontal scroll with peek */
  .packages-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-5);
    gap: 12px;
    margin-top: var(--space-3);
    margin-inline: calc(-1 * var(--space-5));
    padding-inline: var(--space-5);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .packages-grid::-webkit-scrollbar { display: none; }
  /* Width relative to viewport so peek is consistent regardless of container math */
  .package-card {
    flex-shrink: 0;
    width: calc(82vw - var(--space-5));
    max-width: none;
    scroll-snap-align: start;
  }
  /* Show swipe hint and dots only at this size */
  .packages-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    opacity: 0.7;
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
  }
  .packages-dots { display: flex; }

  .block-panel__number { font-size: 4rem; }
  .hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }
}

@media (max-width: 380px) {
  .wa-float { width: 48px; height: 48px; }
}

/* ── 30. TABLET 640px ── */
@media (min-width: 640px) {
  :root { --section-y: 64px; }
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  .wildlife-grid { grid-template-columns: repeat(2, 1fr); }
  .block-comparison { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .about-short { grid-template-columns: 1fr 1fr; align-items: center; }
  .article-title { font-size: var(--text-4xl); }
  .pkg-detail-grid { grid-template-columns: 3fr 2fr; align-items: start; }
}

/* ── 31. DESKTOP 1024px ── */
@media (min-width: 1024px) {
  :root { --section-y: 96px; --header-height: 92px; }
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }

  /* Pull page-hero behind the transparent header, same technique as homepage hero */
  .page-hero {
    margin-top: calc(-1 * var(--header-height));
    padding-top: calc(150px + var(--space-8));
  }

  /* Article header — same pull-behind technique; use 150px to clear overflowing logo */
  .article-header {
    padding-top: calc(150px + var(--space-8));
  }

  /* Fix: on desktop the breadcrumb becomes visible and adds ~32px of height before
     .page-hero / .article-header. Their existing margin-top:-92px only cancels
     #main-content's padding-top — not the breadcrumb height — so they start at
     y≈32px, leaving a cream gap behind the transparent header from y=0 to y=32px.
     Extend the dark section's background upward with box-shadow: no layout change,
     no DOM change, invisible behind the fixed header, clips harmlessly above viewport. */
  .breadcrumb ~ .page-hero,
  .breadcrumb ~ article .article-header {
    box-shadow: 0 -150px 0 0 var(--color-dark);
  }

  /* On image-hero pages the breadcrumb is already hidden behind the page-hero
     (later in DOM, starts at y≈32). Collapse it to zero height so the page-hero
     can start at y=0 and its photo fills the full header zone consistently —
     no solid-colour strip, no colour mismatch behind the nav. */
  .breadcrumb:has(~ .page-hero--with-image) {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    font-size: 0;
    border-bottom: none;
  }

  /* On article pages the breadcrumb text bleeds through the article-header's
     background in CSS paint order, making it visible at y=92 — right where the
     150px logo overflows the header. Collapse it so the article-header starts
     at y=0 and the dark zone fills the full header zone cleanly. */
  .breadcrumb:has(~ article .article-header) {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
    font-size: 0;
    border-bottom: none;
    height: 0;
    overflow: hidden;
  }

  /* Show breadcrumb on desktop */
  .breadcrumb { display: block; }

  /* Related articles 3-column on desktop */
  .related-articles__grid { grid-template-columns: repeat(3, 1fr); }

  .main-nav {
    display: flex;
    position: fixed;
    inset-block-start: 0;
    inset-block-end: auto;
    inset-inline: 0;
    height: var(--header-height);
    background: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: none;
    padding: 0;
    z-index: 101;
    transition: transform 350ms ease, opacity 200ms ease;
  }
  .main-nav.header--hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
  .nav-list { flex-direction: row; gap: var(--space-4); pointer-events: auto; margin-top: 37px; }
  .nav-link {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-on-dark-body);
  }
  .nav-link:hover, .nav-link:focus { color: var(--color-on-dark); }
  .nav-link--active { color: var(--color-on-dark-eyebrow); }
  .nav-mobile-cta { display: none; }
  .nav-header { display: none; }
  .header-inner { justify-content: space-between; }
  .site-logo { align-self: flex-start; padding-top: 8px; }
  .site-logo .logo-img { height: 150px; }
  .nav-overlay { display: none !important; }
  .nav-toggle { display: none; }


  /* Desktop header WhatsApp */
  .btn.btn--header {
    display: inline-flex;
    background-color: var(--color-gold);
    color: var(--color-gold-text);
    border-color: var(--color-gold);
    font-size: var(--text-xs);
    padding: 8px 18px;
    min-height: 38px;
    letter-spacing: 0.03em;
    margin-top: 37px;
  }
  .btn.btn--header:hover {
    background-color: var(--color-gold-hover);
    color: var(--color-gold-text);
    border-color: var(--color-gold-hover);
    box-shadow: 0 4px 16px rgba(201,151,58,0.28);
  }

  .hero-content { width: 52%; margin-left: 4vw; }
  .wildlife-grid { grid-template-columns: repeat(3, 1fr); }
  .wildlife-carousel-wrapper .wildlife-grid {
    display: flex; flex-wrap: nowrap; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .wildlife-carousel-wrapper .wildlife-grid::-webkit-scrollbar { display: none; }
  .wildlife-carousel-wrapper .wildlife-grid .wildlife-card {
    flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
    scroll-snap-align: start; min-width: 0;
  }
  .carousel-arrow { display: flex; }
  .carousel-counter { display: block; }
  .packages-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .articles-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1fr auto auto; align-items: start; column-gap: 64px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .brand-context__inner { grid-template-columns: 3fr 2fr; align-items: start; }
  .honest-choice__inner { grid-template-columns: 1fr 1fr; max-width: none; align-items: start; }
  .honest-choice__quote { padding-top: var(--space-2); }
  .honest-choice__quote .prasanna-anchor__quote { font-size: clamp(1rem, 1.5vw, 1.35rem); }
  .container { padding-inline: var(--space-8); }

  /* ── FAQ — cream on desktop, divider-style 2-col ── */
  .section--dark[aria-labelledby="faq-heading"] { background-color: var(--color-bg); }
  .section--dark[aria-labelledby="faq-heading"] .heading-section { color: var(--color-dark); }
  .section--dark[aria-labelledby="faq-heading"] .eyebrow { color: var(--color-accent); }
  /* 2-col grid, fill top-to-bottom (matches preview order: Q1,Q2,Q3 left / Q4,Q5 right) */
  .section--dark[aria-labelledby="faq-heading"] .faq-list {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: var(--space-10);
    row-gap: 0;
    gap: 0 var(--space-10);
  }
  /* Strip card style — divider lines only */
  .section--dark[aria-labelledby="faq-heading"] .faq-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .section--dark[aria-labelledby="faq-heading"] .faq-item:first-child,
  .section--dark[aria-labelledby="faq-heading"] .faq-item:nth-child(4) {
    border-top: 1px solid var(--color-border);
  }
  .section--dark[aria-labelledby="faq-heading"] .faq-item__question { padding: 20px 0; }
  .section--dark[aria-labelledby="faq-heading"] .faq-item__answer-inner { padding-left: 0; padding-right: 0; }

  /* ── CTA — dark on desktop, two-column ── */
  /* ── CTA — desktop: warm parchment, two-column ── */
  .cta-section {
    background-color: #EDE5D8;
    border-top: 1px solid rgba(37,77,54,0.08);
    border-bottom: 1px solid rgba(37,77,54,0.08);
    text-align: left;
    padding-block: 88px;
  }
  /* Simple CTAs without a two-column inner stay centred */
  .cta-section:not(:has(.cta-section__inner)) { text-align: center; }
  .cta-section__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
  }
  .cta-section__text { flex: 1; }
  .cta-section .eyebrow { color: var(--color-accent); text-align: left; margin-bottom: 16px; }
  .cta-section .cta-section__title { color: var(--color-dark); margin-bottom: 14px; }
  .cta-section .cta-section__sub { color: var(--color-text-muted); margin-bottom: 0; }
  .cta-section .cta-section__action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    flex-shrink: 0;
  }
  .cta-section .btn--whatsapp {
    background-color: #25D366;
    color: #fff;
    border-color: #25D366;
    white-space: nowrap;
  }
  .cta-section .btn--whatsapp:hover {
    background-color: #1EBD59;
    border-color: #1EBD59;
    box-shadow: 0 8px 24px rgba(37,211,102,0.25);
  }
  .cta-section .cta-section__trust { color: rgba(28,43,34,0.40); font-size: var(--text-xs); letter-spacing: 0.03em; }

  /* ── Footer column labels ── */
  .footer-col-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-on-dark-muted); opacity: 0.5; margin-bottom: var(--space-4); display: block; }
  .footer-nav-col .footer-nav { flex-direction: column; flex-wrap: nowrap; gap: var(--space-3); margin-bottom: 0; }

  /* ── Footer contact col — uniform vertical rhythm ── */
  /* Single consistent gap: space-3 between every item */
  .footer-contact-col .footer-contact { margin-bottom: var(--space-3); }
  .footer-link-row { display: flex; flex-direction: column; gap: 0; }
  .footer-link-icons { display: flex; flex-direction: column; gap: var(--space-3); }
  /* Social group: clear the double margin, use a single intentional gap */
  .footer-social-group { margin-top: var(--space-5); }
  .footer-social-group .footer-social { margin-top: 0; }
  .footer-social { margin-top: 0; }
  /* Social links: match contact item rhythm */
  .footer-social-link { margin-bottom: var(--space-3); line-height: 1.4; }
  .footer-social-link:last-child { margin-bottom: 0; }

  /* ── Wildlife also-found — desktop styles (missing entirely from base) ── */
  .wildlife-also-found {
    margin-top: var(--space-8);
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid rgba(253,250,245,0.08);
  }
  .wildlife-also-found__label {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-gold) !important;
    opacity: 1;
    margin-bottom: var(--space-3);
    display: block;
  }
  .wildlife-also-found__list {
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-on-dark-muted);
  }

  /* Gallery — CSS Grid, 5-row balanced layout, no empty space */
  .gallery-item img { height: 100%; object-fit: cover; }
}

/* ── 32. WIDE 1280px ── */
@media (min-width: 1280px) {
  .nav-list { gap: var(--space-6); }
}

/* ── 33. INNER PAGE MOBILE ── */
@media (max-width: 1023px) {
  /* Pull page-hero behind the transparent fixed header, same as desktop */
  .page-hero {
    margin-top: calc(-1 * var(--header-height));
    padding-top: calc(var(--header-height) + var(--space-8));
    padding-bottom: var(--space-10);
  }
  .page-hero--portrait { min-height: 340px; padding-bottom: var(--space-8); }
  .page-hero__title { font-size: var(--text-3xl); line-height: 1.2; }
  .page-hero__sub { font-size: var(--text-sm); line-height: 1.7; margin-top: var(--space-3); }

  /* Suits list — tighter on mobile */
  .suits-list { margin-top: var(--space-5); }
  .suits-list__item { padding: var(--space-4) 0; gap: var(--space-3); }
  .suits-list__label { font-size: var(--text-base); }
  .suits-list__desc { font-size: var(--text-sm); }

  /* FAQ — reduce inner padding for better density on small screens */
  .faq-item__question { padding: var(--space-4) var(--space-5); min-height: 52px; }
  .faq-item__answer-inner { padding: 0 var(--space-5) var(--space-4); font-size: var(--text-sm); }

  /* CTA section — title smaller on mobile */
  .cta-section__title { font-size: var(--text-2xl); }
  .cta-section__sub { font-size: var(--text-base); margin-bottom: var(--space-6); }

  /* Wildlife disclaimer — tighter */
  .wildlife-disclaimer { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); }

  /* ── Long-form mobile reading ── */
  .container--narrow p { margin-bottom: var(--space-3); }

  /* b5-em: pull-quote moment — larger, anchored with gold bar */
  .b5-em {
    font-size: var(--text-xl);
    font-weight: 600;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-gold);
    margin-block: var(--space-6);
    line-height: 1.35;
  }

  /* b5-facts: collapse 4-col to 2×2; keep 3-col tighter */
  .b5-facts {
    padding: var(--space-5) 0;
    margin: var(--space-6) 0;
  }
  .b5-facts:not(.b5-facts--three) { grid-template-columns: 1fr 1fr; }
  .b5-fact { padding: 0 var(--space-3); }
  .b5-fact:first-child { padding-left: 0; }
  /* 2×2 layout — row 2 facts get top border */
  .b5-facts:not(.b5-facts--three) .b5-fact:nth-child(3) {
    border-left: none;
    padding-left: 0;
    border-top: 0.5px solid var(--color-border);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
  }
  .b5-facts:not(.b5-facts--three) .b5-fact:nth-child(4) {
    border-top: 0.5px solid var(--color-border);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
  }
  /* 3-col layout (Block 6) — stays 3 col, just tighter */
  .b5-facts--three { grid-template-columns: repeat(3, 1fr); }
  .b5-fact__value { font-size: var(--text-xl); }

  /* b5-compare: compact padding and number size on mobile */
  .b5-compare { gap: var(--space-3); margin: var(--space-5) 0; }
  .b5-compare__block { padding: var(--space-4); }
  .b5-compare__count { font-size: var(--text-2xl); }

  /* ── Articles page ── */
  .articles-grid { gap: var(--space-3); margin-top: var(--space-5); }
  .article-card { padding: var(--space-4) var(--space-5); gap: var(--space-2); }
  .article-card__date { font-size: 10px; letter-spacing: 0.08em; }
  .article-card__title { font-size: var(--text-lg); line-height: 1.3; }
  .article-card__excerpt { font-size: var(--text-sm); line-height: 1.6; }
  .article-card__read { font-size: var(--text-sm); padding-top: var(--space-1); }
  /* First article card acts as editorial lead — dark treatment */
  .articles-grid .article-card:first-child {
    background-color: var(--color-dark);
    border-color: var(--color-border-dark);
  }
  .articles-grid .article-card:first-child .article-card__date { color: var(--color-on-dark-eyebrow); }
  .articles-grid .article-card:first-child .article-card__title { color: var(--color-on-dark); }
  .articles-grid .article-card:first-child .article-card__excerpt { color: var(--color-on-dark-body); }
  .articles-grid .article-card:first-child .article-card__read { color: var(--color-gold); }

  /* ── Contact page ── */
  .contact-grid { gap: var(--space-3); margin-top: var(--space-5); }
  /* WhatsApp card — dark, dominant */
  .contact-item:first-child {
    background-color: var(--color-dark);
    border-color: var(--color-border-dark);
  }
  .contact-item:first-child .contact-item__label { color: var(--color-on-dark-eyebrow); }
  .contact-item:first-child .contact-item__value { color: var(--color-on-dark); }
  .contact-item:first-child .contact-item__desc { color: var(--color-on-dark-body); font-size: var(--text-sm); }
  /* Email card — light, secondary */
  .contact-item:last-child { background-color: transparent; padding: var(--space-4) var(--space-5); }
  .contact-item:last-child .contact-item__value { font-size: var(--text-base); }
  /* ── Contact page — mobile redesign ── */

  /* Channels: stack, WhatsApp dominant */
  .contact-channels { grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-6) 0; }

  /* WhatsApp card — full focus */
  .contact-channel--primary {
    padding: var(--space-6);
    border-radius: var(--radius-md);
  }
  .contact-channel--primary .contact-channel__icon { width: 36px; height: 36px; margin-bottom: var(--space-4); }
  .contact-channel--primary .contact-channel__label { font-size: var(--text-lg); }
  .contact-channel--primary .contact-channel__note { font-size: var(--text-sm); margin-bottom: var(--space-5); }
  .contact-channel--primary .btn--whatsapp {
    width: 100%;
    justify-content: center;
    border-radius: 100px;
    font-size: 15px;
    background-color: #25D366;
    border-color: #25D366;
    color: #fff;
  }
  .contact-channel__trust { font-size: 11px; letter-spacing: 0.03em; margin-top: var(--space-3); }

  /* Email card — strip it back, simple row */
  .contact-channel--secondary {
    background: transparent;
    border: none;
    border-top: 0.5px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-5) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .contact-channel--secondary .contact-channel__icon {
    width: 22px;
    height: 22px;
    margin-bottom: 0;
    flex-shrink: 0;
    color: var(--color-text-muted);
  }
  .contact-channel--secondary .contact-channel__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0;
  }
  .contact-channel--secondary .contact-channel__note { display: none; }
  .contact-channel--secondary .btn--outline {
    margin-left: auto;
    font-size: var(--text-xs);
    padding: 6px 12px;
    white-space: nowrap;
  }

  /* Checklist — compact */
  .contact-checklist { margin-top: var(--space-5); }
  .contact-checklist__item { gap: var(--space-4); padding: var(--space-4) 0; }
  .contact-checklist__num {
    font-size: var(--text-xs);
    min-width: 1.25rem;
    color: var(--color-gold);
  }
  .contact-checklist__title { font-size: var(--text-sm); margin-bottom: 2px; }
  .contact-checklist__note { font-size: var(--text-xs); line-height: 1.55; }

  /* Location note — stack link below text on mobile */
  .location-note {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-4);
  }
  .location-note a { margin-left: 0; font-size: var(--text-xs); }
  /* Info cards — scannable, tighter */
  .info-list { gap: var(--space-2); margin-top: var(--space-4); }
  .info-card { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
  .info-card__title { font-size: var(--text-sm); }
  .info-card__note { font-size: var(--text-xs); line-height: 1.55; }
  /* Dividers — less dramatic */
  .divider { margin-block: var(--space-5); }

  /* ── Packages page ── */
  .package { margin-bottom: var(--space-5); }
  .package-aside { padding: var(--space-5); }
  .package-main { padding: var(--space-5); }
  .package-price { font-size: 2.4rem; }
  .package-name { font-size: var(--text-xl); }
  .package-tagline { font-size: var(--text-sm); line-height: 1.65; }
  .package-photo-addon { padding: var(--space-4) var(--space-4); margin-top: var(--space-4); margin-bottom: var(--space-4); }
  .package-photo-addon p { font-size: var(--text-sm); }
  .package-best-for { font-size: var(--text-sm); padding-top: var(--space-4); }
  .tickets-assumptions { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
  .tickets-assumptions__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
  .tickets-assumption-item { font-size: var(--text-xs); }
  .tickets-table th, .tickets-table td { padding: 0.55rem 0.65rem; font-size: var(--text-xs); }
  /* Honest notes section — tighter */
  .section-note { margin-top: var(--space-5); }

  /* ── About page ── */
  .about-pullquote {
    font-size: 1.2rem;
    padding-block: var(--space-8);
    margin-block: var(--space-6);
  }
  .about-pullquote::before { font-size: 3.5rem; margin-bottom: var(--space-4); }
  .decision-tradeoff { grid-template-columns: 1fr; }
  .decision-tradeoff__col--b1 { border-right: none; border-bottom: 0.5px solid var(--color-border); }
  .sister-split { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  /* Long text — comfortable reading size already 1rem, just ensure paragraph spacing */
  .section .container--narrow p.text-muted + p.text-muted { margin-top: var(--space-4); }

  /* ── Article inner pages ── */
  .article-header { padding-top: calc(var(--header-height) + var(--space-8)); padding-bottom: var(--space-6); }
  .article-title { font-size: var(--text-2xl); line-height: 1.25; }
  .article-excerpt { font-size: var(--text-base); line-height: 1.65; }
  .article-body { padding: var(--space-8) 0; }
  .article-body h2 { font-size: var(--text-xl); margin-top: var(--space-8); margin-bottom: var(--space-3); }
  .article-body h3 { font-size: var(--text-lg); margin-top: var(--space-6); }
  .article-body p { margin-bottom: var(--space-4); font-size: var(--text-sm); line-height: 1.8; }
  .article-cta { padding: var(--space-6); margin-top: var(--space-8); }
  .article-cta h2 { font-size: var(--text-xl); }
  .article-footer { margin-top: var(--space-8); }
}

/* ── MOBILE IMAGE CROPS ──────────────────────────────────────────────────────
   Subject-centred object-position for every image that has a fixed/cropped
   container on mobile. Hero images carry inline style="" so !important is
   required to override them. Wildlife + gallery have no inline positions.
   Desktop is completely untouched.
   ──────────────────────────────────────────────────────────────────────────── */

/* Hero — full-viewport portrait crop */
@media (max-width: 1023px) {
  /* All images are landscape — only X% has effect in portrait container */
  .hero-slide:nth-child(1) img { object-position: 70% 50% !important; } /* Elephant */
  .hero-slide:nth-child(2) img { object-position: 50% 50% !important; } /* Leopard on track */
  .hero-slide:nth-child(3) img { object-position: 68% 50% !important; } /* Leopard stalking */
  .hero-slide:nth-child(4) img { object-position: 42% 50% !important; } /* Jackal */
  .hero-slide:nth-child(5) img { object-position: 52% 50% !important; } /* Kingfisher */
}

/* Wildlife cards — 16/10 aspect-ratio crop */
@media (max-width: 1023px) {
  /* Elephant: head and trunk at right */
  .wildlife-grid .wildlife-card:nth-child(1) img { object-position: 60% 38%; }
  /* Crocodile: open jaw fills frame, head upper-half */
  .wildlife-grid .wildlife-card:nth-child(2) img { object-position: 50% 30%; }
  /* Serpent eagle: portrait, eye in upper-third */
  .wildlife-grid .wildlife-card:nth-child(3) img { object-position: 46% 28%; }
  /* Buffalo: two faces, foreground calf centred */
  .wildlife-grid .wildlife-card:nth-child(4) img { object-position: 48% 45%; }
  /* Jackals: the looking jackal is right of centre */
  .wildlife-grid .wildlife-card:nth-child(5) img { object-position: 60% 38%; }
  /* Leopard resting: head centre-right on the ground */
  .wildlife-grid .wildlife-card:nth-child(6) img { object-position: 52% 42%; }
}

/* ── Carousel arrows — pull outside cards ── */
/* 1024–1309px: extend into container padding so arrows clear the card edge */
@media (min-width: 1024px) {
  .wildlife-carousel-wrapper {
    margin-inline: -32px;
    padding-inline: 32px;
  }
}
/* 1310px+: enough auto-margin exists to push arrows well clear of cards (~40px gap, visually centred) */
@media (min-width: 1310px) {
  .wildlife-carousel-wrapper {
    margin-inline: -87px;
    padding-inline: 87px;
  }
}