/* BASHEM DESIGN SYSTEM + every page's blocks.
   Page CSS lives here, never in post content: WordPress strips a <style> tag out of
   content and leaves the CSS behind as visible text. */

/* BASHEM SAFARIS · shared stylesheet for every page of the rebuild.
   Page-specific blocks stay in each page's own <style>. Tokens, type, controls,
   header and footer live here and nowhere else. */

  :root{
    --forest:#0C3C2A; --foot:#111310; --band:#3CA06A; --on-band:#0A1F16; --deep:#0A1F16; --action:#D4A017; --action-hover:#E0A521; --on-action:#0C3C2A; --action-edge:#9A6410; --panel:#11573D; --gold:#B99146; --gold-cta:#8A5709; --gold-cta-dark:#C08A2A; --gold-type:#D6AF67;
    --cream:#FCF6EA; --sand:#E7DCC8; --stone:#CFC4B0; --rule:#BFB29A; --charcoal:#2B2A26;
    --on-gold:#072418; --ink:#2B2A26; --ink-soft:#4A4439; --ink-green:#0C3C2A;
    --hair:rgba(185,145,70,.34); --hair-dark:rgba(43,42,38,.16);
    --container:1220px; --gutter:clamp(18px,5vw,48px); --sec:clamp(64px,8.5vw,120px);
    /* ── TYPE. Six prose sizes and one label size. Nothing else may appear in the CSS.
       Hierarchy comes from weight, colour and space, never from inventing a size. ── */
    --t-display:clamp(1.6rem,3.2vw,3.05rem);
    --t-h2:clamp(1.7rem,2.9vw,2.6rem);
    --t-h3:clamp(1.18rem,1.9vw,1.6rem);
    --t-lede:clamp(1.18rem,1.45vw,1.32rem);
    --t-body:1.125rem;
    --t-small:1rem;
    --t-label:.75rem;
    /* weights: 300 display light · 400 regular · 500 emphasis · 600 labels and controls */
    --w-light:300; --w-reg:400; --w-mid:500; --w-bold:600;
    --lh-display:1.09; --lh-h:1.16; --lh-tight:1.3; --lh-snug:1.45; --lh-body:1.62;
    --ls-display:-.014em; --ls-body:0; --ls-label:.18em;
    --ff-display:Newsreader,Georgia,"Times New Roman",serif;
    --ff-body:Archivo,"Helvetica Neue",Arial,sans-serif;

    /* ── SPACE. Nine steps and three vertical rhythms. Every padding, margin and gap
       on the site resolves to one of these twelve values. ── */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px;
    --s-6:30px; --s-7:42px; --s-8:58px; --s-9:80px;
    --y-section:clamp(56px,8vw,104px);
    --y-block:clamp(34px,4.5vw,56px);
    --y-tight:clamp(20px,2.6vw,30px);

    /* ── SHAPE. ONE radius scale. Every block on the site takes a value from this line and nothing else,
       so the softness of the brand is changed in one place rather than hunted through the file. */
    --r-xs:7px; --r-sm:11px; --r:16px; --r-lg:22px; --r-pill:999px; --r-round:50%;
    color-scheme:light;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--cream);color:var(--ink);
       font:400 17px/var(--lh-body) var(--ff-body);-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  .wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  .dark{background:var(--forest);color:var(--cream)}
  section{padding-block:var(--sec)}
  h1,h2,h3{font-family:var(--ff-display);font-weight:var(--w-reg);text-wrap:balance;margin:0;color:var(--ink-green)}
  .dark h1,.dark h2,.dark h3{color:var(--cream)}
  h2{font-size:var(--t-h2);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
  h3{font-size:var(--t-lede);line-height:var(--lh-tight);font-weight:var(--w-mid)}
  p{margin:0}
  .eyebrow{font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
  .dark .eyebrow{color:rgba(252,246,234,.72)}
  .lede{font-size:var(--t-lede);line-height:var(--lh-body);max-width:58ch}
  .small{font-size:var(--t-small);line-height:var(--lh-body)}
  /* ONE action colour, on every ground. A button that changes colour depending on the
     panel behind it is four buttons, and reads as four different levels of importance. */
  /* ONE action colour on every ground, and one restrained size. 44px is the accessibility
     floor (WCAG 2.5.5), so the small button sits exactly on it and the large one just above.
     Anything taller reads as a banner, not a control. */
  .btn{display:inline-flex;align-items:center;justify-content:center;
       background:var(--action);color:var(--on-action);text-decoration:none;
       font:var(--w-bold) var(--t-small)/var(--lh-tight) var(--ff-body);
       padding:0 var(--s-5);border-radius:var(--r-sm);min-height:44px;
       border:1px solid var(--action-edge);
       letter-spacing:var(--ls-body)}
  .btn:hover{background:var(--action-hover);color:var(--on-action)}
  .btn-lg{padding:0 var(--s-6);min-height:50px;font-size:var(--t-body)}
  .tlink{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:var(--s-1);font-size:var(--t-body);opacity:.95}
  .tlink:hover{border-bottom-width:2px}


  /* THE HEADER · at rest the full menu is there, transparent, over the picture, so every
     destination is one click away without scrolling. Once the page moves, that menu gives way
     to a single control and a slim bar, so nothing eats the top of the screen while reading. */
  header{position:fixed;top:0;left:0;right:0;z-index:40;
         background:transparent;border-bottom:1px solid transparent;
         transition:background .35s ease,border-color .35s ease}
  header.stuck{background:rgba(9,38,27,.9);backdrop-filter:saturate(140%) blur(14px);
               border-bottom-color:rgba(252,246,234,.12)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
       padding-block:var(--s-4);transition:padding .35s ease}
  header.stuck .bar{padding-block:var(--s-3)}
  .bar .mark{display:block;width:var(--s-9);height:var(--s-9);border-radius:var(--r-round);
             transition:width .35s ease,height .35s ease;
             box-shadow:0 var(--s-1) var(--s-6) rgba(0,0,0,.45)}
  header.stuck .bar .mark{width:var(--s-8);height:var(--s-8);box-shadow:none}

  .full{display:flex;align-items:center;gap:var(--s-6);margin-left:auto;
        transition:opacity .28s ease,transform .28s ease}
  header.stuck .full{opacity:0;transform:translateY(calc(-1*var(--s-2)));pointer-events:none}
  .full a{color:var(--cream);text-decoration:none;font-size:var(--t-small);
          text-shadow:0 1px 14px rgba(0,0,0,.5)}
  .full a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px;
                text-decoration-color:var(--gold-type)}
  .full .btn{text-shadow:none}
  /* the telephone is a control, not a stray link. Outlined beside the filled action:
     two controls, two weights, and contact never leaves the first screen. */
  .full .call{display:inline-flex;align-items:center;gap:var(--s-3);text-shadow:none;
    border:1px solid rgba(252,246,234,.4);border-radius:var(--r-sm);min-height:44px;
    padding:0 var(--s-5);color:var(--cream);font-variant-numeric:tabular-nums;
    font:var(--w-mid) var(--t-small)/var(--lh-tight) var(--ff-body);
    transition:border-color .25s,background .25s}
  .full .call:hover{border-color:rgba(252,246,234,.85);background:rgba(252,246,234,.1);
    text-decoration:none;color:#fff}
  .full .call svg{fill:none;stroke:var(--gold-type);stroke-width:1.6;flex:0 0 auto}

  /* the single control. Absent until the page has moved. */
  .menu-btn{position:absolute;right:var(--gutter);display:flex;align-items:center;
    gap:var(--s-3);cursor:pointer;background:rgba(9,38,27,.55);backdrop-filter:blur(8px);
    border:1px solid rgba(252,246,234,.34);border-radius:var(--r-pill);
    color:var(--cream);min-height:44px;padding:0 var(--s-5);
    font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;
    opacity:0;pointer-events:none;transition:opacity .3s ease,border-color .25s,background .25s}
  header.stuck .menu-btn{opacity:1;pointer-events:auto}
  .menu-btn:hover{border-color:rgba(252,246,234,.7);background:rgba(9,38,27,.85)}
  .menu-btn svg{fill:none;stroke:currentColor;stroke-width:1.7;display:block}

  /* below the width where the full menu fits, the control is the only navigation,
     so it is present from the start. A screen with no way out is worse than a bar. */
  .call-sm{display:none;align-items:center;justify-content:center;gap:var(--s-2);
    border:1px solid rgba(252,246,234,.38);border-radius:var(--r-pill);
    background:rgba(9,38,27,.55);backdrop-filter:blur(8px);
    color:var(--cream);min-height:44px;min-width:44px;padding:0 var(--s-4);text-decoration:none;
    font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase}
  .call-sm:hover{border-color:rgba(252,246,234,.75);color:#fff}
  .call-sm svg{fill:none;stroke:var(--gold-type);stroke-width:1.7;display:block}
  .bar .right{display:flex;align-items:center;gap:var(--s-3)}
  @media(max-width:1060px){
    .full{display:none}
    .menu-btn{opacity:1;pointer-events:auto;position:static}
    /* contact stays one tap away and above the fold at every size */
    .call-sm{display:inline-flex}
  }

  /* the side menu */
  .side{position:fixed;inset:0;z-index:60;visibility:hidden}
  .side[data-open="1"]{visibility:visible}
  .side .veil{position:absolute;inset:0;background:rgba(5,22,15,.6);opacity:0;
    transition:opacity .35s ease}
  .side[data-open="1"] .veil{opacity:1}
  .side .panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,var(--s-9)*5);
    background:var(--forest);border-left:1px solid rgba(252,246,234,.12);
    transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;
    padding:var(--s-6) var(--s-6) calc(var(--s-6) + env(safe-area-inset-bottom,0px));
    overflow-y:auto}
  .side[data-open="1"] .panel{transform:none}
  .side .close{align-self:flex-end;background:transparent;cursor:pointer;
    border:1px solid rgba(252,246,234,.3);border-radius:var(--r-pill);color:var(--cream);
    min-height:var(--s-7);padding:0 var(--s-5);
    font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase}
  .side .close:hover{border-color:rgba(252,246,234,.7)}
  .side nav{display:flex;flex-direction:column;margin-top:var(--s-7)}
  .side nav a{color:var(--cream);text-decoration:none;
    font-family:var(--ff-display);font-size:var(--t-h3);font-weight:var(--w-reg);
    padding-block:var(--s-4);border-bottom:1px solid rgba(252,246,234,.1)}
  .side nav a:hover{color:var(--gold-type)}
  .side .tel{margin-top:var(--s-6);display:inline-flex;align-items:center;gap:var(--s-2);
    color:var(--gold-type);text-decoration:none;font-size:var(--t-body);
    font-variant-numeric:tabular-nums}
  .side .tel svg{fill:none;stroke:currentColor;stroke-width:1.55}
  .side .btn{margin-top:var(--s-5)}
  /* contact lives at the foot of the menu, not in a bar across the top of every page */
  .side-contact{margin-top:auto;padding-top:var(--s-6)}
  .side-contact .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(252,246,234,.6);
    padding-top:var(--s-5);border-top:1px solid rgba(252,246,234,.14)}
  .side-contact a{display:block;color:var(--gold-type);text-decoration:none;
    font-size:var(--t-body);margin-top:var(--s-3);font-variant-numeric:tabular-nums}
  .side-contact a:hover{color:#fff}
  .side-contact .hrs{margin-top:var(--s-4);color:rgba(252,246,234,.62);
    font-size:var(--t-small);line-height:var(--lh-snug)}


  /* THE FOOTER · density is the point. A thin footer reads as a small operation.
     Four columns, contact answered five ways, a mailing list, then a band of brand colour
     cutting across the dark, then the regulatory line on its own deeper ground. */
  /* near-black body with a bright green band cutting it. The contrast between the two IS
     the energy; a green band on a green ground is not a band, it is a slightly different green. */
  footer{background:var(--foot);color:rgba(252,246,234,.8);font-size:var(--t-small)}
  .f-top{padding-block:var(--y-section) var(--y-block);
         display:grid;gap:var(--s-8) var(--s-7);
         grid-template-columns:1.5fr 1fr 1fr 1.4fr}
  footer h4{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-type);
    margin:0 0 var(--s-5)}
  footer a{color:rgba(252,246,234,.82);text-decoration:none;display:block;
           padding-block:var(--s-2)}
  footer a:hover{color:var(--cream)}
  .f-mark{width:var(--s-9);height:var(--s-9);border-radius:var(--r-round);display:block}
  .f-say{margin-top:var(--s-5);max-width:34ch;line-height:var(--lh-snug);
         color:rgba(252,246,234,.78)}
  .f-con{margin-top:var(--s-6);display:grid;gap:var(--s-3)}
  .f-con a,.f-con p{display:flex;gap:var(--s-3);align-items:flex-start;margin:0;padding-block:0}
  .f-con svg{flex:0 0 auto;margin-top:var(--s-1);fill:none;stroke:var(--gold-type);stroke-width:1.5}
  .f-con .tel{font-variant-numeric:tabular-nums}

  .f-mail p{margin-top:var(--s-4);color:rgba(252,246,234,.72);line-height:var(--lh-snug)}
  .f-mail form{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
  .f-mail input{width:100%;background:rgba(252,246,234,.07);color:var(--cream);
    border:1px solid rgba(252,246,234,.22);border-radius:var(--r-sm);
    padding:var(--s-3) var(--s-4);min-height:44px;
    font:var(--w-reg) var(--t-small)/var(--lh-body) var(--ff-body)}
  .f-mail input::placeholder{color:rgba(252,246,234,.5)}
  .f-mail input:focus{outline:2px solid var(--gold-type);outline-offset:1px}
  .f-mail .btn{margin-top:var(--s-2)}

  /* centred, because a row of seven left-aligned logos reads as a list that ran out
     rather than a band. The regulatory block below is centred for the same reason. */
  .f-social{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4) var(--s-7);
    padding-block:var(--s-6);border-top:1px solid rgba(252,246,234,.14)}
  .f-social a{display:inline-flex;align-items:center;gap:var(--s-3);padding-block:var(--s-2);
    font:var(--w-mid) var(--t-small)/var(--lh-tight) var(--ff-body)}
  .f-social svg{fill:currentColor}

  .f-band{background:var(--band);color:var(--on-band)}
  /* a thin rule, not a slab. The original's strength is that it is sleek: one line of type
     with just enough room to breathe, so it reads as a seam between two dark grounds. */
  .f-band{font-size:var(--t-small)}
  .f-band .wrap{padding-block:var(--s-3);display:flex;justify-content:space-between;
    gap:var(--s-3) var(--s-5);flex-wrap:wrap;align-items:center}
  .f-band p{margin:0}
  .f-band a{display:inline;color:var(--on-band);text-decoration:underline;
    text-underline-offset:3px;text-decoration-color:rgba(10,31,22,.4)}
  .f-band a:hover{text-decoration-color:var(--on-band)}

  .f-reg{background:var(--deep);color:rgba(252,246,234,.62)}
  .f-reg .wrap{padding-block:var(--s-5);display:flex;gap:var(--s-5);align-items:center;
    flex-direction:column;text-align:center}
  .f-reg p{margin:0;line-height:var(--lh-snug);max-width:78ch}
  .f-reg .who{color:rgba(252,246,234,.85);font-weight:var(--w-mid)}
  .f-reg .reg{color:var(--gold-type)}

  @media(max-width:1000px){.f-top{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.f-top{grid-template-columns:1fr;gap:var(--s-7)}}
  @media(max-width:520px){.fgrid{grid-template-columns:1fr}}


  :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ===== about-emmanuel ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .split2{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-9);align-items:start;
          margin-top:var(--y-block)}
  .split2 img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:4/5}
  .noportrait{aspect-ratio:4/5;border-radius:var(--r);display:grid;align-content:center;
    padding:var(--s-7);text-align:center;
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .split2 img{object-position:46% 12%}
  .noportrait .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-type)}
  .noportrait .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h2);color:rgba(252,246,234,.94);line-height:var(--lh-tight);
    margin-top:var(--s-4)}
  .noportrait .why{margin-top:var(--s-5);color:rgba(252,246,234,.8);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  .split2 p{margin-top:var(--s-5);color:var(--ink-soft);max-width:60ch}
  .split2 p:first-child{margin-top:0}
  .split2 .pull{font-family:var(--ff-display);font-size:var(--t-h3);color:var(--ink-green);
    line-height:var(--lh-tight);border-left:var(--s-1) solid var(--gold);
    padding-left:var(--s-5);margin-top:var(--s-7)}
  @media(max-width:820px){.split2{grid-template-columns:1fr;gap:var(--s-7)}}
  .three3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7);margin-top:var(--y-block)}
  .three3 img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
  .three3 h3{margin-top:var(--s-4);color:var(--ink-green)}
  .three3 p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:820px){.three3{grid-template-columns:1fr}}

/* ===== booking-protection ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  /* the money path: a sequence, so it IS numbered. The order carries information. */
  .path{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--y-block);
        border-top:1px solid var(--rule)}
  .path .leg{padding:var(--s-6) var(--s-6) var(--s-7);border-right:1px solid var(--rule)}
  .path .leg:first-child{padding-left:0}
  .path .leg:last-child{border-right:0;padding-right:0}
  .path .when{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
              letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-cta)}
  .path h3{margin-top:var(--s-3);color:var(--ink-green)}
  .path p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
          line-height:var(--lh-snug)}
  @media(max-width:900px){.path{grid-template-columns:1fr 1fr}
    .path .leg:nth-child(2n){border-right:0;padding-right:0}
    .path .leg:nth-child(2n+1){padding-left:0}}
  @media(max-width:560px){.path{grid-template-columns:1fr}
    .path .leg{border-right:0;padding-inline:0;border-bottom:1px solid var(--rule)}
    .path .leg:last-child{border-bottom:0}}

  /* verify block: the anti-impersonation panel, the page's sharpest asset */
  .verify{background:var(--forest);color:var(--cream);border-radius:var(--r);
          padding:var(--s-7);margin-top:var(--y-block)}
  .verify h3{color:var(--cream);font-family:var(--ff-display);font-size:var(--t-h3);
             font-weight:var(--w-reg)}
  .verify ul{margin:var(--s-5) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-4)}
  .verify li{padding-left:var(--s-6);position:relative;color:rgba(252,246,234,.92);
             font-size:var(--t-small);line-height:var(--lh-snug)}
  .verify li::before{content:"";position:absolute;left:0;top:var(--s-2);width:var(--s-3);
    height:var(--s-1);background:var(--gold-type);border-radius:var(--r-xs)}
  .verify .never{margin-top:var(--s-6);padding-top:var(--s-5);
    border-top:1px solid var(--hair);color:#fff;font-size:var(--t-lede)}

  /* the bands table */
  .bands{width:100%;border-collapse:collapse;margin-top:var(--y-block)}
  .bands th,.bands td{text-align:left;padding:var(--s-4) var(--s-5) var(--s-4) 0;
    border-bottom:1px solid var(--rule);vertical-align:top}
  .bands th{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
  .bands td{font-size:var(--t-small);color:var(--ink-soft);line-height:var(--lh-snug)}
  .bands td:first-child{color:var(--ink-green);font-variant-numeric:tabular-nums;
    font-weight:var(--w-mid)}

  /* the twelve questions, a checklist to take to any operator */
  .qs{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-9);margin-top:var(--y-block)}
  .qs .q{display:flex;gap:var(--s-4);padding:var(--s-4) 0;
         border-bottom:1px solid var(--hair-dark)}
  .qs .box{flex:0 0 auto;width:var(--s-4);height:var(--s-4);margin-top:var(--s-1);
    border:1px solid var(--rule);border-radius:var(--r-xs)}
  .qs .q p{font-size:var(--t-small);line-height:var(--lh-snug);color:var(--ink)}
  @media(max-width:820px){.qs{grid-template-columns:1fr}}

/* ===== destination-kenya ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== destination-rwanda ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== destination-tanzania ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== destination-uganda ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== destinations ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

/* ===== find-my-safari ===== */
  body.fms-page{height:100%}
  .q-app{position:fixed;inset:0;display:flex;flex-direction:column;
         background:var(--forest);color:var(--cream);
         padding-top:env(safe-area-inset-top,0px);
         padding-bottom:env(safe-area-inset-bottom,0px)}

  .q-bar{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-5);
         padding:var(--s-4) var(--gutter)}
  .q-bar .mark{width:var(--s-8);height:var(--s-8);border-radius:var(--r-round);flex:0 0 auto}
  .q-meter{flex:1;display:flex;gap:var(--s-2);min-width:0}
  .q-meter i{flex:1;height:4px;border-radius:var(--r-pill);background:rgba(252,246,234,.16);
             transition:background .35s ease}
  .q-meter i.done{background:var(--gold-type)}
  .q-out{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:var(--r-round);text-decoration:none;
    border:1px solid rgba(252,246,234,.28);color:var(--cream)}
  .q-out:hover{border-color:rgba(252,246,234,.7)}
  .q-out svg{fill:none;stroke:currentColor;stroke-width:1.8}

  .q-body{flex:1 1 auto;min-height:0;overflow:hidden;position:relative}
  .q-step{position:absolute;inset:0;display:none;flex-direction:column;
          padding:0 var(--gutter) var(--s-5);overflow-y:auto;overscroll-behavior:contain}
  .q-step.on{display:flex}
  .q-head{flex:0 0 auto;padding-block:var(--s-5) var(--s-4);max-width:var(--container);
          margin-inline:auto;width:100%}
  .q-num{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
         letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-type)}
  .q-step h2{color:#fff;font-weight:var(--w-light);margin-top:var(--s-3);max-width:28ch}
  .q-tell{margin-top:var(--s-4);max-width:66ch;color:rgba(252,246,234,.78);
          font-size:var(--t-small);line-height:var(--lh-snug);
          padding-left:var(--s-5);border-left:2px solid rgba(214,175,103,.45)}

  .q-grid{flex:1 1 auto;display:grid;gap:var(--s-4);align-content:start;
          max-width:var(--container);margin-inline:auto;width:100%;padding-bottom:var(--s-5);
          grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .q-grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .q-grid.plain{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

  .o{position:relative;cursor:pointer;border:0;padding:0;background:transparent;text-align:left;
     border-radius:var(--r);overflow:hidden;outline:2px solid transparent;
     transition:outline-color .18s,transform .3s ease}
  .o:hover{transform:translateY(-3px)}
  .o:focus-visible{outline-color:#fff}
  .o[aria-pressed="true"]{outline-color:var(--gold-type)}
  .o .im{position:relative;aspect-ratio:5/4;background:var(--panel)}
  .o .im img{width:100%;height:100%;object-fit:cover}
  .o .im::after{content:"";position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.5) 30%,rgba(5,22,15,0) 66%)}
  .o .tick{position:absolute;right:var(--s-3);top:var(--s-3);z-index:2;width:var(--s-6);
    height:var(--s-6);border-radius:var(--r-round);border:1px solid rgba(252,246,234,.65);
    background:rgba(5,22,15,.45);display:grid;place-items:center;opacity:0;transition:opacity .18s}
  .o[aria-pressed="true"] .tick{opacity:1;background:var(--gold-type);border-color:var(--gold-type)}
  .o .tick svg{fill:none;stroke:#0B3526;stroke-width:2.6}
  .o .t{position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:2;color:#fff;
        font-family:var(--ff-display);font-size:var(--t-h3);line-height:var(--lh-tight)}
  .o.plain{border:1px solid rgba(252,246,234,.22);padding:var(--s-5);min-height:var(--s-9)}
  .o.plain[aria-pressed="true"]{border-color:var(--gold-type);background:rgba(252,246,234,.06)}
  .o.plain .t{position:static;font-size:var(--t-h3)}
  .o.plain .d{display:block;margin-top:var(--s-3);color:rgba(252,246,234,.72);
    font-family:var(--ff-body);font-size:var(--t-small);line-height:var(--lh-snug)}

  .q-foot{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;
    padding:var(--s-4) var(--gutter) var(--s-5);
    border-top:1px solid rgba(252,246,234,.12);max-width:var(--container);
    margin-inline:auto;width:100%}
  .q-foot .hint{color:rgba(252,246,234,.6);font-size:var(--t-small);margin-right:auto}
  .q-ghost{background:transparent;border:1px solid rgba(252,246,234,.32);color:var(--cream);
    border-radius:var(--r-sm);min-height:44px;padding:0 var(--s-5);cursor:pointer;
    font:var(--w-bold) var(--t-small)/var(--lh-tight) var(--ff-body)}
  .q-ghost:hover{border-color:rgba(252,246,234,.75)}
  .q-ghost[hidden]{display:none}

  .q-res{max-width:var(--container);margin-inline:auto;width:100%}
  .q-card{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:var(--s-6)}
  .q-card h3{color:var(--ink-green);font-size:var(--t-h2);font-weight:var(--w-reg);
    margin-top:var(--s-3)}
  .q-card p{margin-top:var(--s-4);color:var(--ink-soft);max-width:62ch}
  .q-rows{display:grid;gap:var(--s-4);margin-top:var(--s-5);
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .q-rows div{border-top:1px solid var(--rule);padding-top:var(--s-3)}
  .q-rows .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
  .q-rows .v{color:var(--ink-green);margin-top:var(--s-2)}
  .q-ask{margin-top:var(--s-5)}
  .q-ask h4{color:#fff;font-family:var(--ff-display);font-size:var(--t-h3);
    font-weight:var(--w-reg);margin:0}
  .q-ask .q-tell{margin-top:var(--s-4)}
  .q-fields{display:grid;gap:var(--s-4);margin-top:var(--s-5);
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .q-fields label{display:block;font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(252,246,234,.7);
    margin-bottom:var(--s-2)}
  .q-fields input{width:100%;background:rgba(252,246,234,.07);color:var(--cream);
    border:1px solid rgba(252,246,234,.24);border-radius:var(--r-sm);
    padding:var(--s-3) var(--s-4);min-height:44px;
    font:var(--w-reg) var(--t-small)/var(--lh-body) var(--ff-body)}
  .q-fields input:focus{outline:2px solid var(--gold-type);outline-offset:1px}

  @media(max-height:700px){
    .o .im{aspect-ratio:16/10}
    .q-step h2{font-size:var(--t-h3)}
    .q-tell{display:none}
  }

/* ===== index ===== */
/* HERO: the morning itself, not a description of services. C10-C15, the witness frame.
     Two panels. The photograph keeps its own light and is never scrimmed across the faces;
     the words get their own guaranteed ground. C13. */
  .hero{position:relative;margin-top:calc(-1*var(--hdr,0px));
        display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:stretch;
        /* the field is lit, not a flat fill: the light falls off away from the photograph */
        background:radial-gradient(135% 105% at 66% 26%,#12553A 0%,#0E4430 42%,#0A3324 100%)}
  /* 95vh, not 100: the sliver of the next band is the scroll cue, and it costs no chrome. */
  /* HEIGHT, done properly.
     vh on a phone means the LARGE viewport, measured with the browser bars HIDDEN. So 95vh on a
     phone is about 105% of what the person can actually see, and anything sitting at the bottom of
     that box is behind the address bar. svh is the SMALL viewport, measured with the bars showing,
     which is the honest one. The vh line stays first as a fallback for browsers without svh. */
  .hero{min-height:95vh}
  .hero{min-height:95svh}
  .hero .shot{position:relative;min-height:min(95vh,820px)}
  .hero .shot{min-height:min(95svh,820px)}
  /* the slides crossfade. They do not slide sideways: a calm dissolve keeps the words
     legible through the change and never moves the page under a reader. */
  .hero .shot .sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .85s ease}
  .hero .shot .sl.on{opacity:1}
  /* a place we do not yet have a photograph of gets a designed title card, not a grey box.
     Unused now that every slide carries a real photograph. */
  .hero .shot div.sl{display:grid;place-content:center;text-align:center;
    padding:clamp(30px,5vw,60px);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .hero .shot div.sl .pc{font:var(--w-bold) var(--t-label)/var(--lh-display) var(--ff-body);letter-spacing:var(--ls-label);
    text-transform:uppercase;color:var(--gold-type)}
  .hero .shot div.sl .pn{font-family:var(--ff-display);font-weight:var(--w-light);margin-top:var(--s-4);
    font-size:var(--t-h2);line-height:var(--lh-display);color:rgba(252,246,234,.92)}
  /* the photograph keeps its own light across every face. Only the header band, the foot
     under the caption, and the seam are touched, and the seam DISSOLVES rather than stops. */
  .hero .shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(180deg,rgba(5,22,15,.60) 0%,rgba(5,22,15,0) 18%),
    linear-gradient(0deg,rgba(5,22,15,.88) 0%,rgba(5,22,15,.70) 16%,rgba(5,22,15,0) 40%),
    linear-gradient(90deg,rgba(10,51,36,0) 82%,rgba(10,51,36,.40) 93%,rgba(10,51,36,1) 100%)}
  .hero .shot-foot{position:absolute;z-index:3;left:0;right:0;bottom:calc(var(--s-9) + var(--s-5));
    padding:0 clamp(20px,3.4vw,40px) clamp(20px,2.4vw,28px);
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .hero .caps{display:grid;width:100%;min-width:0}
  .hero .cap{grid-area:1/1;opacity:0;transition:opacity .5s ease;max-width:40ch;
             color:rgba(252,246,234,.9);font:var(--w-mid) var(--t-label)/var(--lh-snug) var(--ff-body);letter-spacing:var(--ls-body)}
  .hero .cap.on{opacity:1}
  .hero .cap b{color:#fff;font-weight:var(--w-bold)}

  /* THE LADDER. Both rows of navigation sit together on the same side, so the hand
     never crosses the page to change anything. Each row is ONE line that rotates left
     in an endless loop, and the LEFTMOST item on each row is the active one. When a
     country's places finish a full turn, the country row advances a rung. */
  .ladder{position:absolute;z-index:4;left:0;right:0;
    bottom:clamp(20px,2.4vw,28px);
    padding-inline:clamp(20px,3.4vw,40px);
    /* no mask. A row that fades at the edge is a row somebody cannot read. */
    }
  .rung{position:relative;overflow:hidden}
  .rung+.rung{margin-top:var(--s-2)}
  .rung .track{display:flex;align-items:center;gap:0;white-space:nowrap;will-change:transform}
  .rung button{flex:0 0 auto;background:transparent;border:0;cursor:pointer;white-space:nowrap;
    color:rgba(252,246,234,.44);transition:color .35s ease;
    box-shadow:inset 0 -2px 0 rgba(252,246,234,0)}
  .rung button:hover{color:rgba(252,246,234,.9)}
  /* the lower rung is the country: heavier, because it is the bigger choice. */
  .rung-c button{font:var(--w-bold) var(--t-label)/var(--lh-display) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;
    padding:var(--s-3) var(--s-5) var(--s-3) 0;min-height:44px}
  .rung-c button.lead{color:#fff;box-shadow:inset 0 -2px 0 var(--gold-type)}
  /* the upper rung is the place inside that country: lighter, so the two never blur. */
  .rung-p button{font:var(--w-mid) var(--t-label)/var(--lh-display) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;
    padding:var(--s-3) var(--s-4) var(--s-3) 0;min-height:42px;color:rgba(252,246,234,.36)}
  .rung-p button:hover{color:rgba(252,246,234,.85)}
  .rung-p button.lead{color:var(--gold-type);box-shadow:inset 0 -1px 0 rgba(214,175,103,.55)}
  .rung-p.swap .track{opacity:0;transition:opacity .22s ease}
  .rung-p .track{opacity:1;transition:opacity .28s ease}

  .hero .txs{display:grid}
  .hero .tx{grid-area:1/1;opacity:0;transition:opacity .5s ease;pointer-events:none}
  .hero .tx.on{opacity:1;pointer-events:auto}

  .hero .col{display:flex;flex-direction:column;justify-content:flex-end;
             padding:clamp(140px,14vw,190px) clamp(24px,5vw,80px) calc(var(--s-8) + var(--s-5)) clamp(24px,4.2vw,58px)}
  .hero .col>*{max-width:36rem}
  /* the lit field peaks at 66% 26%, exactly where the eyebrow sits, so this one gold is
     raised until it measures 5.02:1 there. Measured from the render, not assumed. */
  .hero .col .stamp{color:#DFC07F}
  .stamp{font:var(--w-bold) var(--t-label)/var(--lh-body) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;
         color:var(--gold-type)}
  /* tight inside a group, generous between groups. Even spacing is what makes a page read as a form. */
  .hero h1{font-family:var(--ff-display);font-weight:var(--w-reg);color:#fff;margin-top:var(--s-4);
           font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);
           max-width:24ch;text-wrap:balance}
  .hero .sub{color:#E9E1D2;font-size:var(--t-lede);margin-top:var(--s-5);max-width:43ch;line-height:var(--lh-body)}
  .hero .sub b{color:#fff;font-weight:var(--w-mid)}
  .hero .acts{display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap;margin-top:var(--s-7)}
  .hero .acts .tlink{color:#fff}
  .hero .guard{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(214,175,103,.3);
               color:#D8D0C0;font-size:var(--t-small);letter-spacing:var(--ls-body)}
  .hero .guard .reg{color:var(--gold-type)}
  /* phone: one filled action on the screen, and it is the hero's. The header stops competing. */
  @media(max-width:900px){
    header .btn{display:none}
    .hero{grid-template-columns:1fr;background:var(--forest)}
    /* D-14: the photograph gives up height so the ladder AND the action both sit
       above the fold on a phone. Navigation you cannot reach is not navigation. */
    .hero .shot{min-height:clamp(260px,42vh,360px);order:1}
    .hero .shot{min-height:clamp(260px,42svh,360px)}
    .hero .shot img[data-s="0"]{object-position:26% 50%}
    /* in a column flex, flex-basis is HEIGHT: the caption box became 240px tall and
       lifted the caption off the dark foot into the middle of the photograph. */
    /* one line that swipes, never a wrapping block: two rows of place names pushed the
       caption up off the dark foot and onto the bright part of the photograph. */
    .hero .places{flex-wrap:nowrap;overflow-x:auto;width:100%;
      scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .hero .places::-webkit-scrollbar{display:none}
    .hero .places button{flex:0 0 auto;font-size:var(--t-label);padding:var(--s-3) var(--s-2)}
    .hero .countries{gap:var(--s-1)}
    .hero .countries button{padding:var(--s-2) var(--s-3);font-size:var(--t-label);letter-spacing:var(--ls-label)}
    .hero .shot-foot{gap:var(--s-2)}
    .hero .shot .sl.on ~ .shot-foot{}
    .hero .shot::after{background:linear-gradient(180deg,rgba(5,22,15,.62) 0%,rgba(5,22,15,0) 26%),
      linear-gradient(0deg,rgba(5,22,15,.93) 0%,rgba(5,22,15,.84) 26%,rgba(5,22,15,.45) 42%,rgba(5,22,15,0) 58%)}
    /* stacked: the ladder leaves the overlay and becomes its own band between the
       photograph and the words, so it can never sit on top of the action. */
    .ladder{position:static;order:2;padding:var(--s-4) var(--gutter) var(--s-5);
            background:var(--forest)}
    .hero .shot-foot{bottom:0}
    .hero .col{order:3;padding:var(--s-5) var(--gutter) var(--s-6)}
    .hero .col>*{max-width:none}
    .hero h1{max-width:18ch;font-size:var(--t-display)}
    .hero .sub{margin-top:var(--s-4)}
    .hero .acts{margin-top:var(--s-5)}
    .hero .guard{margin-top:var(--s-5);padding-top:var(--s-4)}
  }

  /* A SHORT WINDOW is the case min-height cannot solve, because min-height is a floor and
     never a ceiling. On a laptop at 640 to 760 the column's own content was taller than 95svh,
     so the hero grew and pushed its own navigation off the screen. Tighten by HEIGHT, not width. */
  @media(max-height:780px) and (min-width:901px){
    .hero .col{padding-top:clamp(84px,10vh,120px);padding-bottom:var(--s-7)}
    .hero h1{font-size:var(--t-h2)}
    .hero .sub{margin-top:var(--s-4);font-size:var(--t-small)}
    .hero .acts{margin-top:var(--s-5)}
    .hero .guard{margin-top:var(--s-5);padding-top:var(--s-4)}
    .hero .cap{display:none}
  }

  /* SECTION TWO: the reward. The argument the first screen refused to make. */
  .hour{position:relative;background:var(--forest);min-height:min(62vh,560px);display:flex;align-items:center}
  .hour>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
  .hour::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,rgba(5,22,15,.93) 0%,rgba(5,22,15,.88) 34%,rgba(5,22,15,.46) 58%,
                          rgba(5,22,15,.14) 80%,rgba(5,22,15,.30) 100%)}
  .hour .wrap{width:100%;position:relative;z-index:2;padding-block:clamp(56px,7vw,86px)}
  .hour h2{color:#fff;font-family:var(--ff-display);font-weight:var(--w-light);margin-top:var(--s-4);max-width:15ch}
  .hour p{color:rgba(252,246,234,.93);margin-top:var(--s-5);max-width:46ch}
  .hour .tlink{color:var(--gold-type);display:inline-block;margin-top:var(--s-5);font-size:var(--t-small)}
  /* phone: the animal keeps the top of the frame and the words sit on near-solid ground
     beneath it. The old centred scrim buried the subject, which is C16 broken by its author. */
  @media(max-width:760px){
    .hour{min-height:78vh;align-items:flex-end}
    .hour>img{object-position:49% 50%}
    .hour::after{background:linear-gradient(180deg,rgba(5,22,15,.28) 0%,rgba(5,22,15,.10) 30%,
                 rgba(5,22,15,.86) 58%,rgba(5,22,15,.96) 78%)}
    .hour .wrap{padding-block:clamp(40px,7vw,56px)}
    .hour h2,.hour p{max-width:none}
  }

  /* THE PICK: her own sentence, on the first screen, not three scrolls down. C-063 */
  .pick{background:#061710;border-top:1px solid rgba(214,175,103,.34)}
  .pick .wrap{padding-block:clamp(22px,2.6vw,32px)}
  .pick .lab{font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;
             color:rgba(252,246,234,.6)}
  .picks{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s-4);
         border-top:1px solid rgba(252,246,234,.16)}
  /* every cell gets air on BOTH sides of its rule. Only the outer edges sit flush with
     the page gutter, so the column of text still lines up with everything above it. */
  .picks a{text-decoration:none;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5) var(--s-6) var(--s-5);
           border-bottom:1px solid rgba(252,246,234,.16);border-right:1px solid rgba(252,246,234,.16)}
  .picks a:nth-child(3n+1){padding-left:0}
  .picks a:nth-child(3n){border-right:0;padding-right:0}
  .picks a:nth-child(n+4){border-bottom:0}
  .picks a:hover{background:rgba(252,246,234,.05)}
  .picks .said{font-family:var(--ff-display);font-size:var(--t-lede);line-height:var(--lh-tight);color:var(--cream)}
  .picks .cat{font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;
              color:var(--gold-type)}
  @media(max-width:880px){
    .picks{grid-template-columns:1fr}
    .picks a{border-right:0;padding-inline:0;border-bottom:1px solid rgba(252,246,234,.16)}
    .picks a:last-child{border-bottom:0}
  }

  /* PROTECTION · the answer nobody publishes */
  .ledger{background:var(--sand)}
  .ledger .wrap{padding-block:clamp(48px,6vw,78px)}
  .ledger h2{max-width:20ch}
  .ledger .intro{color:var(--ink-soft);margin-top:var(--s-4);max-width:62ch}
  .rows{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s-7);border-top:1px solid var(--rule)}
  .row{padding:var(--s-5) var(--s-5) var(--s-6);border-right:1px solid var(--rule)}
  .row:first-child{padding-left:0}
  .row:last-child{border-right:0;padding-right:0}
  .row:last-child{border-right:0;padding-right:0}
  .row .eyebrow{color:var(--ink-green)}
  .row p{color:var(--ink);margin-top:var(--s-2);font-size:var(--t-body);line-height:var(--lh-snug)}
  .reg{font-variant-numeric:tabular-nums;letter-spacing:var(--ls-body)}
  .ask{margin-top:var(--s-7);padding:var(--s-6) var(--s-6);background:var(--forest);border-left:4px solid var(--gold);
       border-radius:var(--r)}
  .ask p{font-family:var(--ff-display);font-size:var(--t-lede);line-height:var(--lh-tight);color:var(--cream)}
  .ask .tlink{color:var(--gold-type);display:inline-block;margin-top:var(--s-4);font-size:var(--t-small)}
  @media(max-width:1080px){.rows{grid-template-columns:repeat(2,1fr)}
    .row:nth-child(2n){border-right:0;padding-right:0}
    .row:nth-child(2n+1){padding-left:0}
    .row:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
  @media(max-width:660px){.rows{grid-template-columns:1fr}
    .row{border-right:0;padding-inline:0;border-bottom:1px solid var(--hair)}
    .row:last-child{border-bottom:0}}

  /* IDEAS · the sentence first, the category second */
  .sandy{background:var(--sand)}
  .ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--s-7);background:var(--hair-dark)}
  .idea{background:var(--cream);padding:var(--s-6) var(--s-6) var(--s-6);text-decoration:none;display:flex;flex-direction:column;gap:var(--s-3)}
  .idea:hover{background:#F2EADB}
  .idea .said{font-family:var(--ff-display);font-size:var(--t-h3);line-height:var(--lh-tight);color:var(--ink)}
  .idea .cat{font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);margin-top:auto}
  .idea .go{color:var(--ink);font-size:var(--t-small);letter-spacing:var(--ls-body);border-top:1px solid var(--hair-dark);padding-top:var(--s-3)}
  @media(max-width:900px){.ideas{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:580px){.ideas{grid-template-columns:1fr}}

  /* THE ROUND TRIP · signature block. The pin. One firm, the whole way. */
  .hold{height:clamp(56px,9vw,132px);background:var(--cream)}
  .trip{background:var(--cream);padding-block:clamp(56px,7vw,96px)}
  .trip .head{max-width:34ch}
  .trip .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);margin-top:clamp(34px,4vw,56px);align-items:start}
  .trip .stage{position:sticky;top:clamp(56px,12vh,104px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--stone)}
  .trip .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
  .trip .stage img.is-on{opacity:1}
  .trip .stage .tag{position:absolute;left:0;bottom:0;right:0;z-index:2;padding:var(--s-4) var(--s-4);
    background:linear-gradient(180deg,rgba(6,28,20,0),rgba(6,28,20,.82));color:var(--cream);
    font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase}
  .trip .steps{display:flex;flex-direction:column;gap:clamp(40px,7vh,96px);padding-block:clamp(10px,4vh,60px)}
  .trip .st{border-left:2px solid var(--rule);padding-left:var(--s-5)}
  .trip .st.on{border-left-color:var(--ink-green)}
  .trip .st .where{font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
  .trip .st h3{font-family:var(--ff-display);font-weight:var(--w-reg);font-size:var(--t-h3);line-height:var(--lh-tight);margin-top:var(--s-2)}
  .trip .st p{margin-top:var(--s-3);color:var(--ink-soft);max-width:44ch}
  .trip .st .who{margin-top:var(--s-3);font-size:var(--t-small);color:var(--ink-green);border-top:1px solid var(--hair-dark);padding-top:var(--s-3);max-width:44ch}
  .trip .st .who b{font-weight:var(--w-bold)}
  .trip .close{margin-top:clamp(34px,4vw,56px);padding-top:var(--s-5);border-top:1px solid var(--hair-dark);
    font-family:var(--ff-display);font-size:var(--t-h3);line-height:var(--lh-tight);max-width:30ch;color:var(--ink-green)}
  .trip .m-img{display:none}
  @media(max-width:880px){
    .trip .grid{grid-template-columns:1fr}
    .trip .stage{display:none}
    .trip .m-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);margin-bottom:var(--s-4)}
    .trip .steps{gap:var(--s-7)}
  }
  @media(prefers-reduced-motion:reduce){.trip .stage img{transition:none}}

  /* THE PERMIT · signature block. The trade's own document, explained honestly. */
  .permit{background:var(--sand);padding-block:clamp(60px,7.5vw,104px)}
  .permit .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,68px);align-items:center;margin-top:clamp(30px,4vw,48px)}
  .doc{background:var(--cream);border:1px solid var(--rule);padding:0;position:relative;
       border-radius:var(--r);box-shadow:0 1px 0 rgba(43,42,38,.06)}
  .doc::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:10px;
    background:radial-gradient(circle at 6px -2px,transparent 6px,var(--sand) 6px);background-size:14px 10px}
  .doc .dh{padding:var(--s-5) var(--s-5) var(--s-4);border-bottom:1px dashed var(--rule)}
  .doc .dh .who{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
  .doc .dh .what{font-family:var(--ff-display);font-size:var(--t-h3);margin-top:var(--s-2);color:var(--ink-green)}
  .doc dl{margin:0;padding:var(--s-2) var(--s-5) var(--s-5)}
  .doc .fld{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid rgba(43,42,38,.09)}
  .doc .fld:last-child{border-bottom:0}
  .doc dt{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
  .doc dd{margin:0;font-variant-numeric:tabular-nums;font-size:var(--t-lede);color:var(--ink-green);text-align:right}
  .doc dd b{font-weight:var(--w-bold)}
  .doc .note{padding:0 var(--s-5) var(--s-5);font-size:var(--t-small);color:var(--ink-soft);line-height:var(--lh-snug)}
  .permit .say p+p{margin-top:var(--s-4)}
  .permit .say .lede{color:var(--ink-soft)}
  @media(max-width:880px){.permit .grid{grid-template-columns:1fr}}

  /* person */
  .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,68px);align-items:center}
  .split img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:4/5}
  .split .body{max-width:56ch}
  .split .body p+p{margin-top:var(--s-4)}
  @media(max-width:880px){.split{grid-template-columns:1fr}}

  /* proofs */
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);margin-top:var(--s-7)}
  .three figure{margin:0}
  .three img{aspect-ratio:5/4;object-fit:cover;width:100%;border-radius:var(--r)}
  .three h3{margin-top:var(--s-4)}
  .three p{margin-top:var(--s-2);color:var(--ink-soft);font-size:var(--t-body)}
  @media(max-width:860px){.three{grid-template-columns:1fr}}

  /* outcome */
  .outcome{position:relative;background:var(--forest)}
  .outcome>img{width:100%;height:clamp(380px,52vw,620px);object-fit:cover;object-position:50% 40%}
  .outcome .panel{background:var(--forest);padding-block:clamp(40px,5vw,62px)}
  .outcome .quote{font-family:var(--ff-display);font-weight:var(--w-light);font-size:var(--t-h2);
                  line-height:var(--lh-tight);color:var(--cream);max-width:24ch}
  .outcome .grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,58px);align-items:end}
  .outcome .meta{color:rgba(252,246,234,.88);font-size:var(--t-small)}
  @media(max-width:880px){.outcome .grid{grid-template-columns:1fr}}

  /* destinations */
  .dests{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);margin-top:var(--s-7)}
  .dest img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:var(--r)}
  .dest h3{margin-top:var(--s-3)}
  .dest p{color:var(--ink-soft);font-size:var(--t-small);margin-top:var(--s-1)}
  @media(max-width:880px){.dests{grid-template-columns:repeat(2,1fr)}}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,56px);margin-top:var(--s-7)}
  .step{border-top:1px solid rgba(252,246,234,.3);padding-top:var(--s-5)}
  .step .n{font-family:var(--ff-display);color:rgba(252,246,234,.72);font-size:var(--t-lede)}
  .step h3{color:var(--cream);margin-top:var(--s-1)}
  .step p{color:rgba(252,246,234,.92);margin-top:var(--s-2);font-size:var(--t-body)}
  @media(max-width:860px){.steps{grid-template-columns:1fr}}

  .invite{max-width:62ch}
  .invite h2{font-weight:var(--w-light)}
  .invite p{margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--t-lede)}
  .invite .btn{margin-top:var(--s-6)}

/* ===== plan ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .planbox{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-9);
           margin-top:var(--y-block);align-items:start}
  @media(max-width:900px){.planbox{grid-template-columns:1fr;gap:var(--s-7)}}
  .form{background:var(--cream);border:1px solid var(--rule);border-radius:var(--r);
        padding:var(--s-7)}
  .field{margin-bottom:var(--s-5)}
  .field label{display:block;font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-bottom:var(--s-2)}
  .field input,.field select,.field textarea{width:100%;font:var(--w-reg) var(--t-body)/var(--lh-body) var(--ff-body);
    color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm);
    padding:var(--s-3) var(--s-4);min-height:var(--s-8)}
  .field textarea{min-height:var(--s-9);resize:vertical}
  .field .hint{margin-top:var(--s-2);font-size:var(--t-small);color:var(--ink-soft);
    line-height:var(--lh-snug)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
  @media(max-width:560px){.row2{grid-template-columns:1fr}}
  .form .btn{margin-top:var(--s-4);width:100%;text-align:center}
  .aside h3{color:var(--ink-green);margin-top:var(--s-7)}
  .aside h3:first-child{margin-top:0}
  .aside p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  .promise{background:var(--forest);color:var(--cream);border-radius:var(--r);
    padding:var(--s-6);margin-top:var(--s-7)}
  .promise .big{font-family:var(--ff-display);font-size:var(--t-h3);color:#fff;
    font-weight:var(--w-reg)}
  .promise p{color:rgba(252,246,234,.9);margin-top:var(--s-3);font-size:var(--t-small);
    line-height:var(--lh-snug)}

/* ===== safari-idea-culture-and-community ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== safari-idea-family-journeys ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== safari-idea-gorillas-and-migration ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .ihero{position:relative;background:var(--forest);min-height:min(66vh,620px);
         display:flex;align-items:flex-end;margin-top:calc(-1*var(--hdr,0px))}
  .ihero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
             object-position:50% 48%}
  .ihero::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.62) 0%,rgba(5,22,15,0) 26%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 30%,rgba(5,22,15,0) 62%)}
  .ihero .wrap{position:relative;z-index:2;width:100%;
    padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .ihero h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
    letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .ihero .facts{display:flex;gap:var(--s-7);flex-wrap:wrap;margin-top:var(--s-7);
    padding-top:var(--s-5);border-top:1px solid rgba(214,175,103,.4)}
  .ihero .fact .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-type)}
  .ihero .fact .v{color:#fff;font-size:var(--t-lede);margin-top:var(--s-2)}

  .days{margin-top:var(--y-block);border-top:1px solid var(--rule)}
  .day{display:grid;grid-template-columns:var(--s-9) 1fr;gap:var(--s-6);
       padding:var(--s-6) 0;border-bottom:1px solid var(--rule)}
  .day .n{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-cta)}
  .day h3{color:var(--ink-green)}
  .day p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug);max-width:62ch}
  @media(max-width:700px){.day{grid-template-columns:1fr;gap:var(--s-3)}}

  .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9);margin-top:var(--y-block)}
  .two h3{color:var(--ink-green)}
  .two ul{margin:var(--s-5) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-3)}
  .two li{padding-left:var(--s-6);position:relative;font-size:var(--t-small);
    line-height:var(--lh-snug);color:var(--ink-soft)}
  .two li::before{content:"";position:absolute;left:0;top:var(--s-2);width:var(--s-3);
    height:var(--s-1);background:var(--gold);border-radius:var(--r-xs)}
  .two .out li::before{background:var(--stone)}
  @media(max-width:820px){.two{grid-template-columns:1fr;gap:var(--s-7)}}

  .body-check{background:var(--forest);color:var(--cream);border-radius:var(--r);
    padding:var(--s-7);margin-top:var(--y-block)}
  .body-check h3{color:var(--cream);font-family:var(--ff-display);font-size:var(--t-h3);
    font-weight:var(--w-reg)}
  .body-check p{margin-top:var(--s-4);color:rgba(252,246,234,.92);font-size:var(--t-small);
    line-height:var(--lh-snug);max-width:66ch}

/* ===== safari-idea-gorillas-and-primates ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== safari-idea-groups-schools-and-special-interests ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== safari-idea-honeymoons-and-celebrations ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== safari-idea-wildlife-safaris ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}

  .lede2{font-size:var(--t-lede);color:var(--ink-soft);max-width:62ch;margin-top:var(--s-5)}
  .pts{display:grid;gap:var(--s-6);margin-top:var(--y-block);
       grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pt{border-top:1px solid var(--rule);padding-top:var(--s-5)}
  .pt h3{color:var(--ink-green)}
  .pt p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
        line-height:var(--lh-snug)}
  .strip{display:grid;gap:var(--s-5);margin-top:var(--y-block);
         grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
  .strip p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
           line-height:var(--lh-snug)}

/* ===== safari-ideas ===== */
/* page head, used by every inner page */
  /* EVERY page opens on a photograph, so the transparent header always has something to sit on
     and cream type never lands on cream. A sand band under a transparent header was the bug. */
  .phead{position:relative;background:var(--forest);color:var(--cream);
         min-height:min(62vh,560px);display:flex;align-items:flex-end;
         padding-block:calc(var(--y-section) + var(--s-9)) var(--y-block)}
  .phead{min-height:min(62svh,560px)}
  .phead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phead::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(5,22,15,.72) 0%,rgba(5,22,15,.2) 34%,rgba(5,22,15,0) 58%),
    linear-gradient(0deg,rgba(5,22,15,.92) 0%,rgba(5,22,15,.55) 34%,rgba(5,22,15,.1) 74%)}
  .phead .wrap{position:relative;z-index:2;width:100%}
  .phead .eyebrow{color:var(--gold-type)}
  .phead h1{color:#fff;font-size:var(--t-display);line-height:var(--lh-display);
            letter-spacing:var(--ls-display);max-width:20ch;margin-top:var(--s-4)}
  .phead .lede{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:60ch}
  .band{padding-block:var(--y-section)}
  .band.cream{background:var(--cream)}
  .band.sand{background:var(--sand)}
  .band.dark{background:var(--forest);color:var(--cream)}
  .band h2{max-width:24ch}
  .band .intro{margin-top:var(--s-5);max-width:62ch;color:var(--ink-soft);font-size:var(--t-lede)}
  .band.dark .intro{color:rgba(252,246,234,.9)}
  .cta-end{background:var(--forest);color:var(--cream);padding-block:var(--y-section)}
  .cta-end h2{color:var(--cream);font-weight:var(--w-light);max-width:22ch}
  .cta-end p{margin-top:var(--s-5);color:rgba(252,246,234,.9);max-width:54ch}
  .cta-end .btn{margin-top:var(--s-7)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7) var(--s-6);
         margin-top:var(--y-block)}
  /* four items never go in three columns. Two, so the rows are even and each tile is worth
     looking at rather than a thumbnail. */
  .grid2{grid-template-columns:repeat(2,1fr);gap:var(--s-8) var(--s-7)}
  .grid2 .fig{aspect-ratio:16/10}
  .grid2 h3{font-size:var(--t-h2);font-weight:var(--w-reg)}
  .grid2 .k{margin-top:var(--s-5)}
  .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
             background:var(--forest)}
  .card .fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
  .card:hover .fig img{transform:scale(1.035)}
  .card .fig.none{display:grid;place-content:center;text-align:center;padding:var(--s-6);
    background:radial-gradient(125% 100% at 50% 32%,#155F41 0%,#0D3D2B 58%,#09301F 100%)}
  .card .fig.none .pn{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-h3);color:rgba(252,246,234,.92);line-height:var(--lh-tight)}
  .card .k{font:var(--w-bold) var(--t-label)/var(--lh-tight) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft);
    margin-top:var(--s-5)}
  .card h3{margin-top:var(--s-2);color:var(--ink-green)}
  .card p{margin-top:var(--s-3);color:var(--ink-soft);font-size:var(--t-small);
    line-height:var(--lh-snug)}
  @media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.grid3{grid-template-columns:1fr}}
/* ── FORM CONTROLS, against the parent theme ──────────────────────────────────
   Togo styles bare input selectors, which paints our fields white on a dark ground.
   These are scoped and deliberate, and they are the only !important rules in the file. */
body .f-mail input[type="text"],
body .f-mail input[type="email"],
body .q-fields input,
body .ask2 input,
body .field input,
body .field select,
body .field textarea{
  background:rgba(252,246,234,.08)!important;
  color:var(--cream)!important;
  border:1px solid rgba(252,246,234,.26)!important;
  border-radius:var(--r-sm)!important;
  box-shadow:none!important;
}
body .field input,
body .field select,
body .field textarea{
  background:#fff!important;
  color:var(--ink)!important;
  border-color:var(--rule)!important;
}
body .f-mail input::placeholder,
body .q-fields input::placeholder,
body .ask2 input::placeholder{ color:rgba(252,246,234,.55)!important; }

body .f-mail input:focus,
body .q-fields input:focus,
body .ask2 input:focus,
body .field input:focus,
body .field textarea:focus{
  outline:2px solid var(--gold-type)!important;
  outline-offset:1px!important;
}

/* the action keeps its own colour wherever the parent theme styles buttons */
body .btn,
body button.btn,
body a.btn{
  background:var(--action)!important;
  color:var(--on-action)!important;
  border:1px solid var(--action-edge)!important;
  border-radius:var(--r-sm)!important;
  text-transform:none!important;
  letter-spacing:var(--ls-body)!important;
}
body .btn:hover,
body button.btn:hover,
body a.btn:hover{ background:var(--action-hover)!important; color:var(--on-action)!important; }

/* ── TYPE, against the parent theme ───────────────────────────────────────────
   Togo styles bare h1 to h4 with its own family, weight and size, and wins on
   specificity inside post content. Our sections take their type back. */
body h1,body h2,body h3,body h4,
body .step h3,body .pt h3,body .card h3,body .slide h3,
body .q-step h2,body .phead h1,body .hero h1{
  font-family:var(--ff-display)!important;
  text-transform:none!important;
  letter-spacing:var(--ls-display)!important;
}
body h1,body .phead h1{ font-size:var(--t-display)!important; font-weight:var(--w-reg)!important;
  line-height:var(--lh-display)!important; }
body h2{ font-size:var(--t-h2)!important; font-weight:var(--w-reg)!important;
  line-height:var(--lh-h)!important; }
body h3{ font-size:var(--t-h3)!important; font-weight:var(--w-reg)!important;
  line-height:var(--lh-tight)!important; }
body h4{ font-size:var(--t-lede)!important; font-weight:var(--w-mid)!important; }
body .eyebrow,body .stamp,body .k,body .q-num,body .f-band,body footer h4{
  font-family:var(--ff-body)!important; }
body footer h4{ font-size:var(--t-label)!important; font-weight:var(--w-bold)!important;
  letter-spacing:var(--ls-label)!important; text-transform:uppercase!important; }
body p,body li,body .lede,body .sub,body .intro{ font-family:var(--ff-body)!important; }

/* ===== trip page: day-by-day uses the itinerary's own day labels ===== */
  [data-spec-id="trip.days"] .day{grid-template-columns:max-content 1fr}
  [data-spec-id="trip.days"] .day .n{white-space:nowrap}
  [data-spec-id="trip.days"] .day .where{margin-top:var(--s-2);font-size:var(--t-label);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-soft)}
  @media(max-width:700px){[data-spec-id="trip.days"] .day{grid-template-columns:1fr}}

/* A single-column "two" list must not reserve an empty second column. */
  .two.one{grid-template-columns:1fr}

/* The GTranslate switcher offers unvetted machine translation of cancellation, health, and TICO
   wording. Hidden until that output is read by someone fluent. THE MIGRATION PLAN, task 5.
   Removing these two selectors restores it. */
  .gtranslate_wrapper,#gt_float_wrapper{display:none!important}

  .ledger.on-cream{background:var(--cream)}

/* ===== .prose · the reading column for all 43 guides =====
   These articles are 10,000 to 18,000 characters of real writing. Until now the block had no
   rules at all, so every heading inside them rendered at body size. Everything here resolves to
   a token; nothing is hand-typed. */
  .prose{max-width:68ch;color:var(--ink);font-size:var(--t-body);line-height:var(--lh-body)}
  .prose > *:first-child{margin-top:0}

  .prose p{margin-top:var(--s-5)}
  .prose strong,.prose b{font-weight:var(--w-mid);color:var(--ink-green)}
  .prose em,.prose i{font-style:italic}

  .prose h2{font-family:var(--ff-display);font-weight:var(--w-reg);font-size:var(--t-h2);
    line-height:var(--lh-h);letter-spacing:var(--ls-display);color:var(--ink-green);
    margin-top:var(--y-block);max-width:24ch}
  .prose h3,.prose h4,.prose h5,.prose h6{font-family:var(--ff-display);font-weight:var(--w-reg);
    font-size:var(--t-h3);line-height:var(--lh-tight);color:var(--ink-green);
    margin-top:var(--s-8);max-width:34ch}
  .prose h2 + p,.prose h3 + p,.prose h4 + p,.prose h5 + p,.prose h6 + p{margin-top:var(--s-4)}

  .prose ul,.prose ol{margin-top:var(--s-5);padding-left:var(--s-6);display:grid;gap:var(--s-3)}
  .prose li{line-height:var(--lh-snug)}
  .prose ul{list-style:none;padding-left:0}
  .prose ul > li{position:relative;padding-left:var(--s-6)}
  .prose ul > li::before{content:"";position:absolute;left:0;top:var(--s-2);
    width:var(--s-3);height:var(--s-1);background:var(--gold);border-radius:var(--r-xs)}
  .prose ol{list-style:decimal}
  .prose ol > li{padding-left:var(--s-2)}
  .prose li > ul,.prose li > ol{margin-top:var(--s-3)}

  .prose a{color:var(--gold-cta);text-decoration:underline;text-underline-offset:var(--s-1)}
  .prose a:hover{color:var(--ink-green)}

  .prose blockquote{margin-top:var(--s-7);padding:var(--s-5) 0 var(--s-5) var(--s-6);
    border-left:var(--s-1) solid var(--action);color:var(--ink-soft);font-size:var(--t-lede);
    line-height:var(--lh-snug)}
  .prose blockquote p{margin-top:var(--s-4)}
  .prose blockquote p:first-child{margin-top:0}

  .prose img{width:100%;height:auto;border-radius:var(--r);margin-top:var(--s-7)}
  .prose figure{margin:var(--s-7) 0 0}
  .prose figcaption{margin-top:var(--s-3);font-size:var(--t-small);color:var(--ink-soft)}

  .prose hr{border:0;border-top:1px solid var(--rule);margin-top:var(--y-block)}

  .prose .wp-block-table,.prose table{width:100%;border-collapse:collapse;margin-top:var(--s-7);
    font-size:var(--t-small)}
  .prose th,.prose td{text-align:left;padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--rule);line-height:var(--lh-snug)}
  .prose th{font-weight:var(--w-bold);color:var(--ink-green)}

  .prose code,.prose kbd{font-size:var(--t-small);background:var(--sand);
    padding:var(--s-1) var(--s-2);border-radius:var(--r-xs)}

/* ===== the guides hub ===== */
  .gset{margin-top:var(--y-block);border-top:1px solid var(--rule);padding-top:var(--s-6)}
  .gset:first-child{margin-top:var(--s-7)}
  .glist{margin:var(--s-5) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-4)}
  .glist li{display:grid;grid-template-columns:1fr max-content;gap:var(--s-5);
    align-items:baseline;border-bottom:1px solid var(--hair-dark);padding-bottom:var(--s-4)}
  .glist a{color:var(--ink-green);font-family:var(--ff-display);font-size:var(--t-h3);
    line-height:var(--lh-tight);text-decoration:none}
  .glist a:hover{color:var(--gold-cta)}
  .glist .gdate{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
    color:var(--ink-soft);white-space:nowrap}
  @media(max-width:620px){.glist li{grid-template-columns:1fr;gap:var(--s-2)}}

/* Six menu items, the telephone and the action need about 1106px on one line, and a 1200px
   screen offers 1104. Rather than hide the whole menu on every laptop, the row tightens and the
   telephone becomes icon-only, which is the same control the small screens already use. */
  @media(max-width:1340px){
    .full{gap:var(--s-5)}
    .full .call .num{display:none}
    .full .call{padding:0;min-width:44px;justify-content:center}
  }

/* Menu labels and the action are controls, not prose: they never wrap mid-label. If the row cannot
   hold them the collapsed menu takes over, which is a decision, where a wrapped label is an
   accident. The breakpoint below is where six labels at 16px stop fitting. */
  .full a,.full .btn,.menu-btn,.call-sm{white-space:nowrap}
  @media(max-width:1380px){
    .full{display:none}
    .menu-btn{opacity:1;pointer-events:auto;position:static}
    .call-sm{display:inline-flex}
  }

/* The logo is a flex child of the bar and was shrinking to a sliver once the menu grew.
   A mark never shrinks. */
  .bar > a:first-child{flex:0 0 auto;display:block}
  .bar .mark{flex:0 0 auto}

/* The four-column row block was letting something in the parent cascade push each paragraph to a
   different height, so the headings lined up and the body text did not. Pin the cell to the top and
   state the paragraph's own spacing, rather than inheriting it. A260920, Ant caught it. */
  .rows{align-items:start}
  .row{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
  .row .eyebrow{margin:0 0 var(--s-4)}
  .row p{margin:0 0 0!important}
  .row p + p{margin-top:var(--s-4)!important}

/* ===== FIND MY SAFARI · the Forminator form, in the Bashem design =====
   A260920, D-34. The hand-built version broke because LiteSpeed swept its inline JS into a bundle
   the page stopped loading. This one degrades gracefully: if any script fails the fields still
   submit. Everything below is our tokens; nothing is hand-typed. */

  body.fms-page{overflow:auto}
  body.fms-page footer{display:none!important}
  body.fms-page header{display:block!important}
  body.fms-page header .full,body.fms-page header .menu-btn{display:none!important}

  .fms-wrap{background:var(--forest);min-height:100svh;min-height:100vh;
    padding-block:clamp(var(--s-8),10vh,var(--s-9))}
  .fms-wrap .wrap{max-width:var(--container)}

  /* the frame screen */
  .fms-welcome .fms-eyebrow{font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body);
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-type)}
  .fms-welcome h2{font-family:var(--ff-display);font-weight:var(--w-light);
    font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);
    color:var(--cream);margin-top:var(--s-4);max-width:18ch}
  .fms-welcome .fms-lede{font-size:var(--t-lede);line-height:var(--lh-snug);
    color:rgba(252,246,234,.86);margin-top:var(--s-5);max-width:56ch}
  .fms-welcome .fms-frame{margin:var(--s-7) 0 0;padding:0;list-style:none;display:grid;
    gap:var(--s-3);max-width:56ch}
  .fms-welcome .fms-frame li{position:relative;padding-left:var(--s-6);
    color:rgba(252,246,234,.78);font-size:var(--t-small);line-height:var(--lh-snug)}
  .fms-welcome .fms-frame li::before{content:"";position:absolute;left:0;top:var(--s-2);
    width:var(--s-3);height:var(--s-1);background:var(--gold);border-radius:var(--r-xs)}

  /* Forminator's own chrome, reset onto the dark ground */
  .fms-wrap .forminator-ui,.fms-wrap .forminator-custom-form{background:transparent!important}
  .fms-wrap .forminator-field,.fms-wrap .forminator-row{background:transparent!important}
  .fms-wrap .forminator-label,
  .fms-wrap .forminator-ui .forminator-label{font-family:var(--ff-display)!important;
    font-weight:var(--w-light)!important;font-size:var(--t-h2)!important;
    line-height:var(--lh-h)!important;letter-spacing:var(--ls-display)!important;
    color:var(--cream)!important;text-transform:none!important;max-width:20ch;display:block;
    margin-bottom:var(--s-4)!important}
  .fms-wrap .forminator-description,
  .fms-wrap .forminator-ui .forminator-description{color:rgba(252,246,234,.72)!important;
    font-size:var(--t-small)!important;line-height:var(--lh-snug)!important;
    max-width:60ch;margin-bottom:var(--s-6)!important}
  .fms-wrap .forminator-required{color:var(--gold-type)!important}

  /* the picture tiles */
  .fms-wrap .forminator-checkbox-list,.fms-wrap .forminator-radio-list,
  .fms-wrap .forminator-ui .forminator-field-checkbox,
  .fms-wrap .forminator-ui .forminator-field-radio{display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-5)!important;
    margin-top:var(--s-5)}
  .fms-wrap .forminator-checkbox,.fms-wrap .forminator-radio{position:relative;margin:0!important;
    border-radius:var(--r);overflow:hidden;background:rgba(252,246,234,.06);
    border:1px solid rgba(252,246,234,.18);transition:border-color .2s,background .2s;
    cursor:pointer;display:block!important;padding:0!important;min-height:44px}
  .fms-wrap .forminator-checkbox:hover,.fms-wrap .forminator-radio:hover{
    border-color:rgba(252,246,234,.5);background:rgba(252,246,234,.1)}
  .fms-wrap .forminator-checkbox-image,.fms-wrap .forminator-radio-image{display:block;width:100%}
  .fms-wrap .forminator-checkbox-image img,.fms-wrap .forminator-radio-image img{
    width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
  .fms-wrap .forminator-checkbox-label,.fms-wrap .forminator-radio-label{
    display:block;padding:var(--s-4) var(--s-5);color:var(--cream)!important;
    font-size:var(--t-small);line-height:var(--lh-snug);font-family:var(--ff-body)}
  .fms-wrap .forminator-checkbox input:checked ~ *,
  .fms-wrap .forminator-radio input:checked ~ *{color:var(--cream)}
  .fms-wrap label:has(input:checked){border-color:var(--action);
    background:rgba(212,160,23,.14);box-shadow:inset 0 0 0 1px var(--action)}

  /* text, number, select, textarea */
  .fms-wrap input[type=text],.fms-wrap input[type=email],.fms-wrap input[type=tel],
  .fms-wrap input[type=number],.fms-wrap select,.fms-wrap textarea{
    background:rgba(252,246,234,.07)!important;border:1px solid rgba(252,246,234,.28)!important;
    color:var(--cream)!important;border-radius:var(--r-sm)!important;min-height:52px!important;
    padding:var(--s-3) var(--s-5)!important;font:var(--w-reg) var(--t-body)/var(--lh-snug) var(--ff-body)!important;
    max-width:34rem}
  .fms-wrap textarea{min-height:var(--s-9)!important;max-width:44rem}
  .fms-wrap input::placeholder,.fms-wrap textarea::placeholder{color:rgba(252,246,234,.45)!important}
  .fms-wrap input:focus,.fms-wrap select:focus,.fms-wrap textarea:focus{
    outline:2px solid var(--action)!important;outline-offset:2px;border-color:transparent!important}
  .fms-wrap select option{background:var(--forest);color:var(--cream)}

  /* the meter, rebuilt from Forminator's pagination nav */
  .fms-wrap .forminator-pagination-steps,.fms-wrap .forminator-pagination-nav{
    margin-bottom:var(--s-8)!important;border:0!important;background:transparent!important}
  .fms-wrap .forminator-step-label{font:var(--w-bold) var(--t-label)/var(--lh-h) var(--ff-body)!important;
    letter-spacing:var(--ls-label)!important;text-transform:uppercase!important;
    color:rgba(252,246,234,.5)!important}
  .fms-wrap .forminator-step.forminator-step-active .forminator-step-label{color:var(--gold-type)!important}
  .fms-wrap .forminator-progress-bar,.fms-wrap .forminator-step-line{
    background:rgba(252,246,234,.2)!important;height:var(--s-1)!important;border-radius:var(--r-pill)}
  .fms-wrap .forminator-progress-bar span,.fms-wrap .forminator-step.forminator-step-complete .forminator-step-line{
    background:var(--action)!important}
  .fms-wrap .forminator-step-dot,.fms-wrap .forminator-step .forminator-step-dot{
    background:rgba(252,246,234,.35)!important;border-color:transparent!important}
  .fms-wrap .forminator-step-active .forminator-step-dot,
  .fms-wrap .forminator-step-complete .forminator-step-dot{background:var(--action)!important}

  /* one filled action per screen, and it is ours */
  .fms-wrap .forminator-step,.fms-wrap .forminator-step button{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important}
  .fms-wrap .forminator-button-submit,.fms-wrap .forminator-button-next,.fms-wrap .forminator-button-back,.fms-wrap button[type=submit]{
    background:var(--action)!important;color:var(--on-action)!important;
    border:1px solid var(--action-edge)!important;border-radius:var(--r-sm)!important;
    min-height:50px!important;padding:0 var(--s-7)!important;
    font:var(--w-bold) var(--t-small)/1 var(--ff-body)!important;letter-spacing:0!important;
    text-transform:none!important;box-shadow:none!important;cursor:pointer}
  .fms-wrap .forminator-button-submit:hover,.fms-wrap .forminator-button-next:hover{background:var(--action-hover)!important}
  .fms-wrap .forminator-button-back{background:transparent!important;color:rgba(252,246,234,.75)!important;
    border:1px solid rgba(252,246,234,.3)!important}
  .fms-wrap .forminator-button-back:hover{color:var(--cream)!important;
    border-color:rgba(252,246,234,.6)!important;background:transparent!important}
  .fms-wrap .forminator-pagination-footer{margin-top:var(--y-block)!important;
    border-top:1px solid rgba(252,246,234,.16)!important;padding-top:var(--s-6)!important}

  /* errors and the thank-you */
  .fms-wrap .forminator-error-message{color:#FFD9A8!important;font-size:var(--t-small)!important}
  .fms-wrap .forminator-response-message{background:rgba(252,246,234,.08)!important;
    border:1px solid rgba(252,246,234,.25)!important;border-radius:var(--r)!important;
    padding:var(--s-7)!important;color:var(--cream)!important}
  .fms-wrap .forminator-response-message h3{font-family:var(--ff-display);font-weight:var(--w-reg);
    font-size:var(--t-h3);color:var(--cream)}

  @media(max-width:700px){
    .fms-wrap .forminator-checkbox-list,.fms-wrap .forminator-radio-list,
    .fms-wrap .forminator-ui .forminator-field-checkbox,
    .fms-wrap .forminator-ui .forminator-field-radio{grid-template-columns:1fr 1fr!important;
      gap:var(--s-4)!important}
    .fms-wrap .forminator-label,.fms-wrap .forminator-ui .forminator-label{
      font-size:var(--t-h3)!important;max-width:100%}
  }

  .fms-wrap,.fms-wrap.band,.fms-wrap.cream{background:var(--forest)!important}

  /* Forminator paints its own accent on the first progress segment. Ours is gold. */
  .fms-wrap .forminator-pagination-steps .forminator-step:first-child .forminator-step-line,
  .fms-wrap [class*=forminator-progress]{background:rgba(252,246,234,.2)!important}
  .fms-wrap .forminator-step-complete .forminator-step-line,
  .fms-wrap .forminator-step-active ~ * .forminator-step-line{background:var(--action)!important}
  .fms-wrap .forminator-pagination-steps *[style*=background]{background:var(--action)!important}

  /* The real Forminator step markup. A dot meter, no Page N labels: the question on screen
     already says where you are, and a numbered label is decorative counting. */
  .fms-wrap .forminator-step-label{display:none!important}
  .fms-wrap .forminator-pagination-steps{display:flex!important;gap:var(--s-3);align-items:center;background:transparent!important;border:0!important;margin-bottom:var(--s-8)!important;padding:0!important}
  .fms-wrap .forminator-step{flex:1 1 0;background:transparent!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important}
  .fms-wrap .forminator-step::before,.fms-wrap .forminator-step::after{background:transparent!important;border:0!important;content:none!important}
  .fms-wrap .forminator-step-dot{display:block!important;width:100%!important;height:var(--s-1)!important;border-radius:var(--r-pill)!important;background:rgba(252,246,234,.22)!important;border:0!important;box-shadow:none!important;margin:0!important;transition:background .3s}
  .fms-wrap .forminator-step.forminator-current .forminator-step-dot{background:var(--action)!important}

  /* Forminator emits the tile as a span with a background image, not an img. */
  .fms-wrap .forminator-option.forminator-has_image{display:block!important;padding:0!important;border-radius:var(--r);overflow:hidden;border:1px solid rgba(252,246,234,.18);background:rgba(252,246,234,.06);cursor:pointer;transition:border-color .2s,background .2s}
  .fms-wrap .forminator-option.forminator-has_image:hover{border-color:rgba(252,246,234,.5)}
  .fms-wrap .forminator-checkbox-image,.fms-wrap .forminator-radio-image{display:block!important;width:100%!important;aspect-ratio:4/3;background-size:cover!important;background-position:center!important;border-radius:0!important}
  .fms-wrap .forminator-checkbox-image img,.fms-wrap .forminator-radio-image img{width:100%;height:100%;object-fit:cover;display:block}
  .fms-wrap .forminator-multiselect,.fms-wrap .forminator-field-checkbox .forminator-multiselect{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-5)!important}
  .fms-wrap .forminator-option.forminator-has_image{color:var(--cream)!important;font-size:var(--t-small);line-height:var(--lh-snug)}
  .fms-wrap .forminator-option.forminator-has_image input{position:absolute;opacity:0;pointer-events:none}
  .fms-wrap .forminator-option.forminator-has_image:has(input:checked){border-color:var(--action);box-shadow:inset 0 0 0 2px var(--action)}
  @media(max-width:700px){.fms-wrap .forminator-multiselect{grid-template-columns:1fr 1fr!important;gap:var(--s-4)!important}}

  /* The real Forminator choice markup, read off the live DOM rather than guessed:
     .forminator-field-checkbox > .forminator-field > label.forminator-checkbox.forminator-has_image */
  .fms-wrap .forminator-field-checkbox > .forminator-field,
  .fms-wrap .forminator-field-radio > .forminator-field{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:var(--s-5)!important;background:transparent!important;padding:0!important;border:0!important}
  .fms-wrap label.forminator-checkbox,.fms-wrap label.forminator-radio{display:block!important;width:auto!important;margin:0!important;padding:0!important;border:1px solid rgba(252,246,234,.18)!important;border-radius:var(--r)!important;overflow:hidden!important;background:rgba(252,246,234,.06)!important;cursor:pointer;transition:border-color .2s,background .2s}
  .fms-wrap label.forminator-checkbox:hover,.fms-wrap label.forminator-radio:hover{border-color:rgba(252,246,234,.55)!important;background:rgba(252,246,234,.11)!important}
  .fms-wrap label.forminator-checkbox > input,.fms-wrap label.forminator-radio > input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none}
  .fms-wrap .forminator-checkbox-image,.fms-wrap .forminator-radio-image{display:block!important;width:100%!important;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
  .fms-wrap .forminator-checkbox-image img,.fms-wrap .forminator-radio-image img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;max-width:none!important}
  .fms-wrap .forminator-checkbox-box,.fms-wrap .forminator-radio-box{display:none!important}
  .fms-wrap label.forminator-checkbox:has(input:checked),.fms-wrap label.forminator-radio:has(input:checked){border-color:var(--action)!important;box-shadow:inset 0 0 0 2px var(--action)!important;background:rgba(212,160,23,.14)!important}
  @media(max-width:700px){.fms-wrap .forminator-field-checkbox > .forminator-field,.fms-wrap .forminator-field-radio > .forminator-field{grid-template-columns:1fr 1fr!important;gap:var(--s-4)!important}}

  /* Read off the live DOM: the photograph sits on an unclassed inner span carrying an inline
     background-image, and the caption is emitted screen-reader-only. Size the inner span, and
     bring the caption back as visible text. */
  .fms-wrap .forminator-checkbox-image > span,
  .fms-wrap .forminator-radio-image > span{display:block!important;width:100%!important;height:100%!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
  .fms-wrap label.forminator-checkbox .forminator-screen-reader-only,
  .fms-wrap label.forminator-radio .forminator-screen-reader-only{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;display:block!important;padding:var(--s-4) var(--s-5)!important;color:var(--cream)!important;font:var(--w-reg) var(--t-small)/var(--lh-snug) var(--ff-body)!important;margin:0!important}
  .fms-wrap label.forminator-checkbox,.fms-wrap label.forminator-radio{display:flex!important;flex-direction:column}
  .fms-wrap .forminator-checkbox-image,.fms-wrap .forminator-radio-image{flex:0 0 auto}

  /* The header sits over the form, so the question must start below it. */
  .fms-wrap{padding-top:calc(var(--s-9) + var(--s-8))!important}
  .fms-wrap .forminator-required{display:none!important}
  .fms-wrap .forminator-description{margin-top:calc(-1 * var(--s-3))!important}