@charset "UTF-8";
/* ===================================================================
   Country pages — layout layer (handle: ts-country, after oh-ds)
   -------------------------------------------------------------------
   Second design pass. The reference is a Kensington-Tours-style
   country page; the structure is taken from it and the palette is
   NOT. The reference is purple and lavender. We are forest green
   (--ac #124933) and gold (--gold #EAB924), with Outfit and Cormorant
   Garamond, and the house heading pattern — an ink/green line with a
   gold script line under it, mirroring the logo.

   GOLD IS THE FLOURISH, NEVER BODY TEXT ON WHITE. #EAB924 on white is
   about 2:1, so it appears here only as large display type, as a rule
   or dot, or on the dark green band. --gold-dark is used where gold
   has to be legible at text size.

   Everything is prefixed .ts-ctry- and scoped under .ts-ctry, so it
   cannot reach the gallery / experiences / related sections that are
   still styled by dest.css.

   NOTE ON WIDTH: ds.css's .oh-shell reads var(--shell), and although
   style.css now defines it, .ts-ctry-shell keeps its own measurement
   so the new sections share one gutter with each other rather than
   with the explorer.
   =================================================================== */

.ts-ctry{
  /* The site header on an inner page: sticky, so it overlays content once
     pinned. country.js measures the real thing and overwrites this; the
     literals are the no-JS answer and come from .site-nav .wrap in
     style.css (88px, 76px under 1180px). */
  --ts-hd:88px;
  --ts-tab:58px;
  --ts-max:1240px;
  --ts-gap:clamp(18px,2.4vw,34px);
  --ts-card:#fff;
  --ts-soft:#F2EFE9;
  --ts-r:16px;
  --ts-r-lg:22px;
  --ts-shadow:0 1px 2px rgba(58,46,37,.05), 0 14px 38px rgba(58,46,37,.09);
  --ts-shadow-lg:0 4px 10px rgba(58,46,37,.07), 0 30px 70px rgba(58,46,37,.14);
  background:#fff;
}

@media (max-width:1180px){ .ts-ctry{ --ts-hd:76px } }

.ts-ctry-shell{
  width:100%;
  max-width:var(--ts-max);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}

.ts-ctry-sec{ position:relative; padding-block:clamp(44px,6vw,86px) }
.ts-ctry-sec--tint{ background:var(--ts-soft) }

/* Anchors have to clear BOTH the sticky header and the sticky tab bar.
   style.css sets a global [id]{scroll-margin-top} that is too small here. */
.ts-ctry-anchor{ scroll-margin-top:calc(var(--ts-hd) + var(--ts-tab) + 14px) }


/* ------------------------------------------------------------------
   0. WHY SO MANY SELECTORS START `.ts-ctry `
   ------------------------------------------------------------------
   Elementor's kit stylesheet (post-9.css) ships `.elementor-kit-9 a
   { color:#124F3E }` and it is enqueued AFTER this file. That is
   specificity (0,1,1), which beats every single-class colour rule here
   — so `.ts-ctry-btn{color:#fff}` lost and the hero's primary button
   computed dark green on dark green. Measured on /kenya/: eight rules
   were being overridden, including both the sticky tab bar and the
   "Open the trip planner" link on the dark band.

   Qualifying by the page root takes each of them to (0,2,0) and they
   win on specificity rather than on load order. Every `color` rule in
   this file that can land on an <a> carries the prefix for that reason.
   Do not strip it.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   1. SHARED TYPE — the house pattern
   ------------------------------------------------------------------
   Kicker in green caps, then a heading whose second line is the gold
   Cormorant script. Same gesture as .kick / .h2 .sf in style.css,
   rebuilt here at this page's scale rather than borrowed, because
   style.css is not ours to touch.
   ------------------------------------------------------------------ */

.ts-ctry-kick{
  margin:0 0 10px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ac);
}
.ts-ctry-kick--ink{ color:var(--muted) }
.ts-ctry-kick--on{ color:var(--gold) }

.ts-ctry-h2{
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.08;
  color:var(--ink);
  text-wrap:balance;
}
.ts-ctry-h2--on{ color:#fff }

/* The gold script line. Display size only — never at text size on white. */
.ts-ctry-sf{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:1.06em;
  line-height:1.02;
  color:var(--gold);
}

.ts-ctry-lead{
  margin:14px 0 0;
  max-width:62ch;
  font-size:16px;
  line-height:1.72;
  color:var(--muted);
}

.ts-ctry-head{ margin-bottom:clamp(24px,3vw,40px) }
.ts-ctry-head--rail{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--ts-gap) }
/* The reference centres the "Ideas for your trip" heading block. */
.ts-ctry-head--mid{ text-align:center }
.ts-ctry-head--mid .ts-ctry-lead{ margin-inline:auto }

/* --- buttons ------------------------------------------------------- */

.ts-ctry .ts-ctry-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px;
  border:1px solid var(--ac); border-radius:12px;
  background:var(--ac); color:#fff;
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.ts-ctry-btn svg{ width:18px; height:18px; flex:none }
.ts-ctry .ts-ctry-btn:hover{ background:var(--ac-dark,#0C3323); border-color:var(--ac-dark,#0C3323); color:#fff }
.ts-ctry .ts-ctry-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.ts-ctry .ts-ctry-btn--ghost{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.45);
  color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ts-ctry .ts-ctry-btn--ghost:hover{ background:rgba(255,255,255,.26); border-color:#fff; color:#fff }

.ts-ctry .ts-ctry-btn--line{
  min-height:44px; padding:0 16px;
  background:transparent; border-color:var(--line); color:var(--ac);
  font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.ts-ctry .ts-ctry-btn--line:hover{ background:var(--ac); border-color:var(--ac); color:#fff }

/* On a light section the ghost button has to read against cream. */
.ts-ctry .ts-ctry-sec .ts-ctry-btn--ghost{
  background:#fff; border-color:var(--line); color:var(--ac);
}
.ts-ctry .ts-ctry-sec .ts-ctry-btn--ghost:hover{ background:var(--ac); border-color:var(--ac); color:#fff }

/* ------------------------------------------------------------------
   2. HERO
   ------------------------------------------------------------------
   Full-bleed photograph; a dark translucent panel bottom-left over it;
   the factual information card to its right (the reference puts a
   destination expert there — we have no such record); a column of dots
   at the right edge for the additional photographs; and the shared
   Africa basemap behind the whole composition at low opacity.

   THE CAROUSEL IS PURE CSS. The radios are real inputs kept in the
   accessibility tree and kept focusable, the labels are the dots, and
   the :checked sibling selectors below swap the frame. Nothing here
   needs JavaScript, so nothing here breaks without it.
   ------------------------------------------------------------------ */

.ts-ctry-hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(520px,72vh,760px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:var(--ac-dark,#0C3323);
  overflow:hidden;
}

.ts-ctry-hero__stage{ position:absolute; inset:0; z-index:0; overflow:hidden }

/*
 * The descendant selector is not decoration. This site ships lazysizes, whose
 * own `.lazyloaded{opacity:1}` is injected inline into <head> and is a single
 * class — exactly as specific as `.ts-ctry-hero__img` and later in the
 * cascade, so it won. Measured: all five frames computed to opacity 1 and the
 * carousel showed the last image on top of the first. Qualifying by the stage
 * takes this to (0,2,0) and it wins on specificity rather than on order.
 */
.ts-ctry-hero__stage > .ts-ctry-hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
}
/* The first frame is the default so a no-JS, no-:checked-support render
   still shows a photograph rather than a black box. */
.ts-ctry-hero__stage > .ts-ctry-hero__img:first-of-type{ opacity:1 }

.ts-ctry-hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(12,51,35,.92) 0%, rgba(12,51,35,.55) 38%, rgba(12,51,35,.12) 70%, rgba(12,51,35,.42) 100%);
}

/* The continent silhouette. Decorative, hidden from assistive tech. */
.ts-ctry-hero__map{
  position:absolute;
  right:-6%;
  bottom:-14%;
  width:min(56%,620px);
  height:auto;
  pointer-events:none;
  opacity:.16;
}
.ts-ctry-hero__land path{ fill:#fff; stroke:none }
.ts-ctry-hero__halo{ fill:var(--gold); opacity:.5 }
.ts-ctry-hero__dot{ fill:var(--gold) }

/* The radios themselves: off-screen, never display:none, so they keep
   their place in the tab order and the arrow keys still move between
   them the way a radio group is meant to. */
.ts-ctry-hero__r{
  position:absolute; width:1px; height:1px;
  margin:0; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.ts-ctry-hero__in{
  position:relative; z-index:2;
  width:100%;
  padding-block:clamp(18px,3vw,30px) clamp(26px,4vw,52px);
  display:flex; flex-direction:column;
  flex:1 1 auto;
}

/* --- breadcrumb over the photograph -------------------------------- */

.ts-ctry-crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0; padding:0; list-style:none;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.ts-ctry-crumbs li{ display:flex; align-items:center; gap:10px }
.ts-ctry-crumbs li + li::before{ content:"/"; color:rgba(255,255,255,.45); font-weight:400 }
/* 44px even though the text is 11px: these are the smallest touch targets
   on the page and they must still be reachable with a thumb. */
.ts-ctry .ts-ctry-crumbs a,
.ts-ctry-crumbs [aria-current]{ display:inline-flex; align-items:center; min-height:44px }
.ts-ctry .ts-ctry-crumbs a{ color:rgba(255,255,255,.78); text-decoration:none }
.ts-ctry .ts-ctry-crumbs a:hover{ color:var(--gold) }
.ts-ctry-crumbs [aria-current]{ color:#fff }
.ts-ctry .ts-ctry-crumbs a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* --- panel + aside ------------------------------------------------- */

.ts-ctry-hero__grid{
  margin-top:auto;
  display:grid;
  gap:var(--ts-gap);
  align-items:end;
}
@media (min-width:1040px){
  .ts-ctry-hero__grid{ grid-template-columns:minmax(0,1fr) 340px }
}

.ts-ctry-hero__panel{
  min-width:0;
  max-width:min(100%,640px);
  padding:clamp(22px,3vw,34px);
  border-radius:var(--ts-r-lg);
  background:rgba(12,51,35,.72);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(8,28,20,.38);
  color:#fff;
}

.ts-ctry-hero__panel .ts-ctry-kick{ color:var(--gold) }

.ts-ctry-hero__title{
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(40px,6vw,68px);
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
}
/* The gold script line under the wordmark, exactly the logo's gesture. */
.ts-ctry-hero__title .ts-ctry-sf{ margin-top:2px; font-size:.52em; letter-spacing:.01em }

.ts-ctry-hero__lede{
  margin:16px 0 0;
  max-width:52ch;
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.88);
}

.ts-ctry-hero__acts{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:22px 0 0;
}

.ts-ctry-live{
  margin:12px 0 0; min-height:1.2em;
  font-size:13px; color:rgba(255,255,255,.85);
}

/* --- the factual aside (the reference's expert slot) ---------------- */

.ts-ctry-aside{
  min-width:0;
  padding:clamp(18px,2vw,24px);
  border-radius:var(--ts-r-lg);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--ts-shadow-lg);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.ts-ctry-aside__h{
  margin:0 0 14px;
  font-family:var(--sans);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ac);
}

.ts-ctry-aside__map{
  position:relative;
  margin-bottom:14px;
  border-radius:var(--ts-r);
  background:var(--ts-soft);
  padding:10px;
}
.ts-ctry-aside__map svg{ display:block; width:100%; height:112px }
.ts-ctry-aside__land path{ fill:#E1DCD2; stroke:#CFC8BC; stroke-width:2 }
.ts-ctry-aside__halo{ fill:var(--ac); opacity:.18 }
.ts-ctry-aside__dot{ fill:var(--ac); stroke:#fff; stroke-width:5 }
.ts-ctry-aside__maplab{
  position:absolute; left:14px; bottom:12px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ac);
}

.ts-ctry-aside__rows{ margin:0 }
.ts-ctry-aside__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0;
  border-top:1px solid var(--line);
}
.ts-ctry-aside__row:first-child{ border-top:0 }
.ts-ctry-aside__row dt{ font-size:12.5px; color:var(--muted); line-height:1.4 }
.ts-ctry-aside__row dd{ margin:0; font-size:15.5px; font-weight:700; color:var(--ink); white-space:nowrap }
.ts-ctry-aside__note{
  margin:12px 0 0;
  font-size:11.5px; line-height:1.55; color:var(--muted);
}

/* --- the carousel dots --------------------------------------------- */

/* A direct child of the section, so the :checked rules below stay one
   sibling hop plus one child deep — see the note in dest-hero.php.
   `right` lines the column up with the shell's own gutter once the shell
   stops filling the viewport, and falls back to the viewport edge below
   that width. */
.ts-ctry-hero__dots{
  position:absolute;
  right:max(clamp(10px,2.4vw,26px), calc((100% - var(--ts-max)) / 2 + clamp(16px,4vw,32px)));
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:flex; flex-direction:column; gap:4px;
}
/* 44x44 hit area around an 11px pip, so the target can be thumb-sized
   without the mark growing with it. The pip is a real element rather than
   a ::before — see the note in dest-hero.php. */
.ts-ctry-hero__dot-lab{
  position:relative;
  display:block; width:44px; height:44px;
  cursor:pointer;
}
.ts-ctry-hero__pip{
  position:absolute; left:50%; top:50%;
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  background:transparent;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.ts-ctry-hero__dot-lab:hover .ts-ctry-hero__pip{ background:rgba(255,255,255,.55) }

/* Five :checked rules, one per frame. Five is the cap page-country.php
   applies to the photo pool, so a sixth cannot occur. */
.ts-ctry-hero__r:nth-of-type(1):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:nth-of-type(1),
.ts-ctry-hero__r:nth-of-type(2):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:nth-of-type(2),
.ts-ctry-hero__r:nth-of-type(3):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:nth-of-type(3),
.ts-ctry-hero__r:nth-of-type(4):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:nth-of-type(4),
.ts-ctry-hero__r:nth-of-type(5):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:nth-of-type(5){ opacity:1 }

/* …and the first frame steps aside the moment any other one is chosen,
   otherwise it would keep painting under the new one. */
.ts-ctry-hero__r:nth-of-type(2):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:first-of-type,
.ts-ctry-hero__r:nth-of-type(3):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:first-of-type,
.ts-ctry-hero__r:nth-of-type(4):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:first-of-type,
.ts-ctry-hero__r:nth-of-type(5):checked ~ .ts-ctry-hero__stage > .ts-ctry-hero__img:first-of-type{ opacity:0 }

.ts-ctry-hero__r:nth-of-type(1):checked ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(1) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(2):checked ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(2) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(3):checked ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(3) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(4):checked ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(4) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(5):checked ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(5) .ts-ctry-hero__pip{
  background:var(--gold); border-color:var(--gold); transform:scale(1.25);
}

/* Focus has to be visible on the dot, not on the off-screen radio. */
.ts-ctry-hero__r:nth-of-type(1):focus-visible ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(1) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(2):focus-visible ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(2) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(3):focus-visible ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(3) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(4):focus-visible ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(4) .ts-ctry-hero__pip,
.ts-ctry-hero__r:nth-of-type(5):focus-visible ~ .ts-ctry-hero__dots > .ts-ctry-hero__dot-lab:nth-child(5) .ts-ctry-hero__pip{
  outline:2px solid var(--gold); outline-offset:4px;
}

/* No photographs at all: the panel still needs a floor to sit on. */
.ts-ctry-hero--flat{ min-height:clamp(420px,52vh,560px) }

/* ------------------------------------------------------------------
   3. STICKY SECTION BAR
   ------------------------------------------------------------------
   `top` is the measured header height. country.js writes --ts-hd off
   .site-nav's offsetHeight whenever the computed position is fixed OR
   sticky, which is what the inner-page header is; the literal above is
   the no-JS answer.
   ------------------------------------------------------------------ */

/* The anchor offset on these pages is the header PLUS the sticky tab bar —
   the tabs are what the anchors are clicked in, and a target that lands under
   them is a target you cannot see.

   Measured, not assumed: .site-nav is sticky at top:0 and 88px tall, and this
   bar is sticky at top:88px and 59px tall, so 147px of the viewport is
   already spoken for once the page has moved. 160 leaves 13px of air under
   the bar. Below 1180 the header is 76px (style.css) and --ts-hd follows it,
   so the same sum gives 148. */
html.ts-smooth{ scroll-padding-top:160px }
@media (max-width:1180px){ html.ts-smooth{ scroll-padding-top:148px } }

.ts-ctry-tabs{
  position:sticky; top:var(--ts-hd); z-index:30;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.ts-ctry-tabs__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--ts-tab);
}
.ts-ctry-tabs__list{
  display:flex; align-items:center; gap:2px;
  margin:0; padding:0; list-style:none;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.ts-ctry-tabs__list::-webkit-scrollbar{ display:none }
.ts-ctry-tabs__list > li{ flex:0 0 auto }

.ts-ctry .ts-ctry-tab{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--ts-tab); padding:0 14px;
  font-size:13.5px; font-weight:600; color:var(--muted);
  text-decoration:none; white-space:nowrap;
}
.ts-ctry .ts-ctry-tab:hover{ color:var(--ink); background:var(--ts-soft) }
.ts-ctry .ts-ctry-tab:focus-visible{ outline:2px solid var(--ac); outline-offset:-2px }
.ts-ctry-tab__n{
  display:inline-grid; place-items:center;
  min-width:22px; height:20px; padding:0 6px;
  border-radius:999px; background:var(--ts-soft);
  font-size:11px; font-weight:700; color:var(--muted);
}
.ts-ctry .ts-ctry-tab.is-on{ color:var(--ac) }
.ts-ctry .ts-ctry-tab.is-on .ts-ctry-tab__n{ background:var(--ac-soft,#E6EDE9); color:var(--ac) }
.ts-ctry .ts-ctry-tab.is-on::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0;
  height:2px; background:var(--gold); border-radius:2px;
}

.ts-ctry .ts-ctry-tabs__cta{
  display:none; align-items:center;
  min-height:44px; padding:0 18px;
  border-radius:10px; background:var(--ac); color:#fff;
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.ts-ctry .ts-ctry-tabs__cta:hover{ background:var(--ac-dark,#0C3323); color:#fff }
.ts-ctry .ts-ctry-tabs__cta:focus-visible{ outline:2px solid var(--ac); outline-offset:3px }
@media (min-width:960px){ .ts-ctry .ts-ctry-tabs__cta{ display:inline-flex } }

/* ------------------------------------------------------------------
   4. IDEAS FOR YOUR TRIP — filter rail + the three-across .lg grid
   ------------------------------------------------------------------
   THE CARD ITSELF IS NOT TOUCHED AND ITS CSS IS NOT FORKED. The card
   is `.lg` out of style.css §12 — the same component the homepage
   packages band uses, which the owner has signed off. style.css is
   untouched; everything below either lays out the track the card sits
   in, or adds a class the card did not have (`.ts-lg__excerpt`).

   ONE SPECIFICITY NOTE. style.css sizes `.lgrid` at four across with
   its own `@media` steps, all at (0,1,0). This file loads after it, so
   an equal-specificity rule here would win on source order alone —
   which is exactly the kind of win that breaks the moment somebody
   reorders an enqueue. The grid rules below are qualified with
   `.ts-ctry` to take them to (0,2,0) so they win on specificity. Do
   not strip the prefix.
   ------------------------------------------------------------------ */

/* --- the two-column shell: rail | grid ----------------------------- */

.ts-ideas{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.2vw,30px);
  align-items:start;
}

@media (min-width:1040px){
  .ts-ideas{ grid-template-columns:minmax(0,268px) minmax(0,1fr) }
  /* A country whose facets would all be single-valued renders no rail at
     all, and then the grid takes the whole shell. */
  .ts-ideas--norail{ grid-template-columns:minmax(0,1fr) }
}

.ts-ideas__main{ min-width:0 }

/* ------------------------------------------------------------------
   4a. THE FILTER RAIL
   ------------------------------------------------------------------
   It is a real <form method="get">. Nothing here is a behaviour; the
   checkbox at the top is the narrow-screen disclosure and the ticks
   are the filter itself, both of which submit and reload with no
   scripting whatsoever.
   ------------------------------------------------------------------ */

.ts-rail{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--ts-r-lg);
  box-shadow:var(--ts-shadow);
}

@media (min-width:1040px){
  /*
   * Twenty-one experiences plus thirteen parks plus fourteen lengths is
   * taller than any viewport, so the rail is the scroll container and
   * the option lists are not — one scroller, never two nested. `top`
   * clears the sticky header AND the sticky section bar, which is what
   * --ts-hd is measured for by country.js.
   */
  .ts-rail{
    position:sticky;
    top:calc(var(--ts-hd) + var(--ts-tab) + 14px);
    max-height:calc(100vh - var(--ts-hd) - var(--ts-tab) - 28px);
    overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain;
  }
}

/* --- the narrow-screen disclosure ---------------------------------- */

/*
 * A checkbox and not a <details>, because the rail has to be forced OPEN
 * from a media query on wide screens and there is no reliable way to open
 * a <details> from CSS — newer engines hide the closed content through
 * ::details-content rather than through `display`, so `display:contents`
 * on the <details> is not a dependable override. It carries no `name`, so
 * it never reaches the query string, and it is moved off-screen rather
 * than display:none so it keeps its place in the tab order.
 */
.ts-rail__switch{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  white-space:nowrap;
}

.ts-ctry .ts-rail__switchlab{
  display:flex; align-items:center; gap:10px;
  min-height:52px; padding:0 16px;
  border-radius:var(--ts-r-lg);
  color:var(--ink); font-size:15px; font-weight:600; cursor:pointer;
}
.ts-rail__switchlab > svg{ width:18px; height:18px; color:var(--ac); flex:none }
.ts-rail__switchlab > span:first-of-type{ margin-right:auto }
.ts-rail__switchchev{
  width:18px; height:18px; color:var(--ac); flex:none;
  transition:transform .2s ease;
}
.ts-rail__switch:checked ~ .ts-rail__switchlab .ts-rail__switchchev{ transform:rotate(180deg) }
.ts-rail__switch:focus-visible ~ .ts-rail__switchlab{ outline:2px solid var(--ac); outline-offset:2px }

.ts-rail__badge{
  display:inline-grid; place-items:center;
  min-width:24px; height:24px; padding:0 7px;
  border-radius:999px; background:var(--ac); color:#fff;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* Closed by default on a narrow screen… */
.ts-rail__body{ display:none; padding:0 16px 16px }
.ts-rail__switch:checked ~ .ts-rail__body{
  display:block;
  max-height:70vh; overflow-y:auto; overscroll-behavior:contain;
}

/* …and unconditionally open once there is a column for it. */
@media (min-width:1040px){
  .ts-ctry .ts-rail__switchlab{ display:none }
  .ts-rail__body,
  .ts-rail__switch:checked ~ .ts-rail__body{
    display:block; max-height:none; overflow:visible; padding:18px;
  }
}

/* --- rail head ----------------------------------------------------- */

/*
 * There is no heading, no preamble and no note about how OR and AND compose.
 * The owner cut all of it: the rail is a list of one- and two-word headings,
 * and the only chrome above it is "Clear all", which appears only when there
 * is something to clear. The result count and the active-filter chips live
 * beside the grid, not in here.
 */
.ts-rail__head{ margin:0; display:flex; justify-content:flex-end }
.ts-ctry .ts-rail__clear{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:13px; font-weight:600; color:var(--gold-dark); text-decoration:underline;
  text-underline-offset:3px;
}
.ts-ctry .ts-rail__clear:hover{ color:var(--ac) }

/* --- a facet group ------------------------------------------------- */

.ts-rail__set{
  margin:16px 0 0; padding:14px 0 0;
  border:0; border-top:1px solid var(--line);
  min-width:0;   /* a <fieldset> defaults to min-inline-size:min-content */
}
.ts-rail__set:first-of-type{ margin-top:0; padding-top:0; border-top:0 }
.ts-rail__legend{
  display:flex; align-items:center; gap:8px;
  padding:0; margin:0 0 8px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ac);
}

.ts-rail__opts{ margin:0; padding:0; list-style:none }

/* ------------------------------------------------------------------
   4a-ii. TRIP LENGTH — a min/max pair
   ------------------------------------------------------------------
   The two <select>s are the filter and are the only named controls.
   The slider carries no `name`, ships `hidden`, and writes back into
   the selects — so with scripting off the selects are what the reader
   uses, and with scripting on they are still what gets submitted.
   ------------------------------------------------------------------ */

.ts-range__fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.ts-range__f{ display:block; min-width:0 }
.ts-range__flab{
  display:block; margin:0 0 4px;
  font-size:12px; color:var(--muted);
}

/*
 * IT IS AN AXIS, NOT A LIST.
 *
 * One horizontal line running from the shortest trip this country publishes
 * to the longest, with BOTH ENDS LABELLED underneath — that labelling is what
 * makes it read as a measured line rather than as a slider that happens to
 * have two knobs. The reading between the handles is printed above it and is
 * rewritten on every move.
 *
 * Colours are the brand's own division of labour: the unfilled line is the
 * line colour, the SELECTED span is gold — the same hairline gold as the rule
 * on the business card and the letterhead — and the handles are forest green,
 * because green is structure and gold is the flourish.
 *
 * Compactness is the point of the change: this replaces a column of fourteen
 * checkboxes (measured at 616px tall on /uganda/) with about 82px.
 */
.ts-range__out{
  margin:0 0 6px;
  font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
  line-height:1.3;
}

/*
 * GEOMETRY. The thumb is 44px wide so the tap target clears the floor, which
 * means the browser keeps its CENTRE between 22px and (width - 22px) — it
 * never reaches the element's own edges. The rail and the fill are therefore
 * inset by exactly that 22px, and the fill is positioned from a unitless
 * fraction so it lands under the thumb centre rather than 22px away from it.
 * Getting this wrong is invisible in the middle of the track and obvious at
 * both ends.
 */
.ts-range__track{ position:relative; height:44px }
.ts-range__rail,
.ts-range__fill{
  position:absolute; top:50%; height:4px; border-radius:999px;
  transform:translateY(-50%); pointer-events:none;
}
.ts-range__rail{ left:22px; right:22px; background:var(--line) }
.ts-range__fill{
  left:calc(22px + var(--ts-lof,0) * (100% - 44px));
  right:calc(22px + var(--ts-hir,0) * (100% - 44px));
  background:var(--gold);
  transition:left .12s ease, right .12s ease;
}

/* The axis end-stops: the brand's gold hairline, turned on its side. They
   mark where the line starts and stops, which is what the two labels below
   are naming. */
.ts-range__track::before,
.ts-range__track::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:2px; height:14px; border-radius:1px; background:var(--gold);
  pointer-events:none;
}
.ts-range__track::before{ left:22px }
.ts-range__track::after{ right:22px }

.ts-range__in{
  position:absolute; left:0; top:0;
  width:100%; height:44px; margin:0; padding:0;
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0;
  pointer-events:none;   /* re-enabled on the thumbs below */
}
.ts-range__in:focus{ outline:none }
.ts-range__in--lo{ z-index:2 }
.ts-range__in--hi{ z-index:3 }
/* When the handles meet at the top of the scale the lower one would be buried
   under the upper one and become ungrabbable, so it is raised. */
.ts-range__in--lo.is-top{ z-index:4 }

.ts-range__in::-webkit-slider-runnable-track{ height:44px; background:transparent; border:0 }
.ts-range__in::-moz-range-track{ height:44px; background:transparent; border:0 }

/*
 * A 44x44 hit area with an 18px forest-green disc painted inside it. The disc
 * is drawn with a gradient rather than a background colour precisely so the
 * transparent margin around it stays part of the target — a 18px thumb would
 * be an 18px tap target.
 */
.ts-range__in::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  pointer-events:auto;
  width:44px; height:44px; border:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--ac) 0 9px, #fff 9px 11px, rgba(0,0,0,0) 11px);
  filter:drop-shadow(0 2px 5px rgba(58,46,37,.28));
  cursor:pointer;
}
.ts-range__in::-moz-range-thumb{
  pointer-events:auto;
  width:44px; height:44px; border:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--ac) 0 9px, #fff 9px 11px, rgba(0,0,0,0) 11px);
  filter:drop-shadow(0 2px 5px rgba(58,46,37,.28));
  cursor:pointer;
}
/* Keyboard focus has to be visible on the HANDLE; the input itself is a
   transparent 44px strip and an outline on it would frame the whole axis. */
.ts-range__in:focus-visible::-webkit-slider-thumb{
  background:radial-gradient(circle at 50% 50%, var(--ac) 0 9px, #fff 9px 11px, var(--gold) 11px 14px, rgba(0,0,0,0) 14px);
}
.ts-range__in:focus-visible::-moz-range-thumb{
  background:radial-gradient(circle at 50% 50%, var(--ac) 0 9px, #fff 9px 11px, var(--gold) 11px 14px, rgba(0,0,0,0) 14px);
}

/* The two end labels. These are the axis. */
.ts-range__ends{
  display:flex; justify-content:space-between; gap:10px;
  margin:0; padding:0 2px;
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
}

/* The box stays in the accessibility tree and stays focusable; it is the
   label beside it that is painted. Never display:none. */
.ts-rail__box{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  white-space:nowrap;
}
.ts-rail__opt{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:2px 8px;
  border-radius:12px; cursor:pointer;
}
.ts-rail__opt:hover{ background:var(--ts-soft) }
.ts-rail__box:focus-visible + .ts-rail__opt{ outline:2px solid var(--ac); outline-offset:1px }

.ts-rail__tick{
  display:grid; place-items:center; flex:none;
  width:20px; height:20px;
  border:1.5px solid var(--line-2,#D9D2C8); border-radius:6px;
  background:#fff;
  transition:background .15s ease, border-color .15s ease;
}
.ts-rail__tick svg{ width:12px; height:12px; color:#fff; opacity:0 }
.ts-rail__box:checked + .ts-rail__opt .ts-rail__tick{ background:var(--ac); border-color:var(--ac) }
.ts-rail__box:checked + .ts-rail__opt .ts-rail__tick svg{ opacity:1 }
.ts-rail__box:checked + .ts-rail__opt .ts-rail__lab{ font-weight:600; color:var(--ac) }

.ts-rail__lab{
  flex:1 1 auto; min-width:0;
  font-size:14px; line-height:1.4; color:var(--ink);
}
.ts-rail__c{
  flex:none;
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
}

/*
 * An option that would return nothing in combination with the OTHER
 * groups. The input carries `disabled`, so this is only ever the paint
 * for a state the markup already enforces — and a TICKED option is never
 * disabled, because a disabled checkbox is not submitted and that would
 * throw the reader's own filter away on the next request.
 */
.ts-rail__opt.is-dead{ opacity:.42; cursor:not-allowed }
.ts-rail__opt.is-dead:hover{ background:none }

/* --- sort, inside the same form ------------------------------------ */

.ts-rail__set--sort{ display:block }
.ts-rail__selwrap{ position:relative; display:block }
.ts-rail__sel{
  appearance:none; -webkit-appearance:none;
  width:100%; min-height:48px; padding:0 40px 0 14px;
  border:1px solid var(--line); border-radius:12px;
  background:#fff; color:var(--ink);
  font-family:var(--sans); font-size:14px; font-weight:600;
  cursor:pointer;
}
.ts-rail__sel:focus-visible{ outline:2px solid var(--ac); outline-offset:2px }
.ts-rail__selchev{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ac); pointer-events:none;
}

/* --- apply / reset ------------------------------------------------- */

/*
 * Sticky to the bottom of the rail's own scroll box, so it is reachable
 * without scrolling twenty-one experiences back up first. The button is
 * the ONLY way the no-JS reader commits a change, so it must never be
 * hidden by script — country.js leaves it alone and only auto-submits
 * on the sort <select>.
 */
.ts-rail__acts{
  position:sticky; bottom:0;
  display:flex; align-items:center; gap:10px;
  margin:16px 0 0; padding:12px 0 0;
  border-top:1px solid var(--line);
  background:#fff;
}
.ts-ctry .ts-rail__apply{
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 18px;
  border:1px solid var(--ac); border-radius:12px;
  background:var(--ac); color:#fff;
  font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer;
}
.ts-ctry .ts-rail__apply:hover{ background:var(--ac-dark,#0C3323) }
.ts-ctry .ts-rail__apply:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* ------------------------------------------------------------------
   4b. RESULT BAR — the count and the active filters
   ------------------------------------------------------------------ */

.ts-ideas__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin:0 0 clamp(14px,1.6vw,20px);
}
.ts-ideas__count{
  margin:0; flex:0 0 auto;
  font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.ts-ideas__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.ts-ctry .ts-ideas__chip{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 12px;
  border:1px solid var(--ac); border-radius:999px;
  background:var(--ac-soft); color:var(--ac);
  font-size:13px; font-weight:600; text-decoration:none;
}
.ts-ideas__chip svg{ width:14px; height:14px; flex:none }
.ts-ctry .ts-ideas__chip:hover{ background:var(--ac); color:#fff }
.ts-ctry .ts-ideas__chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* ------------------------------------------------------------------
   4c. THE GRID — three across, of the site's own .lg card
   ------------------------------------------------------------------ */

.ts-ctry .ts-ctry-ideas{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.7vw,26px);
  margin:0; padding:0; list-style:none;
}
.ts-ctry .ts-ctry-ideas > li{ display:flex; min-width:0 }
.ts-ctry .ts-ctry-ideas > li > .lg{ width:100% }

/* Two across as soon as the rail has eaten a column's worth, one across
   once a card would be narrower than its own 200px image is tall. */
@media (max-width:1199px){
  .ts-ctry .ts-ctry-ideas{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:819px){
  .ts-ctry .ts-ctry-ideas{ grid-template-columns:minmax(0,1fr) }
}

/* Three across inside a shell that is also carrying a rail is a narrower
   column than the homepage's four, so the title steps down. Nothing
   structural about the card changes. */
.ts-ctry .ts-ctry-ideas .lg-top h3{ font-size:18px }
.ts-ctry .ts-ctry-ideas .lg-img{ height:190px }

/* .ts-lg__excerpt now lives in style.css beside .lg — the home page's
   packages band uses the same card and needs the same rule. */

/* ------------------------------------------------------------------
   THE FOOTER BUTTON, AND WHY IT CARRIES A z-index
   ------------------------------------------------------------------
   style.css §12 gives `.lg-top h3 a::after{content:"";inset:0}` and
   `.lg{position:relative}`. The pseudo-element's containing block is
   therefore the CARD, not the title — so that ::after is a transparent
   sheet over the whole card at z-index 1, and it is what makes the
   card clickable.

   Any anchor added inside `.lg-body` is painted under that sheet and
   receives no clicks at all. It looks perfect in the markup and in a
   screenshot; it is dead. The save heart escapes only because
   style.css gives `.heart{position:relative;z-index:3}`, and this
   button needs the same escape. Verified with elementFromPoint at the
   button's own centre — reading the markup is not evidence.
   ------------------------------------------------------------------ */
/*
 * WHERE THE DESIGN COMES FROM
 * ---------------------------
 * wp-content/uploads/logos/. The business card and the A4 letterhead both
 * build on the same two devices and nothing else:
 *
 *   - a THIN GOLD HAIRLINE used as the divider. On the card it runs the full
 *     width beneath the wordmark; on the letterhead it runs beneath the
 *     wordmark AND again across the top edge of the footer.
 *   - a SOLID FOREST-GREEN BAND with light type inside it, which on the
 *     letterhead sits directly under that gold hairline.
 *
 * So the button is the letterhead's footer band at button scale: solid
 * #124933, white label, and the gold hairline capping its top edge — drawn as
 * an inset shadow rather than a border so it follows the 12px house radius
 * instead of squaring the corners off. The gold arrow is the logo's own swash
 * gesture, and it is the only thing that moves.
 *
 * Nothing heavy, nothing busy: one colour, one accent, one rule. The card
 * itself is white space and a photograph, which is the collateral's own
 * proportion.
 */
.ts-ctry .ts-lg__cta{
  position:relative; z-index:2;
  flex:1 1 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 18px;
  border:0; border-radius:12px;
  background:var(--ac); color:#fff;
  box-shadow:inset 0 2px 0 0 var(--gold);
  font-family:var(--sans); font-size:13.5px; font-weight:600; line-height:1.2;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  transition:background .2s ease, box-shadow .2s ease;
}
.ts-lg__cta svg{ width:16px; height:16px; flex:none; color:var(--gold); transition:transform .2s ease }
.ts-ctry .ts-lg__cta:hover{ background:var(--ac-dark,#0C3323); color:#fff; box-shadow:inset 0 3px 0 0 var(--gold) }
.ts-ctry .ts-lg__cta:hover svg{ transform:translateX(4px) }
.ts-ctry .ts-lg__cta:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* The footer row is `align-items:flex-end` in style.css, which is right for
   two stacked label/value blocks; the button is a single line and sits
   centred against the number beside it. The button takes the whole of the
   column the country name used to occupy. */
.ts-ctry .ts-ctry-ideas .price{ align-items:center; gap:14px }
.ts-ctry .ts-ctry-ideas .price .amt{ flex:none }

/* --- the Areas line, the one thing the reference does that we can do - */

/* .ts-ctry-areas now lives in style.css beside .lg, for the same reason.
   The name keeps its ts-ctry- prefix: renaming it would mean touching every
   template that prints it for no gain. */

/* ------------------------------------------------------------------
   4d. EMPTY RESULT — reachable only by combining groups
   ------------------------------------------------------------------ */

.ts-ideas__none{
  border:1px solid var(--line); border-radius:var(--ts-r-lg);
  background:var(--ts-soft);
  padding:clamp(24px,4vw,40px);
  text-align:center;
}
.ts-ideas__nonetitle{
  margin:0 0 10px;
  font-size:clamp(20px,2vw,26px); font-weight:600; color:var(--ink);
}
.ts-ideas__nonep{
  margin:0 auto 20px; max-width:54ch;
  font-size:15px; line-height:1.7; color:var(--muted);
}
.ts-ideas__noneacts{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0;
}

/* ------------------------------------------------------------------
   4e. PAGINATION
   ------------------------------------------------------------------
   Real links, built from this page's own permalink with the active
   filters and sort already on them, so a page link is bookmarkable and
   works with scripting off. 44px minimum on every target.
   ------------------------------------------------------------------ */

.ts-pager{ margin:clamp(24px,3vw,38px) 0 0 }
.ts-pager__list{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin:0; padding:0; list-style:none;
}
.ts-ctry .ts-pager__n,
.ts-ctry .ts-pager__step{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:12px;
  background:#fff; color:var(--ink);
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  text-decoration:none;
}
.ts-ctry .ts-pager__n:hover,
.ts-ctry .ts-pager__step:hover{ border-color:var(--ac); color:var(--ac) }
.ts-ctry .ts-pager__n.is-on{ background:var(--ac); border-color:var(--ac); color:#fff }
.ts-ctry .ts-pager__n:focus-visible,
.ts-ctry .ts-pager__step:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.ts-pager__step svg{ width:16px; height:16px; flex:none }

.ts-ctry-ideas__foot{ margin:clamp(24px,3vw,38px) 0 0; text-align:center }

/* ------------------------------------------------------------------
   5. EXPLORE <COUNTRY> WITH US — the five-card row
   ------------------------------------------------------------------ */

/*
 * overflow-x:clip IS LOAD-BEARING, and overflow-y MUST stay visible.
 *
 * The track is a scroll container (overflow-x:auto) and its thirteen cards are
 * laid out well past the viewport. Measured on this machine: that layout
 * overflow still propagated to the document — scrollWidth 3133 against a
 * 1425px viewport, and window.scrollTo(600,0) really did scroll the page
 * sideways. Setting overflow hidden/clip/scroll on the TRACK changed nothing;
 * only clipping at this wrapper did. `clip` rather than `hidden` because
 * `hidden` on one axis forces the other to `auto`, which would turn the row
 * into a vertical scroller; `clip` is the one value that lets overflow-y stay
 * visible, so the cards' hover shadow still escapes upward and downward.
 */
.ts-ctry-rail{
  position:relative;
  margin-inline:calc(-1 * clamp(16px,4vw,32px));
  overflow-x:clip;
  overflow-y:visible;
}
.ts-ctry-rail__track{
  display:flex; gap:var(--ts-gap);
  margin:0; padding:4px clamp(16px,4vw,32px) 10px;
  list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  /* Matches the track's own padding-inline, so the first card's snap
     position is scrollLeft 0 and every snap position after it is an exact
     multiple of (card + gap). Without this the snap points were offset by
     the 32px padding, the arrows' one-card step never coincided with one,
     and mandatory snapping dragged the row back to the previous card —
     measured: three clicks of "next" left scrollLeft at 32. */
  scroll-padding-inline:clamp(16px,4vw,32px);
  scrollbar-width:none; -ms-overflow-style:none;
}
.ts-ctry-rail__track::-webkit-scrollbar{ display:none }
.ts-ctry-rail__track:focus-visible{ outline:2px solid var(--ac); outline-offset:-2px }
/* Sized so five fill the 1240px shell; everything past the fifth is a
   scroll away rather than being dropped. */
.ts-ctry-rail__item{ flex:0 0 auto; width:min(78vw,208px); scroll-snap-align:start }
@media (max-width:1180px){ .ts-ctry-rail__item{ width:min(78vw,240px) } }

.ts-ctry-rail__nav{ display:flex; gap:8px; flex:0 0 auto }
.ts-ctry-rail__btn{
  display:grid; place-items:center;
  width:44px; height:44px;
  border:1px solid var(--line); border-radius:50%;
  background:#fff; color:var(--ink); cursor:pointer;
}
.ts-ctry-rail__btn svg{ width:19px; height:19px }
.ts-ctry-rail__btn:hover{ color:var(--ac); border-color:var(--ac) }
.ts-ctry-rail__btn:focus-visible{ outline:2px solid var(--ac); outline-offset:3px }
.ts-ctry-rail__btn[disabled]{ opacity:.35; pointer-events:none }

.ts-ctry-park{
  display:flex; flex-direction:column; height:100%;
  background:var(--ts-card);
  border:1px solid var(--line); border-radius:var(--ts-r-lg);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.ts-ctry-park:hover{ box-shadow:var(--ts-shadow); transform:translateY(-3px) }

.ts-ctry-park__media{ position:relative; aspect-ratio:4/3; background:var(--ts-soft) }
.ts-ctry-park__img{ width:100%; height:100%; object-fit:cover; display:block }

/* The reference's corner badge. It says BEST SELLING there. It says a
   count of rows here, because a count of rows is the only thing on this
   card that can be checked against the database. */
.ts-ctry-park__badge{
  position:absolute; left:10px; top:10px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(12,51,35,.86);
  color:var(--gold);
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}

.ts-ctry-park__body{
  display:flex; flex-direction:column; gap:8px;
  padding:14px 14px 16px;
  flex:1 1 auto;
}
.ts-ctry-park__name{
  margin:0;
  font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.2;
  color:var(--ink);
}
.ts-ctry-park__loc{
  display:flex; align-items:flex-start; gap:6px;
  margin:0;
  font-size:12.5px; line-height:1.45; color:var(--muted);
}
.ts-ctry-park__loc svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--ac) }
.ts-ctry-park__act{ margin:auto 0 0; padding-top:10px }
.ts-ctry .ts-ctry-park__act .ts-ctry-btn--line{ width:100%; padding:0 10px; font-size:11.5px; gap:6px }
.ts-ctry-park__act svg{ width:15px; height:15px }

/* ------------------------------------------------------------------
   6. ABOUT — the owner's prose, one readable column
   ------------------------------------------------------------------ */

.ts-ctry-over{ max-width:min(var(--ts-max),860px) }

/*
 * This is editor content, so it must be defended rather than trusted.
 * Measured at 375px: /kenya/ carries a <b> holding an unbreakable string
 * 368px wide, which pushed the document to 394px and gave the whole page a
 * horizontal scroll. Every other country was clean, which is exactly why a
 * guard belongs here and not a fix in one page's copy.
 */
.ts-ctry-prose{
  font-size:16.5px;
  line-height:1.78;
  color:var(--body,#5F564E);
  overflow-wrap:break-word;
}
.ts-ctry-prose img,
.ts-ctry-prose iframe,
.ts-ctry-prose video,
.ts-ctry-prose pre,
.ts-ctry-prose figure{ max-width:100% }
.ts-ctry-prose > * + *{ margin-top:1.05em }
.ts-ctry-prose h2,
.ts-ctry-prose h3{
  font-family:var(--sans); font-weight:700; color:var(--ink);
  line-height:1.2; margin-top:1.6em;
}
.ts-ctry-prose h2{ font-size:clamp(23px,2.4vw,31px) }
.ts-ctry-prose h3{ font-size:clamp(19px,1.8vw,23px) }
.ts-ctry .ts-ctry-prose a{ color:var(--ac); text-decoration:underline; text-underline-offset:3px }
.ts-ctry .ts-ctry-prose a:hover{ color:var(--gold-dark,#C99C13) }
.ts-ctry-prose img{ border-radius:var(--ts-r); height:auto }
.ts-ctry-prose ul,
.ts-ctry-prose ol{ padding-left:1.3em }
.ts-ctry-prose li + li{ margin-top:.35em }
.ts-ctry-prose table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto }
.ts-ctry-prose td,
.ts-ctry-prose th{ border:1px solid var(--line); padding:8px 12px; text-align:left }

.ts-ctry-jump{
  margin:0 0 26px; padding:16px 18px;
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--ts-r); background:var(--ts-soft);
}
.ts-ctry-jump__lab{
  margin:0 0 10px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.ts-ctry-jump__list{ display:flex; flex-wrap:wrap; gap:8px; margin:0 }
.ts-ctry .ts-ctry-jump__a{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink);
  font-size:13.5px; text-decoration:none;
}
.ts-ctry .ts-ctry-jump__a:hover{ border-color:var(--ac); color:var(--ac) }

/* The hidden attribute must beat any later display rule, or a JS-toggled
   block renders permanently. */
.ts-ctry [hidden]{ display:none !important }

/* ------------------------------------------------------------------
   7. FACT PANELS (unchanged behaviour — a native radio group)
   ------------------------------------------------------------------ */

.ts-ctry-fx{ position:relative }

/* Kept in the accessibility tree and kept focusable: this is a real radio
   group, so the arrow keys move between the tabs for free. */
.ts-ctry-fx__r{
  position:absolute; width:1px; height:1px;
  margin:0; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.ts-ctry-fx__strip{
  display:flex; gap:2px;
  margin:0 0 22px;
  border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.ts-ctry-fx__strip::-webkit-scrollbar{ display:none }

.ts-ctry-fx__tab{
  display:inline-flex; align-items:center;
  min-height:48px; padding:0 16px;
  font-size:14px; font-weight:600; color:var(--muted);
  white-space:nowrap; cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.ts-ctry-fx__tab:hover{ color:var(--ink) }

.ts-ctry-fx__panel{ display:none }
.ts-ctry-fx__strip ~ .ts-ctry-fx__panels .ts-ctry-fx__h{
  position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.ts-ctry-fx__panels > .ts-ctry-fx__panel:first-child:last-child{ display:block }

/* Four rules, one per possible tab index. Three tabs is the real maximum
   page-country.php can build; the fourth is headroom. */
.ts-ctry-fx__r:nth-of-type(1):checked ~ .ts-ctry-fx__panels > .ts-ctry-fx__panel:nth-child(1),
.ts-ctry-fx__r:nth-of-type(2):checked ~ .ts-ctry-fx__panels > .ts-ctry-fx__panel:nth-child(2),
.ts-ctry-fx__r:nth-of-type(3):checked ~ .ts-ctry-fx__panels > .ts-ctry-fx__panel:nth-child(3),
.ts-ctry-fx__r:nth-of-type(4):checked ~ .ts-ctry-fx__panels > .ts-ctry-fx__panel:nth-child(4){ display:block }

.ts-ctry-fx__r:nth-of-type(1):checked ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(1),
.ts-ctry-fx__r:nth-of-type(2):checked ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(2),
.ts-ctry-fx__r:nth-of-type(3):checked ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(3),
.ts-ctry-fx__r:nth-of-type(4):checked ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(4){
  color:var(--ac); border-bottom-color:var(--gold);
}

.ts-ctry-fx__r:nth-of-type(1):focus-visible ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(1),
.ts-ctry-fx__r:nth-of-type(2):focus-visible ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(2),
.ts-ctry-fx__r:nth-of-type(3):focus-visible ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(3),
.ts-ctry-fx__r:nth-of-type(4):focus-visible ~ .ts-ctry-fx__strip > .ts-ctry-fx__tab:nth-child(4){
  outline:2px solid var(--ac); outline-offset:-2px;
}

.ts-ctry-fx__h{
  margin:0 0 16px;
  font-family:var(--sans); font-size:18px; font-weight:700; color:var(--ink);
}

.ts-ctry-fx__grid{
  display:grid; gap:10px;
  grid-template-columns:minmax(0,1fr);
  margin:0;
}
@media (min-width:720px){ .ts-ctry-fx__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .ts-ctry-fx__grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.ts-ctry-fx__row{
  display:grid;
  grid-template-areas:"icon k" "icon v";
  grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;
  padding:14px 16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--ts-r);
}
.ts-ctry-fx__icon{ grid-area:icon; display:grid; place-items:center;
  width:34px; height:34px; border-radius:10px; background:var(--ts-soft); color:var(--ac) }
.ts-ctry-fx__icon svg{ width:18px; height:18px }
.ts-ctry-fx__k{
  grid-area:k;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.ts-ctry-fx__v{
  grid-area:v; margin:0;
  font-size:15px; line-height:1.55; color:var(--ink);
}

.ts-ctry-src{
  margin:20px 0 0;
  font-size:12px; color:var(--muted);
}

/* ------------------------------------------------------------------
   8. WHAT YOU'LL RECEIVE — the dark band
   ------------------------------------------------------------------
   Forest green, gold accents. The reference's four service promises are
   gone; these four columns each describe something the site does, and
   three of them carry a count of rows. Gold is legible here, which is
   the one place it is used at text size.
   ------------------------------------------------------------------ */

.ts-ctry-recv{
  position:relative;
  padding-block:clamp(48px,6vw,88px);
  background:var(--ac);
  color:#fff;
}
.ts-ctry-recv::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--gold) 0%, rgba(234,185,36,0) 62%);
}

.ts-ctry-recv__grid{
  display:grid; gap:clamp(22px,3vw,38px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0; padding:0; list-style:none;
}
@media (max-width:1000px){ .ts-ctry-recv__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .ts-ctry-recv__grid{ grid-template-columns:minmax(0,1fr) } }

.ts-ctry-recv__col{ min-width:0 }
.ts-ctry-recv__icon{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:16px;
  border-radius:50%;
  border:1px solid rgba(234,185,36,.5);
  background:rgba(255,255,255,.06);
  color:var(--gold);
}
.ts-ctry-recv__icon svg{ width:24px; height:24px }
.ts-ctry-recv__h{
  margin:0 0 8px;
  font-family:var(--sans); font-size:17px; font-weight:700; line-height:1.3; color:#fff;
}
.ts-ctry-recv__p{
  margin:0;
  font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.82);
}
.ts-ctry-recv__act{ margin:12px 0 0 }
.ts-ctry .ts-ctry-recv__act a{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
  color:var(--gold); font-size:14px; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(234,185,36,.45);
}
.ts-ctry .ts-ctry-recv__act a:hover{ color:#fff; border-bottom-color:#fff }
.ts-ctry .ts-ctry-recv__act a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
.ts-ctry-recv__act svg{ width:16px; height:16px }

.ts-ctry-recv__foot{
  margin:clamp(28px,3.4vw,44px) auto 0;
  max-width:70ch;
  text-align:center;
  font-size:13.5px; line-height:1.7;
  color:rgba(255,255,255,.72);
}

/* ------------------------------------------------------------------
   9. HAND-OFF TO dest.css
   ------------------------------------------------------------------
   The gallery, experiences and related-destination sections are still
   dest.css's. Only their outer rhythm is retuned so they sit with the
   new blocks instead of under them.
   ------------------------------------------------------------------ */

.ts-ctry .oh-section{ padding-block:clamp(44px,6vw,86px) }
.ts-ctry .oh-dest-anchor{ scroll-margin-top:calc(var(--ts-hd) + var(--ts-tab) + 14px) }
.ts-ctry .oh-shell{ max-width:var(--ts-max); padding-inline:clamp(16px,4vw,32px) }
/* dest.css sizes these for a desktop-first page. On this one every tap target
   has the same 44px floor, so the ones it leaves at 17px / 40px are lifted.
   Only the box grows; the type stays exactly as dest.css set it. */
.ts-ctry .oh-dest-lb__cap a{ display:inline-flex; align-self:flex-start; align-items:center; min-height:44px; padding-block:10px; line-height:1.5 }
.ts-ctry .oh-chip,
.ts-ctry .oh-btn--sm{ min-height:44px }

/* ------------------------------------------------------------------
   10. NARROW SCREENS
   ------------------------------------------------------------------ */

@media (max-width:1039px){
  /*
   * Once the hero grid stacks there is no free column at the right for a
   * vertical column of dots. Measured at 390px: parked top-right they
   * landed at x 146-382, y 166-210, straight over the panel's kicker and
   * title (the panel starts at y 180). They go to the foot of the hero
   * instead — a centred row in the section's own bottom padding, which is
   * widened here to make room for them.
   */
  .ts-ctry-hero__dots{
    top:auto;
    bottom:6px;
    left:0; right:auto;
    width:100%;
    transform:none;
    flex-direction:row;
    justify-content:center;
    gap:2px;
  }
  .ts-ctry-hero__in{ padding-bottom:calc(clamp(26px,4vw,52px) + 44px) }
  .ts-ctry-hero__panel{ max-width:none }
}

@media (max-width:719px){
  /*
   * The aside's map is the one thing in the hero that can go: it is
   * decorative (the H1 immediately above it names the same country) and it
   * costs about 190px of a hero that measured 1276px tall at 390px wide.
   * None of the COUNTS go — those are the factual part and they stay.
   */
  .ts-ctry-aside__map{ display:none }

  .ts-ctry-head--rail{ display:block }
  .ts-ctry-rail__nav{ margin-top:18px }
  .ts-ctry-aside__row dd{ white-space:normal; text-align:right }
  /* The rail collapses to a disclosure above the grid at 1039px, so the
     count and the chips are the only things left in the result bar and
     they take the whole width rather than sitting side by side. */
  .ts-ideas__bar{ gap:10px }
  .ts-ideas__count{ flex:1 1 100% }
}

@media (max-width:420px){
  .ts-ctry-hero__title{ font-size:clamp(34px,10vw,46px) }
  .ts-ctry .ts-ctry-hero__acts .ts-ctry-btn{ flex:1 1 auto }
  .ts-ctry-hero__panel{ padding:18px }
}

/* ------------------------------------------------------------------
   11. MOTION
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  .ts-ctry-rail__track{ scroll-behavior:auto }
  .ts-ctry-hero__img{ transition:none }
  .ts-ctry-park,
  .ts-ctry-park:hover{ transition:none; transform:none }
  .ts-ctry-hero__pip{ transition:none }
  /* The range fill tracks a drag, so easing it lags the thumb; under reduced
     motion it must not ease at all. Same for the rail's chevron and the
     card's own hover lift. */
  .ts-range__fill{ transition:none }
  .ts-rail__switchchev{ transition:none }
  .ts-rail__tick{ transition:none }
  .ts-ctry .ts-lg__cta{ transition:none }
  .ts-lg__cta svg,
  .ts-ctry .ts-lg__cta:hover svg{ transition:none; transform:none }
}

/* ===================================================================
   HERO, SECOND PASS — matching the owner's new reference
   -------------------------------------------------------------------
   The reference is a photograph BAND (not a full-height hero) with a
   dark panel straddling its lower edge, and a pale band beneath
   holding a faint continent silhouette and an aside on the right.
   Carousel position is shown by short horizontal rules at the
   photograph's bottom-right, not a column of dots.

   Only the colours and fonts differ from the reference: forest green
   #124933 for the panel, gold #EAB924 for the script line and the
   active rule, cream #F7F3EE for the lower band.

   Everything here overrides the first-pass rules above by source
   order at equal specificity; the markup is unchanged apart from the
   silhouette moving out of the photo stage so it can sit in the pale
   band rather than being clipped to the photograph.
   =================================================================== */

.ts-ctry .ts-ctry-hero{
  position:relative; background:var(--cream); overflow:clip;
  display:block; min-height:0; padding:0;
}

/* --- the photograph band ------------------------------------------ */
.ts-ctry .ts-ctry-hero__stage{
  position:relative; left:auto; right:auto; top:auto;
  height:clamp(320px,40vw,520px); width:100%; overflow:hidden;
}
.ts-ctry .ts-ctry-hero__stage > .ts-ctry-hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ts-ctry .ts-ctry-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(94deg,rgba(12,51,35,.55) 0%,rgba(12,51,35,.18) 46%,rgba(12,51,35,0) 72%);
}

/* --- carousel position: short rules, bottom-right ------------------ */
.ts-ctry .ts-ctry-hero__dots{
  position:absolute; z-index:4; right:clamp(16px,4vw,54px); left:auto;
  top:calc(clamp(320px,40vw,520px) - 34px);
  display:flex; flex-direction:row; gap:10px; align-items:center;
}
.ts-ctry .ts-ctry-hero__dot-lab{
  display:grid; place-items:center; width:46px; height:44px; cursor:pointer;
}
.ts-ctry .ts-ctry-hero__pip{
  display:block; width:42px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.45); transition:background .2s,height .2s;
}
.ts-ctry .ts-ctry-hero__dot-lab:hover .ts-ctry-hero__pip{ background:rgba(255,255,255,.75) }
.ts-ctry .ts-ctry-hero__r:focus-visible + .ts-ctry-hero__dots .ts-ctry-hero__pip,
.ts-ctry .ts-ctry-hero__dot-lab:focus-within .ts-ctry-hero__pip{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* --- the pale band: silhouette sits behind the aside --------------- */
.ts-ctry .ts-ctry-hero__map{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; transform:translateX(-46%);
  top:clamp(300px,38vw,500px);
  width:min(560px,52vw); height:auto; opacity:.13;
}
.ts-ctry .ts-ctry-hero__land{ fill:#8C8378; stroke:none }
.ts-ctry .ts-ctry-hero__halo{ fill:var(--ac); opacity:.20 }
.ts-ctry .ts-ctry-hero__dot{ fill:var(--ac) }

/* --- breadcrumb: small, over the photograph ------------------------ */
.ts-ctry .ts-ctry-hero__in{
  position:relative; z-index:3; padding-top:0;
}
.ts-ctry .ts-ctry-crumbs{
  position:absolute; top:calc(-1 * clamp(320px,40vw,520px) + 22px); left:0;
  color:rgba(255,255,255,.88);
}
.ts-ctry .ts-ctry-crumbs a{ color:rgba(255,255,255,.88) }
.ts-ctry .ts-ctry-crumbs a:hover{ color:#fff }

/* --- panel straddles the photograph's lower edge ------------------- */
.ts-ctry .ts-ctry-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.88fr);
  gap:clamp(24px,4vw,68px);
  align-items:start;
  padding-bottom:clamp(44px,5vw,76px);
}
.ts-ctry .ts-ctry-hero__panel{
  position:relative; z-index:3;
  margin-top:calc(-1 * clamp(190px,23vw,300px));
  background:rgba(12,51,35,.93);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  /* The reference has square corners, but nothing else on this site does —
     cards are 18px, large surfaces 22-26px. Matching the house scale. */
  border-radius:var(--ts-r-lg,22px); border:0;
  padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,46px) clamp(28px,3.4vw,46px);
  color:#fff; box-shadow:0 26px 70px rgba(12,51,35,.28);
}
.ts-ctry .ts-ctry-hero__title{ color:#fff }
.ts-ctry .ts-ctry-hero__title .ts-ctry-sf{ color:var(--gold) }
.ts-ctry .ts-ctry-hero__panel .ts-ctry-kick{ color:var(--gold) }
.ts-ctry .ts-ctry-hero__lede{ color:rgba(255,255,255,.88) }

/* --- aside sits in the pale band, right column --------------------- */
.ts-ctry .ts-ctry-aside{
  position:relative; z-index:2;
  margin-top:clamp(30px,4vw,56px);
  background:transparent; border:0; box-shadow:none; padding:0;
}

@media (max-width:1080px){
  .ts-ctry .ts-ctry-hero__grid{ grid-template-columns:minmax(0,1fr) }
  .ts-ctry .ts-ctry-hero__panel{ margin-top:calc(-1 * clamp(120px,18vw,200px)) }
  .ts-ctry .ts-ctry-aside{ margin-top:clamp(24px,4vw,40px) }
  .ts-ctry .ts-ctry-hero__map{ top:auto; bottom:12%; width:min(420px,66vw); opacity:.10 }
}
@media (max-width:640px){
  .ts-ctry .ts-ctry-hero__stage{ height:clamp(240px,58vw,340px) }
  .ts-ctry .ts-ctry-hero__dots{ top:calc(clamp(240px,58vw,340px) - 34px); right:14px; gap:7px }
  .ts-ctry .ts-ctry-hero__pip{ width:28px }
  .ts-ctry .ts-ctry-crumbs{ top:calc(-1 * clamp(240px,58vw,340px) + 16px) }
  .ts-ctry .ts-ctry-hero__panel{ margin-top:calc(-1 * clamp(70px,14vw,110px)) }
}
@media (prefers-reduced-motion:reduce){
  .ts-ctry .ts-ctry-hero__pip{ transition:none }
}

/* Uganda has 12 photographs. At 390px that row of 46px labels wrapped to nine
   lines — a 390x900 block sitting over the panel. Pin it to a single
   non-wrapping row that scrolls, so the tap targets stay 44px tall and the
   strip stays inside the photograph. */
@media (max-width:640px){
  .ts-ctry .ts-ctry-hero__dots{
    left:14px; right:14px; width:auto; max-width:calc(100% - 28px);
    flex-wrap:nowrap; justify-content:flex-end;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .ts-ctry .ts-ctry-hero__dots::-webkit-scrollbar{ display:none }
  .ts-ctry .ts-ctry-hero__dot-lab{ flex:0 0 auto; width:34px }
  .ts-ctry .ts-ctry-hero__pip{ width:24px }
}

/* The first-pass rule pinned the dot strip with BOTH top and bottom, which
   stretched it to 900px once it became a horizontal row. Height is explicit
   now and `bottom` is released. */
.ts-ctry .ts-ctry-hero__dots{ bottom:auto; height:44px }
@media (max-width:640px){ .ts-ctry .ts-ctry-hero__dots{ bottom:auto; height:44px } }

/* On a phone the photograph is only 240px tall and the panel pulls up over its
   lower half, so there is no clear strip at the bottom-right for the position
   indicator. It moves to the top-right instead — opposite the breadcrumb,
   which sits top-left — where the photograph is unobstructed. */
@media (max-width:640px){
  /* Below the breadcrumb (which ends ~60px into the photograph) and above the
     panel, which starts at ~170px. Measured, not guessed. */
  .ts-ctry .ts-ctry-hero__dots{ top:68px }
}

/* ===================================================================
   HERO ASIDE — the destination expert
   -------------------------------------------------------------------
   Round portrait left, text right, sitting in the pale band beside the
   dark panel. Serif heading, quiet body, and a script-styled name that
   stands in for the reference's handwritten signature — using our own
   Cormorant Garamond italic rather than importing a script face.
   =================================================================== */
.ts-ctry .ts-ctry-expert{
  position:relative; z-index:2;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2vw,28px); align-items:start;
  margin-top:clamp(30px,4vw,58px);
  background:transparent; border:0; box-shadow:none; padding:0;
}
.ts-ctry .ts-ctry-expert__pic{
  width:clamp(84px,9vw,118px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; background:var(--line); flex:none;
  box-shadow:0 6px 20px rgba(58,46,37,.16);
}
.ts-ctry .ts-ctry-expert__pic img{ width:100%; height:100%; object-fit:cover; display:block }
.ts-ctry .ts-ctry-expert__h{
  font-family:var(--serif); font-weight:600; letter-spacing:0;
  font-size:clamp(21px,2vw,27px); line-height:1.2; color:var(--ink); margin:0 0 12px;
  max-width:22ch;
}
.ts-ctry .ts-ctry-expert__quote{
  margin:0; color:var(--muted); font-size:15.5px; line-height:1.78; max-width:46ch;
}
.ts-ctry .ts-ctry-expert__sign{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(20px,1.8vw,25px); color:var(--ac);
  margin:22px 0 2px; line-height:1.1;
}
.ts-ctry .ts-ctry-expert__role{
  margin:0; font-size:13.5px; color:var(--muted);
}

@media (max-width:640px){
  .ts-ctry .ts-ctry-expert{ grid-template-columns:minmax(0,1fr); gap:14px }
  .ts-ctry .ts-ctry-expert__quote{ max-width:none }
}

/* ===================================================================
   SIGNATURE — the brand's own script face
   -------------------------------------------------------------------
   Taken from the logo kit, which is where the "Safaris" script in the
   wordmark comes from, so the signature is the same hand as the logo
   rather than a generic Google script. Loaded only on country pages,
   which is the only place it is used, and with font-display:swap so
   the line never blocks paint — it falls back to our own Cormorant
   italic, which is what the signature used before.
   =================================================================== */
@font-face{
  font-family:'Tranquil Script';
  src:url('../fonts/tranquil-script.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
.ts-ctry .ts-ctry-expert__sign{
  font-family:'Tranquil Script', var(--serif), cursive;
  font-style:normal; font-weight:400;
  font-size:clamp(30px,2.9vw,40px);
  /* 1.3, not 1.05. This face's ink descends ~18px below the baseline at
     40px while a 1.05 line box ends ~15px above that, so the tail of the
     "g" painted outside its own box and struck straight through the role
     line beneath it — "Tour Manager, Uganda" on the Uganda page. The
     signature does not move; only the box it is allowed to spill out of. */
  line-height:1.3; color:var(--gold-ink);
  margin:24px 0 0;
}
.ts-ctry .ts-ctry-expert__role{
  /* The clearance the signature's descender needs. See above. */
  margin-top:22px;
}

/* ===================================================================
   "WHAT YOU'LL RECEIVE" — reference styling
   -------------------------------------------------------------------
   The reference sets each column title in letterspaced caps in the
   accent colour, over a dark band with a faint map behind it, with the
   body copy in a quieter light tone. Ours had white sentence-case
   titles, which read as ordinary headings rather than as the band's
   rhythm. Gold on this green is ~7:1, so caps at this size stay
   comfortably legible.

   What the reference has and we do not: "See why 97% of our travelers
   recommend us" and a Trustpilot strip with star ratings and review
   cards. There is no review data on this site and no rating anywhere,
   so neither is built. The closing line states something true about
   the page instead.
   =================================================================== */
.ts-ctry .ts-ctry-recv__h{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(12.5px,1.05vw,14px);
  font-weight:700;
  line-height:1.4;
  margin:0 0 10px;
}
.ts-ctry .ts-ctry-recv__p{
  color:rgba(247,243,238,.80);
  font-size:15px;
  line-height:1.72;
  margin:0;
}
/* Line-art icons: outline only, gold, stacked above the title as in the
   reference rather than sitting inline with it. */
.ts-ctry .ts-ctry-recv__icon{
  color:var(--gold);
  display:block;
  margin-bottom:clamp(14px,1.6vw,22px);
}
.ts-ctry .ts-ctry-recv__icon svg{
  width:clamp(34px,3vw,44px); height:clamp(34px,3vw,44px);
  stroke-width:1.15;
}
.ts-ctry .ts-ctry-recv__grid{ gap:clamp(24px,3vw,46px) }
.ts-ctry .ts-ctry-recv__foot{ color:rgba(247,243,238,.72) }
.ts-ctry .ts-ctry-recv__act{ color:var(--gold) }

/* The owner's own words for this country, above the counted line. Slightly
   larger and lighter than the stats beneath it, because it is the voice
   and they are the evidence. Clamped so a long paragraph cannot push the
   buttons out of the first screen. */
.ts-ctry .ts-ctry-hero__own{
  margin:14px 0 0; color:rgba(255,255,255,.94); font-size:clamp(15px,1.15vw,17px);
  line-height:1.62; max-width:60ch;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.ts-ctry .ts-ctry-hero__own + .ts-ctry-hero__lede{ margin-top:10px; font-size:14px; opacity:.82 }