/* ============================================================
   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: 80px;
}

/* ── 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: hidden;
}
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); }
.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: background-color 500ms ease, border-color 500ms ease;
}
.site-header.scrolled {
  background-color: rgba(27,56,40,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--color-border-dark);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-4);
}
.site-logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.logo-primary {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-on-dark);
  letter-spacing: -0.01em;
}
.logo-sub {
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── 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);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.main-nav.is-open { display: flex; opacity: 1; pointer-events: auto; }
.nav-list { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; }
.nav-link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  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-10); }
.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;
}
.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%; }
.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);
}
.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;
}

/* ── 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;
}

/* ── 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);
}
.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; }
.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.3rem, 3vw, 1.75rem);
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  line-height: 1.5;
}
.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: var(--space-8);
}
.cta-section__inner { }
.cta-section__text { }

/* ── 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 { padding: var(--space-4) 0; margin-bottom: var(--space-4); }
.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); }

/* ── 21b. ARTICLE PAGE ── */
.article-header { padding: var(--section-y) 0 var(--space-10); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.article-meta { font-size: var(--text-sm); color: var(--color-text-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); }
.article-excerpt { font-size: var(--text-xl); color: var(--color-text-muted); 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); }
.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); }
.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; flex-direction: column; line-height: 1; margin-bottom: var(--space-4); }
.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: var(--color-surface-2); border-left: 2px solid var(--color-accent); 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-gold); margin-bottom: 0.35rem; }
.package-photo-addon p { font-size: var(--text-sm); color: var(--color-on-dark-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-surface); 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-2) var(--space-5); }
.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-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-4); border-radius: var(--radius-md); overflow: hidden; border: 0.5px solid var(--color-border); }
.tickets-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tickets-table thead tr { background: var(--color-surface); }
.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: var(--color-text-muted); }
.tickets-table th:last-child, .tickets-table td:last-child { text-align: right; }
.tickets-table td { padding: 0.7rem 1rem; color: var(--color-text-muted); border-bottom: 0.5px solid var(--color-border); }
.tickets-table td.price { color: var(--color-dark); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; }
.tickets-table tr.alt td { background: var(--color-bg); }
.tickets-note { font-size: var(--text-xs); color: var(--color-text-dim); margin-top: var(--space-4); line-height: 1.7; }

/* Package responsive — all breakpoints in one place */
@media (min-width: 681px) {
  .package-inner { grid-template-columns: 240px 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: opacity 0.01ms !important, transform 0.01ms !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 — 2-column compact grid on mobile */
  .wildlife-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    flex-direction: unset !important;
    scroll-snap-type: unset !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    padding-bottom: 0 !important;
  }
  .wildlife-card {
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: unset !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: unset !important;
    background-color: #162e1f !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
  .section--dark .wildlife-card__name { color: var(--color-on-dark) !important; }
  .section--dark .wildlife-card__note { color: var(--color-on-dark-muted) !important; }
  .wildlife-card__image { aspect-ratio: 4 / 3; }
  .wildlife-card__body { padding: var(--space-3); }
  .wildlife-card__name { font-size: var(--text-sm); font-family: var(--font-body); margin-bottom: var(--space-1); }
  .wildlife-card__freq { margin-top: var(--space-2); font-size: 9px; padding: 3px 8px; white-space: nowrap; }
  .wildlife-card__note { display: none; }
  .wildlife-grid .wildlife-card:last-child { grid-column: span 2; }
  /* Badge colours for dark card backgrounds */
  .wildlife-card__freq--common { background-color: rgba(46,110,69,0.30) !important; color: #8fcca0 !important; }
  .wildlife-card__freq--rare   { background-color: rgba(201,151,58,0.20) !important; color: #C9973A !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 — warm parchment, matches desktop */
  .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-bottom: 80px;
  }
  .cta-section .eyebrow { color: var(--color-accent); }
  .cta-section .cta-section__title { color: var(--color-dark); }
  .cta-section .cta-section__sub { color: var(--color-text-muted); }
  .cta-section .btn--whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: #fff;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    max-width: 280px;
    justify-content: center;
    font-size: 15px;
  }
  .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: 14px; }
  .cta-section__trust {
    font-size: 11.5px;
    color: rgba(28,43,34,0.40);
    letter-spacing: 0.02em;
  }

  /* 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: calc(-1 * var(--space-5));
    padding-inline: var(--space-5);
    padding-bottom: var(--space-4);
    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); }

  .main-nav {
    display: flex;
    position: static;
    background: none;
    flex-direction: row;
    align-items: center;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    flex: 1;
    justify-content: center;
  }
  .nav-list { flex-direction: row; gap: var(--space-4); }
  .nav-link {
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-weight: 400;
    color: var(--color-on-dark-muted);
  }
  .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-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;
  }
  .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); }
  .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;
  }
  .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); }
}

/* ── 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%; }
}