/* ============================================================
   Kaiārahi — shared design system (redesign v2, pounamu palette)
   Source of truth: design_handoff_kaiarahi_redesign / Design System page.
   Every rebuilt page links this once; page-specific CSS stays inline.
   ============================================================ */

:root{
  /* Pounamu greens */
  --pine:#071D15;        /* deepest ground / footers */
  --kauri:#0C3025;       /* primary dark surface */
  --rakau:#12442F;       /* hero gradient top */
  --pounamu:#14513C;     /* dark card border */
  --jade:#2F6B4F;        /* headings on cream */
  --greenstone:#3FB98A;  /* bright accent / gradient start */
  --mist:#8FD9B8;        /* light text on dark */
  /* Gold & kōwhai */
  --kowhai:#D4A94E;      /* primary button fill */
  --gold-light:#E7C877;  /* accent text / dial end */
  --antique:#C79A54;     /* gradient / icon fill */
  --clay:#A07D3C;        /* mono kicker labels on cream */
  /* Cream & neutrals */
  --cream:#F7F2E7;       /* page background */
  --cream-card:#FBF8F0;  /* card surface */
  --sand:#F1E9D7;        /* alternating section band */
  --border:#E7DCC4;      /* card borders on cream */
  --ink:#16241C;         /* primary text */
  --ink-soft:#5C5648;    /* body text */
  /* Type */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --accent:'Cormorant Garamond',Georgia,serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --reading:'Newsreader',Georgia,serif;
  /* Layout */
  --max:1160px; --prose:680px;
  --padx:clamp(20px,5vw,72px);
  --pady:clamp(48px,10vw,140px);
  /* Effects */
  --grad:linear-gradient(100deg,#3FB98A,#E7C877);
  --lift-shadow:0 26px 50px -28px rgba(45,32,16,.5);
  --gold-glow:0 14px 34px -14px rgba(212,169,78,.9);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--kowhai);color:var(--kauri)}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--padx)}
.prose{max-width:var(--prose)}

/* --- type helpers --- */
.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
.kicker.on-dark{color:var(--gold-light)}
h1.big{font-family:var(--display);font-weight:700;font-size:clamp(38px,7vw,96px);line-height:.98;letter-spacing:-.025em}
h2.sec{font-family:var(--display);font-weight:700;font-size:clamp(26px,5vw,52px);line-height:1.04;letter-spacing:-.02em}
h3.card-t{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.accent-quote{font-family:var(--accent);font-style:italic;font-weight:500;font-size:clamp(22px,3.6vw,34px);color:var(--jade)}
.sub{color:var(--ink-soft);font-size:18px;max-width:var(--prose)}
.num-display{font-family:var(--display);font-weight:800;letter-spacing:-.02em}

/* gold shimmer keyword — max one per screen */
@keyframes kaiShimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}
.shimmer{background:linear-gradient(100deg,#E7C877,#3FB98A,#E7C877);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:kaiShimmer 5s linear infinite}

/* kupu gloss */
.kupu{border-bottom:1px dotted #A9927A;cursor:help}

/* --- sections --- */
section.band{padding:var(--pady) 0}
section.band.sand{background:var(--sand)}
section.band.dark{background:var(--kauri);color:var(--cream)}
section.band.pine{background:radial-gradient(120% 120% at 85% -10%,var(--rakau),#0B2C20 55%,var(--pine));color:var(--cream)}

/* --- buttons --- */
.btn{display:inline-block;font:700 15px/1 var(--body);padding:15px 28px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--kowhai);color:var(--kauri);box-shadow:var(--gold-glow)}
.btn-pine{background:var(--kauri);color:var(--gold-light)}
.btn-outline{background:transparent;border:1px solid #C6B994;color:var(--ink);font-weight:600;padding:14px 27px}
.on-dark .btn-outline,.band.dark .btn-outline,.band.pine .btn-outline{border-color:rgba(231,200,119,.5);color:var(--gold-light)}

/* --- pills & chips --- */
.pill-founding{display:inline-block;background:var(--kowhai);color:var(--kauri);font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.chip{display:inline-block;background:#E6F1E8;border:1px solid #CFE4D3;color:var(--jade);font-size:12.5px;padding:7px 12px;border-radius:999px}

/* --- cards --- */
.card{background:var(--cream-card);border:1px solid var(--border);border-radius:20px;padding:26px 28px;transition:transform .25s,box-shadow .25s}
.card.lift:hover{transform:translateY(-8px);box-shadow:var(--lift-shadow)}
.card.pine{background:var(--kauri);border-color:var(--pounamu);color:var(--cream)}
.card.pine.lift:hover{box-shadow:0 26px 50px -26px rgba(0,0,0,.65)}

/* --- reveal on scroll --- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.shimmer{animation:none}}

/* --- charts (shared geometry) --- */
.kai-bar-track{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:visible}
.kai-bar-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#3FB98A,#E7C877);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.kai-bar-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--cream);opacity:.7}

/* ============================================================
   Global nav (gnav) — redesigned, cream, sticky.
   Markup is static on every page; nav.js adds active state,
   scroll shadow, and the mobile overlay behaviour.
   ============================================================ */
.gnav-skip{position:absolute;left:-9999px;top:0;background:var(--kauri);color:var(--gold-light);padding:10px 16px;border-radius:0 0 10px 0;z-index:100}
.gnav-skip:focus{left:0}
header.gnav{position:sticky;top:0;z-index:40;background:rgba(247,242,231,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(198,185,148,.6);transition:box-shadow .35s}
header.gnav .row{max-width:var(--max);margin:0 auto;padding:0 var(--padx);display:flex;align-items:center;justify-content:space-between;height:70px}
header.gnav.scrolled{box-shadow:0 6px 24px -18px rgba(0,0,0,.4)}
header.gnav .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
header.gnav .brand img{height:34px;width:auto}
header.gnav .primary{display:flex;gap:26px;align-items:center;font:500 14.5px var(--body)}
header.gnav .primary a{color:var(--ink-soft);opacity:.9;transition:color .18s}
header.gnav .primary a:hover{color:var(--ink)}
header.gnav .primary a[aria-current="page"]{color:var(--jade);font-weight:600}
header.gnav .actions{display:flex;gap:18px;align-items:center;font:600 14.5px var(--body)}
header.gnav .actions .signin{color:var(--ink-soft)}
header.gnav .actions .signin:hover{color:var(--ink)}
header.gnav .actions .cta{display:inline-flex;align-items:center;gap:7px;background:var(--kowhai);color:var(--kauri);font-weight:700;padding:10px 18px;border-radius:999px;box-shadow:0 6px 18px -8px rgba(212,169,78,.9);transition:transform .18s}
header.gnav .actions .cta:hover{transform:translateY(-2px)}
header.gnav .burger{display:none;background:none;border:0;cursor:pointer;padding:10px;color:var(--ink)}
header.gnav .burger svg{width:24px;height:24px;display:block}
@media(max-width:920px){
  header.gnav .primary{display:none}
  header.gnav .actions .signin{display:none}
  header.gnav .burger{display:block}
}
/* mobile overlay */
.gnav-overlay{position:fixed;inset:0;background:var(--pine);color:var(--cream);z-index:60;display:none;flex-direction:column;padding:20px var(--padx) 32px;overflow:auto}
.gnav-overlay.open{display:flex}
body.gnav-lock{overflow:hidden}
.gnav-overlay .otop{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.gnav-overlay .obrand{font-family:var(--display);font-weight:700;font-size:24px;color:var(--cream)}
.gnav-overlay .oclose{background:none;border:0;color:var(--mist);cursor:pointer;padding:8px}
.gnav-overlay .oclose svg{width:26px;height:26px;display:block}
.gnav-overlay .omenu{display:flex;flex-direction:column}
.gnav-overlay .omenu a{font-family:var(--display);font-weight:700;font-size:clamp(26px,7vw,40px);padding:12px 0;color:var(--cream);border-bottom:1px solid rgba(143,217,184,.14)}
.gnav-overlay .omenu a[aria-current="page"]{color:var(--gold-light)}
.gnav-overlay .osignin{margin-top:26px;font:600 17px var(--body);color:var(--mist)}
.gnav-overlay .octa{margin-top:14px;align-self:flex-start;background:var(--kowhai);color:var(--kauri);font-weight:700;padding:14px 24px;border-radius:999px;box-shadow:var(--gold-glow)}

/* ============================================================
   Global footer
   ============================================================ */
footer.gfoot{background:var(--pine);color:#9FB3A6;padding:clamp(44px,7vw,72px) 0;font-size:14.5px}
footer.gfoot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer.gfoot .fmark{height:44px;width:auto;display:block;margin-bottom:14px}
footer.gfoot h4{font:500 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin-bottom:14px}
footer.gfoot a{display:block;padding:4px 0;color:#C3D2C6;transition:color .18s}
footer.gfoot a:hover{color:#fff}
footer.gfoot .fine{margin-top:36px;padding-top:22px;border-top:1px solid rgba(143,217,184,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#7E9385}
@media(max-width:760px){footer.gfoot .cols{grid-template-columns:1fr 1fr}}

/* nav — light product distinguisher (personal products | organisational) */
header.gnav .primary .gnav-div{width:1px;height:20px;background:var(--border,#D8D2C4);opacity:.75;flex:none}
.gnav-overlay .omenu .omenu-div{height:1px;background:var(--border,#D8D2C4);opacity:.6;margin:12px 2px}