/* ==========================================================================
   UBUFAZI HEALTH - design system v3
   Soft, warm, plainly readable. Built for a woman on a cheap phone who is
   worried about something. Rounded, airy, low-contrast furniture; high-contrast
   text. Nothing shouts except the things that should.
   ========================================================================== */

@font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces-latin.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces-latin-ext.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:InterVar;src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:InterVar;src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cinzel;src:url(/assets/fonts/cinzel-latin.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Brand - maroon carries identity; it is never a large heavy field */
  --brand:#8C2321; --brand-deep:#6B1717; --brand-deeper:#521111;
  --brand-hover:#6B1717; --brand-light:#C2706E; --brand-link:#8C2321;
  --brand-soft:#E8C8C6; --brand-tint:#FDF2F0; --on-brand:#FFFFFF;

  --accent:#C8871B; --accent-ink:#7A5209; --accent-tint:#FDF5E7;
  --verify:#2E6244; --verify-tint:#EAF3EE;
  --alert:#A8201F; --alert-050:#FDEEED; --ok:#2E6244; --warn:#8A5A12;

  /* Warm neutrals - nothing is pure white or pure black */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FBF6F2; --surface-3:#FDF2F0;
  --ink:#2B2320; --ink-2:#665955; --ink-3:#8A7C77;
  --line:#EDE5DF; --line-2:#DCD0C8; --ink-invert:#FFFFFF;
  --dark:#33201E; --dark-2:#452A27; --on-dark:#F5E9E6; --on-dark-2:#C9B2AE;

  --c1:#8C2321; --c2:#C8871B; --c3:#2F6690; --c4:#2E6244; --c5:#C2706E; --c6:#9C8B84;
  --c-rest:#EDE5DF;
  --c-public:linear-gradient(90deg,#6B1717,#C2706E);
  --c-private:linear-gradient(90deg,#C8871B,#E4BC77);

  /* Type - larger and looser than a corporate site; this is read under stress */
  --fs-2xs:clamp(.72rem,.7rem + .12vw,.78rem);
  --fs-xs:clamp(.8rem,.77rem + .16vw,.87rem);
  --fs-sm:clamp(.92rem,.89rem + .2vw,1rem);
  --fs-base:clamp(1.05rem,1.01rem + .25vw,1.15rem);
  --fs-lg:clamp(1.15rem,1.07rem + .48vw,1.4rem);
  --fs-xl:clamp(1.3rem,1.16rem + .7vw,1.65rem);
  --fs-h3:clamp(1.25rem,1.12rem + .72vw,1.65rem);
  --fs-h2:clamp(1.6rem,1.3rem + 1.5vw,2.5rem);
  --fs-h1:clamp(2rem,1.5rem + 2.5vw,3.6rem);

  --s1:clamp(.35rem,.3rem + .2vw,.5rem);   --s2:clamp(.65rem,.55rem + .4vw,.95rem);
  --s3:clamp(1.05rem,.9rem + .7vw,1.55rem);--s4:clamp(1.6rem,1.3rem + 1.4vw,2.7rem);
  --s5:clamp(2.4rem,1.8rem + 2.6vw,4.6rem);--s6:clamp(3.4rem,2.4rem + 4.6vw,7rem);
  --wrap:min(1200px,100% - clamp(1.25rem,6vw,4.5rem));
  --measure:66ch;

  --r1:12px; --r2:20px; --r3:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(69,42,39,.04),0 6px 18px -8px rgba(69,42,39,.10);
  --sh-2:0 2px 4px rgba(69,42,39,.04),0 16px 40px -16px rgba(69,42,39,.18);
  --sh-3:0 4px 10px rgba(69,42,39,.06),0 30px 70px -24px rgba(69,42,39,.26);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:InterVar,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
/* Any component that sets its own `display` outranks the UA rule for [hidden],
   which silently breaks every JS filter on the site. Guard it once, globally. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem;
  overflow-x:clip;color-scheme:light}
/* `overflow-x:clip` is the right tool - it stops sideways scroll without making
   the page a scroll container, so the sticky header keeps working. But it only
   landed in Safari 16 and Chrome 90, and a lot of the phones this site is built
   for are older than that. Without a fallback those browsers treat it as
   `visible` and the page drags east-to-west. `overflow-x` on the root element
   propagates to the viewport rather than turning <html> into a scroller, so
   sticky survives here too. Set on the root only, never also on body: doing
   both is what breaks `position:sticky`. */
@supports not (overflow-x:clip){html{overflow-x:hidden}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;max-width:100%;
  font:var(--fs-base)/1.7 var(--sans);font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@supports not (overflow-x:clip){body{overflow-x:visible}}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:var(--brand-link);text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:color .16s var(--ease)}
a:hover{color:var(--brand-deep)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--brand-tint);color:var(--brand-deep)}

h1,h2,h3,h4{font-family:var(--serif);font-optical-sizing:auto;color:var(--ink);
  line-height:1.18;letter-spacing:-.012em;margin:0 0 var(--s2);text-wrap:balance;font-weight:600}
h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.018em}
h2{font-size:var(--fs-h2);line-height:1.14}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-lg)}
p{margin:0 0 var(--s3);max-width:var(--measure);text-wrap:pretty}
ul,ol{max-width:var(--measure);padding-left:1.2em}
li{margin-bottom:.55em}
strong{font-weight:640;color:var(--ink)}
code{font:600 .92em/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--surface-2);padding:.15em .45em;border-radius:6px;overflow-wrap:anywhere}
/* An address, URL or long clinical term with no space in it will push the page
   wider than the screen. Give every run of prose a break opportunity. */
p,li,dd,dt,figcaption,th,td,summary,h1,h2,h3,h4{overflow-wrap:break-word}
.wrap{width:var(--wrap);margin-inline:auto}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip:auto;overflow:visible;left:var(--s3);top:var(--s3);z-index:999;
  background:var(--brand);color:#fff;padding:.85rem 1.3rem;border-radius:var(--r1);font-weight:600}

/* ---------------------------------------------------------------- containers */
.u-media{container-type:inline-size;width:100%}
.u-frame{position:relative;width:100%;aspect-ratio:var(--ar,16/9);overflow:hidden;
  border-radius:var(--r2);background:var(--surface-2)}
.u-frame>img,.u-frame>video,.u-frame>iframe,.u-frame>svg{position:absolute;inset:0;width:100%;height:100%;border:0}
.u-frame--photo>img{object-fit:cover;object-position:var(--pos,50% 50%)}
.u-frame>video{object-fit:contain;background:#000}
.u-frame--head{display:grid;align-content:center;padding:clamp(.85rem,5.5cqi,1.7rem);
  background:linear-gradient(140deg,#521111,#8C2321 74%);isolation:isolate}
.u-frame--head::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(112% 84% at 88% 6%,rgba(255,255,255,.17),transparent 62%),
    radial-gradient(88% 72% at 2% 100%,rgba(200,135,27,.32),transparent 58%)}
.u-frame__headline{margin:0;color:#fff;font-family:var(--serif);font-weight:600;
  font-size:clamp(.95rem,5.6cqi,1.6rem);line-height:1.15;letter-spacing:-.005em;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.u-cap{font-size:var(--fs-xs);line-height:1.6;color:var(--ink-3);padding-top:.6rem;max-width:var(--measure)}
.u-text{max-width:min(var(--measure),100%)}
.u-text--wide{max-width:100%}
.u-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,17rem)),1fr))}
.u-links{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0;list-style:none}
.u-links a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.9rem;padding:.6rem 1.15rem;
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--ink);
  transition:background .18s var(--ease),color .18s,transform .18s var(--ease)}
.u-links a:hover{background:var(--brand-tint);color:var(--brand-deep);transform:translateY(-1px)}
.u-form{display:grid;gap:var(--s2);align-items:end;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.field{display:grid;gap:.4rem;min-width:0}
label{font-size:var(--fs-sm);font-weight:640;color:var(--ink)}
input,select,textarea{width:100%;min-width:0;min-height:3.1rem;font:inherit;font-size:var(--fs-sm);
  padding:.8rem 1rem;border:1.5px solid var(--line-2);border-radius:var(--r1);
  background:var(--surface);color:var(--ink);transition:border-color .18s,box-shadow .18s}
input::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-tint)}
.u-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
/* The 32rem floor stops a wide multi-column table from being crushed, but it was
   unconditional, so the two-column tables tucked inside the chart columns
   demanded 512px in a ~400px slot and scrolled sideways on a tablet. Cap the
   floor at the space actually available and the scroll never appears. */
table{border-collapse:collapse;width:100%;min-width:min(32rem,100%);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums lining-nums}
caption{text-align:left;padding:var(--s3) var(--s3) var(--s2);font-weight:640;
  color:var(--ink);font-size:var(--fs-sm)}
th,td{text-align:left;padding:.9rem var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
thead th{position:sticky;top:0;background:var(--surface-2);color:var(--ink);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--brand-tint)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3.2rem;padding:.9rem 1.7rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  font:640 var(--fs-sm)/1.2 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:0 8px 20px -10px var(--brand)}
.btn--primary:hover{background:var(--brand-hover);color:var(--on-brand);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--brand-deep);border-color:var(--brand-soft)}
.btn--ghost:hover{background:var(--brand-tint);color:var(--brand-deep);border-color:var(--brand)}
.btn--light{background:var(--surface);color:var(--brand-deep);border-color:var(--line)}
.btn--light:hover{background:var(--brand-tint)}
.btn--sm{min-height:2.6rem;padding:.55rem 1.1rem;font-size:var(--fs-xs)}
.nav a.btn--primary,.nav a.btn--primary:hover,.dock a.btn--primary{color:var(--on-brand)}
.nav a.btn--ghost{color:var(--brand-deep)}

/* ---------------------------------------------------------------- chrome */
.topbar{background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-2xs);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  align-items:center;padding:.55rem 0}
.topbar a{color:var(--brand-deep);text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline}
@media (max-width:760px){
  .topbar .wrap{justify-content:center;text-align:center;padding:.45rem 0}
  .topbar .wrap>span:first-child{display:none}
}

.hdr{position:sticky;top:0;z-index:96;border-bottom:1px solid var(--line);background:var(--bg)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}
.hdr__in{position:relative;display:flex;align-items:center;gap:var(--s3);padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:0 0 auto;min-width:0}
/* The mark is painted as a mask, not an <img>, so one file tints to the brand
   maroon without a second asset. Browsers without mask support fall through to
   no mark, never to a solid block. Sized by height, not width: the mark is
   taller than it is wide, and the sticky header has to stay inside
   html{scroll-padding-top}. */
.brand__logo{height:clamp(40px,4.4vw,50px);aspect-ratio:227/255;flex:0 0 auto}
@supports ((mask-image:url(#m)) or (-webkit-mask-image:url(#m))){
  .brand__logo{background:var(--brand-deep);
    -webkit-mask:url(/assets/img/logo/ubufazi-logo.svg) no-repeat center/contain;
    mask:url(/assets/img/logo/ubufazi-logo.svg) no-repeat center/contain;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.brand__type{display:block;min-width:0}
.brand b{display:block;font-family:Cinzel,var(--serif);font-weight:600;
  font-size:clamp(1.1rem,.92rem + .8vw,1.5rem);letter-spacing:.09em;color:var(--brand-deep);line-height:1;white-space:nowrap}
.brand__tag{display:block;font-size:clamp(.44rem,.38rem + .17vw,.55rem);letter-spacing:.2em;
  color:var(--ink-3);text-transform:uppercase;margin-top:.36rem;font-weight:650;white-space:nowrap}
.brand__tag em{font-style:normal;font-weight:800;color:var(--brand)}
/* The lockup used to be flex:0 0 auto with nowrap on both lines, so it could
   neither shrink nor wrap. On a 360px-and-under phone - and on any phone during
   the webfont swap, when the fallback face measures wider - the tagline pushed
   the header past the viewport and the whole page could be dragged sideways.
   Tighten the tracking and let it give way instead. */
@media (max-width:420px){
  .brand{flex:0 1 auto;min-width:0}
  .brand b{letter-spacing:.06em}
  .brand__tag{letter-spacing:.1em;white-space:normal}
}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.3rem,1vw,1.15rem)}
.nav a{position:relative;font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  text-decoration:none;padding:.6rem .25rem;border-radius:8px}
.nav a:hover,.nav a[aria-current=page]{color:var(--brand)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:.25rem;right:.25rem;bottom:.25rem;
  height:2px;border-radius:2px;background:var(--brand)}
.nav .btn::after{display:none}
.nav__toggle{display:none;background:var(--brand-tint);color:var(--brand-deep);border:0;
  border-radius:var(--r1);min-width:3.1rem;min-height:3.1rem;font-size:1.15rem;cursor:pointer}
.scrim{position:fixed;inset:0;z-index:90;background:rgba(43,35,32,.45);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.scrim[data-show=true]{opacity:1;pointer-events:auto}
.nav__close{display:none}

@media (max-width:980px){
  .nav__toggle{display:grid;place-items:center;margin-left:auto;position:relative;z-index:110}
  .nav{position:fixed;inset:0 0 0 auto;z-index:100;width:min(22rem,88vw);visibility:hidden;
    flex-direction:column;align-items:stretch;gap:0;background:var(--bg);
    padding:5.5rem var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);transition:transform .32s var(--ease),visibility .32s;box-shadow:var(--sh-3)}
  .nav[data-open=true]{transform:none;visibility:visible}
  .nav a{padding:1.05rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-lg);
    font-family:var(--serif);font-weight:600;border-radius:0}
  .nav a[aria-current=page]::after{display:none}
  .nav a[aria-current=page]{color:var(--brand)}
  .nav .btn{margin-top:var(--s3)}
  .nav__close{display:grid;place-items:center;position:absolute;top:1rem;right:1rem;
    width:3.1rem;height:3.1rem;border-radius:var(--r-pill);border:1px solid var(--line);
    background:var(--surface);color:var(--ink-2);font-size:1.1rem;cursor:pointer}
  .nav__close:hover{border-color:var(--brand);color:var(--brand)}
}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:
  radial-gradient(80% 60% at 88% 0%,var(--surface-3),transparent 62%),
  radial-gradient(70% 55% at 0% 100%,var(--accent-tint),transparent 60%),
  var(--surface-2);
  border-bottom:1px solid var(--line);overflow:hidden}
.hero::before,.hero::after{display:none}
.hero .wrap{position:relative;display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));align-items:center;
  padding:clamp(2.5rem,2rem + 4.5vw,5rem) 0}
.hero h1{color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.6}
.hero .u-links a{background:var(--surface);box-shadow:var(--sh-1)}
.hero .u-links a:hover{background:var(--brand-tint)}
.hero-search{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s4);box-shadow:var(--sh-2)}
.hero-search .hint{font-size:var(--fs-xs);color:var(--ink-2);margin:var(--s2) 0 0;max-width:none}
.hero-search .hint a{color:var(--brand-deep)}
/* The search card and the stat grid under it are two separate blocks in the
   hero column, so nothing held them apart and the two edges met. Give it the
   same gap the stats already keep between themselves, at every width. */
.hero-search+.u-grid{margin-top:var(--s2)}
/* No leading rule: the label carries itself. The old decorative dash read as a
   stray em dash in front of every section heading. */
.eyebrow{display:block;margin:0 0 var(--s3);max-width:none;
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}

/* ---------------------------------------------------------------- sections */
.sect{padding:var(--s6) 0;position:relative}
.sect--paper{background:var(--bg)}
.sect--recess{background:var(--surface-2)}
.sect--ink{background:var(--surface-3);color:var(--ink)}
.sect--ink::after{display:none}
.sect--ink h2,.sect--ink h3,.sect--ink h4{color:var(--ink)}
.sect--ink p,.sect--ink li{color:var(--ink-2)}
.sect--ink .u-cap{color:var(--ink-3)}
.sect--ink .btn--ghost,.hero .btn--ghost{color:var(--brand-deep);border-color:var(--brand-soft)}
.sect--ink .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--brand-tint)}
.sect__head{display:grid;gap:var(--s3);align-items:end;margin-bottom:var(--s5);
  grid-template-columns:minmax(0,1fr) auto}
.sect__head>p:last-child{margin:0}
.sect__head p{margin-bottom:0}
@media (max-width:760px){.sect__head{grid-template-columns:1fr;gap:var(--s2)}}

/* ---------------------------------------------------------------- cards */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s2);min-width:0;height:100%;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--brand-soft)}
.card h3{margin:0;text-wrap:pretty}
.card p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.card ul{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.card__more{margin-top:auto;padding-top:var(--s3);font-weight:650;font-size:var(--fs-sm);
  text-decoration:none;color:var(--brand);display:inline-flex;align-items:center;gap:.4rem}
.card__more::after{content:"→";transition:transform .22s var(--ease)}
.card:hover .card__more::after{transform:translateX(4px)}
.card--journey{text-decoration:none;color:inherit;background:var(--surface)}
.card--journey .ico{width:2.4rem;height:2.4rem;color:var(--brand);
  background:var(--brand-tint);border-radius:var(--r1);padding:.42rem;transition:.22s}
.card--journey:hover .ico{background:var(--brand);color:#fff}
.card--journey:hover h3{color:var(--brand-deep)}
.card--news{padding:0;overflow:hidden}
.card--news .body{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.card--news .u-frame{border-radius:0}
.card--news h3{font-size:var(--fs-lg)}
.card--news h3 a{text-decoration:none;color:var(--ink)}
.card--news:hover h3 a{color:var(--brand-deep)}
details.card{cursor:pointer}
details.card summary{font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:var(--s2);align-items:start}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"+";font-family:var(--sans);font-weight:400;font-size:1.4em;
  line-height:1;color:var(--brand);transition:transform .22s var(--ease)}
details.card[open] summary::after{transform:rotate(45deg)}

/* ---------------------------------------------------------------- badges */
.badge{display:inline-flex;align-items:center;gap:.35rem;width:max-content;
  font-size:var(--fs-2xs);font-weight:650;letter-spacing:.02em;
  padding:.38rem .8rem;border-radius:var(--r-pill);border:1px solid transparent}
.badge--verified{background:var(--verify-tint);color:var(--verify)}
.badge--evidence{background:var(--accent-tint);color:var(--accent-ink)}
.badge--sponsored{background:var(--surface-2);color:var(--ink-2)}
.badge--urgent{background:var(--alert-050);color:var(--alert)}

/* ---------------------------------------------------------------- stats */
.stat{position:relative;min-width:0;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.stat::before{display:none}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.stat b{display:block;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.25rem + 2.4vw,3rem);line-height:1.05;color:var(--brand);
  font-variant-numeric:lining-nums tabular-nums}
.stat span{display:block;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);margin-top:var(--s2)}
.hero .stat,.sect--ink .stat{background:var(--surface)}
.live{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--ink-3);margin:0}
.live::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}

/* ---------------------------------------------------------------- charts */
.chart{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s4);min-width:0}
.chart figcaption{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);color:var(--ink);
  line-height:1.2;margin-bottom:var(--s3)}
.chart svg{width:100%;max-width:22rem;height:auto;overflow:visible;margin-inline:auto}
.chart .legend{display:grid;gap:.45rem .9rem;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  font-size:var(--fs-xs);color:var(--ink-2);margin-top:var(--s3)}
.chart .legend i{width:.75rem;height:.75rem;border-radius:4px;display:inline-block;margin-right:.4rem}
.chart .legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.chart details summary{font-size:var(--fs-xs);color:var(--ink-3);cursor:pointer;margin-top:var(--s3)}
.bar-row{display:grid;grid-template-columns:minmax(5rem,8rem) 1fr 3ch;gap:var(--s2);
  align-items:center;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:.6rem}
.bar-row b{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.bar-track{background:var(--surface-2);border-radius:var(--r-pill);height:.9rem;overflow:hidden}
.bar-fill{height:100%;border-radius:var(--r-pill);width:0;transition:width 1.1s var(--ease)}
.chart .stage{font-family:var(--serif);font-weight:600;font-size:var(--fs-base);color:var(--ink);
  margin-bottom:.4rem;display:flex;justify-content:space-between}

/* ---------------------------------------------------------------- callouts */
.note{position:relative;align-self:start;border:1px solid var(--verify);border-left-width:4px;
  background:var(--verify-tint);color:var(--ink);padding:var(--s4);border-radius:var(--r2)}
.note--alert{border-color:var(--alert);background:var(--alert-050)}
.note--gold{border-color:var(--accent);background:var(--accent-tint)}
.note :last-child{margin-bottom:0}
.note h3{font-size:var(--fs-xl);margin-bottom:var(--s2)}
.note p{color:var(--ink)}

/* ---------------------------------------------------------------- articles */
.crumbs{font-size:var(--fs-xs);color:var(--ink-3);padding:var(--s3) 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.crumbs span[aria-current]{color:var(--ink-2);font-weight:600}
.artcl__deck{font-size:var(--fs-lg);line-height:1.6;color:var(--ink-2);max-width:58ch}
.artcl__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 var(--s4);max-width:none}
.artcl__body{max-width:min(68ch,100%)}
.artcl__body h2{font-size:var(--fs-xl);margin:var(--s5) 0 var(--s2)}
.artcl__body h2:first-child{margin-top:0}
.artcl__body p{font-size:var(--fs-lg);line-height:1.75}
.artcl__body ul{font-size:var(--fs-base);line-height:1.7;padding-left:0;list-style:none}
.artcl__body ul li{position:relative;padding-left:1.7rem;margin-bottom:.8rem}
.artcl__body ul li::before{content:"";position:absolute;left:.1rem;top:.66em;
  width:.55rem;height:.55rem;border-radius:50%;background:var(--brand)}
.artcl__body ul li strong{color:var(--brand-deep)}
.artcl__body .note{margin-top:var(--s5)}
.sources{margin-top:var(--s5);padding:var(--s4);background:var(--surface-2);border-radius:var(--r2)}
.sources h2{font-size:var(--fs-lg);margin-bottom:var(--s2)}
.sources p{font-size:var(--fs-sm);color:var(--ink-2)}
.sources ol{font-size:var(--fs-sm);color:var(--ink-2);padding-left:1.3em}
.sources li{margin-bottom:.6rem}
.sources a{word-break:break-word}
.src-date{color:var(--ink-3);white-space:nowrap}

/* ---------------------------------------------------------------- site index */
.sm{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  margin-top:var(--s4)}
.sm__group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4)}
.sm__group h2{font-size:var(--fs-lg);padding-bottom:var(--s2);margin-bottom:var(--s2);
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.sm__group h2 span{font-size:var(--fs-2xs);color:var(--ink-3);font-family:var(--sans);font-weight:650}
.sm__group ul{list-style:none;padding:0;margin:0}
.sm__group li{margin:0}
.sm__group a{display:block;padding:.5rem 0;font-size:var(--fs-sm);color:var(--ink-2);text-decoration:none}
.sm__group a:hover{color:var(--brand)}

/* ---------------------------------------------------------------- subscribe */
.float-sub{position:fixed;right:clamp(.75rem,2vw,1.75rem);z-index:94;
  bottom:calc(clamp(.75rem,2vw,1.75rem) + var(--cookie-h,0px) + var(--dock-h,0px));
  width:min(23rem,calc(100% - 1.5rem));display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;
  transition:bottom .3s var(--ease)}
.float-sub__tab{display:inline-flex;align-items:center;gap:.55rem;min-height:3.2rem;
  background:var(--brand);color:var(--on-brand);border:0;cursor:pointer;padding:.9rem 1.4rem;
  border-radius:var(--r-pill);font:640 var(--fs-sm)/1.2 var(--sans);box-shadow:var(--sh-3);
  transition:transform .18s var(--ease),background .18s}
.float-sub__tab:hover{background:var(--brand-hover);transform:translateY(-2px)}
.float-sub__panel{position:relative;width:100%;display:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r3);padding:var(--s4);box-shadow:var(--sh-3);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  max-height:calc(100vh - 9rem - var(--cookie-h,0px) - var(--dock-h,0px))}
@supports (height:100dvh){.float-sub__panel{
  max-height:calc(100dvh - 9rem - var(--cookie-h,0px) - var(--dock-h,0px))}}
.float-sub[data-open=true] .float-sub__panel{display:block;animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.float-sub__panel h3{font-size:var(--fs-xl);margin-bottom:.4rem}
.float-sub__panel>p{font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:var(--s3)}
.float-sub__panel .u-form{grid-template-columns:1fr}
.float-sub__close{position:absolute;top:.5rem;right:.6rem;background:none;border:0;cursor:pointer;
  min-width:2.75rem;min-height:2.75rem;font-size:1.35rem;line-height:1;color:var(--ink-3)}
.float-sub__close:hover{color:var(--brand)}
.consent{display:flex;gap:.65rem;align-items:flex-start;font:400 var(--fs-xs)/1.6 var(--sans);color:var(--ink-2)}
.consent input{width:1.2rem;height:1.2rem;min-height:0;flex:0 0 auto;margin-top:.2rem;accent-color:var(--brand)}

/* ---------------------------------------------------------------- dock + consent */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;gap:.6rem;padding:.65rem;max-width:100%;
  padding-bottom:calc(.65rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);transform:translateY(110%);transition:transform .32s var(--ease)}
.dock[data-show=true]{transform:none}
.dock .btn{flex:1;min-height:3.1rem;padding:.7rem .6rem;font-size:var(--fs-xs)}
@media (max-width:760px){
  .dock{display:flex}
  .float-sub{width:auto}
  .float-sub__tab{padding:0;width:3.4rem;min-height:3.4rem;justify-content:center;font-size:1.15rem}
  .float-sub__tab .txt{display:none}
  .float-sub[data-open=true]{width:min(23rem,calc(100% - 1.5rem))}
}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:92;display:none;flex-wrap:wrap;gap:var(--s3);max-width:100%;
  align-items:center;justify-content:center;padding:var(--s3);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--surface);color:var(--ink-2);border-top:1px solid var(--line);box-shadow:var(--sh-3)}
.cookie[data-show=true]{display:flex}
.cookie p{margin:0;max-width:56ch;font-size:var(--fs-xs)}
.cookie strong{color:var(--ink)}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--surface-2);color:var(--ink-2);padding:var(--s6) 0 var(--s4);
  font-size:var(--fs-sm);border-top:1px solid var(--line)}
.ftr::after{display:none}
.ftr__h{font-family:var(--sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 var(--s2);line-height:1.3}
.ftr p{color:var(--ink-2)}
.ftr a{color:var(--ink-2);text-decoration:none;display:block;padding:.36rem 0}
.ftr a:hover{color:var(--brand)}
.ftr .brand b{color:var(--brand-deep)}
.ftr .brand__tag{color:var(--ink-3)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s3);
  font-size:var(--fs-xs);color:var(--ink-3)}
.ftr__bot a{display:inline;padding:0}

/* ---------------------------------------------------------------- motion + print */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}
@media print{
  .hdr,.topbar,.nav,.float-sub,.cookie,.dock,.scrim,.btn{display:none!important}
  body{background:#fff;color:#000}
  a[href^="/"]::after{content:" (ubufazi.co.za" attr(href) ")";font-size:.85em;color:#555}
}

/* ---------------------------------------------------------------- touch sizing
   Every real control clears 44px on a phone. Measured, not assumed. */
@media (pointer:coarse),(max-width:760px){
  .ftr a{min-height:44px;display:flex;align-items:center}
  .ftr__bot a{min-height:0;display:inline}
  .topbar a{display:inline-flex;align-items:center;min-height:44px}
  .sm__group a{min-height:44px;display:flex;align-items:center}
  .crumbs a{display:inline-block;padding:.3rem 0}
  .brand{min-height:44px}
}
@media (pointer:coarse),(max-width:760px){
  /* Disclosure toggles are standalone controls, not in-sentence links. */
  details summary{min-height:44px;display:flex;align-items:center}
  .chart details summary{padding:.5rem 0}
  .hero-search .hint a{display:inline-block;padding:.2rem 0}
}

/* ---------------------------------------------------------------- tables on phones
   Nothing on this site scrolls sideways. Below the breakpoint each row becomes a
   small card and each cell carries its column label, so the table is read down
   the page like everything else. */
@media (max-width:900px){
  .u-table{overflow-x:visible;border:0;background:transparent;border-radius:0}
  .u-table table{min-width:0;width:100%;display:block}
  /* Kept in the accessibility tree (every cell also carries data-label) but
     given no width, so the header row cannot report itself wider than the screen. */
  .u-table thead,.u-table thead tr,.u-table thead th{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0}
  .u-table caption{padding:0 0 var(--s2);font-size:var(--fs-sm)}
  .u-table tbody{display:block}
  .u-table tbody tr{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r2);padding:var(--s3);margin-bottom:var(--s2)}
  .u-table tbody tr:hover{background:var(--surface)}
  .u-table td{display:grid;grid-template-columns:minmax(6.5rem,38%) 1fr;gap:var(--s2);
    align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--line);width:auto}
  .u-table td:last-child{border-bottom:0;padding-bottom:0}
  .u-table td:first-child{padding-top:0}
  .u-table td::before{content:attr(data-label);font-size:var(--fs-2xs);font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
  .u-table td[data-label=""]::before,.u-table td:not([data-label])::before{display:none}
  .u-table td:not([data-label]){display:block}
  /* charts keep their own shape but must not overflow */
  .chart svg{max-width:100%}
}

@media (max-width:900px){
  /* long facility names and service lists must wrap inside a stacked row */
  .u-table tbody tr,.u-table td{min-width:0;max-width:100%}
  .u-table td>*,.u-table td{overflow-wrap:anywhere;word-break:normal}
  .u-table td{grid-template-columns:minmax(5.5rem,34%) minmax(0,1fr)}
}