/* Proxima Nova — drop the TTFs into assets/fonts/ and these light up automatically.
   Until then everything falls back to Mulish, which is metrically close. */
@font-face{
  font-family:"Proxima Nova"; font-style:normal; font-weight:400; font-display:swap;
  src:local("Proxima Nova"),
      url("fonts/ProximaNova-Regular.ttf") format("truetype"),
      url("fonts/ProximaNova-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Proxima Nova"; font-style:normal; font-weight:600; font-display:swap;
  src:local("Proxima Nova Semibold"),
      url("fonts/ProximaNova-Semibold.ttf") format("truetype"),
      url("fonts/ProximaNova-Semibold.woff2") format("woff2");
}
@font-face{
  font-family:"Proxima Nova"; font-style:normal; font-weight:700; font-display:swap;
  src:local("Proxima Nova Bold"),
      url("fonts/ProximaNova-Bold.ttf") format("truetype"),
      url("fonts/ProximaNova-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"Proxima Nova"; font-style:normal; font-weight:800; font-display:swap;
  src:local("Proxima Nova Extrabold"),
      url("fonts/ProximaNova-Extrabold.ttf") format("truetype"),
      url("fonts/ProximaNova-Bold.ttf") format("truetype");
}

:root{
  /* exact hexes sampled from the official Kagiso Trust logo SVG */
  --primary:#B95630;   /* terracotta */
  --accent:#D5A62A;    /* mustard */
  --support:#65735C;   /* sage */
  --olive:#5F5A30;
  --brown:#64412F;
  --espresso:#5C382C;
  --ink:#2A2622; --paper:#F6F1E7; --chalk:#FFFDF7;
  --dark:#211D1A;      /* masthead strip — warm near-black, not cold */
  --dark-panel:#2A2521;
  --rule:rgba(42,38,34,.14); --rule-soft:rgba(42,38,34,.07);
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --display:"Proxima Nova","Mulish",system-ui,sans-serif;
  --body:"Proxima Nova","Mulish",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:28px 28px;
}
h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0;font-weight:700}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--support)}
.card{background:var(--chalk);border:1.5px solid var(--ink);box-shadow:6px 6px 0 rgba(42,38,34,.08)}
.mono{font-family:var(--mono)} .muted{color:rgba(42,38,34,.55)}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* dark masthead strip — both white KT/UJ logos sit on this */
.masthead{background:var(--dark);color:var(--chalk);border-bottom:3px solid var(--accent)}
.masthead .logos img{object-fit:contain;display:block}
.masthead .kt-logo{height:34px}
.masthead .uj-logo{height:52px;border-radius:4px}
.masthead .sep{width:1px;background:rgba(255,253,247,.18)}
.masthead .kicker{color:var(--accent)}
.masthead h1{color:var(--chalk)}

.btn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);padding:10px 14px;border-radius:2px;cursor:pointer;
  transition:background .15s,color .15s;text-decoration:none;display:inline-block}
.btn:hover{background:var(--ink);color:var(--chalk)}
.btn.on,.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--chalk)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input,textarea{font-family:var(--body);font-size:15px;padding:11px 12px;border:1.5px solid var(--rule);border-radius:2px;
  background:var(--chalk);color:var(--ink);width:100%}
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(42,38,34,.55);margin-bottom:6px}
.field{margin-bottom:16px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--support);
  color:var(--chalk);padding:4px 8px;border-radius:2px;display:inline-block}
.dot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.track{height:26px;background:rgba(42,38,34,.06);border-radius:2px;overflow:hidden}
.fill{height:100%;width:0;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;min-height:300px;padding:24px 6px}
.cloud span{font-family:var(--display);font-weight:700;line-height:1.05;white-space:nowrap;animation:pop .45s backwards}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}