/* ============================================================
   country-page.css
   ------------------------------------------------------------
   Theme-level stylesheet for the 12 country destination pages.
   Sourced from the inline <style> block on the Tanzania page,
   which is the canonical reference (latest fixes, including
   PRICING CHARCOAL CARDS — 2026-06-04 and MOOD REVEAL JS MOBILE).

   This file is loaded by page-destination.hbs and applies only
   to body.page-template-page-destination — see selector scoping
   inside the file (most rules are scoped to .country-page).
   ------------------------------------------------------------
   Migrated from inline <style> on 2026-06-04 (Tanzania snapshot).
   ============================================================ */


  /* ============ MARULA HILL BRAND TOKENS ============ */
  :root {
    --charcoal: #36454F;
    --amber:    #C8873A;
    --cream:    #F3F2EE;
    --cream-2:  #EBE9E1;
    --stone:    #d9d6cc;
    --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
    --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;
    --max: 1180px;
    --gutter: clamp(20px, 4vw, 56px);
  }

  /* Reset + base */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--sans);
    background: var(--cream);
    color: var(--charcoal);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img { max-width: 100%; height: auto; display: block; }

  h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
  }
  p { margin: 0 0 1em; }
  em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--amber);
    font-weight: 400;
  }
  .eyebrow {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 18px;
  }

  /* ============ HERO ============ */
  .country-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--charcoal);
  }
  /* Parallax wrapper: JS writes --country-scroll (unitless px) onto
     .country-hero. The wrapper holds the vertical translate, the inner
     <img> holds scale + blur. Two transforms cleanly separated. */
  .country-hero__media {
    position: absolute; inset: 0;
    will-change: transform;
    transform: translate3d(0, calc(var(--country-scroll, 0) * 0.40 * 1px), 0);
  }
  .country-hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    /* Scroll-tied zoom-out + late blur. Image starts at scale 1.14 and
       eases to 1.0 over the first ~700px of scroll, then softens in the
       last 28% of the hero so it hands off cleanly to the section below. */
    will-change: transform, filter;
    transform-origin: 50% 55%;
    transform: scale(var(--country-zoom, 1.14));
    filter: blur(calc(var(--country-blur, 0) * 1px));
  }
  @media (prefers-reduced-motion: reduce) {
    .country-hero__media { transform: none; }
    .country-hero__media img { transform: none; filter: none; }
  }
  @media (max-width: 900px) {
    /* Lighter parallax on mobile so the portrait crop doesn't reveal
       the page background as the user scrolls. */
    .country-hero__media {
      transform: translate3d(0, calc(var(--country-scroll, 0) * 0.22 * 1px), 0);
    }
  }
  .country-hero__veil {
    position: absolute; inset: 0;
    /* Base veil + a scroll-tied deepening: as the user scrolls past 55%
       of the hero, the bottom band darkens by an extra ~22% of its base.
       --country-veil is written by JS, ranges 0..1. */
    background:
      linear-gradient(to top, rgba(20,28,32, calc(0.92 + var(--country-veil, 0) * 0.06)) 0%, rgba(20,28,32,0.78) 25%, rgba(20,28,32,0.4) 55%, rgba(20,28,32,0.12) 80%, transparent 100%),
      linear-gradient(to right, rgba(20,28,32,0.35) 0%, rgba(20,28,32,0.15) 35%, transparent 60%);
    transition: background 0.05s linear;
  }
  /* Mobile veil — matches the homepage hero recipe and ties into the
     scroll-driven deepening. Top stays clear so the leopard's face + canopy
     read clean. From ~40% down, the veil deepens into a pool that the
     eyebrow, title, lead, and CTA all sit on. As the user scrolls past 55%
     of the hero, the bottom of that pool darkens further. */
  @media (max-width: 900px) {
    .country-hero__veil {
      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,0) 38%,
          rgba(0,0,0,0.35) 55%,
          rgba(0,0,0, calc(0.65 + var(--country-veil, 0) * 0.15)) 78%,
          rgba(0,0,0, calc(0.85 + var(--country-veil, 0) * 0.10)) 100%
        );
    }
  }
  .country-hero__content {
    position: relative;
    z-index: 2;
    color: var(--cream);
    padding: 0 var(--gutter) clamp(36px, 4.5vw, 64px);
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    text-align: left !important;
  }
  /* Stronger text shadow on the title to keep it readable when it crosses busy areas */
  .country-hero__title {
    text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  }
  .country-hero__eyebrow {
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  }
  .country-hero__lead {
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  }
  .country-hero__content .country-hero__eyebrow,
  .country-hero__content .country-hero__title,
  .country-hero__content .country-hero__lead,
  .country-hero__content .country-hero__cta {
    text-align: left !important;
  }
  .country-hero__content .country-hero__cta {
    align-items: flex-start !important;
    gap: 28px !important;
  }
  .country-hero__content .hero-secondary {
    margin-left: 32px;
  }
  .country-hero__eyebrow {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin: 0 0 22px;
    color: rgba(243, 242, 238, 0.85);
  }
  .country-hero__title {
    font-size: clamp(40px, 6.2vw, 84px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    margin: 0 0 22px;
    max-width: 1000px;
    font-weight: 400;
  }
  .country-hero__title em { color: var(--amber); }
  .country-hero__lead {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.55;
    max-width: 620px;
    margin: 0 0 38px;
    color: rgba(243, 242, 238, 0.92);
    font-family: var(--sans);
    font-weight: 300;
  }

  /* HERO CTA — NEW PER v1.2.1 §6.1 */
  .country-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .pill {
    display: inline-block;
    background: var(--amber);
    color: var(--cream);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 16px 32px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid var(--amber);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .pill:hover { background: transparent; color: var(--amber); }
  .pill--on-charcoal {
    background: rgba(54, 69, 79, 0.92);
    color: var(--cream);
    border-color: rgba(243, 242, 238, 0.35);
  }
  .pill--on-charcoal:hover { background: var(--amber); color: var(--cream); border-color: var(--amber); }
  .hero-secondary {
    color: var(--cream);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  /* ============ DEFINITION (country-level) ============ */
  .country-definition {
    background: var(--cream);
    padding: clamp(56px, 7vw, 96px) var(--gutter);
  }
  .country-definition__inner {
    max-width: 1080px;
    margin: 0 auto;
    text-align: left;
  }
  .country-definition__q {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.3;
    margin: 0 0 20px;
    color: var(--charcoal);
    max-width: 900px;
  }
  .country-definition__a {
    font-size: 17.5px;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0;
    max-width: none;
  }

  /* ============ SCROLL MOTION SYSTEM ============ */
  html { scroll-behavior: smooth; }

  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Side reveals — left and right halves of split blocks */
  .reveal-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 1.0s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.0s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal-right {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 1.0s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.0s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal-left.is-visible,
  .reveal-right.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Staggered reveal on grid children */
  [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  [data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: none;
  }
  [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
  [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 90ms; }
  [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 180ms; }
  [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 270ms; }
  [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 360ms; }
  [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 450ms; }


  /* ============ PER-CARD HIGHLIGHT REVEAL ============ */
  /* Each .country-highlight reveals as it enters its own viewport line. */
  .country-highlight {
    position: relative;
  }
  .country-highlight__media img {
    transform: scale(1.16);
    opacity: 0;
    transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .country-highlight__num,
  .country-highlight__name,
  .country-highlight__copy {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
  }
  .country-highlight__name { transition-delay: 0.18s; }
  .country-highlight__copy { transition-delay: 0.24s; }
  .country-highlight.is-card-visible .country-highlight__media img {
    transform: scale(1);
    opacity: 1;
  }
  .country-highlight.is-card-visible .country-highlight__num,
  .country-highlight.is-card-visible .country-highlight__name,
  .country-highlight.is-card-visible .country-highlight__copy {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .country-highlight__media img,
    .country-highlight__num,
    .country-highlight__name,
    .country-highlight__copy { transform: none !important; opacity: 1 !important; transition: none !important; }
  }
  /* On mobile the highlights are a horizontal carousel — disable per-card scroll reveal
     since cards never cross the vertical viewport line during horizontal swipe. */
  @media (max-width: 760px) {
    .country-highlight__media img,
    .country-highlight__num,
    .country-highlight__name,
    .country-highlight__copy { transform: none !important; opacity: 1 !important; transition: none !important; }
  }

  /* Parallax targets — set --parallax-y from JS */
  [data-parallax] img,
  [data-parallax] {
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
    [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
    [data-parallax] img, [data-parallax] { transform: none !important; }
  }

  /* ============ THE ARGUMENT ============ */
  .country-intro {
    background: var(--cream-2);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-intro__inner {
    max-width: 900px;
    margin: 0 auto;
  }
  .country-intro__title {
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.1;
    margin: 0 0 36px;
    font-weight: 400;
  }
  .country-intro__copy p {
    font-size: 18px;
    line-height: 1.8;
    margin: 0 0 22px;
    max-width: 800px;
  }
  /* split variant — sticky image left, copy scrolls past on right */
  .country-intro--split {
    padding: 0;
    background: var(--cream-2);
    position: relative;
  }
  .country-intro--split .country-intro__split {
    display: grid;
    grid-template-columns: 38% 62%;
    align-items: stretch;
    position: relative;
  }
  /* sticky column wrapper — stretches to full grid height so the sticky image can ride the entire scroll */
  .country-intro--split .country-intro__media-col {
    position: relative;
    height: 100%;
    background: var(--cream-2);
  }
  .country-intro--split .country-intro__media {
    position: sticky !important;
    top: 0;
    height: 100vh;
    overflow: hidden;
    width: 100%;
  }
  .country-intro--split .country-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* gentle gradient at the bottom of the image to anchor text overlay if needed */
  .country-intro--split .country-intro__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(to top, rgba(54,69,79,0.35), transparent);
    pointer-events: none;
  }
  .country-intro--split .country-intro__inner {
    max-width: 860px;
    margin: 0;
    padding: clamp(56px, 6vw, 88px) clamp(36px, 4vw, 64px) clamp(64px, 7vw, 104px) clamp(48px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .country-intro--split .country-intro__title {
    font-size: clamp(28px, 2.8vw, 40px);
    margin: 0 0 28px;
    line-height: 1.15;
    text-wrap: balance;
  }
  /* progress rail down the left of the copy column, with chapter pips */
  .country-intro__rail {
    display: none;
  }
  .country-intro__rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--amber);
    transition: height 0.16s linear;
  }
  .country-intro__copy {
    position: relative;
  }
  .country-intro--split .country-intro__copy p {
    max-width: none !important;
    text-align: left !important;
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 clamp(22px, 2.4vw, 30px);
    color: var(--charcoal);
  }
  .country-intro--split .country-intro__copy p:last-child { margin-bottom: 0; }
  .country-intro--split .country-intro__copy strong {
    font-weight: 600;
    color: var(--charcoal);
  }
  .country-intro--split .country-intro__copy a {
    color: var(--charcoal);
    text-decoration: underline;
    text-decoration-color: rgba(200,135,58,0.55);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s, color 0.2s;
  }
  .country-intro--split .country-intro__copy a:hover {
    color: var(--amber);
    text-decoration-color: var(--amber);
  }
  .country-intro--split .country-intro__title { text-align: left !important; }
  .country-intro--split .eyebrow { text-align: left !important; }
  @media (max-width: 900px) {
    .country-intro--split .country-intro__split {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .country-intro--split .country-intro__media-col {
      height: auto;
    }
    .country-intro--split .country-intro__media {
      position: relative !important;
      top: auto;
      height: 420px;
      min-height: 360px;
      max-height: 480px;
      overflow: hidden;
    }
    .country-intro--split .country-intro__media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .country-intro--split .country-intro__inner {
      padding: clamp(48px, 9vw, 80px) var(--gutter);
    }
    .country-intro--split .country-intro__title {
      white-space: normal;
      margin: 0 0 24px;
    }
    .country-intro--split .country-intro__title em {
      white-space: normal;
    }
    .country-intro__copy {
      padding-left: 0;
    }
    .country-intro__rail {
      display: none;
    }
    .country-intro--split .country-intro__copy p {
      font-size: 16.5px;
      line-height: 1.7;
      margin: 0 0 22px;
      opacity: 1;
    }
    .country-intro--split .country-intro__copy p:first-child {
      font-size: 19px;
      line-height: 1.5;
      margin-bottom: 28px;
    }
    .country-intro--split .country-intro__copy p:last-child {
      font-size: 21px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    /* Keep the image filling the grid column even when reduced-motion drops the sticky scroll.
       Make the media-col a flex container so the inner .country-intro__media stretches to full height. */
    .country-intro--split .country-intro__media-col {
      display: flex;
    }
    .country-intro--split .country-intro__media {
      position: relative !important;
      top: auto;
      height: auto;
      min-height: 100%;
      width: 100%;
      flex: 1 1 100%;
      align-self: stretch;
    }
    .country-intro--split .country-intro__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 520px;
    }
    .country-intro--split .country-intro__copy p {
      opacity: 1;
    }
    .country-intro__rail-fill {
      transition: none;
    }
  }

  /* ============ EDITORIAL MAP — flat SVG, NO Mapbox ============ */
  .country-map {
    background: var(--cream);
    padding: clamp(72px, 10vw, 130px) var(--gutter);
  }
  .country-map__inner {
    max-width: var(--max);
    margin: 0 auto;
  }
  .country-map__header { text-align: center; margin: 0 0 56px; }
  .country-map__title {
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.1;
    margin: 0 0 16px;
  }
  .country-map__lede {
    font-size: 17px;
    color: var(--charcoal);
    opacity: 0.78;
    max-width: 620px;
    margin: 0 auto;
  }
  .country-map__figure {
    margin: 0;
    text-align: center;
  }
  .country-map__figure img {
    margin: 0 auto;
    max-width: 1080px;
    width: 100%;
    height: auto;
  }
  .country-map__caption {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--charcoal);
    opacity: 0.7;
    margin: 28px auto 0;
    max-width: 620px;
    line-height: 1.6;
  }

  /* ============ MODULE 5 — BEST FOR / NOT IDEAL FOR (NEW) ============ */
  .country-fit {
    background: var(--charcoal);
    color: var(--cream);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-fit__inner {
    max-width: var(--max);
    margin: 0 auto;
  }
  .country-fit__header {
    max-width: 820px;
    margin: 0 auto 72px;
    text-align: center;
  }
  .country-fit__eyebrow {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 18px;
  }
  .country-fit__title {
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.08;
    color: var(--cream);
    margin: 0;
  }
  .country-fit__title em { color: var(--amber); font-style: italic; }

  /* Column heads above the rows */
  .country-fit__heads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    max-width: 1100px;
    margin: 0 auto 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(243, 242, 238, 0.18);
  }
  .country-fit__head {
    font-family: var(--serif);
    font-size: clamp(22px, 2.2vw, 28px);
    margin: 0;
    color: var(--cream);
  }
  .country-fit__head--no { color: var(--amber); }
  .country-fit__head-mark {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.7em;
    margin-right: 10px;
    opacity: 0.7;
    transform: translateY(-1px);
  }

  /* Row-pair grid */
  .country-fit__rows {
    max-width: 1100px;
    margin: 0 auto;
  }
  .country-fit__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    padding: 28px 0;
    border-bottom: 1px solid rgba(243, 242, 238, 0.10);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .country-fit__row:last-child { border-bottom: 0; }
  .country-fit__row.is-in { opacity: 1; transform: translateY(0); }
  .country-fit__cell {
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(243, 242, 238, 0.92);
  }
  .country-fit__cell--no { color: rgba(243, 242, 238, 0.78); }
  .country-fit__cell strong {
    display: block;
    font-family: var(--serif);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 21px);
    color: var(--cream);
    margin: 0 0 8px;
    letter-spacing: 0.005em;
  }
  .country-fit__cell--no strong { color: var(--amber); }

  @media (max-width: 760px) {
    .country-fit__heads { display: none; }
    .country-fit__row {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 28px 0;
    }
    .country-fit__cell::before {
      content: 'Best for';
      display: block;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(243, 242, 238, 0.55);
      margin: 0 0 10px;
    }
    .country-fit__cell--no::before {
      content: 'But not if';
      color: var(--amber);
      opacity: 0.85;
    }
  }

  .country-fit__nights {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid rgba(243, 242, 238, 0.18);
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 26px);
    color: var(--cream);
  }
  .country-fit__nights strong {
    font-style: normal;
    color: var(--amber);
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  /* ============ HIGHLIGHTS ============ */
  .country-highlights {
    background: var(--cream);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-highlights__inner { max-width: var(--max); margin: 0 auto; }
  .country-highlights__header { text-align: center; margin: 0 0 72px; }
  .country-highlights__title {
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.08;
    margin: 0;
  }
  .country-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(40px, 6vw, 72px) clamp(40px, 6vw, 80px);
  }
  @media (max-width: 760px) { .country-highlights__grid { grid-template-columns: 1fr; } }
  .country-highlight__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: 0 0 24px;
    background: #1a1f24;
  }
  .country-highlight__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
  }
  .country-highlight:hover .country-highlight__media img {
    transform: scale(1.04);
  }
  .country-highlight__num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    color: var(--amber);
    display: block;
    margin: 0 0 12px;
  }
  .country-highlight__name {
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
    margin: 0 0 18px;
  }
  .country-highlight__copy { font-size: 16.5px; line-height: 1.8; }

  /* ============ FULL-BLEED BANDS ============ */
  .country-band {
    width: 100%;
    /* Outer frame is the FULL target height we want when expanded */
    height: clamp(420px, 70vw, 760px);
    overflow: hidden;
    position: relative;
    background: #1a1f24;
  }
  /* Reveal clip that opens from band centre as you scroll through it */
  .country-band__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* JS will set --reveal from 0 (closed) to 1 (open) */
    --reveal: 0;
    clip-path: inset(
      calc((1 - var(--reveal)) * 35%) 0
      calc((1 - var(--reveal)) * 35%) 0
    );
    transition: clip-path 0.05s linear;
    will-change: clip-path;
  }
  .country-band__inner { width: 100%; height: 100%; will-change: transform; }
  .country-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: country-kenburns 22s ease-out infinite alternate;
    transform-origin: 55% 50%;
  }
  @keyframes country-kenburns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.085); }
  }
  @media (prefers-reduced-motion: reduce) {
    .country-band img { animation: none; }
    .country-band__clip { clip-path: none; }
  }

  /* Mobile: band height halved (2026-06-05 migration — was inline override on SA) */
  @media (max-width: 760px) {
    .country-band {
      height: 210px !important;
      min-height: 210px !important;
      max-height: 210px !important;
    }
  }

  /* Slow Ken Burns on the sticky region images (desktop only — mobile is plain stacked) */
  @media (min-width: 901px) {
    .country-where__media-col .country-region__media-inner img {
      animation: country-kenburns-region 26s ease-out infinite alternate;
      transform-origin: 50% 55%;
    }
    @media (prefers-reduced-motion: reduce) {
      .country-where__media-col .country-region__media-inner img { animation: none; }
    }
  }
  @keyframes country-kenburns-region {
    from { transform: scale(1.0); }
    to   { transform: scale(1.06); }
  }

  /* ============ SEASONAL ============ */
  .country-best-time {
    background: var(--cream-2);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-best-time__inner { max-width: var(--max); margin: 0 auto; }
  .country-best-time__header { text-align: center; margin: 0 0 64px; max-width: 800px; margin-left: auto; margin-right: auto; }
  .country-best-time__title {
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.1;
    margin: 0 0 24px;
  }
  .country-best-time__lede {
    font-size: 17px;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto;
    opacity: 0.84;
  }
  .country-best-time__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 4vw, 44px);
    margin: 0 0 80px;
  }
  @media (max-width: 760px) { .country-best-time__grid { grid-template-columns: 1fr; } }
  .country-mood {
    background: var(--cream);
    padding: clamp(28px, 3vw, 40px);
    border-left: 2px solid var(--amber);
  }
  .country-mood__label {
    font-family: var(--sans); font-weight: 500;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--amber); margin: 0 0 12px;
  }
  .country-mood__title { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
  .country-mood__months {
    font-family: var(--serif); font-style: italic;
    font-size: 17px; color: var(--charcoal); opacity: 0.75; margin: 0 0 14px;
  }
  .country-mood__copy { font-size: 15.5px; line-height: 1.7; margin: 0; }

  .country-season-strip-wrap { margin-top: 64px; }
  .country-season-strip__title {
    font-family: var(--serif); font-size: 24px;
    margin: 0 0 24px; text-align: center;
  }
  .country-season-strip {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    background: var(--cream); padding: 16px; border-radius: 4px;
  }
  /* Mobile: 4 × 3 grid so months are readable (2026-06-05) */
  @media (max-width: 760px) {
    .country-season-strip {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 12px;
    }
    .country-season-strip__cell {
      padding: 14px 6px;
      font-size: 13px;
    }
  }
  .country-season-strip__cell {
    text-align: center; padding: 12px 4px; font-size: 12px;
    background: var(--cream-2);
    cursor: default;
  }
  .country-season-strip__cell--peak { background: #C8873A; color: var(--cream); }
  .country-season-strip__cell--dry  { background: rgba(200, 135, 58, 0.45); }
  .country-season-strip__cell--shoulder { background: rgba(200, 135, 58, 0.20); }
  .country-season-strip__cell--green { background: rgba(54, 69, 79, 0.12); }
  /* legend */
  .country-season-legend {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 32px;
    max-width: 920px;
  }
  @media (max-width: 720px) {
    .country-season-legend { grid-template-columns: 1fr; gap: 12px; }
  }
  .country-season-legend__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--charcoal);
  }
  .country-season-legend__swatch {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    margin-top: 4px;
    border: 1px solid rgba(54, 69, 79, 0.12);
  }
  .country-season-legend__swatch--peak { background: #C8873A; border-color: #C8873A; }
  .country-season-legend__swatch--dry { background: rgba(200, 135, 58, 0.45); border-color: rgba(200, 135, 58, 0.5); }
  .country-season-legend__swatch--shoulder { background: rgba(200, 135, 58, 0.20); border-color: rgba(200, 135, 58, 0.3); }
  .country-season-legend__swatch--green { background: rgba(54, 69, 79, 0.12); border-color: rgba(54, 69, 79, 0.2); }
  .country-season-legend__label strong {
    font-weight: 600;
    color: var(--charcoal);
    letter-spacing: 0.02em;
  }
  .country-season-strip__month-full { display: inline; font-weight: 500; letter-spacing: 0.05em; }
  .country-season-strip__month-abbr { display: none; }
  @media (max-width: 760px) {
    /* On 4×3 grid, cells have room — show full month name */
    .country-season-strip__month-full { display: inline; font-weight: 500; }
    .country-season-strip__month-abbr { display: none; }
  }

  /* ============ PLANNER'S NOTE ============ */
  .country-plannernote {
    background: var(--cream);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-plannernote__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  .country-plannernote__eyebrow {
    font-family: var(--sans); font-weight: 500;
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--amber); margin: 0 0 28px;
  }
  .country-plannernote__text {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.45;
    color: var(--charcoal);
    margin: 0;
  }

  /* ============ REGIONS — sticky-image editorial chapters (CSS only) ============ */
  .country-where {
    background: var(--cream);
    padding: clamp(16px, 2vw, 24px) 0 clamp(40px, 6vw, 80px);
  }
  .country-where__inner { max-width: 100%; margin: 0; padding: 0; }
  .country-where__header {
    text-align: center;
    margin: 0 auto clamp(12px, 1.4vw, 18px);
    max-width: var(--max);
    padding: 0 var(--gutter);
  }
  .country-where__title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; }
  /* Hide JS-only chrome — CSS-only mode doesn't need them */
  .country-where__dots, .country-where__hint, .country-where__exit { display: none !important; }

  /* Reset theme conflicts on .country-region inside the regions block */
  .country-where__regions .country-region {
    border-top: 0 !important;
    padding: 0 !important;
  }

  /* Mobile default: stacked image then text per region.
     On mobile we ignore the two-column structure and interleave media/body. */
  .country-where__regions { display: block; }
  .country-where__media-col,
  .country-where__body-col { display: contents; }
  .country-region__media { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 0; }
  .country-region__media-inner { position: static; height: 100%; }
  .country-region__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .country-region__body {
    padding: 40px var(--gutter) 24px;
    margin: 0 0 clamp(48px, 6vw, 80px);
  }
  .country-region__eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 20px;
  }
  .country-region__name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.05;
    margin: 0 0 24px;
    color: var(--charcoal);
  }
  .country-region__copy p {
    font-family: 'Jost', sans-serif;
    font-size: 16.5px;
    line-height: 1.75;
    margin: 0;
    color: var(--charcoal);
    max-width: 46ch;
  }

  /* Desktop: Safari Portal overlap pattern.
     The parent .country-where__regions is a PLAIN BLOCK (not grid, not flex).
     Each article uses display:contents so media + body are direct children of
     the block. All medias are position:sticky top:0 — they all share the SAME
     containing block (the wrapper). When user scrolls, media1 sticks; media2
     starts in normal flow below body1; as scroll progresses, media2's natural
     position reaches top:0 and it sticks too, painting OVER media1 (later in
     DOM = higher in paint order). This is exactly how Safari Portal does it. */
  @media (min-width: 1024px) {
    /* TRUE Safari Portal overlap pattern.
       Wrapper = grid with two columns. Each column is a SEPARATE container.
       LEFT column = stack of sticky medias — all share the LEFT column as
       their containing block, so successive stickies overlap previous ones.
       RIGHT column = stack of bodies in normal flow. Right column drives
       page height; left column matches it via grid alignment. */
    .country-where__regions {
      position: relative;
      display: grid;
      grid-template-columns: 50% 50%;
      column-gap: 0;
      align-items: stretch;
    }
    .country-where__regions::before,
    .country-where__regions::after { display: none; }

    /* LEFT column: sticky media stack. Make it the containing block. */
    .country-where__media-col {
      position: relative;
      grid-column: 1;
      grid-row: 1;
      display: block;
    }
    /* Each media inside LEFT column: sticky to top of viewport.
       Because all medias share .country-where__media-col as containing block,
       and that column is sized via grid to match the bodies' total height,
       each sticky media holds at top:0 until the column itself scrolls past.
       Later DOM medias paint OVER earlier ones (DOM order = z-order). */
    /* Each media: 100vh tall sticky element. To make its scroll zone match
       the corresponding body's height (150vh), add 50vh margin-bottom. This
       puts media[i+1]'s natural top exactly 150vh below media[i]'s natural
       top — perfectly aligned with the body slots on the right. When the
       user scrolls into region i, media[i] becomes sticky at top:0 and stays
       there for the full 150vh region; then media[i+1] takes over. Later DOM
       medias paint OVER earlier ones, producing the overlap effect. */
    .country-where__media-col .country-region__media {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      aspect-ratio: auto;
      margin: 0 0 50vh 0;
      display: block;
    }
    .country-where__media-col .country-region__media:last-child {
      margin-bottom: 0;
    }
    .country-where__media-col .country-region__media-inner {
      position: relative;
      height: 100%;
      width: 100%;
    }
    .country-where__media-col .country-region__media img {
      width: 100%; height: 100%; object-fit: cover;
      display: block;
    }

    /* RIGHT column: bodies in normal flow. Each body is 100vh+ tall to
       give the corresponding sticky media a full screen of dwell time. */
    .country-where__body-col {
      grid-column: 2;
      grid-row: 1;
      display: block;
      background: var(--cream);
    }
    .country-where__body-col .country-region__body {
      width: 100%;
      margin: 0;
      padding: 25vh clamp(48px, 6vw, 96px) 25vh;
      min-height: 150vh;
      height: 150vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      background: var(--cream);
      box-sizing: border-box;
    }
    .country-where__regions .country-region__name {
      font-size: clamp(40px, 4.6vw, 64px);
      line-height: 1.05;
      margin: 0 0 28px;
    }
    .country-where__regions .country-region__copy p {
      font-size: 17px;
      max-width: 46ch;
    }
    .country-where__regions .country-region__eyebrow { margin-bottom: 24px; }
  }

  /* ============ DISABLED SLIDESHOW MODE (legacy override, just to be safe) ============ */
  .country-where.is-slideshow {
    height: auto !important;
    overflow: visible !important;
    background: var(--cream) !important;
  }
  .country-where.is-slideshow .country-region {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ============ FULL-BLEED EDITORIAL ============ */
  .country-fullbleed { width: 100%; height: clamp(360px, 56vw, 720px); }
  .country-fullbleed img { width: 100%; height: 100%; object-fit: cover; }

  /* ============ SIGNATURE JOURNEY ============ */
  .country-itinerary {
    background: var(--cream);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-itinerary__inner { max-width: var(--max); margin: 0 auto; }
  .country-itinerary__card {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  @media (max-width: 760px) { .country-itinerary__card { grid-template-columns: minmax(0, 1fr); } }
  .country-itinerary__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .country-itinerary__title {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.12;
    margin: 0 0 20px;
  }
  .country-itinerary__summary { font-size: 16.5px; line-height: 1.75; margin: 0 0 28px; }
  .country-itinerary__meta {
    list-style: none; padding: 0; margin: 0 0 28px;
    display: grid; gap: 14px;
  }
  .country-itinerary__meta li {
    display: grid; grid-template-columns: 120px 1fr; gap: 16px;
    font-size: 14px; align-items: baseline;
  }
  .country-itinerary__meta li span {
    font-family: var(--sans); font-weight: 500;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--amber);
  }
  .country-itinerary__meta li strong {
    font-family: var(--serif); font-weight: 400; font-style: italic;
    font-size: 17px; color: var(--charcoal);
  }
  .country-itinerary__link {
    font-family: var(--sans); font-weight: 500;
    color: var(--amber); text-decoration: none;
    font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
    border-bottom: 1px solid var(--amber);
    padding-bottom: 4px;
  }
  .country-itinerary__note {
    margin-top: 22px;
    font-family: var(--serif); font-style: italic;
    font-size: 15px; opacity: 0.7;
  }

  /* ============ COST ============ */
  .country-cost {
    background: var(--cream-2);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-cost__inner { max-width: var(--max); margin: 0 auto; }
  .country-cost__header { text-align: center; max-width: 820px; margin: 0 auto 64px; }
  .country-cost__title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; margin: 0 0 24px; }
  .country-cost__lede { font-size: 16.5px; line-height: 1.7; opacity: 0.84; }
  .country-cost__bands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 32px);
  }
  @media (max-width: 900px) { .country-cost__bands { grid-template-columns: 1fr; } }
  .country-cost__band {
    background: var(--cream);
    padding: clamp(28px, 3vw, 40px);
    border-top: 2px solid var(--charcoal);
  }
  .country-cost__band--premium {
    border-top-color: var(--amber);
    border-top-width: 3px;
    background: var(--cream-2);
    box-shadow: 0 2px 24px rgba(54, 69, 79, 0.06);
  }
  .country-cost__band--mid { border-top-color: rgba(200, 135, 58, 0.55); }
  .country-cost__band--entry { border-top-color: rgba(54, 69, 79, 0.25); }
  .country-cost__tier {
    font-family: var(--sans); font-weight: 500;
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--amber); margin: 0 0 16px;
  }
  .country-cost__price {
    font-family: var(--serif); font-style: italic;
    font-size: 26px; line-height: 1.2; margin: 0 0 6px;
    color: var(--charcoal);
  }
  .country-cost__unit {
    font-size: 13px; letter-spacing: 0.04em;
    opacity: 0.7; margin: 0 0 24px;
  }
  .country-cost__note { font-size: 15px; line-height: 1.7; margin: 0; }
  .country-cost__footnote {
    margin: 56px auto 0;
    max-width: 820px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.7;
    color: var(--charcoal);
    opacity: 0.85;
  }

  /* ============ PAIRS ============ */
  .country-pairs {
    background: var(--cream);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-pairs__inner { max-width: 900px; margin: 0 auto; }
  .country-pairs__title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; margin: 0 0 36px; }
  .country-pairs__copy p { font-size: 17.5px; line-height: 1.8; margin: 0 0 22px; }
  /* split variant — copy left, image right */
  .country-pairs--split {
    padding: 0;
    background: var(--cream);
  }
  .country-pairs--split .country-pairs__split {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: stretch;
  }
  .country-pairs--split .country-pairs__inner {
    max-width: 780px;
    margin: 0 0 0 auto;
    padding: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .country-pairs--split .country-pairs__title {
    font-size: clamp(34px, 4.4vw, 54px) !important;
    margin: 0 0 24px !important;
    text-align: left !important;
  }
  .country-pairs--split .country-pairs__copy p {
    font-size: 16.5px !important;
    line-height: 1.7 !important;
    margin: 0 0 16px !important;
    text-align: left !important;
    max-width: none !important;
  }
  .country-pairs--split .country-pairs__copy p:last-child { margin-bottom: 0 !important; }
  .country-pairs--split .eyebrow { text-align: left !important; }
  .country-pairs--split .country-pairs__media {
    position: relative;
    overflow: hidden;
    min-height: 520px;
  }
  .country-pairs--split .country-pairs__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @media (max-width: 900px) {
    .country-pairs--split .country-pairs__split {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .country-pairs--split .country-pairs__media {
      order: -1;
      min-height: 320px;
      max-height: 420px;
    }
    .country-pairs--split .country-pairs__inner {
      margin: 0;
      padding: clamp(56px, 10vw, 96px) var(--gutter);
    }
  }

  /* ============ PULL QUOTE ============ */
  .country-pullquote {
    background: var(--cream-2);
    padding: clamp(96px, 14vw, 180px) var(--gutter);
    text-align: center;
    overflow: hidden;
  }
  .country-pullquote__inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    will-change: transform;
    transition: transform 0.1s linear;
  }
  .country-pullquote__mark {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(96px, 14vw, 160px);
    line-height: 0.6;
    color: var(--amber);
    margin: 0 0 8px;
    opacity: 0;
    font-weight: 400;
    transform: scale(0.7);
    transform-origin: center bottom;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .country-pullquote.is-in .country-pullquote__mark {
    opacity: 0.5;
    transform: scale(1);
  }
  .country-pullquote__text {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.3;
    color: var(--charcoal);
    margin: 0 0 36px;
    font-weight: 400;
    letter-spacing: 0.005em;
  }
  .country-pullquote__line {
    display: block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .country-pullquote__line + .country-pullquote__line {
    margin-top: 0.25em;
  }
  .country-pullquote.is-in .country-pullquote__line {
    opacity: 1;
    transform: translateY(0);
  }
  .country-pullquote.is-in .country-pullquote__line:nth-child(1) { transition-delay: 0.20s; }
  .country-pullquote.is-in .country-pullquote__line:nth-child(2) { transition-delay: 0.55s; }
  .country-pullquote__attrib {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: 0.95s;
  }
  .country-pullquote.is-in .country-pullquote__attrib {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .country-pullquote__inner { transition: none; transform: none !important; }
    .country-pullquote__mark,
    .country-pullquote__line,
    .country-pullquote__attrib {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* ============ FAQ ============ */
  .country-faq {
    background: var(--cream-2);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
  }
  .country-faq__inner { max-width: 900px; margin: 0 auto; }
  .country-faq__header { text-align: center; margin: 0 0 56px; }
  .country-faq__title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; }
  .country-faq__item {
    background: var(--cream);
    padding: 28px 32px;
    margin: 0 0 14px;
    border-left: 2px solid transparent;
    transition: border-color 0.2s;
  }
  .country-faq__item[open] { border-left-color: var(--amber); }
  .country-faq__q {
    font-family: var(--serif); font-size: 22px;
    cursor: pointer; line-height: 1.35;
    list-style: none;
    position: relative;
    padding-right: 32px;
  }
  .country-faq__q::after {
    content: '+';
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    color: var(--amber); font-size: 22px;
  }
  .country-faq__item[open] .country-faq__q::after { content: '−'; }
  .country-faq__a { margin-top: 18px; font-size: 16.5px; line-height: 1.8; }

  /* ============ AUTHOR + FRESHNESS ============ */
  .country-updated {
    background: var(--cream);
    padding: clamp(56px, 8vw, 100px) var(--gutter);
    text-align: center;
  }
  .country-updated__inner { max-width: 720px; margin: 0 auto; }
  .country-updated__by {
    font-family: var(--serif) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    margin: 0 0 6px !important;
    display: block !important;
    visibility: visible !important;
    color: var(--charcoal) !important;
  }
  .country-updated__by strong {
    font-weight: 500;
    color: var(--charcoal);
  }
  .country-updated__footnote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    opacity: 0.75;
    margin: 12px 0 28px;
    color: var(--charcoal);
  }
  .country-updated__date {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0;
  }

  /* ============ MODULE 15 — A NOTE, BEFORE YOU GO (REDESIGN) ============ */
  .country-begin {
    background: var(--charcoal);
    color: var(--cream);
    padding: clamp(80px, 12vw, 160px) var(--gutter);
    position: relative;
    overflow: hidden;
  }
  .country-begin::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 28%, rgba(200, 135, 58, 0.10) 0%, transparent 42%),
      radial-gradient(circle at 86% 78%, rgba(200, 135, 58, 0.06) 0%, transparent 48%);
    pointer-events: none;
  }
  .country-begin__inner {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(56px, 8vw, 120px);
    align-items: center;
  }
  @media (max-width: 900px) {
    .country-begin__inner { grid-template-columns: 1fr; gap: 56px; }
  }
  .country-begin__note {
    position: relative;
  }
  .country-begin__eyebrow {
    font-family: var(--sans); font-weight: 500;
    font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--amber); margin: 0 0 22px;
  }
  .country-begin__title {
    font-family: var(--serif);
    font-size: clamp(36px, 4.8vw, 56px);
    line-height: 1.1;
    color: var(--cream);
    margin: 0 0 28px;
    font-weight: 400;
  }
  .country-begin__title em {
    color: var(--amber);
    font-style: italic;
  }
  .country-begin__letter p {
    font-family: var(--serif);
    font-size: 18.5px;
    line-height: 1.75;
    color: rgba(243, 242, 238, 0.92);
    margin: 0 0 18px;
    max-width: 540px;
  }
  .country-begin__letter p:last-of-type { margin-bottom: 28px; }
  .country-begin__sig {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--amber);
    line-height: 1.3;
  }
  .country-begin__sig small {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(243, 242, 238, 0.6);
    margin-top: 8px;
    font-weight: 400;
  }

  /* Right column — three ways, but quietly, with a clear primary */
  .country-begin__ways {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .country-begin__primary {
    background: var(--amber);
    color: var(--charcoal);
    padding: clamp(32px, 4vw, 44px) clamp(28px, 3.4vw, 40px);
    display: block;
    text-decoration: none;
    transition: background 0.25s ease;
  }
  .country-begin__primary:hover { background: #b67a32; }
  .country-begin__primary h3 {
    font-family: var(--serif);
    font-size: clamp(26px, 2.8vw, 32px);
    line-height: 1.15;
    margin: 0 0 12px;
    font-weight: 400;
    color: var(--charcoal);
  }
  .country-begin__primary p {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 18px;
    color: rgba(54, 69, 79, 0.86);
  }
  .country-begin__primary .arrow {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal);
    border-bottom: 1px solid var(--charcoal);
    padding-bottom: 4px;
  }
  .country-begin__alt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: rgba(243, 242, 238, 0.04);
    border: 1px solid rgba(243, 242, 238, 0.14);
    border-top: none;
  }
  @media (max-width: 520px) {
    .country-begin__alt { grid-template-columns: 1fr; }
  }
  .country-begin__altcard {
    padding: clamp(24px, 3vw, 32px) clamp(22px, 2.6vw, 30px);
    text-decoration: none;
    color: var(--cream);
    transition: background 0.25s ease;
    border-right: 1px solid rgba(243, 242, 238, 0.14);
  }
  .country-begin__altcard:last-child { border-right: none; }
  @media (max-width: 520px) {
    .country-begin__altcard {
      border-right: none;
      border-bottom: 1px solid rgba(243, 242, 238, 0.14);
    }
    .country-begin__altcard:last-child { border-bottom: none; }
  }
  .country-begin__altcard:hover { background: rgba(243, 242, 238, 0.06); }
  .country-begin__altcard__label {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 10px;
  }
  .country-begin__altcard__value {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.4;
    color: var(--cream);
    margin: 0;
  }
  .country-begin__altcard__hours {
    font-family: var(--sans);
    font-size: 12.5px;
    color: rgba(243, 242, 238, 0.6);
    margin: 6px 0 0;
  }

  /* ============ MID-SCROLL CORNER PILL (v1.2.1 §6.2) ============ */
  /* Push theme's back-to-top button up so it stacks above the plan-your pill */
  body .to-top {
    bottom: 96px !important;
  }
  @media (max-width: 640px) {
    body .to-top {
      bottom: 80px !important;
    }
  }
  .midscroll-pill {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 50;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .midscroll-pill.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .midscroll-pill.is-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }
  @media (max-width: 760px) {
    .midscroll-pill { bottom: 16px; right: 16px; left: auto; }
    .midscroll-pill .pill {
      padding: 10px 18px;
      font-size: 11px;
      letter-spacing: 0.12em;
      box-shadow: 0 8px 20px -10px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(243,242,238,0.35);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    /* Compact label on mobile to keep pill narrow (~180px) so it never overlaps body copy */
    .midscroll-pill .pill .pill-long { display: none; }
    .midscroll-pill .pill .pill-short { display: inline; }
  }
  .midscroll-pill .pill .pill-short { display: none; }

  /* ====== INTERACTIVE REGIONS MAP ====== */
  .country-where__map-wrap {
    max-width: 880px;
    margin: 0 auto clamp(40px, 5vw, 72px);
    padding: 0 var(--gut);
  }
  .country-where__map {
    position: relative;
    background: var(--cream);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(54,69,79,0.06), 0 12px 40px -20px rgba(54,69,79,0.18);
    overflow: hidden;
  }
  .country-where__map-svg {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 900;
  }
  .country-where__map-svg svg,
  .country-where__map-svg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
  }
  .country-where__hotspots {
    position: absolute; inset: 0;
    pointer-events: none;
  }
  .country-where__hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  /* Soft pulsing ring under the SVG's existing amber dot */
  .country-where__hotspot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(200, 135, 58, 0.22);
    transform: scale(0.6);
    transition: transform .35s ease, background-color .25s ease;
  }
  .country-where__hotspot::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 135, 58, 0.55);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity .35s ease, transform .35s ease;
  }
  .country-where__hotspot:hover::before,
  .country-where__hotspot:focus-visible::before {
    transform: scale(1.1);
    background: rgba(200, 135, 58, 0.4);
  }
  .country-where__hotspot.is-active::before {
    transform: scale(1.25);
    background: rgba(200, 135, 58, 0.55);
  }
  .country-where__hotspot.is-active::after {
    opacity: 1;
    transform: scale(1);
    animation: hotspotPulse 2.2s ease-in-out infinite;
  }
  @keyframes hotspotPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.25); opacity: 0.3; }
  }
  .country-where__hotspot span {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    background: var(--charcoal);
    color: var(--cream);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease;
  }
  .country-where__hotspot:hover span,
  .country-where__hotspot:focus-visible span,
  .country-where__hotspot.is-active span {
    opacity: 1;
    transform: translate(-50%, 12px);
  }
  .country-where__hotspot.is-active span {
    background: var(--amber);
  }
  /* Mobile pill nav: hidden on desktop, horizontal scroll on mobile */
  .country-where__pillnav {
    display: none;
  }
  @media (max-width: 760px) {
    .country-where__map { display: none; }
    .country-where__map-wrap {
      margin: 0 0 32px;
      padding: 0;
      position: sticky;
      top: 60px;
      z-index: 40;
      background: var(--cream);
      box-shadow: 0 8px 18px -16px rgba(54,69,79,0.5);
    }
    .country-where__pillnav {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 12px 16px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      scroll-snap-type: x mandatory;
    }
    .country-where__pillnav::-webkit-scrollbar { display: none; }
    .country-where__pill {
      flex: 0 0 auto;
      scroll-snap-align: start;
      background: rgba(54,69,79,0.06);
      color: var(--charcoal);
      border: 1px solid rgba(54,69,79,0.12);
      border-radius: 999px;
      padding: 8px 14px;
      font-family: 'Jost', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }
    .country-where__pill.is-active {
      background: var(--amber);
      color: var(--cream);
      border-color: var(--amber);
    }
  }

  /* =====================================================================
     MOBILE CAROUSEL SYSTEM
     Activates only on (max-width: 760px). Three sections become swipe
     carousels: intro paragraphs, highlights, regions. Desktop untouched.
     ===================================================================== */
  @media (max-width: 760px) {
    /* Hard clip overflow on the page-level containers so a carousel can never
       force the body wider than the viewport. */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    .country-intro, .country-highlights, .country-where { overflow-x: hidden; }
    .country-intro__inner, .country-highlights__inner, .country-where__inner { overflow-x: hidden; }
  }
  @media (max-width: 760px) {

    /* ---- Intro paragraphs as 3-card swipe ---- */
    .country-intro__copy[data-mobile-carousel] {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 4px 0 24px;
      margin: 0;
      width: 100%;
      max-width: 100vw;
      box-sizing: border-box;
      scroll-padding-left: 0;
    }
    .country-intro__copy[data-mobile-carousel]::-webkit-scrollbar { display: none; }
    .country-intro__copy[data-mobile-carousel] > p,
    .country-intro--split .country-intro__copy[data-mobile-carousel] > p,
    .country-intro--split .country-intro__copy[data-mobile-carousel] > p:first-child,
    .country-intro--split .country-intro__copy[data-mobile-carousel] > p:last-child {
      flex: 0 0 calc(100vw - 88px);
      max-width: calc(100vw - 88px);
      scroll-snap-align: start;
      background: rgba(54,69,79,0.04);
      border: 1px solid rgba(54,69,79,0.08);
      border-radius: 8px;
      padding: 22px 20px;
      margin: 0;
      font-size: 16px;
      line-height: 1.65;
      box-sizing: border-box;
    }
    .country-intro__copy[data-mobile-carousel] > p:last-child {
      margin-right: 24px;
    }

    /* Dot indicators */
    .mobile-carousel-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin: 0 0 8px;
      padding: 0;
      list-style: none;
    }
    .mobile-carousel-dots button {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(54,69,79,0.18);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background-color .2s ease, transform .2s ease, width .2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-carousel-dots button.is-active {
      background: var(--amber);
      width: 22px;
      border-radius: 3px;
    }

    /* ---- Highlights as 6-card swipe ---- */
    .country-highlights__grid[data-mobile-carousel] {
      display: flex !important;
      gap: 16px;
      grid-template-columns: none !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 4px 16px 24px;
      margin: 0 -16px;
      width: 100vw;
      max-width: 100vw;
      box-sizing: border-box;
      scroll-padding-left: 16px;
      row-gap: 0 !important;
    }
    .country-highlights__grid[data-mobile-carousel]::-webkit-scrollbar { display: none; }
    .country-highlights__grid[data-mobile-carousel] > .country-highlight {
      flex: 0 0 calc(100vw - 80px);
      max-width: calc(100vw - 80px);
      scroll-snap-align: start;
      margin: 0;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    .country-highlights__grid[data-mobile-carousel] > .country-highlight:last-child {
      margin-right: 16px;
    }
    .country-highlights__grid[data-mobile-carousel] .country-highlight__media {
      margin: 0 0 16px;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 4px;
    }
    .country-highlights__grid[data-mobile-carousel] .country-highlight__media img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .country-highlights__grid[data-mobile-carousel] .country-highlight__num {
      font-size: 22px;
      margin-bottom: 8px;
    }
    .country-highlights__grid[data-mobile-carousel] .country-highlight__copy {
      font-size: 15px;
      line-height: 1.55;
    }

    /* ---- Regions as pill-tabbed swipe ---- */
    .country-where__regions[data-mobile-carousel] {
      display: block !important;
      position: relative;
    }
    .country-where__regions[data-mobile-carousel] .country-where__media-col,
    .country-where__regions[data-mobile-carousel] .country-where__body-col {
      display: none;
    }
    .country-where__regions[data-mobile-carousel] .country-where__cardtrack {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 8px 16px 24px;
      margin: 0 -16px;
      width: 100vw;
      max-width: 100vw;
      box-sizing: border-box;
      scroll-padding-left: 16px;
    }
    .country-where__regions[data-mobile-carousel] .country-where__cardtrack::-webkit-scrollbar { display: none; }
    .country-where__regions[data-mobile-carousel] .country-where__card {
      flex: 0 0 calc(100vw - 80px);
      max-width: calc(100vw - 80px);
      scroll-snap-align: start;
      background: var(--cream);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    .country-where__regions[data-mobile-carousel] .country-where__card:last-child {
      margin-right: 16px;
    }
    .country-where__regions[data-mobile-carousel] .country-where__card-media {
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 4px;
      margin: 0 0 16px;
    }
    .country-where__regions[data-mobile-carousel] .country-where__card-media img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .country-where__regions[data-mobile-carousel] .country-where__card-eyebrow {
      font-family: 'Jost', sans-serif;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--amber);
      margin: 0 0 8px;
    }
    .country-where__regions[data-mobile-carousel] .country-where__card-name {
      font-family: var(--serif);
      font-size: 26px;
      line-height: 1.18;
      color: var(--charcoal);
      margin: 0 0 12px;
      font-weight: 400;
      letter-spacing: 0.005em;
    }
    .country-where__regions[data-mobile-carousel] .country-where__card-copy {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.55;
      color: var(--charcoal);
      margin: 0;
    }

    /* Soft right-edge fade affordance for all mobile carousels */
    .mobile-carousel-wrap {
      position: relative;
    }
    .mobile-carousel-wrap::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 24px;
      width: 24px;
      background: linear-gradient(to right, transparent, var(--cream));
      pointer-events: none;
      opacity: 1;
      transition: opacity .2s ease;
    }
    .mobile-carousel-wrap.is-end::after { opacity: 0; }

    /* Tighten pull quote on mobile (saves ~250px) */
    .country-pullquote {
      padding: clamp(56px, 10vw, 80px) var(--gutter) !important;
    }
  }

  /* Hide mobile-only region cardtrack on desktop */
  @media (min-width: 761px) {
    .country-where__cardtrack { display: none !important; }
    /* Hide the lion-walking signature band on desktop (kept on mobile as a scroll breather) */
    .country-band { display: none !important; }
  }

/* FIRST-IMAGE HIDE MOBILE */
@media (max-width: 768px) {
  .country-intro__media-col { display: none !important; }
  .country-intro__media { display: none !important; }
}
/* WHERE CARDTRACK INSET FIX MOBILE */
@media (max-width: 768px) {
  .country-where__cardtrack { margin: 0 !important; }
}
/* CONTACT-THREE BTN EQUALISE MOBILE */
@media (max-width: 768px) {
  .contact-three__btn {
    padding: 16px 18px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
}

/* PRICING CHARCOAL CARDS + CENTRE — 2026-06-04 */
.country-cost__band {
  background: #36454F !important;
  color: var(--cream) !important;
  border-radius: 4px !important;
  padding: 32px 28px !important;
  text-align: center !important;
  transition: transform 250ms ease, box-shadow 250ms ease, opacity 700ms ease;
  opacity: 0;
  transform: translateY(20px);
}

.country-cost__band.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.country-cost__band:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(54,69,79,0.18);
}

.country-cost__band .country-cost__tier {
  color: #C8873A !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin-bottom: 12px !important;
}

.country-cost__band .country-cost__price {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--cream) !important;
  font-size: 28px !important;
  margin: 0 0 8px !important;
}

.country-cost__band .country-cost__unit {
  font-style: italic !important;
  color: rgba(252, 246, 233, 0.7) !important;
  font-size: 13px !important;
  margin: 0 0 18px !important;
}

.country-cost__band .country-cost__note {
  color: var(--cream) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* SIMPLIFIED BOTTOM CTA — 2026-06-17
   Replaces the three-card contact block with a single primary pill + 
   secondary text links for email/WhatsApp. */
.country-final__cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.country-final__primary {
  /* Inherits .pill styles. Slight bump to feel like the close. */
  font-size: 14px;
  letter-spacing: 0.16em;
  padding: 18px 36px;
}
.country-final__alt {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(252, 246, 233, 0.82);
}
.country-final__alt a {
  color: var(--cream, #FCF6E9);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(252, 246, 233, 0.45);
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
.country-final__alt a:hover,
.country-final__alt a:focus {
  text-decoration-color: rgba(252, 246, 233, 1);
  color: #fff;
}
.country-final__alt-sep {
  display: inline-block;
  margin: 0 8px;
  color: rgba(252, 246, 233, 0.4);
}
@media (max-width: 720px) {
  .country-final__primary {
    font-size: 13px;
    padding: 16px 28px;
  }
  .country-final__alt {
    font-size: 13px;
    line-height: 1.8;
  }
  .country-final__alt-sep {
    margin: 0 6px;
  }
}

/* MIDSCROLL FLOATING PILL — give the gold pill a soft halo so it reads
   against any background (added 2026-06-17 with pill colour standardisation) */
.midscroll-pill .pill {
  box-shadow: 0 12px 28px -10px rgba(54, 69, 79, 0.35);
}
.midscroll-pill .pill:hover {
  box-shadow: 0 14px 32px -10px rgba(54, 69, 79, 0.45);
}

/* ===================================================================
   HIGHLIGHT PARALLAX GEOMETRY FIX  (added 2026-08-01, v1.2.61)
   Reported as "images render strange on iPad" on the country pages.

   The bug: .country-highlight__media figures carry data-parallax-speed="0.30".
   country-page.js translates the image by (progress - 0.5) * height * speed,
   i.e. +/- 15% of the frame height (about 40px at iPad portrait), but it only
   expands the image to min-height:120%, and the image is top-aligned. So the
   20% of slack all sits BELOW the frame. Any positive translate slides the
   image down and exposes the #1a1f24 backing as a dark band across the top of
   the picture, growing to ~40px (15% of the card) as the card scrolls up.

   The fix: 34% slack, centred with a -17% top margin, so the image can travel
   the full +/-15% in either direction and still cover the frame. Scoped to
   761px and up because the mobile carousel disables the transform below that.
   The backing colour also moves from near-black to a warm neutral so any
   lazy-loading gap reads as paper rather than a black box.
   =================================================================== */
.country-highlight__media {
  background: #E6E1D8;
}
@media (min-width: 761px) {
  .country-highlight__media img {
    min-height: 134% !important;
    margin-top: -17% !important;
  }
}