/* =====================================================================
   SECTIONS — layout for each band of the home page, top to bottom.
     1. Hero, scrollytelling region map
     2. Logistics problem
     3. Tour packages overview
     4. Destination slider
     5. Testimonials
     6. Consultation request
     7. Footer
   ===================================================================== */

/* =====================================================================
   1a. HERO — OPENING STORY + KEN BURNS SLIDER

   Three stages, driven by two classes that main.js swaps:

     is-intro    0.0s - 1.2s   warm mist over the first frame, the brand
                               mark alone in the middle of the viewport
     is-revealed 1.2s - 2.5s   the mark docks, the mist parts and the
                               copy staggers in underneath
     is-playing  2.5s onwards  the five slides cross-fade on a timer

   Every stage moves transform and opacity only, so nothing reflows and the
   work stays on the compositor. The timings below are written in literal
   milliseconds rather than the duration tokens because tokens.css collapses
   those to 1ms under "reduce motion" -- this section handles that setting
   itself, at the foot of the block.
   ===================================================================== */

.hero {
  position: relative;
  /* A full frame on every device. svh is the *small* viewport height, so a
     phone's address bar can never crop the buttons at the bottom; the vh
     line above it covers browsers that do not know svh yet. min-height, not
     height, so a short landscape phone grows rather than clips. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block:
    calc(var(--header-height) + var(--space-lg))
    calc(var(--space-3xl) + var(--space-lg));
  overflow: hidden;
  background-color: var(--color-green-900);
  isolation: isolate;

  --hero-intro-dy: 0px;
  --hero-intro-scale: 1;
}

/* Stage 1 lifts the brand mark to the middle of the viewport. 16vh is a
   close-enough opening value; main.js measures the real distance and writes
   it into --hero-intro-lift before the first paint. It deliberately sets a
   separate property rather than --hero-intro-dy itself, because an inline
   value would outrank the docked 0px above and strand the mark up there. */
.hero.is-intro {
  --hero-intro-dy: var(--hero-intro-lift, 16vh);
  --hero-intro-scale: 1.42;
}

/* ---------- Background: the slide stack ---------- */

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1000ms var(--ease-in-out);
}

.hero__slide.is-active { opacity: 1; }

/* base.css makes every <picture> a block of automatic height, which leaves
   the image inside it no definite height to measure a percentage against --
   so it fell back to its own aspect ratio and sat in a band at the top of the
   hero. Giving the wrapper the slide's own box fixes the reference. */
.hero__slide picture {
  position: absolute;
  inset: 0;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Each slide sets its own focal point below -- see the note there. */
  object-position: var(--focus, 50% 50%);
  transform: scale(1.04);
}

/* The zoom runs only while a slide is on screen, and alternating slides
   push in and pull out so the movement never feels like one long creep. */
.hero__slide.is-active img {
  animation: hero-ken-burns-in 4200ms linear forwards;
}

.hero__slide.is-active:nth-child(even) img {
  animation-name: hero-ken-burns-out;
}

@keyframes hero-ken-burns-in {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(0, -1.4%, 0); }
}

@keyframes hero-ken-burns-out {
  from { transform: scale(1.13) translate3d(0, -1.2%, 0); }
  to   { transform: scale(1.04) translate3d(0, 0.5%, 0); }
}

/* Focal points, measured against the real crop at each shape.

   A wide desktop hero crops these landscape photographs top and bottom, so
   the vertical figure is what matters there. A phone crops them left and
   right instead -- the full height already fits -- so the horizontal figure
   is the one that decides whether the subject survives. */
.hero__slide:nth-child(1) { --focus: 50% 38%; }   /* Sigiriya rock       */
.hero__slide:nth-child(2) { --focus: 50% 48%; }   /* train on the bridge */
.hero__slide:nth-child(3) { --focus: 50% 54%; }   /* beach and palms     */
.hero__slide:nth-child(4) { --focus: 50% 58%; }   /* elephant herd       */
.hero__slide:nth-child(5) { --focus: 50% 36%; }   /* fort lighthouse     */

/* ---------- Background: scrim and opening mist ---------- */

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Narrow screens stack the copy down the middle, where a vertical-only
     scrim is at its lightest -- so they get the strong one. */
  background-image: var(--scrim-hero-vertical-strong);
}

.hero__mist {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse 85% 65% at 50% 42%,
      rgba(255, 252, 240, 0.96) 0%,
      rgba(255, 246, 219, 0.88) 42%,
      rgba(252, 240, 206, 0.66) 72%,
      rgba(249, 251, 231, 0.42) 100%
    ),
    linear-gradient(to bottom, #fff8e1 0%, #f4eed6 100%);
  opacity: 1;
  transition: opacity 1100ms var(--ease-out);
}

.hero.is-revealed .hero__mist { opacity: 0; }

/* ---------- Layout ---------- */

.hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-md);
  width: 100%;
}

/* ---------- The brand mark ---------- */

.hero__brand {
  position: relative;
  /* Its own stacking context, so the halo pseudo-element can sit behind the
     logo without falling through to the scrim underneath. */
  z-index: 0;
  justify-self: center;
  width: fit-content;
  margin-block-end: clamp(var(--space-md), 3vh, var(--space-xl));
  transform:
    translate3d(0, var(--hero-intro-dy), 0)
    scale(var(--hero-intro-scale));
  transition: transform 1100ms var(--ease-out);
}

/* A soft sunlit halo so the deep-green wordmark reads over any slide --
   including the bright beach and the pale fort sky. */
.hero__brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 190%;
  aspect-ratio: 1.45;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-image: radial-gradient(
    closest-side,
    rgba(255, 251, 236, 0.92) 0%,
    rgba(255, 247, 222, 0.82) 36%,
    rgba(255, 243, 206, 0.52) 60%,
    rgba(255, 240, 196, 0.2) 80%,
    rgba(255, 239, 192, 0) 100%
  );
}

.hero__logo {
  display: block;
  width: clamp(8.75rem, 40vw, 11.5rem);
  height: auto;
  aspect-ratio: 771 / 545;
}

/* Absolutely placed so that fading it out after the intro leaves no gap
   under the docked mark -- and so it never adds to the hero's height. */
.hero__tagline {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  margin: 0;
  font-family: var(--font-display);
  /* Thirty-two tracked capitals on one line is wider than a small phone, so
     the size follows the viewport until there is room for the full one. */
  font-size: clamp(0.5625rem, 2.1vw, 0.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: clamp(0.06em, 0.4vw, 0.16em);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  color: var(--color-green-800);
  /* The intro blows the whole brand block up to 1.42, which on a narrow
     phone pushed this line straight off both edges. Undoing that scale here
     keeps the words at their designed size while the mark above them still
     opens large; the origin keeps them pinned under it. */
  transform: scale(calc(1 / var(--hero-intro-scale)));
  transform-origin: center top;
  transition:
    opacity 500ms var(--ease-out),
    transform 1100ms var(--ease-out);
}

.hero__tagline span + span::before {
  content: "\2022";
  margin-inline: 0.75em;
  color: var(--color-accent-text);
}

.hero.is-revealed .hero__tagline { opacity: 0; }

/* ---------- Copy and calls to action ---------- */

.hero__copy {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}

.hero__title {
  /* Short enough to read as one phrase, so it sits smaller than a hero
     headline usually would and still carries the frame -- it shares that
     frame with the brand mark above and three more lines below. */
  font-size: clamp(1.75rem, 2.2vw + 1.2rem, 3rem);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  /* Capitals, so positive tracking rather than the tight figure a
     mixed-case headline wants: at this weight the letters close up on
     each other without it. */
  letter-spacing: 0.015em;
  color: var(--color-white);
  text-shadow: 0 2px 30px rgba(13, 51, 17, 0.4);
  margin-block: var(--space-2xs) 0;
}

.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}

/* The three words that opened the page under the brand mark, settling in
   under the headline. Same bullet separator as .hero__tagline, so the two
   readings of the line are recognisably the same piece of type -- but in
   the accent proper rather than its darker text shade, because here the
   line sits on the photograph instead of on the sunlit halo. */
.hero__eyebrow {
  margin: 0;
  /* Clamped rather than fixed, for the same reason .hero__tagline is: the
     tracking makes this line long for its size, and on a 320px screen a
     fixed 12px breaks it across two lines. Scales back to ~11px there and
     settles at the token value from tablet widths up. */
  font-size: clamp(0.625rem, 1.2vw + 0.44rem, var(--text-xs));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 1px 12px rgba(13, 51, 17, 0.5);
}

.hero__eyebrow span + span::before {
  content: "\2022";
  margin-inline: 0.75em;
  color: var(--color-accent);
}

.hero__lede {
  /* One line of subtitle, not a paragraph: it reads under the headline
     rather than competing with it. */
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  align-items: center;
  width: 100%;
  max-width: 26rem;
}

/* Deliberately smaller than the site's large button: the hero pair is a
   way in, not the loudest thing on the screen. min-height keeps the tap
   target honest once the padding comes down. */
.hero__actions .btn {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  min-height: 44px;
}

/* "Chat with us on " -- dropped on phones, where the two buttons share
   one line and the icon plus the service name is the whole invitation
   there is room for. */
.hero__long { display: inline; }

/* Always on its own line, under whichever way the buttons have arranged
   themselves. */
.hero__note {
  /* width, not a 100% flex-basis: the row layouts and the column layouts
     share this rule, and in a column a percentage basis is a *height* --
     which pushed the line into a second column, off the side of the hero. */
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Stage 2: the staggered reveal ---------- */

.hero__copy > *,
.hero__actions {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition:
    opacity 650ms var(--ease-out),
    transform 650ms var(--ease-out);
}

.hero.is-revealed .hero__copy > *,
.hero.is-revealed .hero__actions {
  opacity: 1;
  /* none, not translate3d(0,0,0): the buttons inside hero__actions keep
     their own hover lift, and a composited layer here would trap it. */
  transform: none;
}

.hero.is-revealed .hero__copy > :nth-child(1) { transition-delay: 120ms; }
.hero.is-revealed .hero__copy > :nth-child(2) { transition-delay: 230ms; }
.hero.is-revealed .hero__copy > :nth-child(3) { transition-delay: 340ms; }
.hero.is-revealed .hero__actions              { transition-delay: 460ms; }

/* ---------- Slide progress dots ---------- */

.hero__dots {
  position: absolute;
  inset-inline: 0;
  inset-block-end: clamp(var(--space-xs), 2vh, var(--space-lg));
  z-index: 1;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.hero.is-playing .hero__dots { opacity: 1; }

.hero__dot {
  /* A 44px box around a 3px bar: the bar is the whole point visually, but
     a thumb needs something it can actually hit. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero__dot::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.4);
  transition:
    background-color var(--duration-base) var(--ease-out),
    width var(--duration-base) var(--ease-out);
}

.hero__dot:hover::before { background-color: rgba(255, 255, 255, 0.7); }

.hero__dot[aria-pressed="true"]::before {
  width: 42px;
  background-color: var(--color-accent);
}

/* ---------- Tablet ---------- */

@media (min-width: 768px) {
  .hero {
    padding-block:
      calc(var(--header-height) + var(--space-xl))
      calc(var(--space-4xl) + var(--space-md));
  }

  .hero__inner { gap: var(--space-lg); }
  .hero__copy  { gap: var(--space-md); }
  .hero__logo  { width: clamp(11.5rem, 22vw, 14rem); }
  .hero__lede  { font-size: var(--text-base); max-width: 42rem; }

  /* Side by side now that there is room, with the reassurance underneath. */
  .hero__actions {
    flex-wrap: wrap;
    max-width: none;
    gap: var(--space-md);
  }
}

/* ---------- Desktop ---------- */

@media (min-width: 1025px) {
  /* One centred column all the way down -- mark, headline, tagline,
     subtitle, buttons. The side scrim that used to sit under left-aligned
     copy is gone with it: the base rule's strong vertical scrim was
     written for copy stacked down the middle, which is now every width. */
  .hero__logo { width: clamp(13.5rem, 17vw, 16.5rem); }

  /* Never breaks on a desktop viewport. At the top of the clamp the line
     measures about 795px, well inside the 1240px container. */
  .hero__title {
    font-size: clamp(2.75rem, 1.4vw + 1.6rem, 3.25rem);
    white-space: nowrap;
  }

  .hero__actions { gap: var(--space-md); }
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
  .hero {
    /* Fit the screen rather than overrun it: one viewport less the header
       it sits under. svh is the collapsed-toolbar height, so the fold
       lands where the phone actually puts it. */
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    padding-block:
      calc(var(--header-height) + var(--space-sm))
      calc(var(--space-xl) + var(--space-xs));
  }

  .hero__inner { gap: var(--space-sm); }

  /* Side by side on one line, each taking half of it. Two short buttons
     read as a choice; the same two stacked full-width read as a wall,
     and cost the photograph a third of the frame. */
  .hero__actions {
    /* Still wrap, so the reassurance line below can take one of its own:
       it is the only item here wide enough to need it. */
    flex-wrap: wrap;
    width: 100%;
    gap: var(--space-xs);
  }

  /* flex-basis 0, so the pair divides the line evenly whatever the two
     labels measure; min-width 0 because a flex item will not shrink
     below its content without it. The height is held at 44px rather
     than let out by the padding -- that is the smallest target a thumb
     finds reliably. */
  .hero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    min-height: 44px;
    white-space: nowrap;
  }

  .hero__long { display: none; }

  /* Phones are served vertical frames of these places, cropped from the
     portrait originals, so there is almost nothing left for object-fit to
     throw away -- four of the five are 1:2 against a hero box of roughly
     1:2. The figures below are therefore gentle: they nudge the subject
     within a frame that already fits, rather than rescuing it from a
     landscape crop. Slide 3 is the exception and still loses width. */
  .hero__slide:nth-child(1) { --focus: 50% 60%; }  /* rock, not empty sky  */
  .hero__slide:nth-child(2) { --focus: 50% 50%; }  /* bridge mid-span      */
  .hero__slide:nth-child(3) { --focus: 50% 50%; }  /* palms centred in crop */
  .hero__slide:nth-child(4) { --focus: 50% 55%; }  /* herd, not treetops   */
  .hero__slide:nth-child(5) { --focus: 50% 40%; }  /* lighthouse upper third */
}

/* ---------- Reduce motion ----------

   The whole point of the section is movement, so there is nothing to
   soften: the hero simply opens on its finished frame. main.js skips the
   stage timers and the slide timer to match, leaving the dots as the only
   way to change the picture. */

@media (prefers-reduced-motion: reduce) {
  .hero__brand,
  .hero__mist,
  .hero__slide,
  .hero__tagline,
  .hero__dots,
  .hero__copy > *,
  .hero__actions {
    transition: none;
  }

  .hero__slide img,
  .hero__slide.is-active img {
    animation: none;
    transform: scale(1.02);
  }
}

/* =====================================================================
   1b. SCROLLYTELLING REGION MAP
   Light tropical band: white surface, soft green/yellow wash, and a
   sticky illustrated island. Green and yellow are used for type,
   markers and UI only -- never as a full-bleed background.
   ===================================================================== */

.regions {
  position: relative;
  padding-top: var(--section-y);
  background-color: var(--color-surface);
  color: var(--color-text);
  overflow-x: clip;
  isolation: isolate;
}

.regions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 10% 4%, rgba(197, 225, 165, 0.42), transparent 62%),
    radial-gradient(46rem 34rem at 94% 62%, rgba(255, 224, 130, 0.34), transparent 60%),
    linear-gradient(to bottom, var(--color-canvas) 0%, var(--color-surface) 32%);
}

/* ---------- Intro: centred, full container width ---------- */

.regions__intro {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
}

.regions__intro h2 {
  margin: 0;
  max-width: 18ch;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-green-800);
}

.regions__intro .lede {
  margin: 0;
  max-width: 60ch;
  color: var(--color-text-muted);
}

/* ---------- Stage: sticky map beside the scrolling cards ---------- */

.regions__stage {
  position: relative;
  margin-top: var(--space-3xl);
}

.regions__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.regions__map-col {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
  align-self: start;
}

.regions__map-wrap {
  position: relative;
  margin: 0;
  padding: clamp(0.75rem, 1.8vw, 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 100% at 28% 0%, var(--map-sea) 0%, var(--map-sea-deep) 100%);
  box-shadow: var(--shadow-md);
}

/* Thin inner rule, the way a printed tourist map is framed. */
.regions__map-wrap::before {
  content: "";
  position: absolute;
  inset: clamp(0.4rem, 0.9vw, 0.75rem);
  border: 1px solid rgba(27, 94, 32, 0.12);
  border-radius: calc(var(--radius-xl) - 10px);
  pointer-events: none;
}

/* Sized by the island aspect so the whole outline always fits, never crops. */
.ceylon-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 372 / 594;
  max-height: min(66svh, 560px);
  margin-inline: auto;
  overflow: hidden;
}

.regions__map-caption {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  gap: 2px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
}

.regions__map-caption-kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-subtle);
}

.regions__map-caption strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-primary);
}

/* ---------- The island itself ---------- */
/* SVG gradient stops cannot read custom properties from a presentation
   attribute, so every stop carries a class and is coloured here. */

.ceylon-map__stop-a      { stop-color: var(--map-land-top); }
.ceylon-map__stop-b      { stop-color: var(--map-land-bottom); }
.ceylon-map__stop-zone-a { stop-color: var(--map-zone-core); }
.ceylon-map__stop-zone-b { stop-color: var(--map-zone-edge); }

.ceylon-map__land {
  fill: url(#mapLand);
  stroke: var(--map-coast);
  stroke-width: 1.4;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.ceylon-map__hills {
  fill: var(--map-hill);
  opacity: 0.5;
}

.ceylon-map__zone {
  fill: url(#mapZone);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.ceylon-map__zone.is-active { opacity: 1; }

.ceylon-map__route {
  fill: none;
  stroke: var(--map-route);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 4.5;
  opacity: 0.4;
}

/* ---------- Sea decoration ---------- */

.ceylon-map__wave path {
  fill: none;
  stroke: var(--map-wave);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.ceylon-map__compass-ring {
  fill: var(--color-white);
  stroke: var(--map-wave);
  stroke-width: 1.2;
}

.ceylon-map__compass-needle {
  fill: var(--color-white);
  stroke: var(--map-coast);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.ceylon-map__compass-half { fill: var(--color-accent); }

.ceylon-map__compass-n {
  font-family: var(--font-display);
  font-size: 7px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-anchor: middle;
  fill: var(--color-text-subtle);
}

/* ---------- Towns ---------- */

.ceylon-map__city circle {
  fill: var(--map-city);
  opacity: 0.4;
  transition:
    fill var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.ceylon-map__city text {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.015em;
  fill: var(--color-green-800);
  paint-order: stroke;
  stroke: var(--color-white);
  stroke-width: 3.2px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.ceylon-map__city.is-active circle {
  fill: var(--color-green-700);
  opacity: 1;
}

.ceylon-map__city.is-active text { opacity: 1; }

/* ---------- Markers: idle dot, then a pop on the active region ---------- */
/* The pin path is drawn tip-down at 0,0 and the pop is anchored there, so
   the marker grows out of the exact spot it points at. */

.ceylon-map__pin-inner {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    transform var(--duration-slow) var(--ease-spring),
    opacity var(--duration-base) var(--ease-out);
}

.ceylon-map.is-live .ceylon-map__pin-inner {
  transform: scale(0.34);
  opacity: 0.55;
}

.ceylon-map.is-live .ceylon-map__pin.is-active .ceylon-map__pin-inner {
  transform: scale(1);
  opacity: 1;
}

.ceylon-map__pin-body {
  fill: var(--map-pin-idle);
  stroke: var(--color-white);
  stroke-width: 1.2;
  transition: fill var(--duration-base) var(--ease-out);
}

.ceylon-map__pin-core {
  fill: var(--color-white);
  transition: fill var(--duration-base) var(--ease-out);
}

.ceylon-map__pin.is-active .ceylon-map__pin-body {
  fill: var(--map-pin);
  stroke: var(--map-pin-ring);
  stroke-width: 1.4;
}

.ceylon-map__pin.is-active .ceylon-map__pin-core { fill: var(--map-pin-ring); }

.ceylon-map__pin-pulse {
  fill: none;
  stroke: var(--map-pin);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.ceylon-map__pin.is-active .ceylon-map__pin-pulse {
  animation: mapPulse 2.6s var(--ease-out) infinite;
}

@keyframes mapPulse {
  0%   { transform: scale(0.45); opacity: 0.65; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

/* ---------- The six region cards ---------- */

.regions__steps {
  position: relative;
  z-index: var(--z-base);
}

.region-step {
  display: flex;
  align-items: center;
  min-height: 76svh;
  padding-block: var(--space-lg);
}

.region-step:last-child { padding-bottom: var(--space-3xl); }

.region-step__card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}

.regions.is-live .region-step__card {
  opacity: 0.32;
  transform: translateX(44px) scale(0.975);
}

.regions.is-live .region-step.is-active .region-step__card {
  opacity: 1;
  transform: none;
  border-color: rgba(255, 193, 7, 0.6);
  box-shadow: var(--shadow-lg);
}

.region-step__thumb {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background-color: var(--color-surface-muted);
}

.region-step__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform var(--duration-slower) var(--ease-out);
}

.region-step.is-active .region-step__thumb img { transform: scale(1); }

.region-step__index {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: var(--color-green-900);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  box-shadow: var(--shadow-sm);
}

.region-step__index span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  opacity: 0.72;
}

.region-step__text {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.region-step__title {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-green-800);
}

.region-step__body {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.region-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
}

.region-step__tags li {
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-green-100);
  border-radius: var(--radius-pill);
  background-color: var(--color-green-50);
  color: var(--color-green-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Horizontal progress timeline, pinned to the viewport ---------- */

.regions__timeline {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  padding-top: var(--space-xl);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 42%,
    var(--color-surface) 70%
  );
  pointer-events: none;
}

.regions.is-live .regions__timeline { display: block; }

.regions__timeline-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
  pointer-events: auto;
}

.regions__timeline-count {
  margin: 0;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
}

.regions__timeline-count strong {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
}

.regions__timeline-stops {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.regions__timeline-stops li {
  flex: 1 1 0;
  min-width: 0;
}

.regions__timeline-stop {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-2xs) 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.regions__timeline-stop i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-ink-200);
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.regions__timeline-stop span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.regions__timeline-stop:hover { color: var(--color-primary); }
.regions__timeline-stop:hover i { background-color: var(--color-green-400); }

.regions__timeline-stop.is-done i { background-color: var(--color-green-400); }

.regions__timeline-stop.is-active {
  color: var(--color-green-800);
  font-weight: var(--weight-bold);
}

.regions__timeline-stop.is-active i {
  background-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.28);
}

.regions__timeline-rail {
  position: relative;
  height: 3px;
  background-color: var(--color-ink-100);
}

.regions__timeline-rail i {
  position: absolute;
  inset: 0 0 0 0;
  transform: scaleX(var(--region-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: transform 120ms linear;
}

/* ---------- Outro ---------- */

.regions__outro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl);
  padding-bottom: var(--section-y);
  text-align: center;
}

.regions__outro p {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-green-800);
}

/* ---------- Tablet and below: solid map panel on top, cards scroll beneath ---------- */

@media (max-width: 960px) {
  .regions__layout { display: block; }

  /* Pinned under the fixed header, fully opaque: nothing scrolls across it. */
  .regions__map-col {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-raised);
    height: 44svh;
    min-height: 15rem;
    margin-inline: calc(var(--gutter) * -1);
    margin-bottom: var(--space-lg);
  }

  .regions__map-wrap {
    display: block;
    height: 100%;
    padding: var(--space-sm) var(--gutter);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    background:
      radial-gradient(120% 90% at 50% 12%, var(--map-sea) 0%, var(--map-sea-deep) 100%);
  }

  .regions__map-wrap::before { display: none; }

  /* No dimming veil any more; the panel is solid and the cards sit below it. */
  .regions__map-wrap::after { content: none; }

  .ceylon-map {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
  }

  /* Blur filters are expensive to repaint while scrolling a phone. */
  .ceylon-map__zone { filter: none; }

  .regions__map-caption { display: none; }

  .regions__steps {
    position: relative;
    z-index: var(--z-base);
  }

  .region-step {
    display: block;
    min-height: 0;
    padding-block: var(--space-md);
  }

  .region-step:first-child { padding-top: 0; }
  .region-step:last-child { padding-bottom: var(--space-3xl); }

  .regions.is-live .region-step__card {
    transform: translateY(28px) scale(0.985);
    opacity: 0.52;
  }

  .region-step__card { box-shadow: var(--shadow-md); }
}

/* Tablets have the width to spare, so the island can sit larger. */
@media (min-width: 601px) and (max-width: 960px) {
  .regions__map-col { height: 56svh; }
}

@media (max-width: 760px) {
  .regions__intro h2 { max-width: 100%; }

  .regions__timeline-inner {
    gap: var(--space-md);
    padding-block: var(--space-xs);
    /* Clear the floating WhatsApp button in the bottom-right corner. */
    padding-inline-end: 4.75rem;
  }

  .regions__timeline-stops {
    flex: 0 0 auto;
    gap: var(--space-sm);
    margin-inline-start: auto;
  }

  .regions__timeline-stops li { flex: none; }

  .regions__timeline-stop span { display: none; }

  .regions__timeline-stop {
    padding: var(--space-xs) var(--space-2xs);
  }
}

@media (max-width: 560px) {
  .region-step__text { padding: var(--space-lg); }
  .region-step__title { font-size: var(--text-2xl); }
  .region-step__thumb { aspect-ratio: 16 / 9; }
  .regions__outro p { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .regions.is-live .region-step__card {
    opacity: 1;
    transform: none;
  }

  .ceylon-map.is-live .ceylon-map__pin-inner {
    transform: scale(0.34);
  }

  .ceylon-map__pin.is-active .ceylon-map__pin-pulse { animation: none; }

  .region-step__thumb img { transform: none; }
}

/* =====================================================================
   2. THE LOGISTICS PROBLEM
   ===================================================================== */

.problem { background-color: var(--color-canvas); }

.problem__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-4xl);
  align-items: center;
}

.problem__copy { display: grid; gap: var(--space-lg); }

/* The customer's own words, set as a pull quote */
.problem__quote {
  position: relative;
  margin: 0;
  padding: var(--space-xl) 0 var(--space-xl) var(--space-xl);
  border-left: 4px solid var(--color-accent);
}

.problem__quote p {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink-900);
}

.problem__quote footer {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
}

/* Media side — two overlapping frames */
.problem__media {
  position: relative;
  aspect-ratio: 4 / 5;
}

.problem__media-main {
  position: absolute;
  inset: 0 0 12% 14%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.problem__media-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Small overlapping card with the headline benefit */
.problem__media-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(62%, 268px);
  padding: var(--space-lg);
  background-color: var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.problem__media-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  color: var(--color-ink-900);
}

.problem__media-badge span {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-green-900);
}

@media (max-width: 940px) {
  .problem__top { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .problem__media { aspect-ratio: 16 / 11; max-width: 560px; }
}

@media (max-width: 560px) {
  .problem__quote { padding-left: var(--space-lg); }
  .problem__quote p { font-size: var(--text-xl); }
  .problem__media-badge { position: static; width: 100%; margin-top: var(--space-md); }
  .problem__media { aspect-ratio: auto; }
  .problem__media-main { position: relative; inset: auto; aspect-ratio: 4 / 3; }
}

/* =====================================================================
   3. TOUR PACKAGES
   ===================================================================== */

.packages {
  position: relative;
  background-color: var(--color-canvas-sunk);
  overflow: hidden;
}

.packages__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--space-2xl);
  align-items: end;
  margin-bottom: var(--space-3xl);
}

.packages__head > div:first-child { display: grid; gap: var(--space-lg); }

/* Hero offer — the tailor-made panel, deliberately oversized */
.packages__feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-green-900);
  box-shadow: var(--shadow-xl);
}

.packages__feature-body {
  display: grid;
  gap: var(--space-lg);
  align-content: center;
  padding: clamp(var(--space-xl), 4vw, var(--space-4xl));
  color: var(--color-text-on-dark);
}

.packages__feature-body h3 {
  font-size: var(--text-3xl);
  color: var(--color-white);
}

.packages__feature-list {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.packages__feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
}

.packages__feature-list svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  fill: var(--color-accent);
}

.packages__feature-media { position: relative; min-height: 320px; }

.packages__feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 940px) {
  .packages__head { grid-template-columns: 1fr; align-items: start; }
  .packages__feature { grid-template-columns: 1fr; }
  .packages__feature-media { min-height: 260px; order: -1; }
}

/* =====================================================================
   4. DESTINATION SLIDER
   ===================================================================== */

.destinations { background-color: var(--color-canvas); overflow: hidden; }

.destinations__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.destinations__head > div { display: grid; gap: var(--space-lg); max-width: 44rem; }

.slider-controls { display: flex; gap: var(--space-xs); }

.slider-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  transition: all var(--duration-base) var(--ease-out);
}

.slider-btn svg { width: 22px; height: 22px; fill: currentColor; }

.slider-btn:hover:not(:disabled) {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.slider-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Full-bleed track so cards run off the edge of the viewport */
.slider {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--container-max) / 2));
}

.slider__track {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-sm) var(--space-xl);
  /* Hide the native scrollbar — custom progress bar below replaces it */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.slider__track.is-dragging .dest-card { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .slider__track { scroll-behavior: auto; }
}

.dest-card {
  position: relative;
  flex: 0 0 clamp(248px, 25vw, 330px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background-color: var(--color-green-900);
  box-shadow: var(--shadow-md);
  isolation: isolate;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.dest-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-xl); }

.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--duration-slower) var(--ease-out);
}

.dest-card:hover img { transform: scale(1.07); }

.dest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-card);
  z-index: -1;
}

.dest-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-2xs);
}

.dest-card__region {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.dest-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--leading-snug);
}

.dest-card__note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--leading-normal);
  /* Revealed on hover to keep the resting card clean */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out),
              opacity var(--duration-base) var(--ease-out),
              margin-top var(--duration-slow) var(--ease-out);
}

.dest-card:hover .dest-card__note,
.dest-card:focus-within .dest-card__note {
  max-height: 6rem;
  opacity: 1;
  margin-top: var(--space-2xs);
}

.dest-card__index {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  color: var(--color-white);
  background-color: rgba(13, 51, 17, 0.55);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

/* Progress bar */
.slider__progress {
  position: relative;
  height: 4px;
  max-width: var(--container-max);
  margin: var(--space-md) auto 0;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.slider__progress-bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 20%;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) linear;
}

.destinations__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-2xl);
}

.destinations__hint {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

@media (max-width: 640px) {
  .slider-controls { display: none; }
}

/* =====================================================================
   5. TESTIMONIALS
   ===================================================================== */

.testimonials {
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--color-green-900);
  color: var(--color-text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.testimonials__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.testimonials__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 51, 17, 0.9) 0%,
    rgba(13, 51, 17, 0.82) 50%,
    rgba(13, 51, 17, 0.94) 100%
  );
}

.testimonials__head {
  display: grid;
  gap: var(--space-lg);
  max-width: 42rem;
  margin-bottom: var(--space-3xl);
}

.testimonials__head h2 { color: var(--color-white); }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.quote-card {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-2xl);
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--color-border-on-dark);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.quote-card:hover {
  background-color: rgba(255, 255, 255, 0.11);
  transform: translateY(-5px);
}

/* Stagger the middle card upward */
.quote-card:nth-child(2) { transform: translateY(calc(var(--space-xl) * -1)); }
.quote-card:nth-child(2):hover { transform: translateY(calc(var(--space-xl) * -1 - 5px)); }

.quote-card__mark {
  width: 38px;
  height: 38px;
  fill: var(--color-accent);
  opacity: 0.85;
}

.quote-card blockquote {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-white);
}

.quote-card figcaption {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-green-200);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-on-dark);
}

@media (max-width: 940px) {
  .testimonials__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .quote-card:nth-child(2) { transform: none; }
  .quote-card:nth-child(2):hover { transform: translateY(-5px); }
}

/* =====================================================================
   6. CONSULTATION REQUEST
   ===================================================================== */

.consult {
  position: relative;
  background-color: var(--color-canvas);
  padding-block: var(--section-y);
}

.consult__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-4xl);
  align-items: start;
}

.consult__copy { display: grid; gap: var(--space-lg); }

.consult__steps {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  counter-reset: step;
}

.consult__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  counter-increment: step;
}

.consult__steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.consult__steps strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-ink-900);
}

.consult__steps span {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* WhatsApp direct panel */
.consult__direct {
  margin-top: var(--space-lg);
  padding: var(--space-xl);
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  display: grid;
  gap: var(--space-md);
}

.consult__direct p {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-green-100);
}

.consult__direct strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--color-accent);
}

/* The form card */
.consult__form-card {
  padding: clamp(var(--space-xl), 3vw, var(--space-3xl));
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-lg);
}

.consult__form-head { display: grid; gap: var(--space-xs); }

.consult__form-head h3 { font-size: var(--text-xl); }

.consult__form-head p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.form-grid .field--full { grid-column: 1 / -1; }

.consult__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-normal);
}

.consult__consent input {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--color-primary);
}

.form-status {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-green-800);
}

.form-status[hidden] { display: none; }

@media (max-width: 1024px) {
  .consult__layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   7. FOOTER
   ===================================================================== */

.footer {
  background-color: var(--color-green-900);
  color: var(--color-text-on-dark-muted);
  padding-block: var(--section-y-tight) var(--space-xl);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border-on-dark);
}

.footer__brand { display: grid; gap: var(--space-md); align-content: start; }

.footer__blurb {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  max-width: 34ch;
}

.footer__col { display: grid; gap: var(--space-sm); align-content: start; }

.footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}

.footer__list {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
}

.footer__list a {
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__list a:hover { color: var(--color-accent); }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.footer__contact-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  fill: var(--color-accent);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  font-size: var(--text-xs);
}

.footer__bottom p { color: var(--color-ink-400); }

@media (max-width: 940px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* =====================================================================
   ADDITIONS
   ===================================================================== */

/* --- 3b. Ready-made regional themes (strip under the feature panel) --- */

.packages__themes-head {
  margin: var(--space-4xl) 0 var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.packages__themes-head h3 { font-size: var(--text-2xl); }

.packages__themes-head p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.packages__themes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.theme-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-green-900);
  isolation: isolate;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

/* Lift every other card so the strip is not a flat row of four */
.theme-card:nth-child(odd) { margin-top: var(--space-xl); }

.theme-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.theme-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--duration-slower) var(--ease-out);
}

.theme-card:hover img { transform: scale(1.07); }

.theme-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-card);
  z-index: -1;
}

.theme-card__name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

@media (max-width: 860px) {
  .packages__themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-card:nth-child(odd) { margin-top: 0; }
  .theme-card:nth-child(even) { margin-top: var(--space-lg); }
}

@media (max-width: 440px) {
  .packages__themes { grid-template-columns: 1fr; }
  .theme-card { aspect-ratio: 16 / 9; }
  .theme-card:nth-child(even) { margin-top: 0; }
}

/* --- 5b. "The trip we're proudest of" panel --- */

.proof-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-3xl);
  align-items: center;
  margin-top: var(--space-4xl);
  padding: clamp(var(--space-xl), 3vw, var(--space-3xl));
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-on-dark);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

.proof-panel__head { display: grid; gap: var(--space-sm); }

.proof-panel__head h3 {
  font-size: var(--text-2xl);
  color: var(--color-white);
}

.proof-panel__head p {
  font-size: var(--text-sm);
  color: var(--color-green-200);
}

.proof-panel__body {
  display: grid;
  gap: var(--space-md);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-relaxed);
}

.proof-panel__body strong { color: var(--color-white); }

@media (max-width: 860px) {
  .proof-panel { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* Actions inside the dark tailor-made feature panel */
.packages__feature-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

/* Form status: green by default, amber when something is missing */
.form-status.is-error {
  background-color: var(--color-accent-soft);
  color: var(--color-yellow-700);
}

/* =====================================================================
   SECTION HEADS, CENTRED ON A PHONE

   A one-column phone layout leaves an eyebrow, a heading and a lede
   sitting straight on the page background with nothing to line up
   against, so a left edge reads as a column that has drifted off to one
   side. Centring gives the stack its own axis -- the same treatment the
   region map intro already gets.

   Only copy out in the open is listed. Anything inside a card, a form,
   a panel or a quote rule keeps its left edge, because there the edge is
   what the text is aligned to.
   ===================================================================== */

@media (max-width: 767px) {
  .problem__copy,
  .packages__head,
  .packages__head > div,
  .packages__themes-head,
  .destinations__head,
  .destinations__head > div,
  .destinations__foot,
  .testimonials__head,
  .consult__copy {
    text-align: center;
    /* The eyebrow is an inline-flex pill and the lede carries its own
       measure, so the boxes need centring as well as the lines inside
       them -- justify-items for the grids, justify-content for the
       flex rows that wrap to one item a line down here. */
    justify-items: center;
    justify-content: center;
  }

  /* The pull quote hangs off an accent rule, and a rule only works on a
     left edge. */
  .problem__quote {
    justify-self: stretch;
    text-align: left;
  }

  /* Numbered steps and the contact lines under them read as a list, not
     as part of the heading block, so they keep their left edge too. */
  .consult__steps,
  .consult__direct {
    justify-self: stretch;
    text-align: left;
  }
}