/* =========================================================
   DAN TOURS — Global Styles & Layout (Luxury Cinematic)
   ========================================================= */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Lenis smooth-scroll (js/motion.js) ---- */
/* While Lenis drives the scroll it must own it: native smooth-behavior would
   fight its per-frame setScroll. These only apply once Lenis adds its classes. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

html {
  scroll-behavior: smooth;
  /* Site-wide "zoom out": nearly all type and spacing is built on rem-based
     clamp(), so scaling the root shrinks everything proportionally without
     needing to hand-edit every rule. Body text itself stays a fixed 16px
     (set in px below) for readability; this affects headings and rem-based
     spacing only. */
  /* Base rem size × the text-only dial (--text-scale) — scales every
     rem-based type size at once without touching layout/spacing. */
  font-size: calc(90% * var(--text-scale, 1));
  /* Master global scale — tune --ui-scale in variables.css to make the whole
     site more/less compact. Reflows properly (unlike transform:scale). */
  zoom: var(--ui-scale, 1);
}

body {
  font-family: var(--font-body);
  background: var(--page);
  color: var(--off-white);
  line-height: 1.6;
  /* Also scaled by --text-scale so text that inherits the body size grows too. */
  font-size: calc(16px * var(--text-scale, 1));
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---- Gold rule ---- */
.gold-rule {
  border: none;
  border-top: 1px solid var(--gold);
  width: 60px;
  margin: 0 auto;
}
.gold-rule--full { width: 100%; }

/* ---- Section label ---- */
.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.872rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  /* Fill the whole opening screen. Divided by --ui-scale so it still fills
     100% of the viewport after the global `zoom` shrinks it (100vh under
     zoom:0.8 would otherwise only cover 80% of the screen).
     svh, not vh: on mobile `100vh` is the toolbar-HIDDEN height, so on load
     the bottom of the hero sits under the address bar. svh is the stable
     toolbar-shown height — no clipping, and no reflow mid-scroll the way dvh
     would give. The vh line stays first as a fallback for pre-2022 browsers. */
  height: calc(100vh / var(--ui-scale, 1));
  height: calc(100svh / var(--ui-scale, 1));
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--page);
}

.hero-video,
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* cinematic: airy at the top, deeper at the base so the headline reads */
  background: linear-gradient(
    180deg,
    rgba(20, 16, 10, 0.20) 0%,
    rgba(20, 16, 10, 0.30) 50%,
    rgba(20, 16, 10, 0.68) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--container-pad);
  max-width: 900px;
}

/* Gold label row */
.hero-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}
.hero-label-line {
  flex: 0 0 48px;
  height: 1px;
  background: var(--gold);
}
.hero-label-text {
  font-family: var(--font-body);
  font-size: 0.872rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Hero headline */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--off-white);
  margin-bottom: 40px;
  word-spacing: 0.06em;
}

/* Hero CTA */
.btn-hero {
  display: inline-block;
  padding: 16px 44px;
  border: 1px solid var(--off-white);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--t-base), color var(--t-base);
}
.btn-hero:hover {
  background: var(--off-white);
  color: var(--black);
}

/* Scroll arrow */
.hero-scroll-arrow {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245,240,235,0.6);
  font-size: 1.1rem;
  z-index: 10;
  cursor: pointer;
}

/* ============================================================
   SECTION: INTRO STATEMENT
   ============================================================ */
.section-intro {
  background: var(--page);
  padding: var(--section-pad) 0;
  text-align: center;
}

.intro-rule-top,
.intro-rule-bottom {
  border: none;
  border-top: 1px solid var(--gold);
  width: 80px;
  margin: 0 auto 36px;
}
.intro-rule-bottom { margin: 36px auto 0; }

.intro-statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-style: italic;
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.35;
  margin-bottom: 24px;
}

.intro-body {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================
   SECTION: SAFARI CATEGORIES 2×2
   ============================================================ */
.section-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60vh;
}

.cat-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* Hover-reveal: the hovered card stays sharp and lifts while its siblings
     dim/blur/recede. Compositor-friendly props only (transform/opacity/filter). */
  transition: transform 0.55s var(--ease-out),
              opacity 0.55s var(--ease-out),
              filter 0.55s var(--ease-out);
  will-change: transform, opacity, filter;
}

.cat-cell img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.cat-cell:hover img { transform: scale(1.05); }

/* ---- Hover-reveal focus effect (refined / luxury) ---- */
/* When the row is hovered, quiet every card... */
.section-categories:hover .cat-cell {
  opacity: 0.62;
  filter: blur(1.5px) saturate(0.85);
  transform: scale(0.985);
}
/* ...then bring the hovered/focused one fully forward. */
.section-categories .cat-cell:hover,
.section-categories .cat-cell:focus-visible {
  opacity: 1;
  filter: none;
  transform: scale(1.015);
  z-index: 3;
}
.section-categories .cat-cell:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Touch devices have no hover state, and reduced-motion users opt out —
   in both cases keep all cards at their normal resting appearance. */
@media (hover: none) {
  .section-categories:hover .cat-cell {
    opacity: 1; filter: none; transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cat-cell { transition-duration: 0.001s; }
  .section-categories:hover .cat-cell {
    filter: none; transform: none; opacity: 0.85;
  }
}

.cat-cell-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
  transition: background var(--t-slow);
  z-index: 1;
}
.cat-cell:hover .cat-cell-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%);
}

.cat-cell-label {
  position: absolute;
  bottom: 36px;
  left: 40px;
  z-index: 2;
}

.cat-cell-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.1;
  display: block;
}

/* NOTE: .cat-cell/.cat-cell-arrow currently match no markup on any page.
   Kept and modernised rather than deleted, so the block stays correct if the
   category grid is reinstated. */
.cat-cell-arrow {
  display: inline-block;
  margin-top: 10px;
  /* Wipes open via clip-path instead of animating width 0 -> 120px. Same
     left-to-right reveal, but clip-path is composited, so it doesn't relayout
     on every frame. The element keeps its natural width and sits on its own
     line, so reserving that space changes nothing around it. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s var(--ease-out);
  color: var(--gold);
  font-size: 0.91rem;
  font-family: var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cat-cell:hover .cat-cell-arrow { clip-path: inset(0 0 0 0); }

/* ============================================================
   SECTION: FEATURED SAFARIS — ALTERNATING EDITORIAL
   ============================================================ */
.section-featured { background: var(--page); }

.section-featured-header {
  padding: var(--section-pad) var(--container-pad) 60px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.editorial-row {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 580px;
}

.editorial-row--flip {
  grid-template-columns: 45% 55%;
}

.editorial-img-wrap {
  position: relative;
  overflow: hidden;
}

.editorial-text {
  background: var(--page);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px clamp(36px, 5vw, 80px);
}

.editorial-label {
  font-family: var(--font-body);
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.editorial-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.15;
  margin-bottom: 20px;
}

.editorial-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 28px;
}

.editorial-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 32px;
}

.editorial-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.91rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--off-white);
  transition: gap var(--t-base), color var(--t-base);
}
.editorial-link::after {
  content: '→';
  transition: transform var(--t-base);
}
.editorial-link:hover { color: var(--gold); }
.editorial-link:hover::after { transform: translateX(4px); }

/* ============================================================
   SECTION: STATS BAR
   ============================================================ */
.section-stats {
  background: var(--page);
  border-top: 1px solid rgba(201,168,76,0.25);
  border-bottom: 1px solid rgba(201,168,76,0.25);
  padding: 64px 0;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.stat-item {
  text-align: center;
  padding: 0 32px;
  position: relative;
}

.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: rgba(201,168,76,0.3);
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.2vw, 3rem);
  font-weight: 400;
  color: var(--off-white);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.893rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   SECTION: DESTINATIONS STRIP
   ============================================================ */
.section-destinations { background: var(--page); padding: var(--section-pad) 0; }

.destinations-header {
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto 48px;
}

.destinations-strip {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--container-pad);
  gap: 2px;
}
.destinations-strip::-webkit-scrollbar { display: none; }

.dest-cell {
  flex: 0 0 320px;
  height: 420px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.dest-cell img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.dest-cell:hover img { transform: scale(1.06); }

.dest-cell-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  z-index: 1;
}

.dest-cell-name {
  position: absolute;
  bottom: 28px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.2;
}

/* ============================================================
   SECTION: TESTIMONIALS
   ============================================================ */
.section-testimonials {
  background: var(--page);
  padding: var(--section-pad) 0;
  border-top: 1px solid rgba(245,240,235,0.06);
}

.testimonials-header {
  text-align: center;
  margin-bottom: 64px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial-stars {
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 4px;
}

.testimonial-quote {
  font-family: var(--font-display);
  /* Trimmed from clamp(1.1rem, 1.6vw, 1.4rem). At 1.4rem the quote filled a
     three-up column at ~32 characters a line, so a two-sentence testimonial
     broke into four short ragged lines and the three cards ended at
     different heights. The smaller top end buys ~8 more characters a line
     without making it stop reading as a display pull-quote. */
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  font-style: italic;
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.55;
  text-wrap: pretty;
}

.testimonial-author {
  font-size: 0.91rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   SECTION: CTA BANNER
   ============================================================ */
.section-cta {
  position: relative;
  height: 65vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Stays centred ON PURPOSE. IMG_1082 is a rear view of the LandCruiser
     fording water, and the vehicle IS the subject — it sits in the middle of
     the frame, so any vertical crop that chases its two near-white spare
     wheel covers out of shot also cuts the vehicle in half. That was tried
     (9%, 13%, 18%) and it gutted the photo: all that survived was a roof
     rack against clouds.

     The covers do sit behind the buttons here, and that genuinely was a
     legibility problem. It is fixed where it should be — in the scrim below
     and in the button's own surface (theme.css) — rather than by throwing
     away the composition. That also holds on narrow viewports, where the box
     is taller than the image's 4:3 and `cover` crops horizontally, so no
     vertical object-position value could have helped anyway. */
  object-position: center;
  z-index: 0;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  /* Was a flat rgba(0,0,0,0.55). Flat 55% still left the white wheel covers
     at ~45% luminance — bright enough to fight the buttons on any viewport
     where the crop puts them behind the content (every phone, since the crop
     axis flips there). Deepening the middle band, where the heading and
     buttons sit, buys that contrast back while keeping the top lighter so
     the cloudscape doesn't flatten into grey. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.58) 28%,
    rgba(0, 0, 0, 0.62) 78%,
    rgba(0, 0, 0, 0.50) 100%
  );
  z-index: 1;
}

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--container-pad);
}

.cta-heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--off-white);
  margin-bottom: 40px;
  line-height: 1.15;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-gold {
  display: inline-block;
  padding: 16px 40px;
  background: var(--gold);
  /* Charcoal label, not warm white: on the brand bronze #9A8352 charcoal
     is 4.69:1 (passes AA) where warm white is only 3.65:1 (fails). This
     already matched what theme.css forced for .hero .btn-gold. */
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 0.927rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--t-base), color var(--t-base);
}
/* Fading bronze via opacity washes it toward the warm background — step to
   the brand's own darker bronze instead. */
.btn-gold:hover { background: var(--gold-deep); color: var(--warm); }

.btn-outline-white {
  display: inline-block;
  padding: 16px 40px;
  border: 1px solid var(--off-white);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.927rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background var(--t-base), color var(--t-base);
}
.btn-outline-white:hover { background: var(--off-white); color: var(--black); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--page);
  border-top: 1px solid var(--gold);
  padding: 72px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  margin-bottom: 56px;
}

.footer-logo img {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  /* Was a flat 260px. A px cap can't track the type: --text-scale grew the
     rem font size by 40% while 260px stayed put, so the measure fell to ~23
     characters a line. `ch` is defined against this element's own font, so
     the cap now moves with the type dial and the measure holds wherever the
     dial is set. The logo column is ~467px wide, so there is room for it. */
  max-width: 34ch;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-links { display: flex; flex-direction: column; gap: 10px; }

.footer-link {
  font-size: 0.85rem;
  color: var(--muted);
  transition: color var(--t-fast);
}
.footer-link:hover { color: var(--off-white); }

.footer-contact-item {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.footer-contact-item a { color: inherit; transition: color var(--t-fast); }
.footer-contact-item a:hover { color: var(--off-white); }

.footer-bottom {
  border-top: 1px solid rgba(245,240,235,0.08);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px var(--container-pad) 0;
}

.footer-copyright {
  font-size: 0.927rem;
  color: rgba(153,153,153,0.6);
}

.footer-legal {
  display: flex;
  gap: 24px;
}
.footer-legal a {
  font-size: 0.927rem;
  color: rgba(153,153,153,0.6);
  transition: color var(--t-fast);
}
.footer-legal a:hover { color: var(--off-white); }

/* ============================================================
   SECTION HEADINGS (shared)
   ============================================================ */
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 300;
  color: var(--off-white);
  line-height: 1.2;
  margin-bottom: 20px;
}

.section-heading--center { text-align: center; }

/* ============================================================
   FLOATING BUTTONS
   ============================================================ */
/* ---- WhatsApp mark ----
   Inlined as SVG rather than drawn from the Font Awesome brands webfont:
   fa-brands-400.woff2 is 114 KB and WhatsApp was the only brand glyph on
   the whole site. Sized in em and filled with currentColor, so it inherits
   font-size and colour exactly the way the old <i> element did — every
   existing rule that sized the icon still works untouched.

   Icon artwork: Font Awesome Free 6.5.0, CC BY 4.0
   https://fontawesome.com/license/free */
.wa-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: -0.125em;
}

.floating-whatsapp {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: white;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  animation: pulse 2.5s infinite;
  transition: transform var(--t-fast);
}
.floating-whatsapp:hover { transform: scale(1.08); }

.floating-enquire {
  position: fixed;
  bottom: 100px;
  right: 32px;
  z-index: 900;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 20px 12px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity var(--t-base);
}
.floating-enquire:hover { opacity: 0.85; }

/* ============================================================
   INNER PAGE HERO (hero-band)
   ============================================================ */
.hero-band {
  position: relative;
  /* Rounded, inset card that fills the screen below the nav — same framing as
     the homepage hero. The photo fills the card (cover); only the extreme
     edges are trimmed, and per-page focal points keep the subject in frame. */
  width: auto;
  margin: calc(var(--nav-height) + var(--nav-gap)) clamp(12px, 2vw, 28px) 0;
  /* svh so the card's bottom rounded corner isn't tucked under the mobile
     address bar on load — see the base .hero rule for the full reasoning. */
  height: calc((100vh / var(--ui-scale, 1)) - var(--nav-height) - var(--nav-gap) - clamp(18px, 2.5vh, 34px));
  height: calc((100svh / var(--ui-scale, 1)) - var(--nav-height) - var(--nav-gap) - clamp(18px, 2.5vh, 34px));
  min-height: 440px;
  border-radius: clamp(20px, 2vw, 32px);
  overflow: hidden;
  background: var(--charcoal);
}

.hero-band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Per-photo focal point, set inline on the image element as
     --hero-focus-x / --hero-focus-y. Which axis matters depends on the
     viewport, because `cover` only ever crops the axis the box is "longer" in:
       mobile  — the hero is portrait (4/5) and the photos are landscape, so
                 the crop is HORIZONTAL and --hero-focus-x decides what stays.
       desktop — the band is wider than the photos, so the crop is VERTICAL
                 and --hero-focus-y decides.
     Both default to dead centre, which is right for any photo whose subject
     already fills the frame. */
  object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
}

/* Kept as named shorthands for the vertical axis (e.g. a group photo with
   people along the bottom edge). */
.hero-band-bg--focus-bottom { --hero-focus-y: 100%; }
.hero-band-bg--focus-top    { --hero-focus-y: 0%; }

.hero-band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.12) 75%, transparent 100%);
  z-index: 1;
}

.hero-band-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* Bottom padding clears the fixed .sticky-mobile-bar (~75px) so the
     title never hides behind it on the full-height hero. */
  padding: 0 var(--container-pad) clamp(118px, 12vh, 150px);
  max-width: var(--container-max);
  margin: 0 auto;
}

.hero-band-eyebrow {
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: block;
}

.hero-band-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  font-weight: 300;
  color: var(--off-white);
  line-height: 1.05;
}

/* ============================================================
   GENERAL SECTION PADDING
   ============================================================ */
.section {
  padding: var(--section-pad) 0;
}

/* ============================================================
   ABOUT PAGE — specific
   ============================================================ */
.about-intro-section {
  background: var(--page);
  padding: var(--section-pad) 0;
}

.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.about-story-text .section-label { margin-bottom: 24px; }

.about-story-body {
  font-size: 1rem;
  color: rgba(245,240,235,0.75);
  line-height: 1.85;
  margin-top: 20px;
}

.about-story-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.about-story-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.fleet-section {
  background: var(--page);
  padding: var(--section-pad) 0;
  border-top: 1px solid rgba(245,240,235,0.06);
}

.fleet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 48px;
}

.fleet-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.fleet-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.fleet-img:hover img { transform: scale(1.04); }

.fleet-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  margin-top: 48px;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-pad);
}

.fleet-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.fleet-feature-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
}

.fleet-feature-text {
  font-size: 0.9rem;
  color: rgba(245,240,235,0.7);
  line-height: 1.5;
}

/* ============================================================
   SAFARIS PAGE
   ============================================================ */
.safaris-section { background: var(--page); padding: var(--section-pad) 0; }

/* ---- Prose + media pairing ----
   Long restored copy used to sit alone in a left column that filled about
   41% of the band, leaving the right ~59% empty all the way down — the page
   read as unfinished rather than as an editorial column.

   The prose keeps its own measure (it is NOT widened; a longer line would be
   harder to read, not easier). Instead the empty half is given to a photo,
   which is what the page was missing. The image is sticky, so on a block of
   copy this long it travels alongside the reading instead of sitting at the
   top with dead space beneath it. */
.prose-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4.5vw, 76px);
  /* start, not center: the sticky media below needs room to travel inside
     its grid area, and a centred item in a very tall row just re-creates the
     dead space above and below it. */
  align-items: start;
}
.prose-split + .prose-split { margin-top: clamp(56px, 7vw, 104px); }
/* Alternate the side the photo sits on down the page. The column RATIOS
   mirror too, so the copy keeps the wider of the two either way — without
   this the flipped block hands the text the narrow column and its measure
   drops by about six characters against the block above it. */
.prose-split--flip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.prose-split--flip .prose-split__text { order: 2; }

.prose-split__media {
  margin: 0;
  position: sticky;
  /* Clear the fixed nav pill. */
  top: calc(var(--nav-height) + 16px);
  /* No max-height: a height cap makes aspect-ratio solve for a narrower
     width, which pulls the photo off its column edge and leaves a ragged
     gutter beside it. Letting it fill the column keeps both edges aligned
     with the grid. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
}
.prose-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .prose-split { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
  /* Stack photo under its copy rather than above it, on both variants. */
  .prose-split--flip .prose-split__text { order: 0; }
  .prose-split__media {
    position: static;
    aspect-ratio: 4 / 3;
    max-height: none;
  }
}

.safaris-intro-text {
  /* Was a flat 680px, which held its measure only at the type scale it was
     authored for. In `ch` the cap tracks the font, so this block keeps a
     ~66-character measure whatever --text-scale is set to. This is the one
     place on the site carrying long restored prose, so it is the block that
     suffers most when the cap and the type drift apart. */
  max-width: 60ch;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 20px;
  text-wrap: pretty;
}

/* Sub-heading within the intro block. .section-heading is deliberately
   oversized for major sections that carry a .section-label eyebrow; this one
   sits inside running prose, so it takes prose scale instead. */
/* The block is a <div> of <p>s rather than one <p> full of <br><br>: the
   restored copy is seven paragraphs and now says so, to a reader and to a
   screen reader both. */
.safaris-intro-text p { margin: 0 0 1.15em; }
.safaris-intro-text p:last-child { margin-bottom: 0; }

.safaris-intro-subheading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 44px;
  margin-bottom: 4px;
}
/* Opening its column, it has nothing to be pushed away from. */
.prose-split__text > .safaris-intro-subheading:first-child { margin-top: 0; }

.package-list { display: flex; flex-direction: column; gap: 2px; margin-top: 48px; }

.package-row {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 360px;
  background: var(--page);
}

.package-row--flip { grid-template-columns: 60% 40%; }

.package-img {
  position: relative;
  overflow: hidden;
}
.package-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.package-img:hover img { transform: scale(1.04); }

.package-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(28px, 4vw, 64px);
  border-top: 1px solid rgba(245,240,235,0.07);
}

.package-badge {
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.package-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.2;
  margin-bottom: 16px;
}

.package-price {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 20px;
}

.package-highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.package-highlights li {
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.package-highlights li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.package-accom {
  font-size: 0.8rem;
  color: rgba(153,153,153,0.7);
  margin-bottom: 28px;
  font-style: italic;
}

.btn-enquire {
  display: inline-block;
  padding: 12px 32px;
  border: 1px solid rgba(245,240,235,0.3);
  color: var(--off-white);
  font-size: 0.893rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: border-color var(--t-base), background var(--t-base);
  align-self: flex-start;
}
.btn-enquire:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.08);
}

.package-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

/* ============================================================
   DESTINATIONS PAGE
   ============================================================ */
.destinations-page { background: var(--page); }

.dest-item {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 520px;
  border-top: 1px solid rgba(245,240,235,0.06);
}
.dest-item--flip { grid-template-columns: 45% 55%; }

.dest-item-img {
  position: relative;
  overflow: hidden;
}
.dest-item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.dest-item-img:hover img { transform: scale(1.04); }

.dest-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px clamp(36px, 5vw, 80px);
}

.dest-item-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: 400;
  color: var(--off-white);
  line-height: 1.15;
  margin-bottom: 20px;
}

.dest-item-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 400px;
}

.dest-item-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.893rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap var(--t-base);
}
.dest-item-cta::after { content: '→'; }
.dest-item-cta:hover { gap: 16px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page { background: var(--page); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--container-pad);
}

.contact-info-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 400;
  color: var(--off-white);
  margin-bottom: 24px;
  line-height: 1.2;
}

.contact-person {
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.98rem;
  margin: 10px 0 14px;
}

.contact-detail {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.contact-detail-icon {
  color: var(--gold);
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.contact-detail-text {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}
.contact-detail-text a { color: inherit; transition: color var(--t-fast); }
.contact-detail-text a:hover { color: var(--off-white); }

/* Contact form */
.contact-form-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 400;
  color: var(--off-white);
  margin-bottom: 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
  position: relative;
}

/* Honeypot. Moved off-canvas rather than display:none, because some
   bots skip anything that is outright hidden. Nobody using a screen
   reader meets it either: the wrapper carries aria-hidden. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-group label {
  display: block;
  font-size: 0.883rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245,240,235,0.2);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 10px 0;
  outline: none;
  transition: border-color var(--t-base);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--gold); }

.form-group textarea { min-height: 120px; resize: vertical; }

.form-group select { cursor: pointer; appearance: none; }
.form-group select option { background: var(--page); }

.btn-submit {
  display: inline-block;
  padding: 16px 44px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.927rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: opacity var(--t-base);
  margin-top: 8px;
}
.btn-submit:hover { opacity: 0.85; }

.form-required {
  font-size: 0.91rem;
  color: rgba(153,153,153,0.5);
  margin-top: 8px;
}

/* ---- Form feedback (success / error) ---- */
.form-feedback[hidden] { display: none; }
.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 40px 0 20px;
}
.form-feedback i {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.form-success i { color: var(--gold); }
.form-error   i { color: #ef4444; }
.form-feedback p {
  font-size: 1rem;
  color: var(--off-white);
  line-height: 1.75;
}

/* ============================================================
   PHOTO GALLERY PREVIEW
   ============================================================ */
.section-gallery {
  padding: var(--section-pad) 0;
}
.gallery-header {
  margin-bottom: 48px;
}
.gallery-grid {
  display: grid;
  /* auto-fill rather than a fixed three, so a wide screen shows more photos
     per row instead of three enormous ones. The narrow breakpoint below still
     pins it to two. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: block;
}
.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,8,2,0.7) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay span {
  color: var(--off-white);
  font-size: 0.91rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gallery-cta-row {
  text-align: center;
  margin-top: 48px;
}
.btn-outline-gold {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 14px 44px;
  font-family: var(--font-body);
  font-size: 0.91rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background var(--t-base), color var(--t-base);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--black);
}

/* ============================================================
   SEASONAL GUIDE
   ============================================================ */
.section-seasonal {
  padding: var(--section-pad) 0;
  border-top: 1px solid rgba(200,136,26,0.15);
}
.seasonal-header {
  text-align: center;
  margin-bottom: 56px;
}
.seasonal-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 16px;
  /* ch rather than the old 520px, so the cap tracks --text-scale — see
     .map-sub, which this now matches. */
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  text-wrap: pretty;
}
.seasonal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  align-items: end;
  margin-bottom: 32px;
  padding: 0 4px;
}
.season-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.month-abbr {
  font-size: 0.839rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.month-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  /* Bar heights are fixed by each bar's .season-* class in the markup, and
     nothing ever toggles those classes, so the height animation that used to
     live here could never have run. Removed rather than converted. */
}
.season-peak .month-bar  { height: 80px; background: var(--gold); }
.season-good .month-bar  { height: 50px; background: var(--terracotta); }
.season-ok   .month-bar  { height: 26px; background: var(--muted); opacity: 0.45; }
.seasonal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.893rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend-peak { background: var(--gold); }
.legend-good { background: var(--terracotta); }
.legend-ok   { background: var(--muted); opacity: 0.5; }
.legend-label {
  font-size: 0.893rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   STICKY MOBILE ENQUIRY BAR
   ============================================================ */
.sticky-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 850;
  background: var(--page);
  border-top: 1px solid rgba(200,136,26,0.25);
  padding: 10px 16px 14px;
  gap: 10px;
  align-items: stretch;
}
.sticky-mobile-bar__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 14px;
  font-size: 0.828rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--off-white);
  border: 1px solid rgba(247,237,218,0.2);
  border-radius: 4px;
  flex-shrink: 0;
}
.sticky-mobile-bar__action i { font-size: 1.15rem; }
.sticky-mobile-bar__action--wa { color: #25D366; border-color: rgba(37,211,102,0.3); }
.sticky-mobile-bar__enquire {
  flex: 1;
  text-align: center;
  background: var(--gold);
  color: var(--black);
  padding: 10px 12px;
  font-size: 0.893rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   DETAIL PAGES (safari + destination)
   ============================================================ */

/* Quick-jump anchor bar under the hero */
.detail-nav {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: rgba(28,18,8,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,136,26,0.18);
}
.detail-nav-inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.detail-nav a {
  font-size: 0.872rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 16px;
  border-radius: 2px;
  transition: color var(--t-fast), background var(--t-fast);
}
.detail-nav a:hover { color: var(--off-white); background: rgba(200,136,26,0.1); }

/* Section wrapper for detail pages */
.detail-section { padding: 80px 0; border-top: 1px solid rgba(247,237,218,0.07); }
.detail-section:first-of-type { border-top: 0; }
.detail-lead {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--off-white);
  max-width: 760px;
  margin-bottom: 18px;
}
.detail-body { font-size: 0.92rem; line-height: 1.9; color: var(--muted); max-width: 760px; }
.detail-body p { margin-bottom: 16px; }

/* The restored copy used to be one <p> with <br><br> standing in for the
   paragraph breaks — a single block to a screen reader, and unstylable.
   It is real paragraphs now, so every carrier of that copy needs the spacing.
   The last one drops its margin so the block ends flush with its container. */
.detail-lead p,
.about-story-body p,
.itinerary-day-body-inner p { margin-bottom: 16px; }
.detail-body p:last-child,
.detail-lead p:last-child,
.about-story-body p:last-child,
.itinerary-day-body-inner p:last-child { margin-bottom: 0; }

/* ---- Long standalone copy: two columns instead of one narrow one ----
   These blocks sit alone in the container (no photo beside them), so a
   760px cap left them filling ~44% of the band with the other ~56% empty
   all the way down — the same lonely-column look the safaris intro had.

   Splitting them into two columns uses the full width without lengthening
   the line: each column still measures ~62 characters. The modifier is put
   on individual elements rather than on .detail-body itself because the
   class is also used for short one- and two-line leads, and a 50-character
   lead balanced across two columns looks broken, not editorial. */
.detail-body--wide,
.detail-lead--wide {
  max-width: none;
  columns: 2 24rem;
  column-gap: clamp(40px, 5vw, 80px);
}
@media (max-width: 860px) {
  .detail-body--wide,
  .detail-lead--wide { columns: 1; }
}

/* Price + intro header strip */
.detail-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 36px 0 8px;
}
.detail-badge {
  font-size: 0.861rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(200,136,26,0.4);
  padding: 6px 16px;
  border-radius: 2px;
}
.detail-price { font-family: var(--font-serif); font-size: 1.6rem; color: var(--off-white); }
.detail-price span { font-size: 0.8rem; color: var(--muted); }

/* Two-column block: text + image (accommodation, overview) */
.detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  /* start, not center. The photo here is a fixed 4/5 box (~490px tall) while
     the copy beside it runs 630–1250px on most destination pages, so centring
     the image left a band of dead space above AND below it. Top-aligning both
     columns, and letting the photo stick (below), means it travels with the
     reading instead. On the few pages where the copy is SHORTER than the
     photo this just top-aligns the text beside it, which is the normal
     editorial arrangement. */
  align-items: start;
}
.detail-split-img {
  position: sticky;
  top: calc(var(--nav-height) + 16px);
}
.detail-split--flip .detail-split-text { order: 2; }
.detail-split-img { overflow: hidden; border-radius: 2px; }
.detail-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }

/* Itinerary accordion */
.itinerary { max-width: 820px; }
.itinerary-day { border-bottom: 1px solid rgba(247,237,218,0.1); }
.itinerary-day-header {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.itinerary-day-num {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  width: 64px;
}
.itinerary-day-title { flex: 1; font-size: 1.02rem; color: var(--off-white); font-weight: 500; }
.itinerary-day-icon { color: var(--muted); transition: transform var(--t-base); }
.itinerary-day.open .itinerary-day-icon { transform: rotate(180deg); }
/* grid-template-rows 0fr -> 1fr instead of animating max-height. Besides not
   relayouting every frame, it animates to the content's real height, so the
   old "pick a max-height larger than the content" guesswork disappears and
   detail.js no longer has to measure scrollHeight or re-measure on resize. */
.itinerary-day-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) ease;
}
.itinerary-day.open .itinerary-day-body { grid-template-rows: 1fr; }
.itinerary-day-body-inner {
  min-height: 0;   /* lets the 0fr row actually collapse */
  overflow: hidden;
  /* Bottom spacing is a content-box spacer, not padding. `min-height: 0` only
     zeroes the CONTENT contribution to the 0fr track — padding and border
     still floor it, so a `padding-bottom: 24px` here left a 24px sliver of
     every closed day visible. An ::after spacer is content, so it collapses
     and clips with the rest. */
  padding: 0 0 0 82px;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--muted);
}
@media (max-width: 600px) {
  .itinerary-day-body-inner { padding-left: 0; }
}

/* Inclusions checklist */
.inclusions-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  max-width: 820px;
}
.inclusions-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--off-white);
}
.inclusions-list li i { color: var(--gold); font-size: 0.85rem; margin-top: 4px; flex-shrink: 0; }
.inclusions-list--excl li i { color: var(--terracotta); }

/* Booking CTA box */
.detail-book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 40px;
  background: rgba(200,136,26,0.07);
  border: 1px solid rgba(200,136,26,0.25);
  border-radius: 3px;
}
.detail-book-price { font-family: var(--font-serif); font-size: 1.8rem; color: var(--off-white); }
.detail-book-price span { display: block; font-size: 0.893rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Destination quick-facts grid */
.dest-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(247,237,218,0.1);
  border: 1px solid rgba(247,237,218,0.1);
  margin: 8px 0 0;
}
.dest-fact { background: var(--white); padding: 28px 24px; }
.dest-fact-label {
  font-size: 0.839rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.dest-fact-value { font-size: 0.92rem; line-height: 1.6; color: var(--off-white); }

/* Related strip (packages / camps / destinations) */
.related-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 3/2;
}
.related-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.related-card:hover img { transform: scale(1.06); }
.related-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(12,8,2,0.82) 0%, transparent 60%);
}
.related-card-name { font-family: var(--font-serif); font-size: 1.1rem; color: var(--off-white); line-height: 1.25; }
.related-card-meta { font-size: 0.872rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }

/* Auto-advancing image slider */
.detail-slider {
  position: relative;
  margin: 40px auto 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--page);
}
.detail-slider-track {
  display: flex;
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}
.detail-slide {
  position: relative;
  min-width: 100%;
  aspect-ratio: 16 / 9;
}
.detail-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-slide-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 40px 28px 22px;
  background: linear-gradient(to top, rgba(12,8,2,0.78) 0%, transparent 100%);
  font-size: 0.927rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--off-white);
}
.detail-slide-caption span { color: var(--gold); }
.detail-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: rgba(12,8,2,0.45);
  border: 1px solid rgba(247,237,218,0.25);
  border-radius: 50%;
  color: var(--off-white);
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-base), background var(--t-fast);
  z-index: 3;
}
.detail-slider:hover .detail-slider-arrow { opacity: 1; }
.detail-slider-arrow:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.detail-slider-prev { left: 16px; }
.detail-slider-next { right: 16px; }
.detail-slider-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  /* 0, not 8px: each .detail-slider-dot now carries 8px of clipped-away box on
     either side, which supplies the visual gap. See the dot rule below. */
  gap: 0;
  z-index: 3;
}
/* The dot's box is always the full 24x8 pill; the circle/pill morph is done by
   clipping, not by animating width from 8px to 24px. Because every dot keeps
   the same footprint, activating one no longer reflows the whole row — and the
   pill now grows from its centre rather than its left edge. The dots row's gap
   is reduced to 0 to absorb the 16px of clipped-away box on each dot, so the
   visible spacing is unchanged. */
.detail-slider-dot {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: rgba(247,237,218,0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  clip-path: inset(0 8px round 4px);
  transition: clip-path var(--t-base), background var(--t-fast);
}
.detail-slider-dot.active { clip-path: inset(0 round 4px); background: var(--gold); }
@media (max-width: 600px) {
  .detail-slider-arrow { display: none; }
  .detail-slide-caption { font-size: 0.872rem; padding: 32px 18px 16px; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.hero-band--sm { min-height: 30vh; }
.legal-section { padding: 80px 0 100px; }
.legal-prose {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text);
  line-height: 1.8;
}
.legal-prose h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--color-gold);
  margin: 2.5rem 0 0.75rem;
  font-weight: 500;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(212,175,55,0.2);
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { margin: 0.75rem 0; font-size: 0.95rem; opacity: 0.9; }
.legal-prose ul, .legal-prose ol {
  margin: 0.75rem 0 0.75rem 1.5rem;
  font-size: 0.95rem;
  opacity: 0.9;
}
.legal-prose li { margin: 0.4rem 0; }
.legal-prose a { color: var(--color-gold); text-decoration: none; }
.legal-prose a:hover { text-decoration: underline; }
.legal-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.9rem;
}
.legal-prose table th,
.legal-prose table td {
  padding: 0.6rem 1rem;
  text-align: left;
  border: 1px solid rgba(212,175,55,0.2);
}
.legal-prose table th {
  background: rgba(212,175,55,0.08);
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.legal-prose em { opacity: 0.6; font-size: 0.85rem; }
.legal-prose strong { color: var(--color-light); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid       { grid-template-columns: 1fr 1fr; gap: 40px; }
  .editorial-row,
  .editorial-row--flip { grid-template-columns: 1fr; min-height: auto; }
  .editorial-row--flip .editorial-img-wrap { order: -1; }
  .dest-item,
  .dest-item--flip   { grid-template-columns: 1fr; min-height: auto; }
  .dest-item--flip .dest-item-img { order: -1; }
  .about-story       { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid      { grid-template-columns: 1fr; gap: 56px; }
  .detail-split,
  .detail-split--flip { grid-template-columns: 1fr; gap: 36px; }
  .detail-split--flip .detail-split-text { order: 0; }
  .related-strip     { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .section-categories { grid-template-columns: 1fr; grid-template-rows: repeat(3, 70vw); }
  .stats-row          { grid-template-columns: repeat(2, 1fr); }
  .stat-item + .stat-item:nth-child(3)::before { display: none; }
  .testimonials-grid  { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid        { grid-template-columns: 1fr; }
  .hero-label-row     { flex-wrap: wrap; gap: 10px; }
  .hero-label-line    { flex: 0 0 28px; }
  .fleet-grid         { grid-template-columns: 1fr; }
  .fleet-features     { grid-template-columns: 1fr; }
  .package-row,
  .package-row--flip  { grid-template-columns: 1fr; }
  .package-row--flip .package-info { order: -1; }
  .package-img        { min-height: 280px; }
  .form-row           { grid-template-columns: 1fr; }
  .floating-enquire   { display: none; }
  /* gallery */
  .gallery-grid        { grid-template-columns: repeat(2, 1fr); }
  .gallery-item--wide  { grid-column: span 2; aspect-ratio: 3/2; }
  /* sticky bar */
  .sticky-mobile-bar   { display: flex; }
  body                 { padding-bottom: 72px; }
  /* The sticky bar already offers WhatsApp — the floating bubble would
     cover the bar's booking button. */
  .floating-whatsapp   { display: none; }
  /* 16px+ stops iOS Safari from auto-zooming focused form fields. Counter-
     scaled because the global `zoom` on <html> would render a flat 16px at
     only ~11.5 real pixels — well under the threshold this rule exists to
     clear. Class-level form rules outrank this one; see the floor block at
     the end of this file, which covers them. */
  input, select, textarea { font-size: calc(16px / var(--ui-scale, 1)); }
  /* seasonal */
  .seasonal-grid       { grid-template-columns: repeat(6, 1fr); }
  /* detail pages */
  .detail-nav          { top: 60px; }
  .detail-nav-inner    { gap: 4px; overflow-x: auto; flex-wrap: nowrap; }
  .detail-nav a        { white-space: nowrap; }
  .inclusions-list     { grid-template-columns: 1fr; }
  .dest-facts          { grid-template-columns: 1fr; }
  .related-strip       { grid-template-columns: 1fr; }
  .detail-section      { padding: 56px 0; }
}


/* =========================================================
   GRAFTON-STYLE COMPONENTS (2026 redesign)
   ========================================================= */

/* ---- Oversized display type ---- */
.section-heading {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.05;
}
.hero-headline {
  font-size: clamp(2.6rem, 6.8vw, 5.6rem);
  line-height: 1.02;
}

/* Elevated editorial section headings — applied site-wide (every page that
   uses .section-heading). Bigger Cormorant, more air under the eyebrow. */
.section-label {
  font-size: 0.905rem;
  margin-bottom: 26px;
}
.section-heading {
  font-weight: 400;
  /* Big display scale, closer to the intro section (which stays the largest). */
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
/* Shared gold italic accent — also used by the editorial intro title. */
.section-heading .intro-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

/* ---- ContentBlock: editorial image + text split ---- */
.content-block {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--container-pad);
}
.content-block--flip { direction: rtl; }
.content-block--flip > * { direction: ltr; }
.content-block .media-clip {
  aspect-ratio: 4 / 5;
  max-height: 720px;
}
.content-block-eyebrow {
  display: block;
  font-size: 0.893rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.content-block-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  color: var(--charcoal);
  margin-bottom: 26px;
}
.content-block-body {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.85;
  margin-bottom: 34px;
  max-width: 54ch;
}
.content-block-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.927rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  transition: color var(--t-fast), gap var(--t-fast);
}
.content-block-link:hover { color: var(--gold); gap: 16px; }
/* Expand the tap area to 44 real pixels without moving the gold underline off
   the text. Safe as an overlay here (unlike the footer list) because these
   links sit alone at the end of a text block with nothing adjacent above or
   below to steal taps from. */
.content-block-link { position: relative; }
.content-block-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(44px / var(--ui-scale, 1));
  transform: translateY(-50%);
}
@media (max-width: 860px) {
  .content-block, .content-block--flip { grid-template-columns: 1fr; direction: ltr; }
  .content-block .media-clip { aspect-ratio: 4 / 3; }
}

/* ---- Editorial intro (no image): oversized headline + two-column body ---- */
.intro-editorial {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--container-pad);
}
.intro-editorial__head {
  margin-bottom: clamp(40px, 6vw, 88px);
}
.intro-editorial__eyebrow {
  display: block;
  font-size: 0.893rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}

/* Eyebrow / kicker labels in Marcellus (see --font-label). Marcellus ships a
   single 400 weight, so we drop the 600 weight and lean on caps + tracking.
   Placed after all label definitions above so it wins the cascade. */
.section-label,
.hero-label-text,
.hero-band-eyebrow,
.hero-band__eyebrow,
.hero-split__eyebrow,
.map-panel-eyebrow,
.content-block-eyebrow,
.intro-editorial__eyebrow,
.chapter-break-eyebrow,
.map-detail-tag {
  font-family: var(--font-label);
  font-weight: 400;
  /* A touch more tracking suits Marcellus's wide Roman caps. */
  letter-spacing: 0.24em;
}
.intro-editorial__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Large editorial display size (Grafton uses ~96px on desktop). */
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  /* Narrow measure forces the elegant 2–3 line stack rather than one wide line. */
  max-width: 16ch;
}
/* The italic accent word(s) — the "Experience"-style flourish. */
.intro-editorial__title .intro-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.intro-editorial__body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}
.intro-editorial__lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.9;
  max-width: 54ch;
  margin: 0;
  text-wrap: pretty;
}
.intro-editorial__cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  justify-self: start;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.intro-editorial__cta-circle {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(29, 29, 29, 0.22);
  color: var(--charcoal);
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), transform var(--t-base);
}
.intro-editorial__cta-circle svg { width: 20px; height: 20px; display: block; }
.intro-editorial__cta:hover .intro-editorial__cta-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--warm);
  transform: scale(1.06);
}
.intro-editorial__cta:hover svg { transform: translateX(2px); transition: transform var(--t-base); }

@media (max-width: 860px) {
  .intro-editorial__title { max-width: 20ch; }
  .intro-editorial__body { grid-template-columns: 1fr; gap: 36px; align-items: start; }
}

/* ============================================================
   SAFARI TYPES — rolling-text list, split layout.
   Left: titles that roll upright → italic gold on hover.
   Right: one large image filling the whole side; the hovered row's
   photo cross-fades in (pure CSS via :has). Defaults to #1.
   ============================================================ */
.section-safari-roll {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-pad) var(--container-pad);
}
.safari-roll-split {
  display: grid;
  /* Image column gets the larger share so it fills the section. */
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;      /* image panel stretches to the list height */
}
/* Titles centered vertically so they stay balanced against the tall image. */
.safari-roll {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.roll-item {
  --line-h: clamp(2.4rem, 5.2vw, 4.4rem);
  position: relative;
  display: block;
  border-top: 1px solid rgba(29, 29, 29, 0.14);
  padding: clamp(26px, 3.6vw, 52px) 0;
  text-decoration: none;
  cursor: pointer;
}
.safari-roll .roll-item:last-child { border-bottom: 1px solid rgba(29, 29, 29, 0.14); }
.roll-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Rolling title: a 2-line stack clipped to one line, slid up on hover. */
.roll-text {
  display: block;          /* span defaults to inline → width:0 clips the title */
  width: 100%;
  position: relative;
  overflow: hidden;
  height: var(--line-h);
}
.roll-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.roll-item:hover .roll-inner,
.roll-item:focus-visible .roll-inner {
  transform: translateY(calc(-1 * var(--line-h)));
}
.roll-line {
  display: flex;
  align-items: center;
  height: var(--line-h);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* Sized to fit the left half — the panel takes the other half. */
  font-size: clamp(1.4rem, 3.6vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  white-space: nowrap;
}
.roll-line--accent { font-style: italic; color: var(--gold); }

/* Index number — fades on hover. */
.roll-index {
  position: absolute;
  top: clamp(26px, 3.6vw, 52px);
  right: 0;
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  transition: opacity 0.3s ease;
}
.roll-item:hover .roll-index,
.roll-item:focus-visible .roll-index { opacity: 0; }

/* Right image panel — fills the whole right side, cross-fades per row. */
.safari-roll-panel {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  /* Floor so the image stays a big block even if the titles are short. */
  min-height: clamp(440px, 62vh, 680px);
  background: var(--sand);
  box-shadow: 0 26px 60px -20px rgba(29, 29, 29, 0.4);
}
.panel-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Default shows the first image; any hovered/focused row swaps it in. */
.safari-roll-panel .panel-img--1 { opacity: 1; }
.safari-roll-split:has(.roll-item:is(:hover, :focus-visible)) .panel-img--1 { opacity: 0; }
.safari-roll-split:has(.roll-item:nth-child(1):is(:hover, :focus-visible)) .panel-img--1 { opacity: 1; }
.safari-roll-split:has(.roll-item:nth-child(2):is(:hover, :focus-visible)) .panel-img--2 { opacity: 1; }
.safari-roll-split:has(.roll-item:nth-child(3):is(:hover, :focus-visible)) .panel-img--3 { opacity: 1; }

/* Mobile: stack — full-width titles, hide the hover-only image panel. */
@media (max-width: 860px) {
  .safari-roll-split { grid-template-columns: 1fr; gap: 0; }
  .safari-roll-panel { display: none; }
  .roll-line { font-size: clamp(1.6rem, 7vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .roll-inner, .panel-img { transition: none; }
}

/* ---- Stacked package cards (Grafton packages list) ---- */
.pkg-stack {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) var(--section-pad);
  /* All three packages side by side in one section — no scrolling. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch;    /* equal-height cards, prices aligned at the bottom */
}
.pkg-card { position: relative; display: flex; flex-direction: column; }
.pkg-card .media-clip {
  aspect-ratio: 4 / 3;
  border-radius: 2px;
}
.pkg-card-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  background: var(--gold);
  color: var(--warm);
  font-size: 0.861rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
}
.pkg-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  flex: 1;                 /* equalize card heights in the grid */
}
.pkg-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.12;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.pkg-card-desc {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: none;
  text-wrap: pretty;
}
/* Push the price/CTA block to the bottom so the three cards align. */
.pkg-card-side { margin-top: auto; }
.pkg-card-side { text-align: left; }
.pkg-card-duration {
  display: block;
  font-size: 0.883rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--safari);
  margin-bottom: 10px;
}
.pkg-card-price {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  color: var(--charcoal);
  margin-bottom: 16px;
}
/* Tablet: two across. Phone: single column stack. */
@media (max-width: 900px) {
  .pkg-stack { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pkg-stack { grid-template-columns: 1fr; }
  .pkg-card .media-clip { aspect-ratio: 16 / 10; }
}

/* ---- Destination carousel section ---- */
.section-dest-carousel {
  padding: var(--section-pad) 0;
  overflow: hidden;
}
.dest-carousel-header {
  max-width: var(--container-max);
  margin: 0 auto 48px;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.section-dest-carousel .pcarousel-track {
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: var(--container-pad);
}
.pcarousel-item .dest-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--charcoal);
  margin-top: 18px;
}
.pcarousel-item .dest-card-tag {
  display: block;
  font-size: 0.872rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.section-dest-carousel .pcarousel-count {
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  margin: 28px auto 0;
}

/* ---- FooterCrosslink (restyled .section-cta) ---- */
.section-cta { min-height: clamp(420px, 60vh, 640px); display: flex; align-items: center; }
.cta-heading {
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.03;
}
.cta-content { width: 100%; }

/* ---- Nav: Grafton-minimal refinements ---- */
.navbar-cta,
.btn-book {
  letter-spacing: 0.18em;
}
.nav-link { font-size: 0.893rem; letter-spacing: 0.2em; }

/* =========================================================
   GRAFTON RESTYLE — package rows as alternating editorial
   blocks (mirrors the destinations page .dest-item layout)
   ========================================================= */
.package-list {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.package-row,
.package-row--flip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: 0;
  background: transparent;
}
.package-img {
  aspect-ratio: 4 / 5;
  max-height: 640px;
  overflow: hidden;
}
.package-img img { width: 100%; height: 100%; object-fit: cover; }
/* flipped rows: image on the right */
.package-row--flip .package-img { order: 2; }

.package-info {
  border-top: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.package-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.9vw, 2.4rem);
  line-height: 1.1;
  color: var(--charcoal);
  margin: 6px 0 14px;
}
.package-price {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--gold);
  margin-bottom: 22px;
}
.package-highlights {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.package-highlights li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.92rem;
}
.package-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.package-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 860px) {
  .package-row, .package-row--flip { grid-template-columns: 1fr; }
  .package-row--flip .package-img { order: -1; }
  .package-img { aspect-ratio: 4 / 3; max-height: none; }
}

/* ---- Destinations page: dest-items become content blocks ---- */
.dest-item, .dest-item--flip {
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  min-height: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) var(--container-pad);
  border-top: none !important;
}
.dest-item--flip .dest-item-img { order: 2; }
.dest-item-img {
  aspect-ratio: 4 / 5;
  max-height: 640px;
  overflow: hidden;
}
.dest-item-img img { width: 100%; height: 100%; object-fit: cover; }
.dest-item-name {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
}
@media (max-width: 860px) {
  .dest-item, .dest-item--flip { grid-template-columns: 1fr !important; }
  .dest-item--flip .dest-item-img { order: -1; }
  .dest-item-img { aspect-ratio: 4 / 3; }
}

/* =========================================================
   GRAFTON RESTYLE — detail pages
   ========================================================= */
.detail-split {
  gap: clamp(40px, 6vw, 110px);
}
.detail-split-img {
  aspect-ratio: 4 / 5;
  max-height: 680px;
}
.detail-split-img img { width: 100%; height: 100%; object-fit: cover; }

.detail-body { color: var(--muted); line-height: 1.85; }

/* Itinerary — Grafton accordion aesthetic */
.itinerary { border-top: 1px solid rgba(29,29,29,0.12); }
.itinerary-day { border-bottom: 1px solid rgba(29,29,29,0.12); }
.itinerary-day-header {
  padding: 22px 4px;
  background: none;
}
.itinerary-day-num {
  font-size: 0.872rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  min-width: 64px;
}
.itinerary-day-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--charcoal);
}
.itinerary-day-icon { color: var(--gold); }
.itinerary-day-body-inner {
  color: var(--muted);
  line-height: 1.8;
  /* Bottom spacing via the ::after spacer below, not padding — see the note on
     the earlier .itinerary-day-body-inner rule. */
  padding: 0 4px 0 82px;
}
/* The 26px of breathing room under an open day. Content, not padding, so the
   0fr row collapses to a true zero when the day is closed. */
.itinerary-day-body-inner::after {
  content: "";
  display: block;
  height: 26px;
}
@media (max-width: 720px) {
  .itinerary-day-body-inner { padding-left: 4px; }
}

/* Detail sticky sub-nav — light */
.detail-nav {
  background: rgba(248, 246, 242, 0.96);
  border-bottom: 1px solid rgba(29,29,29,0.1);
}
.detail-nav a { color: var(--muted); }
.detail-nav a:hover, .detail-nav a.active { color: var(--gold); }

/* =========================================================
   CINEMATIC PHOTO HERO — crossfade + Ken Burns slideshow
   ========================================================= */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--charcoal);
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Same focal-point contract as .hero-band-bg above — see the note there.
     This slide paints its photo as a background-image rather than an image
     element, so it needs background-position instead of object-position. */
  background-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
  opacity: 0;
  transform: none;              /* static — no Ken Burns zoom */
  transition: opacity 1.6s ease;
  will-change: opacity;
}
/* The slideshow still cross-fades between photos (opacity only); the images
   themselves hold perfectly still — the Ken Burns zoom/pan is removed. */
.hero-slide.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.4s ease; }
}

/* =========================================================
   HERO TITLE — reliable load animation (visible by default,
   no JS/observer dependency; critical above-the-fold content)
   ========================================================= */
/* Opacity stays 1 at all times — the title can never be invisible even
   if the animation is paused (hidden tab) or unsupported. Only the
   slide-up is animated. */
@keyframes heroTitleUp {
  from { transform: translateY(40px); }
  to   { transform: none; }
}
.hero-headline--anim {
  opacity: 1;
  animation: heroTitleUp 1.1s var(--ease-title, ease) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-headline--anim { animation: none; transform: none; }
}

/* ---- Laptop-density pass (no zoom) ----
   `zoom: 0.7` was tried here first — it's the same mechanism as Chrome's
   own browser zoom, so it matched a manual zoom test perfectly. But a lot
   of the site's headings use viewport-width-driven clamp() sizing (e.g.
   clamp(2.6rem, 6.8vw, 5.6rem)), where the vw term sits between the min/max
   and is picked as-is — completely ignoring root font-size. Compensating
   via root font-size therefore only fixed the minority of purely-rem text
   and left most fluid headings still shrunk by the zoom, which is why
   text kept reading as too small everywhere.
   Fix: don't touch font-size/zoom at all here, so every heading renders
   at its normal, fully legible, designed size — same as desktop. Get the
   denser "more content per screen" feel purely from shrinking the things
   that eat vertical space (the full-viewport-height hero and the section
   padding), which have nothing to do with type size.
   Placed at the very end of this file so it wins the cascade over the
   earlier unconditional .hero/.hero-band rules (same specificity). */
@media (min-width: 1024px) and (max-width: 1600px) {
  /* Hero heights are handled by the base .hero / .hero-band rules (rounded
     inset cards sized to the screen). Only tighten section/container spacing
     here for the denser laptop layout. */
  :root {
    --section-pad:   clamp(48px, 6vw, 84px);
    --container-pad: clamp(16px, 3vw, 48px);
  }
}

/* ============================================================
   HERO TRIP FINDER  (index.html)
   A frosted booking bar — Where to · When · Travellers · CTA.
   Color rules are written as `.hero .hero-finder…` (0,2,0) so they
   beat theme.css's `.hero *` light-text rule (0,1,0). Fades in after
   the headline words settle. Routes handled in js/main.js.
   ============================================================ */
.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.25vw, 1.06rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: -14px auto 34px;
  color: rgba(248, 246, 242, 0.9);
  opacity: 0;
  animation: hfRise 0.8s var(--ease-out) 0.85s forwards;
}

.hero-finder {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 10px 10px 10px 22px;
  background: rgba(248, 246, 242, 0.94);
  border: 1px solid rgba(154, 131, 82, 0.35);
  border-radius: 999px;
  box-shadow: 0 26px 60px -24px rgba(20, 16, 10, 0.75),
              0 2px 8px rgba(20, 16, 10, 0.25);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  animation: hfRise 0.9s var(--ease-out) 1.05s forwards;
}

.hero-finder__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 20px;
}

.hero .hero-finder__label {
  font-family: var(--font-body);
  font-size: 0.828rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
}

.hero-finder__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero .hero-finder__icon {
  font-size: 0.85rem;
  color: var(--gold);
  flex: 0 0 auto;
}

.hero .hero-finder__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  text-overflow: ellipsis;
  outline: none;
}
.hero .hero-finder__input option {
  color: var(--charcoal);
  background: var(--page);
}

.hero .hero-finder__caret {
  position: absolute;
  right: 0;
  font-size: 0.839rem;
  color: var(--muted);
  pointer-events: none;
  transition: transform var(--t-base);
}
.hero-finder__control:hover .hero-finder__caret { transform: translateY(1px); }

.hero-finder__divider {
  flex: 0 0 1px;
  align-self: center;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgba(154, 131, 82,0.4), transparent);
}

.hero .hero-finder__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #C79A48 0%, var(--gold) 55%, #9C7833 100%);
  color: var(--warm);
  font-family: var(--font-body);
  font-size: 0.915rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
  box-shadow: 0 8px 20px -6px rgba(154, 131, 82, 0.7);
}
.hero .hero-finder__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 26px -8px rgba(154, 131, 82, 0.85);
}
.hero .hero-finder__btn:active { transform: translateY(0); }
.hero .hero-finder__btn i { font-size: 0.85rem; }

.hero .hero-enquire-link {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--font-body);
  font-size: 0.893rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 246, 242, 0.82);
  border-bottom: 1px solid rgba(154, 131, 82, 0.55);
  padding-bottom: 3px;
  opacity: 0;
  animation: hfRise 0.8s var(--ease-out) 1.25s forwards;
  transition: color var(--t-base), border-color var(--t-base);
}
.hero .hero-enquire-link:hover {
  color: var(--warm);
  border-color: var(--gold);
}

@keyframes hfRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Trip finder: tablet & mobile ---- */
@media (max-width: 860px) {
  .hero-finder {
    flex-direction: column;
    align-items: stretch;
    width: min(440px, 100%);
    border-radius: 22px;
    padding: 10px;
    gap: 2px;
  }
  .hero-finder__field {
    padding: 12px 16px;
    border-radius: 14px;
  }
  .hero-finder__field:hover { background: rgba(154, 131, 82, 0.08); }
  .hero-finder__divider {
    flex-basis: 1px;
    width: auto;
    height: 1px;
    align-self: stretch;
    margin: 0 12px;
    background: linear-gradient(90deg, transparent, rgba(154, 131, 82,0.3), transparent);
  }
  .hero .hero-finder__btn {
    justify-content: center;
    padding: 15px 30px;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tagline,
  .hero-finder,
  .hero .hero-enquire-link {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   HERO as a rounded, inset "card" that sits BELOW the (light-bg)
   nav bar and is framed by the page background on all sides —
   like the reference. Overrides the base full-bleed .hero rule.
   ============================================================ */
.hero {
  width: auto;
  margin: calc(var(--nav-height) + var(--nav-gap)) clamp(12px, 2vw, 28px) 0;
  /* svh so the card's bottom rounded corner isn't tucked under the mobile
     address bar on load — see the base .hero rule for the full reasoning. */
  height: calc((100vh / var(--ui-scale, 1)) - var(--nav-height) - var(--nav-gap) - clamp(18px, 2.5vh, 34px));
  height: calc((100svh / var(--ui-scale, 1)) - var(--nav-height) - var(--nav-gap) - clamp(18px, 2.5vh, 34px));
  min-height: 440px;
  border-radius: clamp(20px, 2vw, 32px);
}

/* ============================================================
   "START YOUR ADVENTURE" — its own section below the hero.
   A light card whose top edge overlaps the base of the hero
   photo, then extends down into a warm band (like the reference).
   ============================================================ */
.adventure {
  background: var(--page);
  padding: 0 var(--container-pad) clamp(56px, 8vh, 96px);
}

.adventure__panel {
  position: relative;
  z-index: 6;
  max-width: var(--container-max);
  /* Pull up so the card's top overlaps the hero's bottom edge. */
  margin: clamp(-104px, -8vh, -64px) auto 0;
  padding: clamp(26px, 3vw, 48px);
  background: #FFFFFF;
  border: 1px solid rgba(154, 131, 82, 0.2);
  border-radius: 22px;
  box-shadow: 0 30px 70px -28px rgba(20, 16, 10, 0.5);
  text-align: left;
}

.adventure__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.1;
  margin: 0 0 clamp(20px, 2.2vw, 32px);
}

.adventure__form {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr auto;
  gap: clamp(14px, 1.6vw, 24px);
  align-items: end;
}

.adv-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.adv-label {
  font-family: var(--font-body);
  font-size: 0.839rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.adv-control {
  position: relative;
  display: flex;
  align-items: center;
}

.adv-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: #FFFFFF;
  border: 1px solid rgba(29, 29, 29, 0.16);
  border-radius: 12px;
  padding: 15px 16px;
  outline: none;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.adv-input::placeholder { color: rgba(29, 29, 29, 0.4); }
.adv-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(154, 131, 82, 0.15);
}

.adv-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.adv-caret {
  position: absolute;
  right: 16px;
  pointer-events: none;
  color: var(--muted);
  font-size: 0.883rem;
}

.adv-control .adv-icon {
  position: absolute;
  left: 16px;
  color: var(--gold);
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 1;
}
.adv-date { padding-left: 42px; }

.adv-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: fit-content;
  padding: 16px 30px;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: var(--warm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(154, 131, 82, 0.6);
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.adv-submit:hover {
  background: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(154, 131, 82, 0.8);
}
.adv-submit i { font-size: 0.85rem; }

/* Tablet: date + button drop to a second row */
@media (max-width: 960px) {
  .adventure__form { grid-template-columns: 1fr 1fr; }
  .adv-submit { grid-column: 1 / -1; }
}
/* Mobile: single column */
@media (max-width: 620px) {
  .adventure__form { grid-template-columns: 1fr; }
}

/* =========================================================
   TOUCH FORM FLOOR — keep focused fields at 16 REAL pixels
   =========================================================
   iOS Safari zooms the page when a focused field's text renders below 16px.
   The guard inside the max-width:768px block above only matches bare element
   selectors, so the class-level form rules outrank it and land short once the
   global `zoom` (--ui-scale) is applied:
     .form-group input   0.9rem  -> ~13.1 real px
     .adv-input                  -> ~15.7 real px
     .booking-page ...   1.08rem -> ~15.7 real px
   This block sits at the end of the file so it wins on source order against
   equal-specificity rules, and counter-scales the floor to a true 16px.
   Scoped to small screens so desktop form typography is unchanged. */
@media (max-width: 768px) {
  .form-group input,
  .form-group textarea,
  .form-group select,
  .booking-page .form-group input,
  .booking-page .form-group textarea,
  .booking-page .form-group select,
  .adv-input {
    font-size: max(16px, calc(16px / var(--ui-scale, 1)));
  }
}

/* =========================================================
   TOUCH TAP TARGETS — footer link lists
   =========================================================
   The global `zoom` (--ui-scale) renders these at 14-22 real pixels, under the
   24px WCAG 2.5.8 floor. Real padding rather than an expanded pseudo-element:
   the footer links sit ~27 real pixels apart, so an overlapping invisible hit
   area would hand taps to the wrong link. ~36 real pixels clears the floor
   without doubling the footer's height the way a full 44 would.
   Scoped to touch/small screens so the desktop footer's rhythm is unchanged. */
@media (max-width: 1000px), (pointer: coarse) {
  /* gap folded into the link padding, so the column is one continuous run of
     non-overlapping targets rather than slivers separated by dead space. */
  .footer-links { gap: 0; }
  .footer-link {
    display: block;
    padding: calc(8px / var(--ui-scale, 1)) 0;
  }
  /* Phone / email / WhatsApp are the most important taps on the page for a
     tour operator, and were 14 real pixels tall. Each sits alone in its own
     .footer-contact-item, so padding cannot collide with a sibling. */
  .footer-contact-item a {
    display: inline-block;
    padding: calc(9px / var(--ui-scale, 1)) 0;
  }
  /* Side by side with a 24px gap, so vertical padding is collision-free. */
  .footer-legal a {
    display: inline-block;
    padding: calc(7px / var(--ui-scale, 1)) 0;
  }
}

/* =========================================================
   MOBILE HERO — fixed aspect instead of viewport height
   =========================================================
   On phones the viewport-height formula made the hero 84-86% of the screen
   (96% once the nav is counted), so a visitor landed on a photo and nothing
   else, with the page title pinned to the very bottom edge. It also forced a
   4:3 landscape photo into a 1:1.9 portrait slot, throwing away 61% of the
   picture's width.

   A 4/5 box fixes both: the hero drops to ~54% of the screen and the crop
   loosens to 40%, so roughly a third of the previously discarded photo comes
   back. Per-photo framing is handled by --hero-focus-x (see .hero-band-bg).
   min-height is cleared so the ratio, not the old 440px floor, decides. */
@media (max-width: 620px) {
  .hero,
  .hero-band {
    height: auto;
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}