@layer reset, tokens, base, layout, components, utilities;

/* ============================================================ RESET ===== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { color: inherit; }
}

/* =========================================================== TOKENS ===== */
/* Redesigned against the reference the owner supplied: a large editorial serif
   on a warm off-white ground, near-black bands, one saturated accent, and body
   copy set far larger than convention.
   The accent stays RedSoil's own clay rather than the reference's yellow — the
   yellow IS that company's name and mark, and a competitor wearing it reads as
   a copy. Everything else about the system is theirs. */
@layer tokens {
  :root {
    /* ---- Brand clay. #D27323 is sampled from the RedSoil logo. ---- */
    --clay-50:#FDF6F0; --clay-100:#F8E4D2; --clay-200:#EFC49C; --clay-300:#E3A167;
    --clay-400:#D8813C; --clay-500:#CE6B22; --clay-600:#B25718; --clay-700:#8A4211;
    --clay-800:#63300C; --clay-900:#3D1E07;
    --brand:#D27323;
    /* The highlight swash behind key heading words. It sits behind text at
       ~55% height, so it is a light tint rather than the CTA fill — the words
       stay ink-dark and keep their own contrast. */
    --highlight:#F3C08A;
    --clay-cta:#B25718;           /* 5.6:1 with white */

    /* ---- Ground. Warm off-white page, near-black bands, white cards. ---- */
    --paper:#FAF6F0;              /* page background — lighter than the original
                                     #F7F2EA, for the airier ground the
                                     reference gets from white, without giving
                                     up the warmth that is RedSoil's own */
    --paper-deep:#F2EBE0;         /* alternating band */
    --white:#FFFFFF;              /* cards sit on white now, not cream */
    --line:#E2D8C8;               /* hairlines on paper */
    --line-strong:#CFC2AC;

    --ink-900:#191815;            /* dark bands, headings */
    --ink-800:#26241F;
    --ink-700:#3A3733;
    --ink-600:#57534C;            /* 7.0:1 on paper */
    --ink-500:#6E6A62;            /* 5.1:1 on paper — smallest text still passes */
    --ink-400:#8C8880;

    /* Back-compat aliases: the templates and older component rules still name
       the cream tokens, and a redesign that renamed every one of them would be
       a rewrite of forty files for no visual gain. */
    --cream:var(--paper);
    --cream-card:var(--white);
    --cream-light:var(--paper-deep);
    --sand:var(--paper-deep);
    --sand-line:var(--line);
    --amber:var(--clay-400);

    --bg:var(--paper);
    --bg-alt:var(--paper-deep);
    --bg-card:var(--white);
    --bg-dark:var(--ink-900);
    --text:#2E2B26;               /* 11.9:1 on paper */
    --text-muted:var(--ink-600);
    --text-on-dark:#EFE9E1;
    --border:var(--line);
    --link:var(--clay-700);
    --cta:var(--clay-cta);
    --cta-hover:var(--ink-900);
    --focus:var(--clay-600);
    --success:#2F6B4F; --warning:#8A5A0E; --danger:#A32C1E;

    /* ---- Type.
       The reference sets body at 24px/1.6 and a display serif well past 60px.
       That scale is the look. Body goes to 18px with a 1.7 leading — 24px is
       right for their 470px measure and too large for a 70ch column — and the
       display sizes roughly double.
       Still no webfont: see docs/DESIGN-SYSTEM.md §4. Iowan and Palatino are
       high-contrast old-style serifs in the same family of shapes as the
       reference's licensed face, and cost nothing. --font-display remains the
       single swap point if the client licenses one. ---- */
    --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

    --fs-display:clamp(2.75rem,6.4vw,5.25rem);
    --fs-h1:clamp(2.25rem,4.8vw,4rem);
    --fs-h2:clamp(2rem,3.8vw,3.25rem);
    --fs-h3:clamp(1.375rem,2vw,1.75rem);
    --fs-h4:1.125rem;
    --fs-lead:clamp(1.125rem,1.5vw,1.375rem);
    --fs-body:1.125rem;           /* 18px */
    --fs-sm:1rem;
    --fs-xs:0.8125rem;

    --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
    --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px;
    --s-20:80px; --s-24:96px;

    --container:1400px;
    --container-narrow:1180px;
    --container-text:760px;
    --gutter:clamp(1.25rem,4vw,2.5rem);
    --section:clamp(4rem,8vw,8rem);

    /* Pills for actions, generous radius on surfaces — the reference rounds
       cards hard and buttons fully. */
    --radius:20px;
    --radius-sm:12px;
    --radius-pill:9999px;

    --ease:cubic-bezier(.22,.61,.36,1);
    --dur-fast:180ms; --dur:320ms; --dur-slow:600ms;
    --header-h:84px;

    --shadow-card:0 1px 2px rgba(25,24,21,.04), 0 10px 30px rgba(25,24,21,.07);
    --shadow-lift:0 2px 6px rgba(25,24,21,.06), 0 22px 50px rgba(25,24,21,.13);
  }
}
/* ============================================================= BASE ===== */
@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
  }

  /* Headings keep the casing they were written in. A blanket `capitalize`
     title-cases prepositions and articles too — "What A Day In The Serengeti
     Actually Looks Like" — which reads as machine-set rather than edited. Any
     heading that genuinely wants title case is written that way in the CMS. */
  h1,h2,h3,h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink-900);
  }
  /* The reference sets its display face in italic and leaves card titles
     upright, which is what keeps a page of headings from reading as one long
     pull quote. Iowan and Palatino both cut a proper old-style italic, so this
     costs nothing and needs no webfont. Italic serifs also sit better with a
     little less negative tracking than the roman does. */
  h1,h2 { font-style: italic; letter-spacing: -0.015em; }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
  h4,
  .h-sub {
    font-size: var(--fs-h4); font-family: var(--font-body);
    font-weight: 600; letter-spacing: 0; text-transform: none;
    line-height: 1.4; color: var(--ink-900);
  }

  p { max-width: 70ch; }

  a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { text-decoration-color: var(--clay-500); }

  /* !important because several component rules reset outline; a keyboard user
     losing the focus ring is a hard failure, not a style preference. */
  :focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 3px;
    border-radius: 3px;
  }
  /* On the dark bands the clay ring is too low-contrast against ink-900. */
  .section--dark :focus-visible,
  .hero :focus-visible,
  .site-header :focus-visible,
  .mobile-bar :focus-visible {
    outline-color: var(--clay-300) !important;
  }
  ::selection { background: var(--clay-200); color: var(--ink-900); }

  picture { background: var(--img-bg, var(--sand)); display: block; }
  .img-placeholder { display: block; width: 100%; background: var(--sand); border-radius: var(--radius); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* =========================================================== LAYOUT ===== */
@layer layout {
  .container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
  .container--narrow { max-width: var(--container-narrow); }
  .container--text { max-width: var(--container-text); }

  .section { padding-block: var(--section); }
  .section--tight { padding-block: clamp(2.5rem,5vw,4.5rem); }
  .section--alt { background: var(--bg-alt); border-block: 1px solid rgba(31,29,25,.07); }
  .section--card { background: var(--cream-light); }
  .section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
  .section--dark h1,.section--dark h2,.section--dark h3 { color: var(--white); }
  .section--dark a { color: var(--clay-300); }

  .grid { display: grid; gap: var(--s-6); }
  @media (min-width:640px)  { .grid--2 { grid-template-columns: repeat(2,1fr); } }
  @media (min-width:900px)  { .grid--3 { grid-template-columns: repeat(3,1fr); } }
  @media (min-width:1100px) { .grid--4 { grid-template-columns: repeat(4,1fr); } }

  .skip-link {
    position:absolute; left:var(--s-4); top:-100%;
    background:var(--ink-900); color:var(--white);
    padding:var(--s-3) var(--s-5); z-index:200; border-radius:var(--radius-sm);
  }
  .skip-link:focus { top: var(--s-4); }
}

/* ======================================================= COMPONENTS ===== */
@layer components {

  /* ---- eyebrow: wide tracking is the signature of this layout ---- */
  .eyebrow {
    display:block; font-family:var(--font-body);
    font-size:var(--fs-sm); text-transform:uppercase;
    letter-spacing:.25em; font-weight:500;
    color:var(--clay-700); margin-bottom:var(--s-4);   /* clay-600 is 3.59:1 on sand — fails AA at 14px */
  }
  .section--dark .eyebrow,.hero .eyebrow { color:var(--clay-300); }

  .lead { font-size:var(--fs-lead); color:var(--ink-600); line-height:1.7; }
  .section--dark .lead { color:#C9C2B6; }

  /* ---- section header: centred, as in this format ---- */
  .section-head { max-width:var(--container-text); margin:0 auto var(--s-12); text-align:center; }
  .section-head p { margin:var(--s-5) auto 0; }
  .section-head--left { margin-inline:0; text-align:left; }
  .section-head--left p { margin-inline:0; }
  .section-head--split {
    max-width:none; display:flex; gap:var(--s-6); text-align:left;
    align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  }
  .section-head--split > div:first-child { max-width:62ch; }
  .section-head--split p { margin-inline:0; }

  /* ---- buttons: pills ---- */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
    padding:.85rem 1.85rem; font-size:var(--fs-sm); font-weight:600;
    letter-spacing:.02em; text-decoration:none;
    border:1px solid transparent; border-radius:var(--radius-pill);
    cursor:pointer; white-space:nowrap;
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
               border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .btn--primary { background:var(--cta); color:var(--white); }
  .btn--primary:hover { background:var(--cta-hover); color:var(--white); }
  .btn--dark { background:var(--ink-900); color:var(--text-on-dark); }
  .btn--dark:hover { background:var(--ink-700); color:var(--white); }
  .btn--ghost { border-color:currentColor; background:transparent; }
  .btn--ghost:hover { background:currentColor; }
  .btn--ghost:hover span { color:var(--ink-900); }
  .btn--outline { border-color:var(--sand-line); background:var(--cream-card); color:var(--ink-800); }
  .btn--outline:hover { border-color:var(--clay-500); color:var(--clay-700); }
  .btn--sm { padding:.55rem 1.15rem; font-size:var(--fs-xs); }
  .btn--lg { padding:1.05rem 2.4rem; font-size:1rem; }
  .btn--block { width:100%; }

  .btn-text {
    display:inline-flex; align-items:center; gap:var(--s-2);
    font-size:var(--fs-xs); font-weight:600; letter-spacing:.18em;
    text-transform:uppercase; text-decoration:none; color:var(--clay-700);
    transition:color var(--dur-fast) var(--ease);
  }
  .btn-text:hover { color:var(--clay-500); }
  .btn-text .arrow { transition:transform var(--dur) var(--ease); }
  .btn-text:hover .arrow { transform:translateX(4px); }

  .btn-row { display:flex; flex-wrap:wrap; gap:var(--s-3); }
  .btn-row--center { justify-content:center; }

  /* ---- header: transparent over the hero, solid on scroll ---- */
  .site-header {
    position:fixed; inset-inline:0; top:0; z-index:100;
    background:transparent; color:var(--white);
    transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
               box-shadow var(--dur) var(--ease);
  }
  .site-header__inner {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--s-6); min-height:var(--header-h);
  }
  .site-header.is-solid {
    background:var(--cream-light); color:var(--ink-800);
    box-shadow:0 1px 0 rgba(31,29,25,.09);
  }
  .site-header.is-solid .nav__link { color:var(--ink-700); }
  .site-header.is-solid .nav__link:hover,
  .site-header.is-solid .nav__link[aria-current="page"] { color:var(--clay-700); }
  .site-header.is-solid .logo__text { color:var(--ink-900); }
  .site-header.is-solid .header-phone { color:var(--ink-600); }
  .site-header.is-solid .nav-toggle span { background:var(--ink-800); }
  /* The supplied logo has a white wordmark, so it only reads on dark. A
     recoloured variant is swapped in wherever the surface is cream. */
  .logo__img--light { display:none; }
  .site-header.is-solid .logo__img--dark  { display:none; }
  .site-header.is-solid .logo__img--light { display:block; }

  /* Pages without a hero start solid, so the nav is never invisible. */
  .site-header--static { position:sticky; background:var(--cream-light); color:var(--ink-800); box-shadow:0 1px 0 rgba(31,29,25,.09); }
  .site-header--static .nav__link { color:var(--ink-700); }
  .site-header--static .logo__text { color:var(--ink-900); }
  .site-header--static .logo__img--dark  { display:none; }
  .site-header--static .logo__img--light { display:block; }
  .site-header--static .header-phone { color:var(--ink-600); }
  .site-header--static .nav-toggle span { background:var(--ink-800); }

  .logo { display:flex; align-items:center; gap:var(--s-3); text-decoration:none; flex-shrink:0; }
  .logo img { height:34px; width:auto; }
  .logo__text { font-family:var(--font-display); font-size:1.2rem; letter-spacing:-.01em; color:var(--white); }

  .nav { display:none; }
  @media (min-width:1100px) { .nav { display:flex; align-items:center; gap:var(--s-8); } }
  .nav__item { position:relative; }
  .nav__link {
    display:inline-block; padding:var(--s-4) 0;
    font-size:var(--fs-sm); font-weight:500; letter-spacing:.02em;
    color:var(--white); text-decoration:none;
    transition:color var(--dur-fast) var(--ease);
  }
  .nav__link:hover,.nav__link[aria-current="page"] { color:var(--clay-300); }

  .nav__panel {
    position:absolute; top:100%; left:calc(var(--s-5) * -1);
    min-width:290px; padding:var(--s-4);
    background:var(--cream-light); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow-lift);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel { opacity:1; visibility:visible; transform:translateY(0); }
  .nav__panel a {
    display:block; padding:var(--s-2) var(--s-3); font-size:var(--fs-sm);
    color:var(--ink-700); text-decoration:none; border-radius:var(--radius-sm);
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .nav__panel a:hover { background:var(--cream); color:var(--clay-700); }

  .header-actions { display:flex; align-items:center; gap:var(--s-4); }
  .header-phone { display:none; font-size:var(--fs-sm); color:rgba(255,255,255,.85); text-decoration:none; }
  @media (min-width:1280px) { .header-phone { display:inline; } }

  .nav-toggle { display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; padding:var(--s-3); cursor:pointer; }
  @media (min-width:1100px) { .nav-toggle { display:none; } }
  .nav-toggle span { display:block; width:22px; height:1.5px; background:var(--white); transition:transform var(--dur) var(--ease), opacity var(--dur-fast), background var(--dur) var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

  .mobile-nav {
    position:fixed; inset:0; z-index:99;
    background:var(--cream-light); color:var(--ink-800);
    padding:calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8);
    overflow-y:auto; transform:translateX(100%);
    transition:transform var(--dur) var(--ease);
  }
  .mobile-nav[data-open="true"] { transform:translateX(0); }
  .mobile-nav details { border-bottom:1px solid var(--border); }
  .mobile-nav summary {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--s-4) 0; font-family:var(--font-display); font-size:1.4rem;
    color:var(--ink-900); cursor:pointer; list-style:none;
  }
  .mobile-nav summary::-webkit-details-marker { display:none; }
  .mobile-nav summary::after { content:"+"; font-size:1.4rem; color:var(--clay-500); }
  .mobile-nav details[open] summary::after { content:"–"; }
  .mobile-nav__sub { padding:0 0 var(--s-4); }
  .mobile-nav__sub a { display:block; padding:var(--s-3) 0; color:var(--ink-600); text-decoration:none; }
  .mobile-nav__flat {
    display:block; padding:var(--s-4) 0; font-family:var(--font-display);
    font-size:1.4rem; color:var(--ink-900); text-decoration:none;
    border-bottom:1px solid var(--border);
  }

  /* ---- sticky mobile action bar ---- */
  .mobile-bar {
    position:fixed; bottom:0; inset-inline:0; z-index:98;
    display:grid; grid-template-columns:repeat(3,1fr);
    background:var(--cream-light); border-top:1px solid var(--border);
  }
  @media (min-width:1100px) { .mobile-bar { display:none; } }
  .mobile-bar a {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:var(--s-3) var(--s-2); font-size:.6875rem;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-700); text-decoration:none;
  }
  .mobile-bar a + a { border-left:1px solid var(--border); }
  .mobile-bar a:last-child { background:var(--cta); color:var(--white); }
  .mobile-bar svg { width:18px; height:18px; }
  body { padding-bottom:62px; }
  @media (min-width:1100px) { body { padding-bottom:0; } }

  /* ---- hero ---- */
  .hero { position:relative; background:var(--ink-900); color:var(--text-on-dark); isolation:isolate; }
  .hero__media { position:absolute; inset:0; z-index:-2; }
  .hero__media img,.hero__media picture { width:100%; height:100%; object-fit:cover; }
  .hero::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(31,29,25,.62) 0%, rgba(31,29,25,.34) 42%, rgba(31,29,25,.86) 100%);
  }
  .hero__inner {
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; min-height:min(92vh,880px);
    padding-block:calc(var(--header-h) + var(--s-16)) var(--s-16);
  }
  .hero h1 { font-size:var(--fs-display); color:var(--white); max-width:18ch; text-wrap:balance; }
  .hero__lead { margin-top:var(--s-5); max-width:56ch; font-size:var(--fs-lead); color:#DDD6CA; }
  .hero .btn-row { margin-top:var(--s-8); justify-content:center; }
  .hero--compact .hero__inner { min-height:min(62vh,560px); }
  .hero--page .hero__inner { min-height:min(52vh,460px); }

  .hero__facts {
    display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-10);
    margin-top:var(--s-12); padding-top:var(--s-6);
    border-top:1px solid rgba(255,255,255,.16);
  }
  .hero__fact { font-size:var(--fs-sm); color:#C9C2B6; }
  .hero__fact strong { display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--white); font-weight:400; }

  /* ---- quote bar: lead capture immediately under the hero ---- */
  .quote-bar { background:var(--sand); border-bottom:1px solid rgba(31,29,25,.08); }
  .quote-bar__inner { padding-block:var(--s-10); }
  .quote-bar h2 { font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:var(--s-2); }
  .quote-bar__note { font-size:var(--fs-sm); color:var(--ink-600); }
  .quote-form { display:grid; gap:var(--s-3); margin-top:var(--s-6); }
  @media (min-width:860px) { .quote-form { grid-template-columns:1.1fr 1.1fr .9fr auto; align-items:end; } }
  .quote-form .field { margin:0; }
  .quote-form label {
    display:block; font-size:var(--fs-xs); font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink-600); margin-bottom:var(--s-2);
  }

  /* ---- cards ---- */
  .card-surface {
    background:var(--cream-card); border:1px solid rgba(31,29,25,.035);
    border-radius:var(--radius); box-shadow:var(--shadow-card);
  }

  .safari-card {
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--cream-card); border:1px solid rgba(31,29,25,.035);
    border-radius:var(--radius); box-shadow:var(--shadow-card);
    transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .safari-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-3px); }
  .safari-card__media { position:relative; overflow:hidden; aspect-ratio:4/3; display:block; }
  .safari-card__media img,.safari-card__media picture { width:100%; height:100%; object-fit:cover; }
  .safari-card__media img { transition:transform var(--dur-slow) var(--ease); }
  .safari-card:hover .safari-card__media img { transform:scale(1.05); }
  .safari-card__badge {
    position:absolute; top:var(--s-4); left:var(--s-4);
    background:rgba(31,29,25,.78); color:var(--cream);
    padding:var(--s-1) var(--s-3); border-radius:var(--radius-pill);
    font-size:.8125rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  }
  .safari-card__body { display:flex; flex-direction:column; flex:1; padding:var(--s-6); }
  .safari-card h2, .safari-card h3 { font-size:var(--fs-h3); letter-spacing:-.015em; margin-bottom:var(--s-2); }
  .safari-card h2 a, .safari-card h3 a { text-decoration:none; color:inherit; }
  .safari-card h2 a:hover, .safari-card h3 a:hover { color:var(--clay-700); }
  .safari-card__route {
    font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-500); margin-bottom:var(--s-3);
  }
  .safari-card__excerpt { font-size:var(--fs-sm); color:var(--ink-600); margin-bottom:var(--s-5); }
  .safari-card__foot {
    display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4);
    margin-top:auto; padding-top:var(--s-4); border-top:1px solid rgba(31,29,25,.08);
  }
  .price { font-family:var(--font-display); font-size:1.5rem; color:var(--ink-900); line-height:1.1; }
  .price small {
    display:block; font-family:var(--font-body); font-size:.625rem;
    letter-spacing:.18em; text-transform:uppercase; color:rgba(51,51,51,.5);
    margin-bottom:2px; font-weight:500;
  }
  .price--request { font-size:.9375rem; font-family:var(--font-body); color:var(--ink-500); }

  /* ---- destination tile ---- */
  .dest-tile {
    position:relative; display:block; overflow:hidden; border-radius:var(--radius);
    aspect-ratio:3/4; text-decoration:none; color:var(--white); background:var(--ink-800);
    box-shadow:var(--shadow-card);
  }
  .dest-tile--wide { aspect-ratio:16/10; }
  .dest-tile img,.dest-tile picture { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .dest-tile img { transition:transform var(--dur-slow) var(--ease); }
  .dest-tile:hover img { transform:scale(1.05); }
  .dest-tile::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 38%, rgba(31,29,25,.86) 100%);
    transition:background var(--dur) var(--ease);
  }
  .dest-tile:hover::after { background:linear-gradient(180deg, rgba(31,29,25,.18) 28%, rgba(31,29,25,.92) 100%); }
  .dest-tile__body { position:absolute; inset:auto 0 0 0; padding:var(--s-6); z-index:1; }
  .dest-tile__body h2, .dest-tile__body h3 { font-size:var(--fs-h3); letter-spacing:-.015em; color:var(--white); margin-bottom:var(--s-2); }
  .dest-tile__meta { font-size:var(--fs-sm); color:#C9C2B6; }
  .dest-tile__more {
    display:block; margin-top:var(--s-3); font-size:var(--fs-xs);
    letter-spacing:.18em; text-transform:uppercase; color:var(--clay-300);
    opacity:0; transform:translateY(6px);
    transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .dest-tile:hover .dest-tile__more,.dest-tile:focus-visible .dest-tile__more { opacity:1; transform:translateY(0); }

  /* ---- why-choose / value tiles ---- */
  .value-grid { display:grid; gap:var(--s-6); }
  @media (min-width:700px)  { .value-grid { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1100px) { .value-grid { grid-template-columns:repeat(4,1fr); } }
  .value {
    background:var(--cream-card); border:1px solid rgba(31,29,25,.035);
    border-radius:var(--radius); padding:var(--s-8);
  }
  .value__num {
    font-family:var(--font-display); font-size:1.5rem; color:var(--clay-500);
    display:block; margin-bottom:var(--s-4);
  }
  .value h3 { font-size:1.15rem; margin-bottom:var(--s-3); }
  .value p { font-size:var(--fs-sm); color:var(--ink-600); }

  /* ---- reviews ---- */
  .review {
    background:var(--cream-card); border:1px solid rgba(31,29,25,.035);
    border-radius:var(--radius); padding:var(--s-8); height:100%;
    display:flex; flex-direction:column;
  }
  .review__stars { color:var(--clay-500); letter-spacing:.2em; font-size:.9rem; margin-bottom:var(--s-4); }
  .review__body { font-family:var(--font-display); font-size:1.15rem; line-height:1.5; color:var(--ink-800); }
  .review__who { margin-top:auto; padding-top:var(--s-5); font-size:var(--fs-sm); color:var(--ink-500); }
  .review__who strong { display:block; color:var(--ink-800); font-weight:600; }

  /* ---- editorial feature ---- */
  .feature { display:grid; gap:var(--s-8); align-items:center; }
  @media (min-width:900px) {
    .feature { grid-template-columns:6fr 5fr; gap:var(--s-16); }
    .feature--flip .feature__media { order:2; }
    .feature--flip .feature__body { order:1; }
  }
  .feature__media img,.feature__media picture { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }

  /* ---- fact strip ---- */
  .facts { display:grid; gap:0; background:var(--cream-card); border:1px solid rgba(31,29,25,.04); border-radius:var(--radius); overflow:hidden; }
  @media (min-width:700px) { .facts { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } }
  .facts__item { padding:var(--s-6); border-bottom:1px solid rgba(31,29,25,.07); }
  @media (min-width:700px) {
    .facts__item { border-bottom:0; border-right:1px solid rgba(31,29,25,.07); }
    .facts__item:last-child { border-right:0; }
  }
  .facts__item:last-child { border-bottom:0; }
  .facts__label { display:block; font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-500); margin-bottom:var(--s-2); }
  .facts__value { font-family:var(--font-display); font-size:1.1rem; color:var(--ink-900); line-height:1.4; }

  /* ---- itinerary ---- */
  .itinerary { display:grid; gap:var(--s-3); }
  .itin-day {
    background:var(--cream-card); border:1px solid rgba(31,29,25,.04);
    border-radius:var(--radius); padding:var(--s-5) var(--s-6);
  }
  .itin-day > summary {
    display:flex; align-items:center; gap:var(--s-5);
    cursor:pointer; list-style:none;
  }
  .itin-day > summary::-webkit-details-marker { display:none; }
  .itin-day__num {
    flex-shrink:0; width:44px; height:44px; border-radius:var(--radius-pill);
    display:grid; place-items:center; background:var(--cream);
    border:1px solid var(--border); font-family:var(--font-display);
    font-size:1rem; color:var(--clay-700);
  }
  .itin-day[open] .itin-day__num { background:var(--clay-500); color:var(--white); border-color:var(--clay-500); }
  .itin-day__title { font-family:var(--font-display); font-size:1.2rem; color:var(--ink-900); flex:1; }
  .itin-day__toggle { font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-500); white-space:nowrap; }
  .itin-day__body { padding:var(--s-5) 0 0 calc(44px + var(--s-5)); }
  @media (max-width:600px) { .itin-day__body { padding-left:0; } }
  .itin-day__body ul { list-style:none; }
  .itin-day__body li { position:relative; padding-left:var(--s-5); margin-bottom:var(--s-2); font-size:var(--fs-sm); color:var(--ink-600); }
  .itin-day__body li::before { content:""; position:absolute; left:0; top:.65em; width:8px; height:1px; background:var(--clay-400); }
  .itin-stats { display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid rgba(31,29,25,.08); }
  .itin-stats div { font-size:var(--fs-xs); color:var(--ink-500); }
  .itin-stats strong { display:block; color:var(--ink-800); font-weight:600; }

  /* ---- included / excluded ---- */
  .incl { display:grid; gap:var(--s-8); }
  @media (min-width:700px) { .incl { grid-template-columns:1fr 1fr; } }
  .incl ul { list-style:none; }
  .incl li { position:relative; padding-left:var(--s-6); margin-bottom:var(--s-3); font-size:var(--fs-sm); }
  .incl li::before { position:absolute; left:0; top:0; font-size:1rem; }
  .incl--yes li::before { content:"✓"; color:var(--success); }
  .incl--no li::before  { content:"×"; color:var(--ink-400); }
  .incl--no li { color:var(--ink-500); }

  /* ---- booking rail ---- */
  .rail {
    background:var(--cream-card); border:1px solid rgba(31,29,25,.04);
    border-radius:var(--radius); padding:var(--s-8); box-shadow:var(--shadow-card);
  }
  @media (min-width:1024px) { .rail { position:sticky; top:calc(var(--header-h) + var(--s-5)); } }
  .rail__price { padding-bottom:var(--s-5); margin-bottom:var(--s-5); border-bottom:1px solid rgba(31,29,25,.08); }
  .rail__price .price { font-size:2.1rem; }
  .rail dl { display:grid; grid-template-columns:auto 1fr; gap:var(--s-3) var(--s-5); font-size:var(--fs-sm); margin-bottom:var(--s-6); }
  .rail dt { color:var(--ink-500); }
  .rail dd { text-align:right; font-weight:600; }
  .rail__alt { margin-top:var(--s-3); }

  /* ---- FAQ ---- */
  .faq { display:grid; gap:var(--s-3); }
  .faq__item {
    background:var(--cream-card); border:1px solid rgba(31,29,25,.04);
    border-radius:var(--radius); padding:var(--s-5) var(--s-6);
  }
  .faq__item summary {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
    cursor:pointer; list-style:none;
    font-family:var(--font-display); font-size:1.15rem; color:var(--ink-900);
  }
  .faq__item summary::-webkit-details-marker { display:none; }
  .faq__item summary::after { content:"+"; color:var(--clay-500); font-size:1.4rem; line-height:1; flex-shrink:0; }
  .faq__item[open] summary::after { content:"–"; }
  .faq__item .faq__answer { padding-top:var(--s-4); color:var(--ink-600); font-size:var(--fs-sm); }

  /* ---- breadcrumbs ---- */
  .crumbs { padding-block:var(--s-5); font-size:var(--fs-xs); letter-spacing:.06em; color:var(--ink-500); }
  .crumbs ol { display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; }
  .crumbs li::after { content:"·"; margin-left:var(--s-2); color:var(--sand-line); }
  .crumbs li:last-child::after { content:""; }
  .crumbs a { display:inline-block; padding-block:4px; text-decoration:none; color:var(--ink-500); }
  .crumbs a:hover { color:var(--clay-700); }

  /* ---- forms ---- */
  .field { margin-bottom:var(--s-5); }
  .field label { display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--s-2); }
  .field .hint { display:block; font-size:var(--fs-xs); color:var(--ink-500); font-weight:400; margin-top:2px; }
  .input,.field input,.field select,.field textarea {
    width:100%; padding:.8rem 1.1rem; font-size:1rem;
    background:var(--white); color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius-pill);
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .field textarea { min-height:130px; resize:vertical; border-radius:var(--radius); }
  .field input:focus,.field select:focus,.field textarea:focus {
    border-color:var(--clay-500); box-shadow:0 0 0 3px rgba(201,123,90,.16); outline:none;
  }
  .field--error input,.field--error textarea,.field--error select { border-color:var(--danger); }
  .field__error { display:block; margin-top:var(--s-2); font-size:var(--fs-sm); color:var(--danger); }
  .field-row { display:grid; gap:var(--s-4); }
  @media (min-width:640px) { .field-row--2 { grid-template-columns:1fr 1fr; } .field-row--3 { grid-template-columns:repeat(3,1fr); } }
  .checkbox-grid { display:grid; gap:var(--s-3); }
  @media (min-width:560px) { .checkbox-grid { grid-template-columns:1fr 1fr; } }
  /* Every other control on this site is bespoke, and these were the browser's
     own 13px boxes. accent-color brands them without reimplementing a
     checkbox, so keyboard behaviour and the platform's own focus ring stay
     exactly as they were. The row is the target, and it clears 24px. */
  .check {
    display:flex; align-items:center; gap:var(--s-3);
    min-height:24px; padding-block:2px;
    font-size:var(--fs-sm); cursor:pointer;
  }
  .check input[type="checkbox"],
  .check input[type="radio"] {
    flex:none; width:20px; height:20px; margin:0; padding:0;
    accent-color:var(--cta); cursor:pointer;
  }
  .honeypot { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

  .alert { padding:var(--s-4) var(--s-5); border-radius:var(--radius); margin-bottom:var(--s-5); font-size:var(--fs-sm); border:1px solid; }
  .alert--success { border-color:rgba(47,107,79,.35); background:#EEF5F0; color:#1F4A36; }
  .alert--error   { border-color:rgba(163,44,30,.35); background:#FAEFEE; color:#7A1F14; }

  /* ---- map ---- */

  /* ---- footer: light, not dark ---- */
  .site-footer {
    background:var(--cream-light); color:var(--ink-600);
    padding-block:var(--s-20) var(--s-8); font-size:var(--fs-sm);
    border-top:1px solid var(--border);
  }
  .site-footer h4, .site-footer h2.h-sub, .site-footer .h-sub {
    color:var(--ink-900); font-size:var(--fs-xs); letter-spacing:.18em;
    text-transform:uppercase; margin-bottom:var(--s-5); font-family:var(--font-body); font-weight:600;
  }
  .site-footer a { color:var(--ink-600); text-decoration:none; }
  .site-footer a:hover { color:var(--clay-700); }
  .footer-grid { display:grid; gap:var(--s-10); }
  @media (min-width:700px)  { .footer-grid { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1024px) { .footer-grid { grid-template-columns:1.6fr repeat(4,1fr); gap:var(--s-8); } }
  /* WCAG 2.2 target size: a link in a list is not an inline link in a
     sentence, so the 24px minimum applies. Padding grows the hit area while
     the reduced margin keeps the visual rhythm unchanged. */
  .footer-grid ul { list-style:none; margin:0; padding:0; }
  .footer-grid ul li { margin-bottom:var(--s-1); }
  .footer-grid ul li a { display:inline-block; padding-block:5px; }
  .footer-brand .logo { margin-bottom:var(--s-5); }
  .footer-brand .logo__img--dark  { display:none; }
  .footer-brand .logo__img--light { display:block; }
  .footer-brand .logo__text { color:var(--ink-900); }
  .footer-brand p { font-size:var(--fs-sm); max-width:38ch; }
  .footer-contact { margin-top:var(--s-6); }
  .footer-contact div { margin-bottom:var(--s-1); }
  .footer-contact a { display:inline-block; padding-block:5px; }
  .footer-bottom a { display:inline-block; padding-block:5px; }
  .footer-bottom {
    display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
    margin-top:var(--s-16); padding-top:var(--s-6);
    border-top:1px solid var(--border); font-size:var(--fs-xs);
  }
  .social { display:flex; gap:var(--s-3); margin-top:var(--s-5); }
  .social a {
    display:grid; place-items:center; width:38px; height:38px;
    border:1px solid var(--border); border-radius:var(--radius-pill);
    transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .social a:hover { border-color:var(--clay-500); background:var(--clay-500); color:var(--white); }
  .social svg { width:16px; height:16px; fill:currentColor; }

  /* ---- reveal ---- */
  .js-reveal .reveal {
    opacity:0; transform:translateY(16px);
    transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .js-reveal .reveal.is-in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity:1; transform:none; } }

  /* ---- prose ---- */
  .prose { max-width:var(--container-text); }
  .prose > * + * { margin-top:var(--s-5); }
  /* Headings inside body copy are section markers, not page titles. At the
     base h2 scale they reach 50px against 16px text, which is the size of an
     h1 sitting inside a paragraph run. This matches the long-form section
     titles so a page carrying both reads as one document. */
  .prose h2 {
    margin-top:var(--s-14);
    font-size:clamp(1.375rem, 2vw, 1.75rem);
    letter-spacing:-.015em; line-height:1.2;
    text-wrap:balance;
  }
  .prose h2 + p { margin-top:var(--s-5); }
  .prose h3 { margin-top:var(--s-10); font-size:var(--fs-h3); }
  .prose ul,.prose ol { padding-left:var(--s-6); }
  .prose li { margin-bottom:var(--s-2); }
  .prose blockquote {
    border-left:2px solid var(--clay-500); padding-left:var(--s-6);
    font-family:var(--font-display); font-size:1.25rem; color:var(--ink-700);
  }
  .prose img { margin-block:var(--s-8); border-radius:var(--radius); }
  .prose table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
  .prose th,.prose td { padding:var(--s-3); border-bottom:1px solid var(--border); text-align:left; }
  .prose th { font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-500); }

  .empty {
    padding:var(--s-16) var(--s-8); text-align:center;
    background:var(--cream-card); border:1px dashed var(--border); border-radius:var(--radius);
  }
  .empty h3 { margin-bottom:var(--s-3); }
  .empty p { margin-inline:auto; }
}

/* ======================================================== UTILITIES ===== */
@layer utilities {
  .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .text-center { text-align:center; }
  .mt-0{margin-top:0}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}
  .mt-8{margin-top:var(--s-8)}.mt-12{margin-top:var(--s-12)}
  .mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}
  .muted { color:var(--ink-500); }
  .no-scroll { overflow:hidden; }
}

/* Article byline (Phase 21). Only rendered when a real person is credited. */
@layer components {
  .byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
    padding-top: var(--s-6); border-top: 1px solid var(--border);
    font-size: var(--fs-sm); color: var(--ink-600);
  }
  .byline__photo {
    width: 44px; height: 44px; border-radius: var(--radius-pill);
    object-fit: cover; flex-shrink: 0;
  }
  .byline a { color: var(--clay-700); font-weight: 600; text-decoration: none; }
  .byline a:hover { text-decoration: underline; }
  .byline__reviewer { color: var(--ink-500); }
  .byline__reviewer a { font-weight: 500; }
}

/* Distance list on the Arusha local page (Phase 12). */
@layer components {
  .dist { display: grid; gap: var(--s-3); }
  .dist > div {
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
    justify-content: space-between; align-items: baseline;
    padding-bottom: var(--s-3); border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .dist dt { font-weight: 600; color: var(--white); }
  .dist dd { color: #C9C2B6; font-size: var(--fs-sm); text-align: right; }
}


/* ==================================================== LONG-FORM ======== */
/* Editorial sections from `content_sections`.
   Pages carrying these run 1,500–2,500 words, so the block is built as a
   reading layout rather than a stack: one measured column at 70ch, and from
   three sections upward a quiet contents index that sticks beside it. Without
   the index the column sat alone in a 1400px container with 640px of dead
   space to its right, which read as an unfinished grid rather than a choice. */
@layer components {
  /* The block always follows another section on the same ground, so its own
     top padding doubled the gap into a hole. The preceding section's bottom
     padding is the separation. */
  .section--sections { padding-top: 0; }

  /* The sticky contents index that sat beside this column was removed at the
     owner's request. On wide containers each section splits into a pinned
     head and its text instead; see the long-form split block at the end. */
  .longform { display: block; }
  .lf-body  { display: flex; flex-direction: column; gap: var(--s-20); }

  /* ---- one section ---- */
  .lf { max-width: var(--container-text); scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
  .lf__title {
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-family: var(--font-display);
    line-height: 1.2; letter-spacing: -0.015em;
    color: var(--ink-900);
    margin-bottom: var(--s-6);
    text-wrap: balance;
  }
  .lf__title::after {
    content: ""; display: block; width: 40px; height: 1px;
    margin-top: var(--s-5); background: var(--clay-500);
  }
  .lf__prose > p + p { margin-top: var(--s-5); }
  .lf__prose p { color: var(--text); max-width: 70ch; }
  /* The opening paragraph carries the section; the rest support it. */
  .lf__prose p:first-child { font-size: var(--fs-lead); color: var(--ink-700); }

  /* ---- two columns, for material that is scanned as much as read ---- */
  .lf--columns { max-width: var(--container-narrow); }
  @media (min-width: 900px) {
    .lf--columns .lf__prose { columns: 2; column-gap: var(--s-16); }
    .lf--columns .lf__prose p { break-inside: avoid; max-width: none; }
    .lf--columns .lf__prose > p + p { margin-top: 0; padding-top: var(--s-5); }
  }

  /* ---- practical rules and warnings that must not be skimmed past ---- */
  .lf--callout {
    background: var(--cream-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s-10) var(--s-8);
    box-shadow: var(--shadow-card);
  }
  .lf--callout .lf__title {
    font-family: var(--font-body); font-weight: 600;
    font-size: var(--fs-h4); letter-spacing: 0;
    margin-bottom: var(--s-5);
  }
  .lf--callout .lf__title::after { display: none; }
  .lf--callout .lf__prose p { color: var(--ink-600); font-size: var(--fs-sm); }
  .lf--callout .lf__prose p:first-child { font-size: var(--fs-sm); color: var(--ink-600); }

  /* ---- term lists — seasonality, kit, inclusions ---- */
  .lf__terms { display: grid; gap: 0; }
  .lf__term {
    display: grid; gap: var(--s-1);
    padding: var(--s-5) 0;
    border-top: 1px solid var(--border);
  }
  .lf__term:last-child { border-bottom: 1px solid var(--border); }
  .lf__term dt {
    font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
    color: var(--clay-700); font-weight: 600;
  }
  .lf__term dd { color: var(--text); }
  @media (min-width: 768px) {
    .lf__term { grid-template-columns: 190px 1fr; gap: var(--s-8); align-items: baseline; }
    .lf__term--full { grid-template-columns: 1fr; }
  }

}

/* =================================================== ASIDE RAIL ======== */
/* The destination, day-trip and guide bodies are pinned left at 760px inside
   a 1400px container, which left ~640px of empty cream beside every one of
   them. The rail fills it with locator, at-a-glance facts and one action, and
   collapses under the text below 1080px. */
@layer components {
  .aside-layout > * { min-width: 0; }

  /* The text column takes the slack and the prose inside it keeps its own
     measure, so the rail sits flush with the right edge of every other section
     on the page instead of leaving an unfinished margin beyond it. */
  @media (min-width: 1080px) {
    .aside-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: var(--s-16);
      align-items: start;
    }
  }
  @media (min-width: 1400px) {
    .aside-layout { gap: var(--s-20); }
  }

  .aside-rail { margin-top: var(--s-12); }
  .aside-rail__inner { display: flex; flex-direction: column; gap: var(--s-5); }

  @media (min-width: 1080px) {
    .aside-rail { margin-top: 0; }
    .aside-rail__inner { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
  }

  .rail-card {
    background: var(--cream-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s-6);
  }
  .rail-card__title {
    font-family: var(--font-body); font-weight: 600;
    font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-600); margin-bottom: var(--s-4);
  }

  /* Definition rows inside a card. */
  .rail-list { display: grid; gap: 0; }
  .rail-list > div { padding: var(--s-3) 0; border-top: 1px solid var(--border); }
  .rail-list > div:first-child { border-top: 0; padding-top: 0; }
  .rail-list dt {
    font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
    color: var(--clay-700); font-weight: 600; margin-bottom: var(--s-1);
  }
  .rail-list dd { color: var(--text); font-size: var(--fs-sm); line-height: 1.55; }

  /* Link rows inside a card. */
  .rail-links { display: flex; flex-direction: column; }
  .rail-links a {
    display: block; padding: var(--s-3) 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm); line-height: 1.4;
    color: var(--ink-700); text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
  }
  .rail-links a:first-child { border-top: 0; padding-top: 0; }
  .rail-links a:hover { color: var(--clay-700); }
  /* Index links in the rail track reading position the same way the long-form
     index does; plain link rows in the rail never carry the attribute. */
  .rail-links a[aria-current="true"] { color: var(--clay-700); font-weight: 600; }
  .rail-links a span { display: block; color: var(--ink-500); font-size: var(--fs-xs); margin-top: 2px; }

  .rail-card--cta { background: var(--ink-900); border-color: var(--ink-900); }
  .rail-card--cta .rail-card__lead {
    color: var(--text-on-dark); font-size: var(--fs-sm);
    line-height: 1.55; margin-bottom: var(--s-5);
  }
  .rail-card--cta .rail-card__note {
    color: var(--ink-400); font-size: var(--fs-xs);
    text-align: center; margin-top: var(--s-3);
  }
  .btn--block { display: flex; width: 100%; }

  /* ---- locator map ---- */
  .locator svg { width: 100%; height: auto; display: block; }
  .locator__caption {
    margin-top: var(--s-3); text-align: center;
    font-size: var(--fs-xs); color: var(--ink-600);
    letter-spacing: .04em; line-height: 1.5;
  }
  .locator__coords {
    display: block; margin-top: 2px;
    color: var(--ink-500); font-variant-numeric: tabular-nums;
  }
}

/* ================================================ MONTH SELECTOR ======= */
/* Seasonality is the most repeated subject on the site and the one a wall of
   prose serves worst — a reader wants their own month, not a paragraph about
   the year. Twelve pills coloured by season answer "when is it dry" before a
   word is read; the panel answers the rest.
   With no JavaScript every panel stays visible, so the content is complete for
   a reader and a crawler either way. */
@layer components {
  .months__pills {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-bottom: var(--s-4);
  }
  .months__pill {
    flex: 1 1 auto; min-width: 56px;
    padding: var(--s-3) var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--cream-card);
    font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-600); cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
  }
  .months__pill:hover { border-color: var(--ink-400); color: var(--ink-900); }

  /* The season tint sits on the left edge as a bar rather than filling the
     pill: a full wash of four colours across twelve pills reads as a chart
     nobody asked for, and the selected state needs the strong fill. */
  .months__pill { position: relative; padding-left: var(--s-4); }
  .months__pill::before {
    content: ""; position: absolute; left: 5px; top: 50%;
    width: 3px; height: 14px; margin-top: -7px; border-radius: 2px;
  }
  .months__pill--dry::before      { background: #C08A2E; }
  .months__pill--shoulder::before { background: #8A9A5B; }
  .months__pill--green::before    { background: #4F7A4A; }
  .months__pill--wet::before      { background: #5B7C93; }

  .months__pill[aria-selected="true"] {
    background: var(--ink-900); border-color: var(--ink-900); color: var(--white);
  }
  .months__pill[aria-selected="true"]::before { background: var(--clay-300); }

  .months__key {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
    font-size: var(--fs-xs); color: var(--ink-600);
    margin-bottom: var(--s-6);
  }
  .months__swatch {
    width: 10px; height: 10px; border-radius: 2px; display: inline-block;
    margin-left: var(--s-3);
  }
  .months__key .months__swatch:first-child { margin-left: 0; }
  .months__swatch--dry      { background: #C08A2E; }
  .months__swatch--shoulder { background: #8A9A5B; }
  .months__swatch--green    { background: #4F7A4A; }
  .months__swatch--wet      { background: #5B7C93; }

  .months__panel {
    padding: var(--s-6) 0 0;
    border-top: 1px solid var(--border);
  }
  .months__panel + .months__panel { margin-top: var(--s-5); }
  .months__month {
    font-family: var(--font-body); font-weight: 600;
    font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
    color: var(--clay-700); margin-bottom: var(--s-3);
  }
  .months__panel p { color: var(--text); max-width: 70ch; }

  /* Once the script runs, one panel at a time and the separators go. */
  .months[data-enhanced] .months__panel { border-top: 0; padding-top: 0; margin-top: 0; }
  .months[data-enhanced] .months__panel[hidden] { display: none; }
}

/* ============================================== SECTION FIGURES ======== */
/* One photograph inside a long-form section, sized to the text column rather
   than breaking out of it: the job is to interrupt the reading rhythm, not to
   restart the page. */
@layer components {
  .lf__figure { margin: var(--s-8) 0; }
  /* height:auto is not optional here. The renderer emits real width and height
     attributes to reserve layout space, and setting width alone makes the
     browser use that height literally — a 1200x675 source rendered 760 wide
     came out 760x675, stretched. */
  .lf__figure picture,
  .lf__figure img {
    width: 100%; height: auto;
    border-radius: var(--radius);
  }
  .lf__figure picture { box-shadow: var(--shadow-card); overflow: hidden; }
  .lf__figure figcaption {
    margin-top: var(--s-3);
    font-size: var(--fs-xs); color: var(--ink-600);
    line-height: 1.5;
  }
  /* A lead image opens the section, so it sits tighter to the heading below. */
  .lf--illustrated > .lf__figure:first-child { margin-top: 0; margin-bottom: var(--s-6); }
}

/* ================================================== CARD RAIL ========== */
/* Horizontal rail for card sets, as an alternative to the 3-up grid. Scrolls
   with snap on touch and with the scrollbar on desktop, and — the part most
   carousels get wrong — every card stays a real link in the DOM, reachable by
   keyboard and readable by a crawler. No slide state, no clones, no autoplay. */
@layer components {
  .rail-scroll {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: var(--s-6);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--s-4);
  }

  /* Bleed to the container edges so a card sits half-off screen and signals
     that the row continues. Only where the row actually overflows: applying it
     at every width gave a three-card row nine pixels of scroll and therefore a
     scrollbar for nothing. */
  @media (max-width: 899px) {
    .rail-scroll {
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
    }
  }
  .rail-scroll > * { scroll-snap-align: start; }

  /* The minimum has to leave room for three columns plus two gaps inside the
     container at the width its breakpoint starts, or `1fr` never gets any free
     space to distribute, every card sticks at its minimum, and the row
     overflows by a few pixels — a scrollbar for nothing. At 1100px the
     container is about 1020px: 3 x 300 + 2 x 24 = 948, which fits and leaves
     slack for the columns to grow into on wider screens. */
  @media (min-width: 640px)  { .rail-scroll { grid-auto-columns: minmax(280px, 1fr); } }
  @media (min-width: 1100px) { .rail-scroll { grid-auto-columns: minmax(300px, 1fr); } }

  /* A visible track, because a hidden scrollbar on desktop hides the affordance. */
  .rail-scroll { scrollbar-width: thin; scrollbar-color: var(--clay-400) var(--sand-line); }
  .rail-scroll::-webkit-scrollbar { height: 6px; }
  .rail-scroll::-webkit-scrollbar-track {
    background: var(--sand-line); border-radius: 999px;
  }
  .rail-scroll::-webkit-scrollbar-thumb {
    background: var(--clay-400); border-radius: 999px;
  }
  .rail-scroll::-webkit-scrollbar-thumb:hover { background: var(--clay-500); }

  .rail-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-6); flex-wrap: wrap;
  }
  .rail-hint {
    font-size: var(--fs-xs); color: var(--ink-600);
    letter-spacing: .04em;
  }
  @media (min-width: 900px) { .rail-hint { display: none; } }
}

/* ═══════════════════════════════════════════════════════ REDESIGN ═══════ */
/* Layered after the originals so the whole redesign is one readable block
   rather than forty scattered edits. Anything here supersedes the rule of the
   same name above; the earlier rules stay because several are still correct and
   because reverting is one deletion. */
@layer components {

  /* ---- the highlight swash -----------------------------------------------
     The reference's signature device: a marker stroke behind the operative
     word of a heading. Drawn as a background gradient rather than an image so
     it scales with the type and costs nothing, and sitting at 55% height with
     a small negative skew so it reads as drawn rather than as a table cell.
     The text keeps its own colour and contrast — the swash is behind it. */
  .mark {
    background-image: linear-gradient(var(--highlight), var(--highlight));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.42em;
    padding-inline: .12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .section--dark .mark,
  .hero .mark { --highlight: rgba(206,107,34,.55); }

  /* ---- headings -----------------------------------------------------------
     The reference runs the display face very large and very tight. */
  h1, h2 { letter-spacing: -0.03em; text-wrap: balance; }
  .hero h1 { letter-spacing: -0.035em; }

  /* ---- buttons ------------------------------------------------------------
     Two only: a solid pill and an outlined pill. */
  .btn {
    padding: 1rem 2rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0;
    border-width: 1.5px;
  }
  .btn--primary { background: var(--cta); color: var(--white); border-color: var(--cta); }
  .btn--primary:hover { background: var(--ink-900); border-color: var(--ink-900); }
  .btn--outline {
    background: transparent; border-color: var(--ink-900); color: var(--ink-900);
  }
  .btn--outline:hover { background: var(--ink-900); color: var(--white); }
  .btn--ghost { border-color: rgba(255,255,255,.75); background: transparent; }
  .btn--ghost:hover { background: var(--white); border-color: var(--white); }
  .btn--ghost:hover span { color: var(--ink-900); }
  .btn--sm { padding: .6rem 1.3rem; font-size: var(--fs-xs); }
  .btn--lg { padding: 1.15rem 2.6rem; font-size: var(--fs-body); }

  /* ---- section heads ------------------------------------------------------
     Centred, with the eyebrow demoted to a small caps line and much more air
     under the heading than the old scale gave it. */
  .section-head { margin-bottom: var(--s-16); }
  .section-head h2 { margin-top: var(--s-2); }
  .section-head .lead { font-size: var(--fs-lead); color: var(--ink-600); }

  .eyebrow {
    font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
    font-weight: 600; color: var(--clay-700);
  }

  /* ---- cards --------------------------------------------------------------
     White on the warm ground, hard-rounded, shadow instead of a border. */
  /* .dest-tile is excluded on purpose: it is an image tile whose ink-800
     ground shows through if the photograph fails, and white there would leave
     white text on white. The CTA rail card is re-asserted below for the same
     class of reason — a blanket white would have made its light text
     invisible. */
  .safari-card, .review, .rail-card, .lf--callout {
    background: var(--white);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .dest-tile { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-card); }
  .rail-card--cta {
    background: var(--ink-900);
    box-shadow: none;
  }
  .safari-card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .safari-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .safari-card__body { padding: var(--s-6) var(--s-6) var(--s-8); }
  .safari-card h3 { font-size: var(--fs-h3); }

  .lf--callout { padding: var(--s-10) var(--s-8); }

  /* ---- long-form ----------------------------------------------------------
     Bigger type wants more room between sections and a heavier section title. */
  .lf-body { gap: var(--s-24); }
  .lf__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .lf__title::after { width: 56px; background: var(--clay-500); }
  .lf__prose p:first-child { font-size: var(--fs-lead); color: var(--ink-700); }
  .prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

  /* ---- dark bands ---------------------------------------------------------
     The reference uses near-black full-bleed bands to break the paper ground. */
  .section--dark { background: var(--ink-900); color: var(--text-on-dark); }
  .section--dark .eyebrow { color: var(--clay-300); }
  .section--dark .lead { color: #C9C2B6; }
  .section--alt { background: var(--paper-deep); border-block: 0; }

  /* ---- rails: circular arrows --------------------------------------------
     The reference pairs its card rails with round accent arrows. These are
     added by script only when the rail actually overflows, and the rail stays
     fully usable by scroll, keyboard and touch without them. */
  .rail-wrap { position: relative; }
  .rail-arrow {
    position: absolute; top: 38%; z-index: 3;
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--cta); color: var(--white);
    border: 0; cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .rail-arrow:hover { background: var(--ink-900); }
  .rail-arrow[disabled] { opacity: .25; cursor: default; }
  .rail-arrow--prev { left: calc(var(--gutter) * -1 + 4px); }
  .rail-arrow--next { right: calc(var(--gutter) * -1 + 4px); }
  .rail-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
  @media (max-width: 1099px) { .rail-arrow { display: none; } }

  /* ---- testimonials -------------------------------------------------------
     The reference sets its pull quotes in the display face at display size.
     Applied to the review card rather than to a standalone quote block: there
     are no first-party reviews on this site yet by design, and a component
     with nothing truthful to put in it is dead code. When the owner supplies
     real ones they arrive in this treatment. */
  .review__body {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    line-height: 1.35; letter-spacing: -0.015em; color: var(--ink-900);
  }
  .review__who { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--ink-600); }
  .review__who strong { display: block; color: var(--ink-900); }
}

@layer components {
  /* The pills were a flex row with `flex:1 1 auto`, which makes whatever lands
     on the last row grow to fill it — at the redesign's larger base size twelve
     months wrap and December stretched across a row of its own. A grid wraps
     into even columns instead, and every pill keeps the same width whatever the
     container does. */
  .months__pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: var(--s-2);
  }
  .months__pill { min-width: 0; }
}

@layer components {
  /* The static header (pages with no hero behind it) inherited the base nav
     rule's clay-300 hover/active colour, which is tuned for white text on a
     dark hero and lands at 1.8:1 on the light bar. The solid-on-scroll header
     already had this override; the static one never did. Caught by
     tools/check-contrast.php. */
  .site-header--static .nav__link:hover,
  .site-header--static .nav__link[aria-current="page"] { color: var(--clay-700); }
}

@layer tokens {
  :root {
    /* ink-500 cleared AA on the page ground at 4.83:1 but not on the deeper
       alternating band, where every .muted and .hint sits at 4.39:1. Darkened
       until it passes on the darker of the two grounds rather than the
       lighter. */
    --ink-500:#67635B;
  }
}

@layer components {
  /* The ghost button never set its own colour, so the anchor fell through to
     the base `a` rule and rendered clay-700 on the near-black hero — 2.4:1.
     It is a dark-ground button, so white is its default and the border follows
     the text; the one light-ground use passes an inline colour and the border
     follows that instead. */
  .btn--ghost { color: var(--white); border-color: currentColor; }
  .btn--ghost span { color: inherit; }
  .btn--ghost:hover { background: var(--white); border-color: var(--white); }
  .btn--ghost:hover span { color: var(--ink-900); }
}


  /* ---- megamenu (2026-09-08): full-width panel of grouped columns + a card ---- */
  .site-header__inner { position:relative; }
  .nav__item--mega { position:static; }
  .nav__panel--mega {
    left:0; right:0; min-width:0; padding:var(--s-6) var(--s-8) var(--s-8);
    border-radius:0 0 var(--radius) var(--radius);
  }
  .mega__head {
    display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
    padding-bottom:var(--s-4); margin-bottom:var(--s-5); border-bottom:1px solid var(--border);
  }
  .nav__panel--mega .mega__all {
    display:inline-block; padding:var(--s-1) 0; font-family:var(--font-display);
    font-size:1.15rem; color:var(--ink-900); border-radius:0;
  }
  .nav__panel--mega .mega__all:hover { background:none; color:var(--clay-700); }
  .nav__panel--mega .mega__phone {
    display:inline-block; padding:var(--s-1) 0; font-size:var(--fs-sm); font-weight:500;
    color:var(--clay-700); border-radius:0;
  }
  .nav__panel--mega .mega__phone:hover { background:none; color:var(--ink-900); text-decoration:underline; }
  .mega__grid {
    display:grid; gap:var(--s-8); align-items:start;
    grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)) 270px;
  }
  .mega__col ul { list-style:none; margin:0; padding:0; }
  .mega__heading {
    font-size:var(--fs-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-900); margin-bottom:var(--s-3); padding-inline:var(--s-3);
  }
  .nav__panel--mega .mega__heading a { display:inline; padding:0; color:inherit; border-radius:0; }
  .nav__panel--mega .mega__heading a:hover { background:none; color:var(--clay-700); }
  .nav__panel--mega .mega__col li a { padding-block:var(--s-2); }
  .nav__panel--mega .mega__feature {
    display:block; padding:0; overflow:hidden; background:var(--cream);
    border:1px solid var(--border); border-radius:var(--radius);
  }
  .nav__panel--mega .mega__feature:hover { background:var(--cream); }
  /* The source img element carries width/height attributes, which beat a CSS ratio
     on the image itself; the ratio goes on the box and the image fills it. */
  .mega__feature picture { position:relative; display:block; width:100%; aspect-ratio:4 / 3; overflow:hidden; }
  .mega__feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .mega__feature-body { display:block; padding:var(--s-4) var(--s-5) var(--s-5); }
  .mega__feature-kicker {
    display:block; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
    color:var(--clay-700); margin-bottom:var(--s-2);
  }
  .mega__feature strong {
    display:block; font-family:var(--font-display); font-weight:500; font-size:1.05rem;
    line-height:1.3; color:var(--ink-900); margin-bottom:var(--s-2);
  }
  .mega__feature:hover strong { color:var(--clay-700); }
  .mega__feature-text { display:block; font-size:var(--fs-sm); line-height:1.5; color:var(--ink-600); }
  .mobile-nav__group {
    margin-top:var(--s-4); padding-bottom:var(--s-1);
    font-size:var(--fs-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-900);
  }

  /* ---- footer: enquiry band + back to top ---- */
  .footer-cta {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-6);
    padding:var(--s-6) var(--s-8); margin-bottom:var(--s-16);
    background:var(--cream); border:1px solid var(--border); border-radius:var(--radius);
  }
  .footer-cta .eyebrow { color:var(--clay-700); }
  .footer-cta__line {
    display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4);
    margin-top:var(--s-2); font-family:var(--font-display); font-size:1.3rem; color:var(--ink-900);
  }
  .footer-cta__line a:not(.btn) { color:var(--clay-700); display:inline-block; padding-block:5px; }
  .footer-cta__line a:not(.btn):hover { color:var(--ink-900); text-decoration:underline; }
  .footer-cta__follow { display:flex; align-items:center; gap:var(--s-4); }
  .footer-cta__follow-label { font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink-900); }
  .footer-cta__follow .social { margin-top:0; }
  .footer-bottom .to-top { display:inline-block; padding:5px var(--s-3); border:1px solid var(--border); border-radius:var(--radius-pill); }
  .footer-bottom .to-top:hover { border-color:var(--clay-700); }
  /* .site-footer a sets ink on every link; the band's button keeps the button's own text colour. */
  .site-footer .btn--primary, .site-footer .btn--primary:hover { color:var(--white); }


  /* ---- homepage editorial block (components/home-story) ---- */
  .section--story { padding-block:var(--s-20); }
  .story + .story { margin-top:var(--s-20); padding-top:var(--s-16); border-top:1px solid var(--border); }
  .section-head--left { text-align:left; margin-inline:0; max-width:62ch; }
  .section-head--left .lead { margin-top:var(--s-4); }

  .steps { display:grid; gap:var(--s-6); margin-top:var(--s-10); }
  @media (min-width:760px) { .steps { grid-template-columns:repeat(3,1fr); gap:var(--s-6); } }
  .step {
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--cream-card); border:1px solid rgba(31,29,25,.04); border-radius:var(--radius);
  }
  .step__media picture { position:relative; display:block; width:100%; aspect-ratio:4 / 3; overflow:hidden; }
  .step__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .step__body { padding:var(--s-6) var(--s-6) var(--s-8); }
  .step__num {
    display:inline-block; margin-bottom:var(--s-3);
    font-family:var(--font-display); font-size:1.6rem; line-height:1; color:var(--clay-700);
  }
  .step__body h3 { font-size:1.25rem; margin-bottom:var(--s-3); }
  .step__body p { color:var(--ink-600); }
  .story__closing { max-width:62ch; margin-top:var(--s-8); color:var(--ink-700); }

  .principles { display:grid; gap:var(--s-8); align-items:center; }
  @media (min-width:900px) { .principles { grid-template-columns:5fr 6fr; gap:var(--s-16); } }
  /* An img element with width/height attributes grows a ratio box past its ratio;
     positioning it absolutely inside the box is what actually holds it. */
  .principles__media picture {
    position:relative; display:block; width:100%; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--radius);
  }
  .principles__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  @media (min-width:900px) { .principles__media { position:sticky; top:calc(var(--header-h) + var(--s-6)); } }
  .principles__body h2 { margin-bottom:var(--s-6); }
  .principles__list { list-style:none; margin:0; padding:0; counter-reset:principle; }
  .principle {
    position:relative; padding:var(--s-5) 0 var(--s-5) var(--s-12);
    border-top:1px solid var(--border); counter-increment:principle;
  }
  .principle:last-child { border-bottom:1px solid var(--border); }
  .principle::before {
    content:counter(principle, decimal-leading-zero); position:absolute; left:0; top:var(--s-5);
    font-family:var(--font-display); font-size:1.15rem; color:var(--clay-700);
  }
  .principle h3 { font-size:1.15rem; margin-bottom:var(--s-2); }
  .principle p { color:var(--ink-600); font-size:var(--fs-sm); }
  .principles__note { margin-top:var(--s-5); font-size:var(--fs-sm); color:var(--ink-500); }

  .summary {
    display:grid; gap:var(--s-8); align-items:center;
    padding:var(--s-10); background:var(--cream-card); border:1px solid rgba(31,29,25,.04);
    border-radius:var(--radius);
  }
  @media (min-width:900px) { .summary { grid-template-columns:1fr auto; gap:var(--s-16); } }
  .summary__body h2 { margin-bottom:var(--s-4); }
  .summary__body p { max-width:60ch; color:var(--ink-700); }
  .summary__body p + p { margin-top:var(--s-3); }
  .summary__cta { display:flex; flex-wrap:wrap; gap:var(--s-3); }

  /* ---- route hub: the other routes ---- */
  .route-nav { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); }
  .route-nav__label {
    font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
    font-weight:600; color:var(--ink-900); margin-right:var(--s-2);
  }
  .route-nav__link {
    display:inline-block; padding:8px var(--s-4);
    font-size:var(--fs-sm); color:var(--ink-700); text-decoration:none;
    background:var(--cream-card); border:1px solid var(--border); border-radius:var(--radius-pill);
    transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .route-nav__link:hover { border-color:var(--clay-700); color:var(--clay-700); }

  /* Route fact strips carry eight items, so a fixed four wide gives two clean
     rows instead of the auto-fit grid's ragged tail. */
  @media (min-width:900px) {
    .facts--route { grid-template-columns:repeat(4,1fr); }
    .facts--route .facts__item { border-right:1px solid rgba(31,29,25,.07); border-bottom:1px solid rgba(31,29,25,.07); }
    .facts--route .facts__item:nth-child(4n) { border-right:0; }
    .facts--route .facts__item:nth-last-child(-n+4) { border-bottom:0; }
  }

  /* One climb on a route hub: centred at card width, not stranded in column one. */
  .grid--single { display:grid; grid-template-columns:minmax(0,400px); justify-content:center; }

  /* ---- target size ------------------------------------------------------
     WCAG 2.2 asks for 24px on anything you click, and exempts a link sitting
     inside a sentence. The footer and the breadcrumbs already did this; these
     are the standalone links that were missed, at 21px and 23px. Padding
     grows the hit area and the negative margin keeps the layout identical, so
     nothing moves. Links in running prose are deliberately left alone. */
  .btn-text { padding-block:4px; margin-block:-4px; }
  .facts__value a,
  .mega__heading a,
  li > a:only-child,
  p > a:only-child {
    display:inline-block; padding-block:3px; margin-block:-3px;
  }

  /* A short standing note, for a page that is honest about what it does not
     yet have. Not an .empty box: the page below it is the content. */
  .note-inline {
    padding:var(--s-5) var(--s-6); margin-top:var(--s-8);
    background:var(--cream-card); border:1px solid rgba(31,29,25,.08); border-radius:var(--radius);
    font-size:var(--fs-sm); color:var(--ink-700); max-width:70ch;
  }
  .note-inline strong { color:var(--ink-900); }

  /* ---- full-bleed destination strip ------------------------------------
     The reference runs its destinations edge to edge with the name in italic
     serif underneath instead of scrimmed over the photograph. Four across on
     a wide screen, and a horizontal scroll below that, which is what its own
     drag slider amounts to. */
  .dest-strip {
    display:grid; grid-auto-flow:column; grid-auto-columns:62vw;
    gap:var(--s-1); margin-top:var(--s-12);
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .dest-strip::-webkit-scrollbar { display:none; }
  @media (min-width:700px)  { .dest-strip { grid-auto-columns:34vw; } }
  @media (min-width:1100px) { .dest-strip { grid-auto-columns:23.5%; } }
  .dest-strip__item {
    display:block; scroll-snap-align:start; text-decoration:none; color:inherit;
  }
  .dest-strip__media {
    display:block; position:relative; overflow:hidden;
    aspect-ratio:4 / 3; background:var(--paper-deep);
  }
  .dest-strip__media img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform var(--dur-slow) var(--ease);
  }
  .dest-strip__item:hover .dest-strip__media img { transform:scale(1.04); }
  .dest-strip__name {
    display:block; padding:var(--s-4) var(--s-3) 0; text-align:center;
    font-family:var(--font-display); font-style:italic; font-size:var(--fs-h4);
    color:var(--ink-900);
    transition:color var(--dur-fast) var(--ease);
  }
  .dest-strip__item:hover .dest-strip__name { color:var(--clay-700); }

  /* The reference sets its trip-card titles in the same italic serif as its
     headings, which carries the signature into the listings where most of the
     browsing happens. Card titles are h3, so they are not caught by the
     h1,h2 rule above. */
  .safari-card h2, .safari-card h3,
  .post-card h2, .post-card h3,
  .guide-card h3 { font-style:italic; }

  /* ---- inner-page layout, after the reference (2026-09-10) -------------
     The reference sets inner-page titles bottom-left over the photograph,
     with the breadcrumbs under them. The home hero keeps its centred
     composition. This applies to the two inner-page hero variants. */
  .hero--compact .hero__inner,
  .hero--page .hero__inner { align-items:flex-start; justify-content:flex-end; text-align:left; padding-bottom:var(--s-10); }
  .hero--compact h1, .hero--page h1 { max-width:22ch; }
  .hero--compact .btn-row, .hero--page .btn-row { justify-content:flex-start; }
  .hero__crumbs { margin-top:var(--s-8); }
  .hero__crumbs .crumbs { padding-block:0; color:rgba(255,255,255,.82); }
  .hero__crumbs .crumbs ol { padding-left:0; margin:0; }
  .hero__crumbs .crumbs a { color:rgba(255,255,255,.92); }
  .hero__crumbs .crumbs a:hover { color:var(--white); }
  .hero__crumbs .crumbs span { color:rgba(255,255,255,.82); }
  .hero__crumbs .crumbs li::after { color:rgba(255,255,255,.5); }

  /* The section tab bar: the page's own sections, then an Enquire pill. */
  .section-tabs { background:var(--paper-deep); border-bottom:1px solid var(--line); }
  .section-tabs__inner {
    display:flex; align-items:center; gap:var(--s-2);
    padding-block:var(--s-3); overflow-x:auto; scrollbar-width:none;
  }
  .section-tabs__inner::-webkit-scrollbar { display:none; }
  .section-tabs__link {
    flex:none; padding:10px var(--s-4); white-space:nowrap;
    font-size:var(--fs-sm); color:var(--ink-700); text-decoration:none;
    border-radius:var(--radius-pill);
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .section-tabs__link:hover { background:var(--white); color:var(--clay-700); }
  .section-tabs__cta { margin-left:auto; flex:none; }

  /* A tab jump must not land under the fixed header. */
  [id] { scroll-margin-top:calc(var(--header-h) + var(--s-6)); }

  /* The rounded photo strip. Renders only when a page has four or more
     gallery photographs; see components/photo-strip.php. */
  .photo-strip {
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(170px,14%);
    gap:var(--s-2); padding:var(--s-4) var(--gutter);
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .photo-strip::-webkit-scrollbar { display:none; }
  .photo-strip__item {
    position:relative; overflow:hidden; aspect-ratio:1 / 1;
    border-radius:8px; scroll-snap-align:start; background:var(--paper-deep);
  }
  .photo-strip__item img, .photo-strip__item picture { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  /* ---- long-form: split layout and "Keep reading" (2026-09-10) ----------
     The owner's recording showed page after page of sections in a 760px
     column pinned to the left of a 1,400px page, with a wide empty band on
     the right. On a wide container each section now sets its eyebrow and
     heading in a left column that stays pinned while its text scrolls past,
     with a hairline between sections. It is a container query, so the same
     component stays one column beside an aside rail, in a text-width
     container and on a phone. */
  .longform { container-type: inline-size; container-name: longform; }
  .lf__eyebrow { display: block; margin-bottom: var(--s-3); }
  .lf--illustrated .lf__main > .lf__figure:first-child { margin-top: 0; margin-bottom: var(--s-6); }

  @container longform (min-width: 60rem) {
    .lf-body { gap: 0; }
    .lf {
      max-width: none;
      display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
      column-gap: var(--s-16); align-items: start;
      padding-block: var(--s-16);
      border-top: 1px solid var(--line);
    }
    .lf:first-child { border-top: 0; padding-top: 0; }
    .lf__head { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
    .lf__title { margin-bottom: 0; }
    .lf__prose p { max-width: 68ch; }
    /* A callout keeps its card; it sits between hairlines, not on one. */
    .lf--callout { padding: var(--s-12) var(--s-10); margin-block: var(--s-8); border-top: 0; }
    .lf--callout + .lf { border-top: 0; }
  }

  /* Sections of five or more paragraphs open on three. site.js adds
     .is-clamped and the button; with no script nothing is hidden. */
  .lf__prose.is-clamped:not(.is-open) > p:nth-of-type(n+4) { display: none; }
  .lf__prose.is-clamped:not(.is-open) > p:nth-of-type(3) {
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
            mask-image: linear-gradient(180deg, #000 35%, transparent);
  }
  .lf__more {
    display: inline-flex; align-items: center; gap: var(--s-3);
    margin-top: var(--s-5); min-height: 44px; padding: 0 var(--s-5);
    font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--clay-700);
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .lf__more:hover { background: var(--white); border-color: var(--clay-500); }
  .lf__more::after {
    content: ""; width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease);
  }
  .lf__more[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
  @media print {
    .lf__prose.is-clamped > p { display: block !important; -webkit-mask-image: none; mask-image: none; }
    .lf__more { display: none; }
  }

  /* ---- long-form photos, second pass (2026-09-10) -----------------------
     The owner wants a picture on the long text sections, done creatively.
     What the research said: andBeyond sets its text blocks beside a photo at
     about half the page width, and editorial guidance is to alternate dense
     and open spreads, breaking a run of text with one big image now and then.
     So a section with a photo is a split (photo on one side, text on the
     other, sides alternating, the photo pinned while longer text scrolls
     past), and every third one whose photo is wide enough becomes an
     interlude: the photo across the whole column with the heading laid over
     it, and the text below in two columns. Sections without a photo keep the
     pinned-heading split above. */
  .lf__photo {
    position: relative; margin: 0 0 var(--s-6); overflow: hidden;
    aspect-ratio: 3 / 2; border-radius: var(--radius); background: var(--paper-deep);
  }
  .lf__photo picture, .lf__photo img,
  .lf__banner picture, .lf__banner img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .lf__photo figcaption {
    position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1;
    padding: 4px 10px; border-radius: var(--radius-pill);
    background: rgba(31,29,25,.72); color: var(--white); font-size: var(--fs-xs);
  }
  .lf__banner {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 4 / 3; margin-bottom: var(--s-8);
    border-radius: var(--radius); background: var(--ink-900);
  }
  .lf__banner::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(31,29,25,0) 30%, rgba(31,29,25,.55) 62%, rgba(31,29,25,.9) 100%);
  }
  .lf__banner-cap { position: absolute; z-index: 1; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); }
  .lf__banner-cap .lf__title { color: var(--white); margin: 0; }
  .lf__banner-cap .lf__title::after { background: var(--white); opacity: .7; }
  .lf__banner-cap .lf__eyebrow { color: rgba(255,255,255,.88); }

  @container longform (min-width: 60rem) {
    .lf--media {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      column-gap: var(--s-16); align-items: start;
    }
    .lf--media-right { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .lf--media-right .lf__photo { order: 2; }
    .lf--media .lf__photo {
      margin: 0; aspect-ratio: 5 / 4;
      position: sticky; top: calc(var(--header-h) + var(--s-8));
    }
    .lf--media .lf__content { align-self: center; }
    .lf--media .lf__head { position: static; margin-bottom: var(--s-6); }
    .lf--media .lf__prose p { max-width: 62ch; }

    .lf--interlude { display: block; }
    .lf--interlude .lf__banner { aspect-ratio: 21 / 9; min-height: 380px; margin-bottom: var(--s-10); }
    .lf--interlude .lf__banner-cap { left: var(--s-12); right: auto; bottom: var(--s-10); max-width: 30ch; }
    .lf--interlude .lf__banner-cap .lf__title { font-size: clamp(1.75rem, 3vw, 2.625rem); }
    .lf--interlude .lf__prose { columns: 2; column-gap: var(--s-16); }
    .lf--interlude .lf__prose > p { max-width: none; margin: 0 0 var(--s-5); break-inside: avoid; }
    .lf--interlude .lf__prose > p:first-child { column-span: all; max-width: 60ch; margin-bottom: var(--s-8); }
  }

  /* The photo settles from a slight zoom as it scrolls in. Scale only, never
     opacity, so the photo is fully visible at rest and without script. */
  .js-lf-photos .lf__photo img, .js-lf-photos .lf__banner img {
    transform: scale(1.07); transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .js-lf-photos .lf.is-in .lf__photo img, .js-lf-photos .lf.is-in .lf__banner img { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .js-lf-photos .lf__photo img, .js-lf-photos .lf__banner img { transform: none; transition: none; }
  }

  /* Split placement. The photo, the head and the text are siblings, so the
     grid places them directly: the photo spans every row, and the two outer
     1fr rows take up any spare height, which centres the text beside a photo
     taller than it. */
  @container longform (min-width: 60rem) {
    .lf--media { grid-template-rows: 1fr auto auto 1fr; }
    .lf--media .lf__photo { grid-row: 1 / -1; grid-column: 1; align-self: start; }
    .lf--media .lf__head { grid-row: 2; grid-column: 2; }
    .lf--media .lf__main { grid-row: 3; grid-column: 2; }
    .lf--media-right .lf__photo { grid-column: 2; }
    .lf--media-right .lf__head, .lf--media-right .lf__main { grid-column: 1; }
  }

  /* ==== The Explore Green pass (2026-09-11) ================================
     The owner pointed at exploregreenafricasafaris.com and asked for the site
     to look a little like it. Taken from it: a white page with warm bands,
     bold upright serif headings, uppercase buttons with 10px corners, cards
     with 10px corners on a faint shadow, a solid white header, the trip grid,
     destination cards with a button, tall photo tiles for kinds of trip, a
     small-box grid of travel styles, and a floating WhatsApp button.
     Not taken: their green brand colour (RedSoil stays clay, which sits close
     to their orange; green is only the WhatsApp button), their web fonts (the
     audit allows none, so the display stack leads with Merriweather for anyone
     who has it installed and falls back to Georgia), and their rating badge
     and testimonials (RedSoil has no reviews to show yet). */
  :root {
    --paper:#FFFFFF;
    --paper-deep:#FCF6F2;
    --band-grey:#F4F4F2;
    --radius:10px;
    --safari-green:#2E7D32;
    --font-display:"Merriweather", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  }
  body { background: var(--paper); }

  h1, h2, h3 { font-style: normal; }
  h1, h2 { font-weight: 700; letter-spacing: -0.01em; }
  h3 { font-weight: 700; }
  .safari-card h2, .safari-card h3, .post-card h2, .post-card h3,
  .guide-card h3, .lf__title, [class*="card"] h2, [class*="card"] h3 { font-style: normal; }

  .btn { border-radius: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
  .btn--lg { padding: 1rem 2rem; font-size: .9375rem; }

  /* A solid white header everywhere, as the reference has it. */
  .site-header, .site-header.is-solid, .site-header--static {
    background: var(--white); color: var(--ink-800); box-shadow: 0 1px 0 rgba(31,29,25,.08);
  }
  .site-header .nav__link { color: var(--ink-700); }
  .site-header .nav__link:hover, .site-header .nav__link[aria-current="page"] { color: var(--clay-700); }
  .site-header .logo__text { color: var(--ink-900); }
  .site-header .header-phone { color: var(--ink-600); }
  .site-header .nav-toggle span { background: var(--ink-800); }
  .site-header .logo__img--dark { display: none; }
  .site-header .logo__img--light { display: block; }

  /* Cards: 10px corners and the reference's faint shadow. */
  .safari-card, .review, .rail-card, .post-card, .guide-card {
    border-radius: var(--radius);
    box-shadow: 0 0 2px rgba(0,0,0,.2), 0 2px 10px rgba(31,29,25,.05);
  }
  .safari-card:hover { box-shadow: 0 0 2px rgba(0,0,0,.2), 0 10px 26px rgba(31,29,25,.12); }
  .safari-card__media { aspect-ratio: 3 / 2; }
  .safari-card__tag {
    display: block; margin-bottom: var(--s-2);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--clay-700);
  }
  .safari-card__foot .btn { white-space: nowrap; }

  .card-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

  .section--grey { background: var(--band-grey); }

  /* Kinds of trip: a heading on the left, four tall photo tiles. */
  .kinds { display: grid; gap: var(--s-10); align-items: center; }
  @media (min-width: 1000px) { .kinds { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); } }
  .kinds__tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 700px) { .kinds__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .kind-tile {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    aspect-ratio: 3 / 4.4; border-radius: var(--radius);
    background: var(--ink-900); color: var(--white); text-decoration: none;
  }
  .kind-tile picture, .kind-tile img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
  }
  .kind-tile::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(25,24,21,0) 35%, rgba(25,24,21,.88) 100%);
  }
  .kind-tile:hover img { transform: scale(1.05); }
  .kind-tile__text { position: absolute; z-index: 1; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); }
  .kind-tile__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.2; color: var(--white); }
  .kind-tile__tag { display: block; margin-top: 4px; font-size: var(--fs-xs); color: rgba(255,255,255,.88); }

  /* Why choose: a dark photo band, heading left, four points right. */
  .why-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-900); color: var(--white); }
  .why-band__media { position: absolute; inset: 0; z-index: -2; }
  .why-band__media picture, .why-band__media img { width: 100%; height: 100%; object-fit: cover; }
  .why-band::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(25,24,21,.92) 0%, rgba(25,24,21,.8) 45%, rgba(25,24,21,.66) 100%);
  }
  .why-band__grid { display: grid; gap: var(--s-10); }
  @media (min-width: 1000px) { .why-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); align-items: center; } }
  .why-band h2 { color: var(--white); }
  .why-band .eyebrow { color: var(--clay-300); }
  .why-points { display: grid; gap: var(--s-8); }
  @media (min-width: 700px) { .why-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .why-point { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .why-point svg {
    width: 44px; height: 44px; padding: 10px; border-radius: 50%;
    background: rgba(255,255,255,.12); fill: none; stroke: var(--clay-300); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .why-point h3 { color: var(--white); font-size: var(--fs-h4); margin-bottom: var(--s-2); }
  .why-point p { color: rgba(255,255,255,.86); }

  /* Destination cards with a button, on the warm band. */
  .dest-cards { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  @media (min-width: 1000px) { .dest-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .dest-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--white); border-radius: var(--radius);
    box-shadow: 0 0 2px rgba(0,0,0,.2), 0 2px 10px rgba(31,29,25,.05);
  }
  .dest-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
  .dest-card__media picture, .dest-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
  .dest-card:hover .dest-card__media img { transform: scale(1.05); }
  .dest-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-6) var(--s-6); }
  .dest-card__body h3 { margin: 0; font-size: var(--fs-h4); }
  .dest-card__body h3 a { color: inherit; text-decoration: none; }
  .dest-card__body h3 a:hover { color: var(--clay-700); }
  .dest-card__body p { flex: 1; color: var(--ink-600); font-size: var(--fs-sm); }
  .dest-card__body .btn { align-self: flex-start; }

  /* Travel styles: small bordered boxes with a line icon. */
  .style-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  @media (min-width: 1100px) { .style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .style-box {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
    padding: var(--s-6); text-align: center; text-decoration: none; color: inherit;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .style-box:hover { border-color: var(--clay-500); box-shadow: 0 6px 18px rgba(31,29,25,.08); }
  .style-box svg {
    width: 46px; height: 46px; margin-bottom: var(--s-2);
    fill: none; stroke: var(--clay-600); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .style-box strong { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink-900); }
  .style-box span { font-size: var(--fs-sm); color: var(--ink-600); }

  /* The floating WhatsApp button, wide screens only: phones have the bar. */
  .wa-float {
    position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 90;
    display: none; align-items: center; gap: var(--s-3);
    padding: 12px 20px 12px 14px; border-radius: 999px;
    background: var(--safari-green); color: var(--white);
    font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
  }
  .wa-float:hover { background: #256628; color: var(--white); }
  .wa-float svg { width: 24px; height: 24px; fill: currentColor; }
  @media (min-width: 1100px) { .wa-float { display: inline-flex; } }

  /* In the four-column grid the price and the button do not fit one line, so
     the button drops below the price, as the reference cards stack. */
  .safari-card__foot { flex-wrap: wrap; row-gap: var(--s-3); }
  .kinds__intro h2 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); }

  /* Blog posts: the rail runs the full height of the article. Its two lists
     sit at the top, and only the enquiry card stays pinned, so it follows the
     reader down the whole article. A single sticky rail taller than the
     screen scrolled off its own top and left the gap open again for the
     lower half of a long post (measured 2026-09-11: rail 956px, post 1819px). */
  @media (min-width: 1080px) {
    .aside-layout--post > .aside-rail { align-self: stretch; }
    .aside-layout--post .aside-rail__inner { position: static; height: 100%; }
    .aside-layout--post .rail-card--cta { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
  }

  /* The same full-height rail with a pinned enquiry card, for the company
     pages and the long experience overviews (2026-09-11). */
  @media (min-width: 1080px) {
    .aside-layout--follow > .aside-rail { align-self: stretch; }
    .aside-layout--follow .aside-rail__inner { position: static; height: 100%; }
    .aside-layout--follow .rail-card--cta { position: sticky; top: calc(var(--header-h) + var(--s-8)); }
  }

  /* Index intros: the heading on the left and the text on the right, the
     split the long-form sections use, so a short intro fills the width
     without a rail taller than its text. It applies only where a left-set
     section head is followed directly by prose. */
  @media (min-width: 1000px) {
    .container:has(> .section-head--left + .prose) {
      display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
      column-gap: var(--s-16); align-items: start;
    }
    .container:has(> .section-head--left + .prose) > .section-head--left { margin-bottom: 0; }
    .container:has(> .section-head--left + .prose) > .prose { max-width: 68ch; }
  }


  /* Home trip blocks: exactly three cards across, and the row slides (the
     owner, 2026-09-11). Each block carries up to six trips, so the round
     arrows the rail script adds to an overflowing row appear on wide
     screens, one card per click; phones and tablets swipe. */
  .rail-scroll--3 { grid-auto-columns: 85%; }
  @media (min-width: 640px)  { .rail-scroll--3 { grid-auto-columns: calc((100% - var(--s-6)) / 2); } }
  @media (min-width: 1000px) { .rail-scroll--3 { grid-auto-columns: calc((100% - 2 * var(--s-6)) / 3); } }

  /* A block with fewer than three trips (the migration block has two while
     its other packages are drafts) centres its cards, so it does not end in
     an empty slot. */
  .rail-scroll--3:not(:has(> :nth-child(3))) { justify-content: center; }

  /* The card rails move by their round arrows on wide screens and by swipe on
     touch screens, so the scrollbar under them is hidden (owner, 2026-09-11). */
  .rail-scroll { scrollbar-width: none; }
  .rail-scroll::-webkit-scrollbar { display: none; }

  /* No page scrolls sideways (owner screenshot, 2026-09-11). While a page is
     scrolled, the browser sometimes counted the off-screen cards of a card
     rail toward the page width, even though the rail scrolls on its own, and
     the page grew a horizontal scrollbar with an empty band on the right.
     Clipping on the root stops that on every page. It is set on html only:
     clipping body as well can break the pinned rails and photos. The hidden
     value is the fallback for browsers without clip. */
  html { overflow-x: hidden; overflow-x: clip; }

  /* The actual cause of the sideways page scroll: once a page had been
     scrolled, the browser counted a card rail's off-screen cards toward the
     page width even though the rail scrolls on its own (measured 2026-09-11:
     private safaris page 1776px wide in a 1202px window). Containing the
     rail's painting stops that, and it was the only one of four candidate
     fixes that did. The rail already clipped its cards, so nothing visible
     changes; the arrows sit outside the rail and are unaffected. The root
     clip above stays as a second guard. */
  .rail-scroll { contain: paint; }

  /* Destination pages: the four short practical notes (wildlife, what to do,
     getting there, best time) as a set of soft cards with a small icon and a
     modest heading, instead of four headings the size of the page title over
     a line or two of text each (owner, 2026-09-11). */
  .dest-facts { display: grid; gap: var(--s-4); }
  @media (min-width: 700px) { .dest-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .dest-fact { padding: var(--s-6); background: var(--paper-deep); border-radius: var(--radius); }
  .dest-fact svg {
    width: 32px; height: 32px; margin-bottom: var(--s-3);
    fill: none; stroke: var(--clay-600); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .dest-fact__title { margin: 0 0 var(--s-2); font-size: var(--fs-h4); letter-spacing: 0; }
  .dest-fact p { font-size: var(--fs-sm); color: var(--ink-700); }
  .dest-why { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }

  /* Five destinations have three of the four notes. The last card of an odd
     set spans both columns, so the grid never ends in an empty slot. */
  @media (min-width: 700px) { .dest-fact:last-child:nth-child(odd) { grid-column: 1 / -1; } }


  /* Destination pages, second pass (owner, 2026-09-11): the trips come straight
     after the overview, and the practical notes are a full-width row of cards,
     four across (three where a place has three). The odd-card span above
     belongs to the two-column set, not this row. */
  @media (min-width: 1100px) {
    .dest-facts--wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .dest-facts--wide .dest-fact:last-child:nth-child(odd) { grid-column: auto; }
  }
  .dest-notes .section-head { margin-bottom: var(--s-8); }


  /* Trip pages: the booking panel stays beside the overview while it is read,
     so a long overview no longer leaves an empty band under the panel
     (owner, 2026-09-11: measured 833px of overview beside a 418px panel). It
     stops at the end of the overview; the similar trips follow straight after. */
  @media (min-width: 1024px) {
    .safari-layout .feature .rail { position: sticky; top: calc(var(--header-h) + var(--s-8)); align-self: start; }
  }

  /* Trip pages on a phone were 6px wider than the screen (measured
     2026-09-11 at 375px). The booking panel's button does not wrap, and in
     the uppercase, letter-spaced style its label needs 295px, so the panel
     needed 361px in a 335px column, and a grid item will not shrink below
     its content. The label may now wrap, and the layout's columns may shrink
     to the screen. */
  .safari-layout .rail .btn { white-space: normal; text-align: center; }
  .safari-layout > *, .safari-layout .feature > * { min-width: 0; }

/* Phone header: */
@media (max-width: 420px) {
  .header-actions { gap: var(--s-2); }
  .header-actions .btn { padding-inline: 14px; font-size: 11px; letter-spacing: .06em; }
  .nav-toggle { padding-inline: 8px; margin-right: -8px; }
}
@media (max-width: 359px) {
  .header-actions .btn { display: none; }
}

/* Guide pages, "Other guides": */
.guide-card--photo {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: var(--white); border: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.guide-card--photo:hover { transform: translateY(-4px); box-shadow: 0 0 2px rgba(0,0,0,.2), 0 10px 26px rgba(31,29,25,.12); }
.guide-card--photo .safari-card__media img { transition: transform var(--dur-slow) var(--ease); }
.guide-card--photo:hover .safari-card__media img { transform: scale(1.05); }
.guide-card--photo h3 { font-style: normal; }

/* Selects rendered 3px shorter than text inputs with the same padding (51px against 54px),  */
.field select { min-height: 3.375rem; }

/* Trip designer on /plan-your-safari/ (components/trip-designer.php, assets/js/designer.js) */
.designer-page { position: relative; }
.designer-shell { position: relative; }
.designer-close { display: none; }
.designer-head { margin-bottom: var(--s-8); }
.designer-head h2 { font-size: var(--fs-h2); margin-top: var(--s-2); }
.designer-lede { font-size: var(--fs-lead); color: var(--ink-600); max-width: 60ch; margin-top: var(--s-4); }
.designer-alert { margin-bottom: var(--s-6); }
.designer-alert ul { margin-top: var(--s-2); padding-left: var(--s-5); }

.designer-progress { margin-bottom: var(--s-8); }
.designer-bar { height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; }
.designer-bar span {
  display: block; height: 100%; border-radius: 99px; background: var(--clay-600);
  transform: scaleX(.17); transform-origin: left center;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.designer-meta {
  display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-600);
}

.designer-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.designer-step[hidden] { display: none; }
.designer-step legend { padding: 0; margin-bottom: var(--s-6); }
.designer-q {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.2;
  color: var(--ink-900); margin-top: var(--s-2);
}
.designer-hint { color: var(--ink-600); margin: calc(-1 * var(--s-3)) 0 var(--s-6); max-width: 62ch; }

/* A card you press, not a form row with a radio in the corner */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.choice-grid--tight { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); }
.choice {
  position: relative; display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-5) var(--s-5) var(--s-5) 52px; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}
.choice[hidden] { display: none; }
.choice:hover { border-color: var(--clay-600); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31, 29, 25, .08); }
.choice input {
  appearance: none; -webkit-appearance: none;
  position: absolute; left: 18px; top: 21px; margin: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--white); cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.choice input[type="checkbox"] { border-radius: 6px; }
.choice input::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/11px 8px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8'%3E%3Cpath d='M1 4l3 3 6-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .15s ease;
}
.choice:hover input { border-color: var(--clay-600); }
.choice:has(input:checked) { border-color: var(--clay-600); background: var(--clay-50); box-shadow: 0 0 0 2px rgba(178, 87, 24, .16); }
.choice input:checked { background: var(--clay-600); border-color: var(--clay-600); }
.choice input:checked::after { opacity: 1; }
.choice:has(input:focus-visible) { outline: 3px solid var(--clay-600); outline-offset: 3px; }
.choice-body { display: flex; flex-direction: column; gap: 3px; }
.choice-body strong { font-family: var(--font-display); font-size: 1rem; color: var(--ink-900); }
.choice-body span { font-size: .9375rem; line-height: 1.45; color: var(--ink-600); }
.choice--check { padding-block: var(--s-4); }
.choice--check input { top: 17px; }
.choice--inline { max-width: 34rem; margin-top: var(--s-5); }

.designer-row { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .designer-row--2 { grid-template-columns: repeat(2, 1fr); } }
.designer-field { display: flex; flex-direction: column; gap: var(--s-2); }
.designer-field[hidden] { display: none; }
.designer-field--wide { margin-top: var(--s-6); }
.designer-label { font-size: .9375rem; font-weight: 700; color: var(--ink-900); }
.designer-optional { font-weight: 400; color: var(--ink-600); }
.designer-field input[type="text"], .designer-field input[type="email"], .designer-field input[type="tel"],
.designer-field input[type="date"], .designer-field select, .designer-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 52px;
}
.designer-field textarea { min-height: 120px; resize: vertical; }
.designer-field :is(input, select, textarea):focus-visible { outline: 3px solid rgba(178, 87, 24, .35); outline-offset: 1px; border-color: var(--clay-600); }
.designer-field [aria-invalid="true"] { border-color: var(--danger); }
.designer-error { font-size: .875rem; color: var(--danger); min-height: 1em; }

/* number stepper: */
.stepper { display: flex; align-items: stretch; max-width: 200px; }
.stepper button {
  width: 52px; min-height: 52px; flex-shrink: 0; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-900);
  font-size: 1.25rem; line-height: 1;
}
.stepper button:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.stepper button:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.stepper button:hover:not(:disabled) { border-color: var(--clay-600); color: var(--clay-700); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper input {
  width: 100%; min-width: 0; text-align: center; font: inherit; font-weight: 700;
  border: 1px solid var(--line); border-inline: 0; background: var(--white); color: var(--ink-900);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* one small box per child */
.child-ages { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-6); }
.child-ages[hidden], .child-age[hidden] { display: none; }
.child-ages__grid { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.child-age {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px 12px 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white);
}
.child-age:focus-within { border-color: var(--clay-600); }
.child-age__n { font-size: .8125rem; font-weight: 700; color: var(--ink-600); }
.child-age input {
  width: 60px; padding: 7px 8px; text-align: center; font: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink-900); background: var(--white);
}
.child-age__u { font-size: .875rem; color: var(--ink-600); }

.designer-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-8); }
.designer-back {
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--ink-700); padding: var(--s-3) var(--s-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.designer-back:hover { color: var(--clay-700); }
.designer-note { margin-top: var(--s-4); font-size: .9375rem; color: var(--ink-600); }

/* "You told us": */
.designer-summary { margin: calc(-1 * var(--s-3)) 0 var(--s-8); }
.designer-summary[hidden] { display: none; }
.designer-summary-label {
  margin: 0 0 var(--s-2); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
}
.designer-summary-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.designer-chip {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.designer-chip[hidden] { display: none; }
.designer-chip:hover { border-color: var(--clay-600); background: var(--clay-50); }
.designer-chip:focus-visible { outline: 2px solid var(--clay-700); outline-offset: 2px; }
.designer-chip-k { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }
.designer-chip-v {
  display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .9375rem; font-weight: 600; color: var(--ink-900); vertical-align: bottom;
}
.designer-chip::after { content: "Edit"; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clay-700); }

/* ---- the popup ---- Above the fixed header, the WhatsApp button and the phone bottom bar */
body.designer-open { overflow: hidden; }
.designer-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(25, 24, 21, .74); opacity: 0; transition: opacity .25s ease;
}
.designer-backdrop.is-shown { opacity: 1; }
.designer-page.is-modal {
  position: fixed; inset: 0; z-index: 1001;
  display: grid; place-items: start center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(12px, 3vh, 40px) 16px;
}
.designer-page.is-modal .designer-shell {
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
  width: 100%; max-width: 1040px;
  padding: 64px clamp(20px, 4vw, 48px) 8px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease;
}
.designer-page.is-modal .designer-shell.is-shown { opacity: 1; transform: none; }
.designer-page.is-modal .designer-shell:focus { outline: none; }
/* The popup opens straight onto the question; */
.designer-page.is-modal .designer-head { display: none; }
.designer-page.is-modal .designer-close {
  display: grid; place-items: center;
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-900);
}
.designer-page.is-modal .designer-close:hover { border-color: var(--clay-600); color: var(--clay-700); }
.designer-page.is-modal .designer-close:focus-visible { outline: 3px solid var(--clay-600); outline-offset: 2px; }
.designer-dismiss {
  display: block; width: 100%; margin: var(--s-4) 0 var(--s-2);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .875rem; color: var(--ink-600);
  padding: 10px; text-decoration: underline; text-underline-offset: 3px;
}
.designer-dismiss:hover { color: var(--clay-700); }

@media (prefers-reduced-motion: reduce) {
  .designer-backdrop, .designer-page.is-modal .designer-shell, .choice, .designer-bar span { transition: none; }
}
@media (max-width: 720px) {
  .choice-grid { grid-template-columns: 1fr; gap: var(--s-2); }
  .choice-grid--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .choice { padding: 10px 12px 10px 38px; border-radius: var(--radius-sm); }
  .choice:hover { transform: none; box-shadow: none; }
  .choice input, .choice--check input { left: 12px; top: 13px; width: 18px; height: 18px; }
  .choice-body strong { font-size: .9375rem; line-height: 1.3; }
  .choice-body span { font-size: .8125rem; line-height: 1.35; }
  .designer-step legend { margin-bottom: var(--s-3); }
  .designer-hint { margin: calc(-1 * var(--s-1)) 0 var(--s-3); font-size: .9375rem; }
  .designer-nav { flex-direction: column-reverse; align-items: stretch; margin-top: var(--s-5); }
  .designer-nav .btn { width: 100%; }
  .designer-nav > span:empty { display: none; }
  .designer-page.is-modal { padding: 0; }
  .designer-page.is-modal .designer-shell { border-radius: 0; min-height: 100%; padding: 58px 18px 8px; }
  .designer-summary { margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
}

/* Trip designer price panel (owner, 2026-09-11: */
.designer-price {
  display: grid; gap: var(--s-1);
  margin: calc(-1 * var(--s-3)) 0 var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--clay-50); border: 1px solid var(--clay-100); border-radius: var(--radius);
}
.designer-price__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.designer-price__label, .designer-price__unit {
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-600);
}
.designer-price__label[hidden], .designer-price__unit[hidden] { display: none; }
.designer-price strong {
  font-family: var(--font-display); font-weight: 700; line-height: 1.1;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--ink-900);
}
.designer-price__note { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-600); max-width: 70ch; }
@media (max-width: 720px) {
  .designer-price { margin: calc(-1 * var(--s-2)) 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); }
  .designer-price__note { font-size: .8125rem; }
}

/* Type from tanzania-experience.com (owner, 2026-09-11: */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/jost-latin-var.woff2") format("woff2");
}

:root {
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jost", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* The reference's scale: */
  --fs-display: clamp(2.5rem, 5vw, 3.5rem);
  --fs-h1: clamp(2rem, 3.6vw, 2.875rem);
  --fs-h2: clamp(1.625rem, 2.6vw, 2.125rem);
  --fs-h3: clamp(1.1875rem, 1.5vw, 1.375rem);
  /* Warm greys in place of the pink-cream tint: */
  --paper-deep: #F6F4F2;
  --band-grey: #E2DED9;
}
body { font-family: var(--font-body); font-weight: 400; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; letter-spacing: 0; }
h1, h3 { font-weight: 600; }
h2 { font-weight: 500; }
.lead, .hero__lead { font-weight: 300; }
.btn { font-family: var(--font-display); font-weight: 500; letter-spacing: .03em; }
.nav__link { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .05em; font-size: .8125rem; }

/* #E2DED9 is darker than the old band, so the small clay and grey text that sits on it  */
.section--grey .eyebrow { color: var(--clay-700); }
.section--grey .muted, .section--grey .hint, .section--grey .safari-card__meta { color: var(--ink-600); }

/* Richer trip cards: */
.safari-card__ribbon {
  position: absolute; top: var(--s-4); right: var(--s-4);
  background: var(--white); color: var(--ink-900);
  font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.safari-card__places { margin: var(--s-2) 0 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-700); }
.safari-card__places strong { font-weight: 600; color: var(--ink-900); margin-right: 4px; }
.safari-card__meta { margin: var(--s-1) 0 0; font-size: .875rem; color: var(--ink-600); }

/* The uppercase Jost menu is wider than the old title-case one: */
.nav__link { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1439px) { .nav { gap: var(--s-5); } }
.header-phone { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1439px) { .header-phone { display: none; } }

/* Bigger primary text (owner, 2026-09-11: */
:root {
  --fs-body: 1.1875rem;
  --fs-sm: 1.0625rem;
  --fs-xs: 0.875rem;
  --fs-lead: clamp(1.1875rem, 1.6vw, 1.375rem);
}
body { font-size: var(--fs-body); }
.lead, .hero__lead { font-weight: 400; }



/* Reviews band, after the Lappet Faced site (components/reviews-band.php, owner 2026-09-11) */


.review-track .review-card { height: 100%; }
.review-card {
  margin: 0; padding: var(--s-5);
  background: var(--white); border-radius: var(--radius);
  box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 10px rgba(31, 29, 25, .04);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.review-head { display: flex; align-items: center; gap: var(--s-3); }
.review-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--clay-600); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1;
}
.review-dots { display: block; color: var(--clay-600); font-size: .625rem; letter-spacing: 3px; line-height: 1; }
.review-who { margin: 3px 0 0; font-size: var(--fs-xs); line-height: 1.35; }
.review-who strong { color: var(--ink-900); font-weight: 600; }
.review-who span { color: var(--ink-600); }
.review-card blockquote { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-700); }
.review-card blockquote.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review-card blockquote.is-open { -webkit-line-clamp: unset; overflow: visible; }
.review-foot {
  margin-top: auto; padding-top: var(--s-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.review-more {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-900);
}
.review-more:hover { text-decoration: underline; }
.review-src { font-size: .75rem; font-weight: 700; color: var(--ink-600); text-decoration: none; }
a.review-src:hover { color: var(--clay-700); text-decoration: underline; }

/* One real review beside the trip booking form, or a link until there is one */
.review-rail { margin: var(--s-4) 0 0; padding: var(--s-4); background: var(--paper-deep); border-radius: var(--radius-sm); }
.review-rail blockquote { margin: 0 0 var(--s-2); font-size: .9375rem; line-height: 1.55; color: var(--ink-700); }
.review-rail figcaption { font-size: var(--fs-xs); color: var(--ink-600); }
.review-rail figcaption strong { color: var(--ink-900); }


/* Lappet-style reviews head (owner, 2026-09-11, with their screenshot): */
.reviews-band .reviews-head { margin-bottom: var(--s-8); }
.reviews-agg {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--ink-600);
}
.reviews-agg strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink-900); }
.reviews-agg__dots { color: var(--clay-700); letter-spacing: 2px; font-size: .75rem; }
.reviews-agg a { font-weight: 700; color: var(--ink-900); }
.reviews-agg a:hover { color: var(--clay-700); }
.reviews-more { margin: var(--s-6) 0 0; }
@media (min-width: 1100px) {
  .review-track.rail-scroll--3 { grid-auto-columns: calc((100% - 3 * var(--s-6)) / 4); }
}