/* =====================================================================
   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
   ===================================================================== */

.hero {
  position: relative;
  /* Half the viewport on phones and tablets; a taller fixed band from
     desktop up (see the 1025px block below). min-height, not height, so a
     very small phone can still grow a little rather than clip the copy. */
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-height) + var(--space-md)) var(--space-lg);
  overflow: hidden;
  background-color: var(--color-green-900);
  isolation: isolate;
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* A slow drift keeps the opening frame alive without distracting */
  animation: hero-drift 26s var(--ease-in-out) infinite alternate;
}

@keyframes hero-drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: scale(1.03); }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--scrim-hero-side), var(--scrim-hero-vertical);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  max-width: 46rem;
}

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

/* Only earns its place in the desktop two-column layout, where the button
   column would otherwise look light against the headline. */
.hero__note {
  display: none;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

.hero__title {
  /* Tighter than the global h1 so the copy fits a half-height band */
  font-size: clamp(1.75rem, 2.6vw + 1.15rem, 3.5rem);
  line-height: var(--leading-tight);
  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);
}

.hero__lede {
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  padding-top: var(--space-2xs);
}

@media (min-width: 861px) {
  /* Wide enough to keep the headline on two lines, which is what holds the
     hero to half the viewport on a tablet-landscape screen. */
  .hero__inner { gap: var(--space-md); max-width: 58rem; }
  .hero__copy  { gap: var(--space-md); }
  .hero__lede  { font-size: var(--text-lg); max-width: 46rem; }
}

@media (min-width: 1025px) {
  /* Desktop: a taller, fixed-height band. The copy takes the left column and
     the two calls to action get a column of their own on the right, both
     optically centred on the same line. */
  .hero { min-height: var(--hero-min-height-desktop); }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3xl);
    /* Back to the page container width, so the copy lines up with the logo
       and the sections below, and the buttons with the container edge. */
    max-width: var(--container-max);
  }

  .hero__copy { max-width: 40rem; }

  .hero__title { font-size: clamp(2.5rem, 2.2vw + 1.3rem, 3.375rem); }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    justify-self: end;
    width: 20rem;
    gap: var(--space-md);
    padding-top: 0;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    /* The column is narrower than a full-width button, so trim the side
       padding to keep "Chat with us on WhatsApp" on one line. */
    padding-inline: var(--space-lg);
  }
  .hero__note { display: block; }
}

@media (max-width: 560px) {
  .hero { padding-block: calc(var(--header-height) + var(--space-sm)) var(--space-md); }
  .hero__inner { gap: var(--space-xs); }
  .hero__lede { font-size: var(--text-sm); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .hero__actions .btn { justify-content: center; }
  /* Keep the half-height band: the pill repeats the headline almost word for
     word on a narrow screen, and the large buttons are taller than they need
     to be once they go full width. */
  .hero .pill { display: none; }
  .hero__actions .btn--lg { padding: var(--space-sm) var(--space-lg); font-size: var(--text-base); }
}

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