/* ==========================================================================
   KLEANA - The Verified Domestic Corridor
   Cabanga Platforms. Identity: "Clinical Trust".
   This file is hand-tuned and is NOT rewritten by the generator.
   ========================================================================== */

:root{
  --navy:#0D2740;
  --navy-deep:#071A2C;
  --navy-mid:#1B4066;
  --mint:#29D3A2;
  --mint-soft:#E2F7EF;
  --mint-line:#9BE4CC;
  --mint-ink:#08624B;
  --white:#FFFFFF;
  --paper:#F1F6F8;
  --paper-2:#E7EFF4;
  --slate:#55677A;
  --slate-deep:#3B4A5A;
  --line:#D9E4EB;
  --warn:#8A4B12;
  --warn-soft:#FBF0E4;

  --r:8px;
  --r-sm:4px;
  --r-lg:14px;

  --shadow:0 1px 2px rgba(7,26,44,.06), 0 8px 24px rgba(7,26,44,.06);
  --shadow-lift:0 2px 4px rgba(7,26,44,.08), 0 18px 44px rgba(7,26,44,.12);

  --wrap:1140px;
  --gut:24px;

  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue Condensed",
            "Liberation Sans Narrow",system-ui,sans-serif;
  --body:"Barlow","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}

/* Self-hosting: drop the six Barlow woff2 files into assets/fonts/ and
   uncomment this block, then remove the Google Fonts <link> from head.tpl.
*/

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--navy-deep);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--mint-ink);text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--mint-ink);outline-offset:2px;border-radius:var(--r-sm)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.06;
  letter-spacing:-.005em;margin:0 0 .5em;color:var(--navy-deep)}
h1{font-size:clamp(2.6rem,6.2vw,4.5rem);font-weight:800;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,3.7vw,2.9rem)}
h3{font-size:clamp(1.35rem,2.1vw,1.6rem)}
h4{font-size:1.1rem;font-family:var(--body);font-weight:600;line-height:1.35}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.45em}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- eyebrow ---------- */
.eyebrow{font-family:var(--display);text-transform:uppercase;font-weight:700;
  letter-spacing:.16em;font-size:.82rem;color:var(--mint-ink);margin:0 0 .6rem;
  display:flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--mint);flex:none}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand-mark{width:46px;height:52px;flex:none}
.brand-lock{display:flex;flex-direction:column;align-items:flex-start}
.brand-word{font-family:var(--display);font-weight:800;font-size:2.2rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy-deep);line-height:.98}
/* v1.11.1: the three words read as one sentence under the wordmark. They used
   to be justified to the full width of the mark, which opened gaps wide enough
   to read as three separate labels. Normal word spacing, left aligned. */
.brand-sub{display:flex;justify-content:flex-start;gap:.36em;font-family:var(--body);
  font-size:.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--slate);margin-top:3px;white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;font-size:.92rem;color:var(--navy-deep);text-decoration:none;
  padding:8px 9px;border-radius:var(--r-sm);white-space:nowrap}
.nav a:hover{background:var(--paper);color:var(--navy)}
.nav a[aria-current="page"]{color:var(--mint-ink);box-shadow:inset 0 -2px 0 var(--mint)}
.nav-cta{background:var(--navy)!important;color:#fff!important;border-radius:var(--r)!important;
  padding:9px 13px!important;margin-left:4px}
.nav-cta:hover{background:var(--navy-mid)!important}
/* language switch - always reachable, never inside the collapsed menu */
.langsw{display:inline-flex;border:2px solid var(--navy);border-radius:var(--r);
  overflow:hidden;margin-left:auto;flex:0 0 auto;order:3}
.langsw button{font-family:var(--display);font-weight:700;letter-spacing:.06em;
  font-size:.82rem;padding:7px 12px;border:0;background:#fff;color:var(--navy);
  cursor:pointer;line-height:1}
.langsw button+button{border-left:2px solid var(--navy)}
.langsw button[aria-pressed="true"]{background:var(--navy);color:#fff}
.langsw button:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}
.langsw[hidden]{display:none}
@media (max-width:960px){
  .langsw{margin-left:auto;order:2;flex-shrink:0}
  .navtoggle{margin-left:8px!important;order:3;flex-shrink:0}
  .brand{min-width:0}
}
@media (max-width:560px){
  .langsw button{padding:6px 8px;font-size:.72rem}
  .navtoggle{padding:8px 10px;font-size:.8rem}
  .topbar .brand-word{font-size:1.42rem}
  .topbar .brand-mark{width:34px;height:38px}
  .topbar-in{gap:8px}
}
@media (min-width:961px){
  .nav a{font-size:.78rem;padding:7px 5px;letter-spacing:.02em}
  .nav-cta{padding:8px 10px!important;margin-left:2px!important}
  .topbar-in{gap:9px}
  .langsw button{padding:6px 8px;font-size:.74rem}
  .brand-word{font-size:1.6rem}
  .brand-sub{font-size:.6rem}
  .nav{gap:2px 4px;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
  .nav a{white-space:nowrap}
}
.navtoggle{margin-left:10px!important}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 12px;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--navy-deep);cursor:pointer}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;font-size:1rem;padding:13px 24px;border-radius:var(--r);
  border:2px solid transparent;cursor:pointer;text-decoration:none;line-height:1.1;
  transition:background .16s ease,color .16s ease,transform .16s ease}
.btn:hover{transform:translateY(-1px)}
/* v1.8.2 - FOUR RANKS, WITH REAL SEPARATION BETWEEN THEM.
   Rank 1 btn-mint      the one thing this page wants: mint, larger, lifted
   Rank 2 btn-primary   a strong alternative: navy solid, standard size, flat
   Rank 3 btn-ghost     supporting: outline only, no fill until hover
   Rank 4 btn-quiet     lowest: no box at all, an underlined display word
   Two solid buttons at identical size and weight read as one rank, which is
   what this replaces. */
.btn-mint{background:var(--mint);color:var(--navy-deep);padding:16px 30px;
  font-size:1.06rem;letter-spacing:.11em;
  box-shadow:0 10px 22px rgba(10,107,82,.22)}
.btn-mint:hover{background:var(--mint-line);color:var(--navy-deep);
  box-shadow:0 14px 26px rgba(10,107,82,.28)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--navy-mid);color:#fff}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent;
  font-size:.96rem;box-shadow:none}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-quiet{background:transparent;border-color:transparent;color:var(--mint-ink);
  padding:11px 4px;font-size:.92rem;letter-spacing:.08em;
  text-decoration:underline;text-underline-offset:5px;min-height:44px}
.btn-quiet:hover{color:var(--navy);background:transparent}
.sec-navy .btn-quiet,.tray .btn-quiet{color:var(--mint)}
.sec-navy .btn-quiet:hover,.tray .btn-quiet:hover{color:#fff}
.btn-sm{padding:9px 15px;font-size:.9rem;letter-spacing:.09em;box-shadow:none}
.btn-mint.btn-sm{padding:10px 18px;font-size:.92rem;
  box-shadow:0 8px 16px rgba(10,107,82,.2)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}

/* ---------- sections ---------- */
.sec{padding:76px 0}
.sec-tight{padding:52px 0}
.sec-paper{background:var(--paper)}
.sec-navy{background:var(--navy);color:#EAF1F6}
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff}
.sec-navy .eyebrow{color:var(--mint)}
.sec-navy a:not(.btn){color:var(--mint)}
.lede{font-size:1.2rem;color:var(--slate-deep);max-width:62ch}
.sec-navy .lede{color:#C6D6E2}
.sec-head{max-width:70ch;margin-bottom:2.4rem}

/* LIGHT-SURFACE RESET - any light card dropped inside a dark section must
   reassert its own text colours, or it inherits bone-on-bone. */
.sec-navy .card,.sec-navy .panel,.sec-navy .tier,.sec-navy .stamp,
.sec-navy .listing,.sec-navy .note,.sec-navy .door{color:var(--navy-deep)}
.sec-navy .card h3,.sec-navy .panel h3,.sec-navy .tier h3,.sec-navy .door h3,
.sec-navy .card h4,.sec-navy .panel h4,.sec-navy .tier h4,.sec-navy .door h4{color:var(--navy-deep)}
.sec-navy .card p,.sec-navy .panel p,.sec-navy .tier p,.sec-navy .door p{color:var(--slate-deep)}
.sec-navy .card a:not(.btn),.sec-navy .panel a:not(.btn){color:var(--mint-ink)}
.sec-navy .card .eyebrow,.sec-navy .panel .eyebrow,.sec-navy .tier .eyebrow,
.sec-navy .door .eyebrow{color:var(--mint-ink)}
.sec-navy .door .door-go{color:var(--mint-ink)}

/* The hero is a dark section that does not carry .sec-navy. Same rule applies. */
.hero .eyebrow{color:var(--mint)}
.hero .door .eyebrow,.hero .stamp .stamp-lab{color:var(--mint-ink)}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#EAF1F6;position:relative;overflow:hidden;
  padding:84px 0 0}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(120% 80% at 82% 6%,#000 0%,transparent 68%)}
.hero-in{position:relative;z-index:2}
.hero h1{color:#fff;max-width:16ch}
/* v1.8.4 - the home hero title sits on ONE line. The measure cap comes off,
   the text column takes a little more of the row, and the size is set so the
   English line fits from tablet up. Setswana and Shona are longer, so they
   are left free to wrap rather than forced and clipped. */
.hero h1 em{font-style:normal;color:var(--mint)}
.hero-lede{font-size:1.22rem;color:#C6D6E2;max-width:56ch;margin-top:1.2rem}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.hero-art-wrap{display:block}
.hero-art{width:100%;height:auto;display:block;
  filter:drop-shadow(0 24px 44px rgba(4,20,34,.4))}
/* inner-page hero: the home page treatment on every page, at a slightly
   smaller pitch so the page below it still leads */
.hero-page{padding:52px 0 60px}
.hero-page h1{font-size:clamp(1.95rem,4vw,2.95rem);max-width:19ch}
.hero-page .hero-lede{font-size:1.1rem;max-width:52ch}
.hero-page .hero-grid{grid-template-columns:1.08fr .92fr;gap:44px}
.hero-page .hero-art{max-width:432px;margin-left:auto}
.hero-page .eyebrow a{color:var(--mint);text-decoration:none;border-bottom:1px solid rgba(41,211,162,.5)}
.hero-page .eyebrow a:hover{border-bottom-color:var(--mint)}
.hero-foot{margin-top:64px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hero-foot div{padding:22px 26px 30px;border-right:1px solid rgba(255,255,255,.16)}
.hero-foot div:first-child{padding-left:0}
.hero-foot div:last-child{border-right:0}
.hero-foot dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
  font-size:.76rem;font-weight:700;color:var(--mint);margin-bottom:6px}
.hero-foot dd{margin:0;font-size:.98rem;color:#C6D6E2;line-height:1.45}

/* ---------- the floor stamp (P120) ---------- */
.stamp{background:#fff;border-radius:var(--r-lg);padding:26px 26px 22px;
  box-shadow:var(--shadow-lift);border-top:6px solid var(--mint)}
/* .stamp-num and .stamp-lab must out-specify the generic .stamp p rule below,
   or the headline figure silently drops to body size. */
.stamp .stamp-num{font-family:var(--display);font-weight:800;font-size:4.4rem;
  line-height:.92;color:var(--navy-deep);letter-spacing:-.02em;margin:0}
.stamp .stamp-num span{font-size:1.7rem;vertical-align:top;letter-spacing:0;
  position:relative;top:.35rem}
.stamp .stamp-lab{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;font-weight:700;color:var(--mint-ink);margin:0 0 10px}
.stamp p{font-size:.95rem;color:var(--slate-deep);margin:14px 0 0}

/* ---------- two doors ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.door{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px 26px;text-decoration:none;color:inherit;position:relative;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.door:hover{border-color:var(--mint);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.door h3{margin-bottom:.35em}
.door p{color:var(--slate-deep);font-size:1rem;margin-bottom:1rem}
.door-go{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--mint-ink);font-size:.95rem}
.door-go::after{content:" \2192"}

/* ---------- charter stamp ---------- */
.charter-stamp{border:2px solid var(--navy);border-radius:var(--r-lg);background:#fff;
  padding:34px;position:relative}
.charter-stamp::before{content:"Both sides sign";position:absolute;top:-13px;left:26px;
  background:var(--mint);color:var(--navy-deep);font-family:var(--display);
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.78rem;
  padding:4px 12px;border-radius:var(--r-sm)}
.charter-clause{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line)}
.charter-clause:last-child{border-bottom:0;padding-bottom:0}
.charter-clause .n{font-family:var(--display);font-weight:800;font-size:1.1rem;
  color:var(--mint-ink);min-width:2ch}
.charter-clause p{margin:0;font-size:1rem;color:var(--slate-deep)}
.charter-clause strong{color:var(--navy-deep)}

/* ---------- shield ---------- */
.shield{width:26px;height:30px;flex:none}
.shield-lg{width:64px;height:74px}

/* ---------- chips / marks ---------- */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.76rem;
  padding:5px 10px;border-radius:var(--r-sm);border:1px solid;white-space:nowrap}
.chip-verified{background:var(--mint-soft);color:var(--mint-ink);border-color:var(--mint-line)}
.chip-declared{background:var(--paper-2);color:var(--slate-deep);border-color:var(--line)}
.chip-unconfirmed{background:var(--warn-soft);color:var(--warn);border-color:#EBD5B8}
.chip-type{background:#fff;color:var(--navy);border-color:var(--navy)}
.chip-status{background:var(--navy);color:#fff;border-color:var(--navy)}
.chiprow{display:flex;flex-wrap:wrap;gap:7px}

/* ---------- segmented control ---------- */
.seg{display:inline-flex;background:var(--paper-2);border-radius:var(--r);padding:4px;gap:4px}
.seg button{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:.92rem;padding:10px 20px;border:0;background:transparent;
  color:var(--slate-deep);border-radius:var(--r-sm);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.seg button:hover:not([aria-pressed="true"]){color:var(--navy-deep)}

/* ---------- filters ---------- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;margin:22px 0 26px}
.field label,.filters label{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;font-size:.76rem;color:var(--slate-deep);margin-bottom:6px}
select,input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--navy-deep);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;line-height:1.4}
select:focus,input:focus,textarea:focus{border-color:var(--mint-ink);outline:none;
  box-shadow:0 0 0 3px rgba(41,211,162,.25)}
textarea{min-height:120px;resize:vertical}

/* ---------- listings ---------- */
.board-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-bottom:18px;font-size:.95rem;color:var(--slate-deep)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px}
/* min() keeps the 300px track from forcing a card wider than a 320px screen */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;display:flex;flex-direction:column;gap:12px;position:relative;
  transition:border-color .16s ease,box-shadow .16s ease}
.card:hover{border-color:var(--mint-line);box-shadow:var(--shadow)}
.card-verified{border-left:5px solid var(--mint)}
.card-top{display:flex;align-items:flex-start;gap:12px}
.card-ref{font-family:var(--display);font-weight:800;font-size:1.3rem;
  letter-spacing:.02em;color:var(--navy-deep);line-height:1.15}
.card-ref small{display:block;font-family:var(--body);font-weight:500;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-top:3px}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:.94rem}
.card dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:.74rem;color:var(--slate);padding-top:3px}
.card dd{margin:0;color:var(--navy-deep)}
.card-note{font-size:.94rem;color:var(--slate-deep);margin:0}
.card-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:6px}
.rate{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--navy-deep);
  line-height:1}
.rate span{font-size:.82rem;font-family:var(--body);font-weight:500;color:var(--slate);
  letter-spacing:.02em}
.empty{background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-lg);
  padding:40px 28px;text-align:center;color:var(--slate-deep)}
.empty h3{color:var(--navy-deep)}

/* ---------- profile ---------- */
.profile-head{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.profile-ref{font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,4.4vw,2.9rem);line-height:1;color:var(--navy-deep)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.panel-paper{background:var(--paper);border-color:var(--paper-2)}
.speclist{display:grid;grid-template-columns:1fr;gap:0;margin:0}
.speclist div{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.speclist div:last-child{border-bottom:0}
.speclist dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:.8rem;color:var(--slate)}
.speclist dd{margin:0;color:var(--navy-deep)}
.withheld{color:var(--slate);font-style:italic}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.tier-2{border:2px solid var(--mint);position:relative}
.tier h3{margin-bottom:.3em}
.tier .price{font-family:var(--display);font-weight:800;font-size:2.2rem;
  color:var(--navy-deep);line-height:1;margin:.3em 0 .1em}
.tier ul{list-style:none;padding:0;margin:1rem 0 0}
.tier li{padding-left:26px;position:relative;font-size:.97rem;color:var(--slate-deep)}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;
  background:var(--mint)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--display);
  font-weight:800;font-size:1.5rem;color:var(--mint-ink);line-height:1.1}
.step h3{font-size:1.2rem;margin-bottom:.25em}
.step p{margin:0;color:var(--slate-deep)}
.sec-navy .step{border-bottom-color:rgba(255,255,255,.16)}
.sec-navy .step::before{color:var(--mint)}
.sec-navy .step p{color:#C6D6E2}

/* ---------- shortlist bar ---------- */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy-deep);
  color:#fff;transform:translateY(110%);transition:transform .22s ease;
  box-shadow:0 -8px 30px rgba(7,26,44,.28)}
.tray.on{transform:translateY(0)}
.tray-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0}
.tray-count{font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff}
.tray-count b{color:var(--mint)}
.tray p{margin:0;font-size:.92rem;color:#B9CBD9}
.tray .btnrow{margin:0 0 0 auto}

/* ---------- forms ---------- */
.form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field-help{font-size:.88rem;color:var(--slate);margin:6px 0 0}
.checkline{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.checkline input{margin-top:5px;width:20px;height:20px;flex:none;accent-color:var(--mint-ink)}
.checkline label{font-family:var(--body);text-transform:none;letter-spacing:0;
  font-size:.98rem;font-weight:500;color:var(--navy-deep);margin:0}
.checkline.blocked{border-color:#E0BE95;background:var(--warn-soft)}
.tickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.tick{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:var(--r);padding:11px 14px;background:#fff;cursor:pointer}
.tick input{width:18px;height:18px;accent-color:var(--mint-ink)}
.tick span{font-size:.96rem}
.tick:has(input:checked){border-color:var(--mint);background:var(--mint-soft)}
fieldset{border:0;padding:0;margin:0}
legend{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:.78rem;color:var(--slate-deep);padding:0;margin-bottom:8px}

/* ---------- verification gate ---------- */
.gate{background:var(--navy);color:#EAF1F6;border-radius:var(--r-lg);padding:30px;
  margin-top:22px}
.gate[hidden]{display:none}
.gate h3{color:#fff}
.gate p{color:#C6D6E2}
.gate .field label{color:var(--mint)}
.gate-code{max-width:230px;font-size:1.5rem;letter-spacing:.35em;text-align:center;
  font-family:var(--display);font-weight:700}

/* ---------- notices ---------- */
.notice{border-left:4px solid var(--mint);background:var(--mint-soft);
  border-radius:var(--r);padding:16px 20px;color:var(--navy-deep);font-size:.97rem}
.notice-warn{border-left-color:#C98A3E;background:var(--warn-soft);color:var(--warn)}
.samplebar{background:var(--warn-soft);border-bottom:1px solid #EBD5B8;color:var(--warn);
  font-size:.88rem;padding:8px 0;text-align:center;font-weight:500}
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:120;
  display:grid;gap:8px;width:min(440px,calc(100% - 32px))}
.toast{background:var(--navy-deep);color:#fff;border-radius:var(--r);padding:13px 18px;
  font-size:.95rem;box-shadow:var(--shadow-lift);border-left:4px solid var(--mint)}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep);color:#AFC3D2;padding:60px 0 30px;font-size:.95rem}
.foot h3,.foot h4{color:#fff;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.85rem;margin-bottom:.9em}
.foot a{color:#D5E3ED;text-decoration:none}
.foot a:hover{color:var(--mint);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.foot-by{font-family:var(--display);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.5em}
.foot-base{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.88rem;
  color:#8FA7BA}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-brand .brand-word{color:#fff}

/* ---------- install button ---------- */
.install{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  font-size:.85rem;padding:8px 14px;border-radius:var(--r);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;gap:.6rem}
.install:hover{border-color:var(--mint);color:var(--mint)}
.install[hidden]{display:none}
.install svg{width:19px;height:19px;flex:none}

/* the hero copy of it - one on every page, sitting under the hero buttons */
.hero-install{margin:22px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-install .install{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.hero-install .install:hover{background:rgba(41,211,162,.14)}
.hero-install .hero-install-note{margin:0;font-size:.86rem;color:#B9CBD9;max-width:34ch}

/* ---------- picks (what the tray handed to the form) ---------- */
.picks{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.pick{display:flex;align-items:center;gap:14px;background:var(--paper-2);
  border:1px solid var(--line);border-left:5px solid var(--mint);
  border-radius:var(--r);padding:12px 14px}
.pick>div{display:grid;gap:2px;min-width:0}
.pick-head{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--navy);
  text-transform:uppercase;letter-spacing:.03em}
.pick-sub{font-size:.9rem;color:var(--slate-deep)}
.pick-ref{font-size:.78rem;color:var(--slate);letter-spacing:.06em}
.pick-x{margin-left:auto;flex:none;min-height:44px;padding:0 14px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;font-size:.78rem;color:var(--slate-deep)}
.pick-x:hover{border-color:var(--warn);color:var(--warn)}
.picks-empty{background:var(--paper-2);border:1px dashed var(--line);
  border-radius:var(--r);padding:18px}
.picks-empty p{margin:0 0 12px;color:var(--slate-deep)}
.picks-empty p:last-child{margin:0}

/* ---------- prose ---------- */
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.8em;font-size:1.25rem}
.prose ol li,.prose ul li{color:var(--slate-deep)}
.prose .updated{font-size:.9rem;color:var(--slate);margin-bottom:2rem}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .navtoggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(13,39,64,.14);padding:10px var(--gut) 16px;max-height:calc(100vh - 58px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:79}
  .nav.on{display:flex}
  .topbar-in{flex-wrap:nowrap}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-page .hero-grid{grid-template-columns:1fr}
  .hero-page .hero-art{margin:0 auto}
  .hero-art{max-width:440px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .brand-word{font-size:2rem}
  .brand-sub{font-size:.56rem}
  .speclist div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:760px){
  body{font-size:16px}
  .sec{padding:54px 0}
  .navtoggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(13,39,64,.14);padding:10px var(--gut) 16px;max-height:calc(100vh - 58px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:79}
  .nav.on{display:flex}
  .topbar-in{flex-wrap:nowrap;min-height:60px}
  .doors{grid-template-columns:1fr}
  .hero{padding-top:56px}
  .hero-foot{grid-template-columns:1fr}
  .hero-foot div{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding-left:0}
  .hero-foot div:last-child{border-bottom:0}
  .form-row{grid-template-columns:1fr}
  .profile-head{grid-template-columns:1fr}
  .tray-in{gap:10px}
  .tray .btnrow{margin-left:0;width:100%}
  .tray .btn{width:100%}
  .foot-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .btn:hover,.door:hover{transform:none}
}

@media print{
  .topbar,.tray,.toasts,.foot,.install{display:none!important}
  body{font-size:12pt}
}

@media (max-width:560px){
  .brand-mark{width:38px;height:43px}
  .brand-word{font-size:1.72rem}
  .brand-sub{font-size:.5rem;margin-top:3px}
}


/* ===================================================================
   v1.3.0 - GALLIS pass. Breadcrumbs, data tables, step lists,
   motion layer, tap-target floor, 400px header fit.
   =================================================================== */

/* --- breadcrumbs ------------------------------------------------- */
.crumbs{background:var(--white);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;margin:0;padding:.7rem 0;display:flex;flex-wrap:wrap;
  gap:.15rem .55rem;align-items:center;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:700}
.crumbs li{display:flex;align-items:center;gap:.55rem;color:var(--slate)}
.crumbs li+li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--mint-line);flex:none}
.crumbs a{color:var(--slate-deep);text-decoration:none;min-height:24px;
  display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--mint-ink)}
.crumbs [aria-current="page"]{color:var(--navy)}

/* --- data table -------------------------------------------------- */
.ktable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--white);box-shadow:var(--shadow)}
.ktable{width:100%;border-collapse:collapse;font-size:.97rem;min-width:520px}
.ktable caption{caption-side:top;text-align:left;padding:1rem 1.1rem .2rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;font-size:.85rem;color:var(--slate)}
.ktable th,.ktable td{padding:.82rem 1.1rem;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.ktable thead th{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.07em;font-size:.86rem;font-weight:700;color:var(--white);
  background:var(--navy);border-bottom:none}
.ktable tbody th{font-weight:600;color:var(--navy);width:34%}
.ktable tbody tr:last-child th,.ktable tbody tr:last-child td{border-bottom:none}
.ktable tbody tr:nth-child(even){background:var(--paper)}
.sec-navy .ktable-wrap{border-color:rgba(255,255,255,.16)}

/* --- numbered step list ------------------------------------------ */
.olist{counter-reset:kl;list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;gap:1.05rem}
.olist>li{counter-increment:kl;position:relative;padding-left:3.4rem;
  min-height:2.4rem}
.olist>li::before{content:counter(kl,decimal-leading-zero);position:absolute;
  left:0;top:-.12em;width:2.4rem;height:2.4rem;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.05rem;
  background:var(--mint-soft);color:var(--mint-ink)}
.olist>li>strong{display:block;font-family:var(--display);font-weight:700;
  font-size:1.22rem;line-height:1.15;color:var(--navy);margin-bottom:.2rem}
.sec-navy .olist>li{color:rgba(255,255,255,.86)}
.sec-navy .olist>li>strong{color:var(--white)}
.sec-navy .olist>li::before{background:rgba(41,211,162,.18);color:var(--mint)}

/* --- legal document structure ------------------------------------ */
.updated{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;font-weight:700;color:var(--slate);
  margin:0 0 1.4rem}
.updated time{color:var(--mint-ink)}
.hero .updated,.hero-page .updated{color:rgba(255,255,255,.78);margin:.9rem 0 0}
.hero .updated time,.hero-page .updated time{color:var(--mint)}

/* --- tap-target floor -------------------------------------------- */
.foot ul a,.nav a,.crumbs a{min-height:24px;display:inline-flex;align-items:center}
.foot ul li{margin-bottom:.15rem}

/* --- motion ------------------------------------------------------ */
@keyframes kl-rise{from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}}
@keyframes kl-shield{from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:none}}
.doors>*,.tiers>*{animation:kl-rise .5s cubic-bezier(.22,.7,.3,1) both}
.doors>*:nth-child(2),.tiers>*:nth-child(2){animation-delay:.07s}
.doors>*:nth-child(3){animation-delay:.14s}
.chip-verified .shield{animation:kl-shield .42s cubic-bezier(.22,1.1,.36,1) both;
  animation-delay:.18s}
.langsw button{transition:background-color .18s ease,color .18s ease}
.crumbs a{transition:color .16s ease}

/* --- header fit at very small widths (kills the 373px overflow) --- */
@media (max-width:400px){
  .topbar-in{gap:.34rem;padding-left:12px;padding-right:12px}
  .topbar .brand-mark{width:24px;height:28px}
  .topbar .brand-word{font-size:1.28rem}
  .topbar .brand-sub{font-size:.5rem;letter-spacing:0;gap:.3em}
  .langsw button{padding:.2rem .34rem;font-size:.7rem;min-height:24px}
  .navtoggle{padding:.3rem .46rem;font-size:.74rem}
  .crumbs ol{font-size:.72rem}
  .ktable{min-width:400px}
}


/* --- v1.3.0 fixes -------------------------------------------------- */
.langsw button{min-height:24px;display:inline-flex;align-items:center}
.foot ul a{padding:.16rem 0}

/* visually hidden - carries heading structure without changing the design */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}

/* an eyebrow that is only a back-link still has to meet the tap floor */
.eyebrow a{min-height:24px;display:inline-flex;align-items:center}


/* --- answer-first TL;DR ------------------------------------------- */
.sec-tldr{padding-top:2.2rem;padding-bottom:2.2rem}
.tldr{border-left:5px solid var(--mint);background:var(--mint-soft);
  border-radius:var(--r);padding:1.35rem 1.5rem}
.tldr h2{font-size:1.02rem;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.09em;color:var(--mint-ink);margin:0 0 .55rem}
.tldr ul{margin:0;padding-left:1.15rem;display:grid;gap:.42rem}
.tldr li{color:var(--slate-deep)}
@media (max-width:560px){.tldr{padding:1.1rem 1.15rem}}

/* ---------- micro-states: selection, cursor, error page ---------- */
::selection{background:var(--mint);color:var(--navy-deep)}
::-moz-selection{background:var(--mint);color:var(--navy-deep)}
.btn,.seg button,.navtoggle,.pick-x,.install,[data-add-cleaner],[data-add-role]{cursor:pointer}
[aria-disabled="true"],:disabled{cursor:not-allowed}
.ktable-wrap{cursor:grab}

.err-wrap{min-height:62vh;display:flex;align-items:center}
.err-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.err-code{font-family:var(--display);font-weight:800;font-size:clamp(4.4rem,12vw,8rem);
  line-height:.86;color:var(--mint);letter-spacing:-.02em;margin:0 0 .1em}
.err-art{width:100%;height:auto;max-width:460px;margin-left:auto;display:block}
@media (max-width:820px){
  .err-grid{grid-template-columns:1fr;gap:26px}
  .err-art{max-width:340px;margin:0 auto}
}

/* ---------- FAQ block: the visible half of every FAQPage node ---------- */
.faq{margin-top:1.9rem;border-top:1px solid var(--line)}
.faq h3{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--navy);
  margin:0;padding:1.35rem 0 .5rem;line-height:1.2}
.faq p{margin:0 0 1.35rem;padding-bottom:1.35rem;border-bottom:1px solid var(--line);
  color:var(--slate-deep)}
.faq p:last-child{margin-bottom:0}
.sec-navy .faq{border-top-color:rgba(255,255,255,.18)}
.sec-navy .faq h3{color:var(--white)}
.sec-navy .faq p{color:rgba(255,255,255,.86);border-bottom-color:rgba(255,255,255,.18)}

/* ---------- ownership line and the social link in the footer ---------- */
.foot-own{display:block;width:100%;margin-top:6px;font-size:.82rem;color:#8FA6B8}
.foot-social{margin:14px 0 0}
.foot-social a{font-size:.9rem}

.foot-wa{margin:16px 0 4px;display:flex;flex-direction:column;align-items:flex-start}
.foot-wa a{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;font-size:.88rem;color:var(--mint);display:inline-flex;
  align-items:center;gap:.6em;min-height:44px}
/* v1.8.1: two lines now - Botswana and Zimbabwe. The number sits beside the
   country in body type so the mint label stays the thing the eye lands on. */
.foot-wa-num{font-family:var(--body);text-transform:none;letter-spacing:.01em;
  font-weight:500;font-size:.92rem;color:#C7D6E2}

/* ---------- Kleana Africa lockup: the wordmark is now two words ----------
   "Kleana Africa" is roughly twice the width of "Kleana", which pushed the
   header past 360px. The lockup steps down harder at the small widths so the
   mark, the language switch and the menu button still share one row. The
   catchphrase keeps its ~0.26 ratio to the wordmark, which is what makes the
   space-between justification line up. */
@media (max-width:620px){
  .topbar .brand-word{font-size:1.12rem}
  .topbar .brand-sub{font-size:.42rem;gap:.26em}
  .topbar .brand-mark{width:30px;height:34px}
}
@media (max-width:430px){
  .topbar .brand-word{font-size:.98rem;letter-spacing:.04em}
  .topbar .brand-sub{font-size:.38rem;gap:.24em}
  .langsw button{padding:6px 8px;font-size:.72rem}
  .navtoggle{padding:8px 10px}
}
@media (max-width:370px){
  /* The catchphrase is half the lockup and 360px is the commonest phone width,
     so it stays. The wordmark gives up the room instead. It only drops below
     345, where the bar has already wrapped to two rows. */
  .topbar .brand-word{font-size:.88rem}
  .topbar .brand-sub{font-size:.34rem;gap:.22em}
}
@media (max-width:345px){
  .topbar .brand-word{font-size:1.02rem}
  .topbar .brand-sub{font-size:.4rem;gap:.24em}
}

@media (max-width:345px){
  /* 320px handsets: the lockup keeps its size and the controls drop to a
     second row rather than the wordmark shrinking into illegibility. */
  .topbar-in{flex-wrap:wrap;row-gap:8px}
  .topbar-in .brand{flex:1 1 100%}
  .topbar-in .langsw{margin-left:0}
}

/* ---------- link colour on light grounds ----------
   Mint on white is 1.92:1 and fails at every size. mint-ink is the only green
   that carries text on a light ground, and every inline link needs 24px of
   height to satisfy WCAG 2.5.8 as a standalone target. */
.ktable a:not(.btn),.prose a:not(.btn),.faq a:not(.btn),.field-help a:not(.btn),
.picks a:not(.btn),.notice a:not(.btn){
  color:var(--mint-ink);text-decoration:underline;text-underline-offset:.16em;
  display:inline-flex;align-items:center;min-height:24px}
/* mint-ink is for LIGHT grounds only. The footer sits on navy, so its links take
   mint, and a .btn brings its own ground and is never recoloured by these rules. */
.foot-social a{color:var(--mint);display:inline-flex;align-items:center;min-height:24px}
.ktable a:hover,.prose a:hover,.faq a:hover{color:var(--navy)}
.sec-navy .prose a{color:var(--mint)}
/* NOT .ktable: the table keeps its own white card even inside a navy section,
   so mint there would be mint-on-white at 1.92:1. It stays mint-ink.
   .sec-navy a:not(.btn) is (0,2,1) and out-specifies a bare .ktable a, so the
   override has to be written at least as tightly to win. */
.sec-navy .ktable a:not(.btn),.sec-navy .faq a:not(.btn){color:var(--mint-ink)}
.sec-navy .ktable a:not(.btn):hover{color:var(--navy)}
.door p a{color:var(--mint-ink);min-height:24px;display:inline-flex;align-items:center}

/* ---------- the table card keeps its own ground inside a navy section ----------
   Sixth instance of the light-surface-on-dark class on this build. .ktable-wrap
   paints itself white, but the td colour was still inheriting the navy section's
   near-white body text, so cells read white-on-white at 1.05:1. The card resets
   its own text colours rather than trusting what it sits on. */
.sec-navy .ktable td{color:var(--slate-deep)}
.sec-navy .ktable tbody th{color:var(--navy)}
.sec-navy .ktable caption{color:var(--slate)}

/* ---- footer facebook icon (v1.6.0) ---- */
.foot-fb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;color:#D5E3ED;background:rgba(255,255,255,.06);
  transition:color .16s ease,background .16s ease}
.foot-fb:hover{color:var(--navy-deep);background:var(--mint);text-decoration:none}
.foot-fb svg{width:22px;height:22px;display:block}

/* ---- projects scope form (v1.6.0) ---- */
.checkgrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:.35rem}
.checkgrid legend{margin-bottom:.55rem}
@media(min-width:560px){.checkgrid{grid-template-columns:1fr 1fr}}

/* ---- segment control never forces horizontal overflow on the smallest phones (v1.6.0) ---- */
@media (max-width:400px){
  .seg{flex-wrap:wrap}
  .seg button{flex:1 1 auto}
}

/* ---- long-word safety net so no single word (esp. longer Setswana) forces overflow (v1.6.0) ---- */
body{overflow-wrap:break-word}

/* --- v1.7.0: three-language switch (EN | TN | SN) --------------------
   A third button adds roughly 35px to the top bar and pushed 360-414 into
   horizontal scroll. The switch gives up the room, not the wordmark - the
   lockup is the brand and it already gave ground at 370 and below. Appended
   last so it wins over the earlier 400 and 430 blocks, which both match here.
   Buttons stay above the 24px tap floor. */
@media (max-width:470px){
  .langsw button{padding:6px 6px;font-size:.68rem;letter-spacing:.03em;
    min-height:26px}
}
@media (max-width:400px){
  .langsw button{padding:6px 5px;font-size:.66rem;letter-spacing:.02em}
}
@media (max-width:400px){
  /* the last 9px at 375 and 360: the bar's own gutters and gaps, not the
     lockup. Tightened here rather than shrinking the wordmark again. */
  .topbar-in{gap:.24rem;padding-left:9px;padding-right:9px}
  .navtoggle{padding:.3rem .4rem;font-size:.72rem}
}

/* ==========================================================================
   SCENE ROWS - v1.8.0
   A drawn scene sits in its OWN column beside the section heading and lede.
   It never stacks underneath the text on desktop, and it never appears on a
   row that carries listings - those cards keep the full width.
   ========================================================================== */
.scenerow{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;
  align-items:center;margin-bottom:2.6rem}
.scenerow>.sec-head{margin-bottom:0;max-width:none}
.scenerow-flip>.sec-head{order:2}
.scene{margin:0;display:block}
.scene img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.sec-navy .scene img{filter:drop-shadow(0 18px 38px rgba(4,20,34,.42))}
.sec .scene img,.sec-paper .scene img{box-shadow:var(--shadow)}
@media(max-width:900px){
  .scenerow{grid-template-columns:1fr;gap:28px;margin-bottom:2.2rem}
  .scenerow-flip>.sec-head{order:0}
  .scene img{max-width:560px;margin:0 auto}
}
@media(prefers-reduced-motion:no-preference){
  .scene img{animation:kl-rise .6s cubic-bezier(.22,.7,.3,1) both}
}


/* ==========================================================================
   SCENE ROWS ON NARROW-BODY SECTIONS - v1.8.2
   Where a scene row was lifted out of a narrow column, the head and the art
   take the full wrap and the body below keeps its reading measure on the
   same left edge, so the section does not step inwards halfway down.
   ========================================================================== */
.narrow-body{max-width:760px}
@media(max-width:900px){.narrow-body{max-width:none}}


/* ==========================================================================
   ICON SLOTS - v1.8.2
   Icons carry the furniture, scenes carry the argument. One line weight, one
   radius, drawn for Kleana, inheriting the colour of whatever they sit in.
   ========================================================================== */
.ico{width:24px;height:24px;flex:0 0 auto;vertical-align:-5px}
.door-ico{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;background:var(--mint-soft);
  color:var(--mint-ink);margin-bottom:14px}
.sec-navy .door-ico{background:rgba(41,211,162,.16);color:var(--mint)}
.step{align-items:start;grid-template-columns:auto auto 1fr}
@media(max-width:560px){.step{grid-template-columns:auto auto 1fr;gap:12px 14px}
  .step>div{grid-column:1 / -1}}
.step-ico{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;background:var(--mint-soft);
  color:var(--mint-ink)}
.sec-navy .step-ico{background:rgba(41,211,162,.16);color:var(--mint)}
.tldr h2 .ico,.tldr h3 .ico{color:var(--mint-ink);margin-right:.4em}
.hero-foot dt .ico{width:20px;height:20px;margin-right:.45em;color:var(--mint);
  vertical-align:-4px}
.empty h3 .ico{color:var(--slate);margin-right:.4em}
.chip .ico{width:14px;height:14px;margin-right:.35em;vertical-align:-2px}
.foot-wa a .ico{width:20px;height:20px}
@media(max-width:620px){
  .door-ico{width:40px;height:40px;border-radius:10px}
  .step-ico{width:36px;height:36px;border-radius:9px}
  .door-ico .ico,.step-ico .ico{width:21px;height:21px}
}

/* v1.8.2 - a grid track sizes to the longest unbreakable word in it, and the
   Setswana and Shona headings carry words long enough to push a scene row
   past a 320 or 360 screen. min-width:0 lets the track shrink, and anywhere
   (not break-word) is the value that actually changes min-content sizing. */
.scenerow>*{min-width:0}
.scenerow .sec-head h2,.scenerow .sec-head p{overflow-wrap:anywhere}

/* HOME HERO - the title breaks on purpose: 'Someone you' / 'can trust.' */

/* HOME HERO - the title breaks on purpose: 'Someone you' / 'can trust.' */
.hero-home h1{max-width:none;font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1.06}
.hero-home h1 .hl{display:block;white-space:nowrap}
@media(max-width:900px){.hero-home h1{font-size:clamp(2rem,8.4vw,3rem)}.hero-home h1 .hl{white-space:normal}}

/* NAV - five labels plus the button on one row at laptop widths */
@media(min-width:901px){
  .nav a{font-size:.84rem;letter-spacing:.04em;padding:8px 7px}
  .nav{gap:2px}
}
@media(min-width:901px){
  .topbar-in{max-width:1320px}
  .nav a{font-size:.78rem;letter-spacing:.03em;padding:8px 5px}
  .nav a.nav-cta{padding:10px 14px}
  .nav{gap:1px}
}
@media(min-width:1520px){.nav{flex-wrap:nowrap}}

/* HOME HERO - the text column carries the buttons on one row */
@media(min-width:901px){.hero-home .hero-grid{grid-template-columns:1.18fr 1fr;gap:48px;align-items:center}
.hero-home .btnrow{flex-wrap:nowrap}}


/* DOOR CARDS - a signpost, not a page. Icon, label, line, way through.
   The row holds every card side by side; it never stacks into a wall. */
.doors{display:grid;gap:14px}
.doors[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.doors[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.doors[data-n="4"],.doors[data-n="8"]{grid-template-columns:repeat(4,1fr)}
.door{padding:20px 18px 16px;display:flex;flex-direction:column}
.door .door-ico{width:36px;height:36px;border-radius:10px;margin-bottom:14px}
.door .door-ico svg{width:17px;height:17px}
.door .eyebrow{font-size:.72rem;letter-spacing:.13em;margin-bottom:.55em;min-height:2.2em}
.door h3{font-size:1.02rem;line-height:1.26;margin-bottom:0}
.door .door-go{font-size:.72rem;letter-spacing:.13em;margin-top:auto;padding-top:14px}
@media(max-width:1080px){
  .doors[data-n="4"],.doors[data-n="8"]{grid-template-columns:repeat(2,1fr)}
  .doors[data-n="3"]{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  .doors[data-n="2"],.doors[data-n="3"],.doors[data-n="4"],.doors[data-n="8"]{grid-template-columns:1fr}
  .door{padding:16px 16px 14px}
  .door .door-ico{margin-bottom:10px}
}

/* ACCORDION - a question is closed until somebody wants it. Native
   <details>, so it opens with no script and prints open under find-in-page. */
.qa-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa>summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:flex-start;
  padding:16px 2px;font-family:var(--display);font-weight:700;
  font-size:1.02rem;line-height:1.35;color:var(--navy-deep)}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{content:"";flex:0 0 auto;margin-left:auto;width:11px;height:11px;
  border-right:2px solid var(--mint-ink);border-bottom:2px solid var(--mint-ink);
  transform:rotate(45deg);margin-top:5px;transition:transform .18s ease}
.qa[open]>summary::after{transform:rotate(-135deg);margin-top:9px}
.qa>summary:hover{color:var(--mint-ink)}
.qa>summary:focus-visible{outline:2px solid var(--mint-ink);outline-offset:3px}
.qa-a{padding:0 2px 18px}
.qa-a>p{color:var(--slate-deep);margin-bottom:.7rem}
.qa-a>*:last-child{margin-bottom:0}
.sec-navy .qa-list,.sec-navy .qa{border-color:rgba(255,255,255,.16)}
.sec-navy .qa>summary{color:#fff}
@media print{.qa-a{display:block!important}}

/* GHOST ON NAVY - never navy-on-navy */
.sec-navy .btn-ghost,.hero .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.sec-navy .btn-ghost:hover,.hero .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
/* SOLID LIGHT - readable second button on a navy ground */
.btn-light{background:#fff;color:var(--navy);border:2px solid #fff}
.btn-light:hover{background:transparent;color:#fff}

/* ==========================================================================
   v1.11.1 ADDITIONS
   Pair cards with their own illustration column, accordions for step content,
   the Shop, the agent split, and the widened footer.
   ========================================================================== */

/* ---------- pair: two cards, text one side, a scene the other -------------
   The failure this replaces: two cards side by side wearing the same small
   glyph, with the right half of each card empty. Each card now carries its
   own drawing, sized to fill its side, and no two cards share an icon. */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pair-card{display:grid;grid-template-columns:1fr .92fr;gap:0;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.pair-card:hover{border-color:var(--mint);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.pair-text{padding:26px 24px 24px;display:flex;flex-direction:column;min-width:0}
.pair-text .eyebrow{font-size:.74rem;letter-spacing:.14em;margin-bottom:.7em}
.pair-text h3{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.16;margin-bottom:.4em}
.pair-text p{color:var(--slate-deep);font-size:.97rem;margin:0 0 1rem}
.pair-go{font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;
  font-weight:700;font-size:.78rem;color:var(--mint-ink);margin-top:auto;padding-top:10px}
.pair-go::after{content:" \2192"}
.pair-art{margin:0;background:var(--paper);display:flex;align-items:stretch}
.pair-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.sec-navy .pair-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.sec-navy .pair-card:hover{border-color:var(--mint)}
.sec-navy .pair-text h3{color:#fff}
.sec-navy .pair-text p{color:#CFE0EA}
.sec-navy .pair-go{color:var(--mint)}
.sec-navy .pair-art{background:rgba(0,0,0,.18)}
@media(max-width:900px){
  .pair{grid-template-columns:1fr}
  .pair-card{grid-template-columns:1fr .86fr}
}
@media(max-width:560px){
  .pair-card{grid-template-columns:1fr}
  .pair-art{order:-1;aspect-ratio:16/9}
  .pair-art img{height:100%}
}

/* ---------- accordion: the steps fold away until they are wanted ----------
   Used for procedure and reference blocks only. Anything a person has to see
   BEFORE they act - the fee, the split, the Charter clauses - stays open. */
.acc{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.acc+.acc{margin-top:10px}
.acc>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:18px 20px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--navy-deep);line-height:1.2}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{background:var(--paper)}
.acc-n{font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.06em;
  color:var(--mint-ink);background:var(--mint-soft);border-radius:var(--r-sm);
  padding:5px 9px;line-height:1}
.acc-ico{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:transform .2s,border-color .2s,background .2s}
.acc-ico::before,.acc-ico::after{content:"";background:var(--navy);position:absolute;
  border-radius:2px}
.acc-ico::before{width:12px;height:2.4px}
.acc-ico::after{width:2.4px;height:12px;transition:opacity .2s}
.acc-ico{position:relative}
.acc[open]>summary .acc-ico{background:var(--mint);border-color:var(--mint)}
.acc[open]>summary .acc-ico::after{opacity:0}
.acc-body{padding:0 20px 20px;color:var(--slate-deep)}
.acc-body>*:first-child{margin-top:0}
.acc-body>*:last-child{margin-bottom:0}
.acc-wrap{margin:0 0 1.4rem}
.sec-navy .acc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.sec-navy .acc>summary{color:#fff}
.sec-navy .acc>summary:hover{background:rgba(255,255,255,.06)}
.sec-navy .acc-body{color:#CFE0EA}
.sec-navy .acc-ico{border-color:rgba(255,255,255,.45)}
.sec-navy .acc-ico::before,.sec-navy .acc-ico::after{background:#fff}
.sec-navy .acc-n{background:rgba(41,211,162,.2);color:var(--mint)}

/* ---------- currency switch: USD is the peg, the local number is a courtesy */
.cur{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 1.1rem}
.cur-lab{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;font-size:.76rem;color:var(--slate)}
.cur-set{display:inline-flex;border:2px solid var(--navy);border-radius:var(--r);overflow:hidden}
.cur-set button{font-family:var(--display);font-weight:700;letter-spacing:.06em;
  font-size:.8rem;padding:7px 12px;border:0;background:#fff;color:var(--navy);
  cursor:pointer;line-height:1}
.cur-set button+button{border-left:2px solid var(--navy)}
.cur-set button[aria-pressed="true"]{background:var(--navy);color:#fff}
.cur-note{font-size:.82rem;color:var(--slate);margin:0}
.sec-navy .cur-lab,.sec-navy .cur-note{color:#AFC6D6}
.sec-navy .cur-set{border-color:#fff}
.sec-navy .cur-set button{background:transparent;color:#fff}
.sec-navy .cur-set button+button{border-left-color:#fff}
.sec-navy .cur-set button[aria-pressed="true"]{background:#fff;color:var(--navy-deep)}

/* ---------- the split, shown rather than described ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 1.6rem}
.split-part{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;background:#fff}
.split-part.is-agent{border-color:var(--mint);background:var(--mint-soft)}
.split-share{font-family:var(--display);font-weight:800;line-height:.9;
  font-size:clamp(3rem,7vw,4.6rem);color:var(--navy-deep);letter-spacing:-.02em}
.split-part.is-agent .split-share{color:var(--mint-ink)}
.split-who{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;
  font-weight:700;font-size:.82rem;color:var(--slate);margin:.4em 0 .7em}
.split-part p{margin:0;font-size:.97rem;color:var(--slate-deep)}
.split-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;margin:0 0 1.2rem;
  border:1px solid var(--line)}
.split-bar i{display:block;height:100%}
.split-bar .s-agent{width:70%;background:var(--mint)}
.split-bar .s-kleana{width:30%;background:var(--navy)}
.worked{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.97rem}
.worked th,.worked td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left}
.worked th{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:.8rem;color:var(--slate)}
.worked td:last-child,.worked th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.worked tr.is-total td{font-weight:600;color:var(--navy-deep);border-bottom:0}
@media(max-width:700px){.split{grid-template-columns:1fr}}

/* ---------- shop ---------- */
.shop-note{background:var(--warn-soft);border-left:4px solid var(--warn);
  border-radius:var(--r);padding:16px 18px;margin:0 0 1.6rem;color:var(--warn);font-size:.95rem}
.shop-note strong{color:var(--warn)}
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.prod{display:grid;grid-template-columns:auto 1fr;gap:20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px;align-items:start}
.prod.is-soon{background:var(--paper);border-style:dashed}
.prod-art{width:104px;flex:none}
.prod-art svg{width:100%;height:auto}
.prod h3{font-size:1.18rem;margin-bottom:.25em}
.prod p{font-size:.94rem;color:var(--slate-deep);margin:0 0 .9rem}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 .9rem;padding:0;list-style:none}
.sizes li{font-family:var(--display);font-weight:700;letter-spacing:.06em;font-size:.8rem;
  text-transform:uppercase;background:var(--mint-soft);color:var(--mint-ink);
  border-radius:999px;padding:5px 12px;margin:0}
.prod.is-soon .sizes li{background:var(--paper-2);color:var(--slate)}
.tag-soon{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.72rem;
  color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:5px 11px;
  margin:0 0 .7rem}
.tag-made{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.72rem;
  color:var(--mint-ink);background:var(--mint-soft);border-radius:999px;padding:5px 11px;
  margin:0 0 .7rem}
@media(max-width:860px){.prods{grid-template-columns:1fr}}
@media(max-width:480px){.prod{grid-template-columns:1fr}.prod-art{width:86px}}

.supcats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 1.6rem}
.supcat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px}
.supcat h3{font-size:1.02rem;margin-bottom:.4em}
.supcat p{font-size:.9rem;color:var(--slate-deep);margin:0}
.supcat-ico{width:38px;height:38px;border-radius:10px;background:var(--mint-soft);
  color:var(--mint-ink);display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px}
.supcat-ico svg{width:19px;height:19px}
@media(max-width:900px){.supcats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.supcats{grid-template-columns:1fr}}

.supboard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:34px 26px;text-align:center;color:var(--slate-deep)}
.supboard h3{margin-bottom:.3em}
.supboard p{max-width:56ch;margin:0 auto 1.2rem}
.supgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.supcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px}
.supcard h3{font-size:1.05rem;margin-bottom:.25em}
.supcard .meta{font-size:.86rem;color:var(--slate);margin:0 0 .8rem}
@media(max-width:900px){.supgrid{grid-template-columns:1fr}}

/* ---------- magazine ---------- */
.issue{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.issue-cover{width:190px;flex:none}
.issue-cover svg{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--shadow)}
.issue h3{margin-bottom:.3em}
.issue p{color:var(--slate-deep);margin:0 0 1.1rem}
.issue-state{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.74rem;
  color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:5px 12px;
  margin:0 0 .8rem}
@media(max-width:700px){.issue{grid-template-columns:1fr}.issue-cover{width:150px}}

.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feed-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px}
.feed-item .eyebrow{font-size:.72rem;letter-spacing:.13em}
.feed-item h3{font-size:1.05rem;margin-bottom:.3em}
.feed-item p{font-size:.92rem;color:var(--slate-deep);margin:0}
@media(max-width:860px){.feed{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.lines{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 1.6rem}
.line-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px}
.line-card h3{font-size:1.02rem;margin-bottom:.25em}
.line-card a{font-weight:600;text-decoration:none}
.line-card .num{font-variant-numeric:tabular-nums}
@media(max-width:640px){.lines{grid-template-columns:1fr}}

/* ---------- footer widening ---------- */
.foot-social{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);
  color:#fff;text-decoration:none;transition:background .18s,color .18s}
.foot-social a:hover{background:var(--mint);color:var(--navy-deep)}
.foot-social svg{width:20px;height:20px}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  justify-content:space-between}
.foot-by a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.foot-by a:hover{color:var(--mint);border-bottom-color:var(--mint)}
.foot-copy{font-size:.86rem;color:#9FB6C7;margin:0}

/* ---------- the nav carries nine items now ----------
   For Agents, Shop and Magazine joined and FAQ moved to the footer. Ten targets
   including the CTA cannot sit on one row at the old sizing, and a wrapped
   two-line nav reads as a mistake. So the hamburger now takes over below
   1200px instead of 960px, and above that the topbar gets the full width and a
   tighter row. Nothing on the collapsed panel changes - it is the same panel
   the site already used, just reached sooner. */
/* ---------- the nav carries nine items now ----------
   For Agents, Shop and Magazine joined and FAQ moved to the footer. Ten targets
   including the CTA will not sit on one row at a comfortable reading size below
   about 1440px, and shrinking the type to force it made the menu too small to
   read. So the type goes back up and the hamburger takes over earlier instead -
   the collapsed panel is the same one the site already used, reached sooner and
   with bigger targets than the old row had. */
@media (max-width:1439px){
  .navtoggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(13,39,64,.14);padding:10px var(--gut) 16px;
    max-height:calc(100vh - 58px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:79}
  .nav.on{display:flex}
  .nav a{font-size:1rem;padding:13px 8px;letter-spacing:.05em}
  .nav-cta{margin-left:0!important;margin-top:8px;text-align:center;font-size:1rem;
    padding:13px 14px!important}
  .topbar-in{flex-wrap:nowrap}
  .langsw{margin-left:auto;order:2;flex-shrink:0}
  .navtoggle{margin-left:8px!important;order:3;flex-shrink:0;font-size:.92rem;
    padding:10px 14px}
}
@media (min-width:1440px){
  /* wrap, never overflow: if the condensed webfont fails to load the fallback is
     wider and a nowrap row would push the whole page sideways. A second row is
     survivable; a horizontally scrolling site is not. */
  .topbar .wrap{max-width:1600px}
  .navtoggle{display:none}
  .nav{display:flex;position:static;flex-direction:row;background:none;border:0;
    box-shadow:none;padding:0;max-height:none;overflow:visible;
    gap:2px 3px;flex-wrap:wrap;row-gap:3px;justify-content:flex-end;min-width:0}
  .nav a{font-size:.8rem;padding:8px 5px;letter-spacing:0}
  .nav-cta{padding:9px 11px!important;margin-left:4px!important}
  .langsw button{padding:7px 8px;font-size:.76rem}
  .topbar-in{gap:10px}
  .topbar .brand-word{font-size:1.3rem}
  .topbar .brand-mark{width:33px;height:38px}
  .topbar .brand-sub{font-size:.45rem}
}
@media (min-width:1700px){
  .nav a{font-size:.86rem;padding:9px 8px}
  .topbar .brand-word{font-size:1.5rem}
  .topbar .wrap{max-width:1740px}
}

/* gap on a flex row is not safe on the older WebKit builds this site still has
   to render on, so the word spacing in the lockup is set with margin instead */
.brand-sub{gap:0}
.brand-sub>span+span{margin-left:.36em}
@media (max-width:560px){.brand-sub>span+span{margin-left:.3em}}

/* ---------- inner-page hero art carries its full column ----------
   The standing rule on these builds is that the illustration fills its side of
   the section and holds real weight against the headline. The inner pages were
   capping the art at 432px, which left most of the right-hand column empty and
   made a generous scene read as a spot graphic. It now takes the column. */
.hero-page .hero-art{max-width:none;width:100%;margin-left:auto}
.hero-page .hero-art-wrap{display:flex;align-items:center}
@media (max-width:960px){
  .hero-page .hero-art{max-width:520px;margin:0 auto}
  .hero-page .hero-art-wrap{display:block}
}

/* ---------- the split and the worked figures sit on navy ----------
   These components were styled for a paper section first. On the navy band the
   card backgrounds and the totals row inherited navy-on-navy and the figures
   disappeared, which on a page whose whole job is to state the money plainly is
   the worst possible place to lose contrast. */
.sec-navy .split-part{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.sec-navy .split-part p{color:#CFE0EA}
.sec-navy .split-share{color:#fff}
.sec-navy .split-who{color:#9FB6C7}
.sec-navy .split-part.is-agent{background:rgba(41,211,162,.14);border-color:var(--mint)}
.sec-navy .split-part.is-agent .split-share{color:var(--mint)}
.sec-navy .split-part.is-agent .split-who{color:var(--mint)}
.sec-navy .split-bar{border-color:rgba(255,255,255,.3)}
.sec-navy .split-bar .s-kleana{background:#fff;opacity:.35}
.sec-navy .worked{color:#E7EFF4}
.sec-navy .worked th,.sec-navy .worked td{border-bottom-color:rgba(255,255,255,.18)}
.sec-navy .worked th{color:#9FB6C7}
.sec-navy .worked tr.is-total td,.sec-navy .worked tr.is-total th{color:var(--mint)}
.sec-navy .worked tr.is-total th{font-weight:700}

/* ---------- the footer was taller than some of the pages above it ----------
   Four stacked WhatsApp rows, a four-line paragraph, two long link lists, a
   social row and an install button had it running past 700px. Same content,
   organised: the country lines go two-up and compact, the link lists go two-up
   inside their column, and the social icons and install button ride in the
   base row where they cost no extra height. */
.foot{padding:44px 0 22px}
.foot-grid{gap:26px 34px;grid-template-columns:1.5fr 1fr 1fr}
.foot-brand{margin-bottom:8px}
.foot-grid>div>p{font-size:.9rem;line-height:1.5;margin:0 0 12px;max-width:46ch}
.foot h3{font-size:.76rem;letter-spacing:.13em;margin:0 0 8px}
.foot-grid ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin:0}
.foot-grid ul li{margin:0}
.foot-grid ul a{font-size:.88rem;line-height:1.45;display:inline-block;padding:3px 0}
.foot-wa{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin:0}
.foot-wa a{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding:4px 0;line-height:1.25;text-decoration:none;text-align:left}
.foot-wa a svg{display:none}
.foot-wa-c{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:.66rem;color:var(--mint)}
.foot-wa-num{font-size:.86rem;color:#D6E3EC;font-variant-numeric:tabular-nums}
.foot-wa a:hover .foot-wa-num{color:#fff}
.foot-base{margin-top:22px;padding-top:16px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 18px}
.foot-base .install{display:inline-flex;order:1;margin:0;font-size:.8rem;padding:8px 14px}
.foot-base .foot-social{order:2;margin:0}
.foot-base .foot-by{order:3;margin-left:auto}
.foot-base .foot-copy{order:4;width:100%;margin:0;font-size:.8rem}
.foot-social a{width:32px;height:32px;border-radius:8px}
.foot-social svg{width:17px;height:17px}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px 26px}
  .foot-base .foot-by{margin-left:0}
}
@media (max-width:560px){
  .foot{padding:34px 0 18px}
  .foot-grid{grid-template-columns:1fr}
  .foot-wa{grid-template-columns:1fr 1fr}
  .foot-grid ul{grid-template-columns:1fr 1fr}
}

/* ---------- tiles: three- and four-up cards carry their own drawing ----------
   Same fault as the two-up row - a small glyph in the corner and the rest of
   the card empty, and in two of these rows the identical glyph four and eight
   times over. At this column width a side-by-side split is too narrow, so the
   art takes the full width of the card and the text sits under it. */
.tiles{display:grid;gap:20px}
.tiles[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.tiles[data-n="4"]{grid-template-columns:repeat(4,1fr)}
.tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.tile:hover{border-color:var(--mint);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.tile-art{margin:0;background:var(--paper);line-height:0}
.tile-art img{width:100%;height:auto;display:block;border-radius:0}
.tile-text{padding:20px 20px 20px;display:flex;flex-direction:column;flex:1 1 auto}
.tile-text .eyebrow{font-size:.72rem;letter-spacing:.13em;margin-bottom:.6em}
.tile-text h3{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.18;margin-bottom:.5em}
.tile-text p{color:var(--slate-deep);font-size:.93rem;margin:0 0 .9rem}
.tile .pair-go{margin-top:auto;padding-top:6px}
.sec-navy .tile{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.sec-navy .tile:hover{border-color:var(--mint)}
.sec-navy .tile-text h3{color:#fff}
.sec-navy .tile-text p{color:#CFE0EA}
.sec-navy .tile-art{background:rgba(0,0,0,.18)}
@media (max-width:1040px){
  .tiles[data-n="4"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .tiles[data-n="3"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .tiles[data-n="3"],.tiles[data-n="4"]{grid-template-columns:1fr}
}
.tile.is-static{cursor:default}
.tile.is-static:hover{border-color:var(--line);box-shadow:none;transform:none}

/* The bigger menu button above is for tablet and small-desktop widths. It was
   written into a max-width:1439px block, so it also applied on a phone, and
   with a fourth language button now in the bar the row ran 45px past a 360
   viewport. Phones get the compact button and a tighter bar; the menu itself
   is a full-width panel below the bar, so its links stay large. */
@media (max-width:620px){
  .navtoggle{font-size:.78rem;padding:7px 9px;margin-left:6px!important}
  .langsw button{padding:5px 7px;font-size:.7rem}
  .topbar-in{gap:6px}
  .topbar .brand-word{font-size:1.34rem}
  .topbar .brand-mark{width:30px;height:34px}
  .topbar .brand-sub{font-size:.42rem}
  .nav a{font-size:.95rem;padding:12px 8px}
}
/* Below this the wordmark, a four-language switch and the menu button cannot
   share one row without shrinking the lockup to nothing - and they must not
   depend on the condensed webfont having loaded to fit. The switch drops to a
   second row instead, which is what the bar did before the fourth language
   was added. */
@media (max-width:520px){
  .topbar-in{flex-wrap:wrap!important;gap:4px 6px;padding-bottom:6px}
  .brand{order:1}
  .navtoggle{order:2;margin-left:auto!important;font-size:.78rem;padding:7px 10px}
  .langsw{order:3;flex:1 0 100%;margin-left:0!important;justify-content:flex-start;
    width:max-content}
  .langsw button{padding:6px 12px;font-size:.74rem}
  .topbar .brand-word{font-size:1.34rem}
  .topbar .brand-mark{width:30px;height:34px}
  .topbar .brand-sub{font-size:.42rem}
  .nav{top:auto}
}

/* ==================================================================
   v1.12.0 - FOUR CITIES ON ONE BOARD
   The city control is the first decision on the listings pages, so it
   is louder than the filters under it: its own card, its own row, and
   a mint pressed state that separates it from the navy engagement
   segment below. Wraps at every width - four city names do not fit a
   phone in one line and are not meant to.
   ================================================================== */
.citybar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;margin:0 0 18px;scroll-margin-top:92px}
.citybar-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-size:.76rem;color:var(--slate-deep);margin:0 0 10px}
.citybar-note{font-size:.9rem;color:var(--slate);margin:10px 0 0}
.seg-city{display:flex;flex-wrap:wrap;width:100%;background:#fff;border:1px solid var(--line)}
.seg-city button{flex:1 1 auto;min-height:44px;font-size:.9rem;padding:10px 16px}
.seg-city button[aria-pressed="true"]{background:var(--mint);color:var(--navy-deep)}
.seg-city button:hover:not([aria-pressed="true"]){background:var(--paper-2);color:var(--navy-deep)}

/* ---------- pagination: the listings area redraws, the page does not ---------- */
.pager{margin:26px 0 0}
.pager[hidden]{display:none}
.pager-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.pager-in button{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;font-size:.86rem;min-height:44px;min-width:44px;padding:10px 16px;
  border:1px solid var(--line);background:#fff;color:var(--navy-deep);
  border-radius:var(--r);cursor:pointer}
.pager-in button:hover:not(:disabled){border-color:var(--navy);background:var(--paper-2)}
.pager-in button:disabled{color:var(--slate);background:var(--paper);cursor:not-allowed}
.pager-in .pg-n[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pg-gap{color:var(--slate);padding:0 2px;min-width:20px;text-align:center}
.pager-note{text-align:center;font-size:.9rem;color:var(--slate);margin:12px 0 0}
@media (max-width:430px){
  .pager-in button{padding:10px 12px;font-size:.8rem}
  .seg-city button{flex:1 1 44%;font-size:.84rem;padding:10px 8px}
}