@font-face{font-family:"Oswald";src:url(/fonts/oswald-var.woff2) format("woff2");font-weight:200 700;font-display:swap}@font-face{font-family:"Barlow";src:url(/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:"Barlow";src:url(/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:"Roboto Mono";src:url(/fonts/robotomono-var.woff2) format("woff2");font-weight:100 700;font-display:swap}
.kemet-governance{--kg-gold:#C9A227;--kg-yellow:#E8C765;--kg-ink:#050608;--kg-white:#F2EDE3;--kg-muted:#A9A396;color:var(--kg-white);font-family:"Barlow",Arial,sans-serif;background:var(--kg-ink);position:relative;overflow:hidden;isolation:isolate;width:100%;box-sizing:border-box}
.kemet-governance *{box-sizing:border-box}
.kemet-governance .kg-section{position:relative;padding:clamp(24px,4.5vw,64px);z-index:1}
.kemet-governance .kg-header{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:35px}
.kemet-governance .kg-eyebrow{display:flex;align-items:center;gap:22px;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--kg-gold);margin:0 0 15px}
.kemet-governance .kg-eyebrow:after{content:'';height:1px;width:80px;background:var(--kg-gold)}
/* shared section-heading contract - see kig-sections.css .why-kig h2 */
.kemet-governance h2{font-family:"Oswald","Arial Narrow",sans-serif;font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.018em;line-height:.94;margin:0;color:var(--kg-white)}
.kemet-governance .kg-intro{font-size:16px;line-height:1.6;color:var(--kg-muted);margin:8px 0 0;max-width:470px}
.kemet-governance .kg-oversight{position:relative;text-align:center;color:var(--kg-yellow);font-size:14px;letter-spacing:.065em;height:40px;margin:0 20px 14px;display:flex;align-items:flex-start;gap:14px}
.kemet-governance .kg-oversight:before,.kemet-governance .kg-oversight:after{content:'';height:16px;border-top:1px solid var(--kg-gold);flex:1;margin-top:8px}
.kemet-governance .kg-oversight:before{border-left:1px solid var(--kg-gold)}.kemet-governance .kg-oversight:after{border-right:1px solid var(--kg-gold)}
.kemet-governance .kg-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;--kg-progress:0%;--kg-y:24px}
.kemet-governance .kg-line{position:absolute;left:24px;right:24px;top:23px;height:1px;background:#8A6E1455;pointer-events:none}
.kemet-governance .kg-line-fill{height:100%;width:var(--kg-progress);background:var(--kg-gold);box-shadow:0 0 9px #C9A22766;position:relative}
.kemet-governance .kg-line-fill:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;right:0;top:-2px;background:var(--kg-yellow);box-shadow:0 0 12px var(--kg-gold)}
.kemet-governance .kg-step{position:relative;min-width:0}
.kemet-governance .kg-number{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid #F2EDE3;background:var(--kg-ink);color:var(--kg-white);font-family:"Oswald","Arial Narrow",sans-serif;font-size:26px;cursor:pointer;transition:background .35s,color .35s,border-color .35s;z-index:1;padding:0}
.kemet-governance .kg-step.is-active .kg-number{background:var(--kg-yellow);border-color:var(--kg-yellow);color:#050608;outline:1px solid var(--kg-gold);outline-offset:5px;box-shadow:0 0 22px #C9A22725}
.kemet-governance .kg-step.is-done .kg-number{border-color:var(--kg-gold);color:var(--kg-yellow)}
.kemet-governance .kg-step h3{font-family:"Oswald","Arial Narrow",sans-serif;font-size:22px;font-weight:700;line-height:1.18;color:var(--kg-white);margin:18px 0 8px;transition:color .35s}
.kemet-governance .kg-step.is-active h3{color:var(--kg-yellow)}
.kemet-governance .kg-step p{font-size:14px;line-height:1.55;color:var(--kg-muted);margin:0;max-width:245px}
.kemet-governance .kg-network{position:absolute;width:65%;height:100%;right:-15%;top:0;opacity:.24;pointer-events:none;color:var(--kg-gold);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.kemet-governance .kg-network svg{width:100%;height:100%;display:block}
.kemet-governance .kg-tools{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.kemet-governance .kg-tools p{font-size:12px;color:var(--kg-muted);margin:0;letter-spacing:.02em}
.kemet-governance .kg-controls{display:flex;gap:10px}
.kemet-governance .kg-control{font-family:"Barlow",Arial,sans-serif;font-size:13px;color:var(--kg-yellow);border:1px solid #C9A22777;background:transparent;padding:9px 16px;cursor:pointer;border-radius:0}
.kemet-governance button:focus-visible{outline:2px solid white;outline-offset:6px}
.kemet-governance .kg-control:hover{background:#C9A22718}
@media(max-width:760px){.kemet-governance .kg-header{gap:24px;grid-template-columns:1fr;margin-bottom:28px}.kemet-governance h2{font-size:48px}.kemet-governance .kg-intro{max-width:100%;margin-top:0}.kemet-governance .kg-track{display:flex;flex-direction:column;gap:28px}.kemet-governance .kg-step{display:grid;grid-template-columns:48px 1fr;column-gap:24px}.kemet-governance .kg-step h3{margin:0 0 7px}.kemet-governance .kg-step p{max-width:none}.kemet-governance .kg-line{top:24px;left:23px;right:auto;bottom:24px;width:1px;height:auto}.kemet-governance .kg-line-fill{width:1px;height:var(--kg-progress)}.kemet-governance .kg-line-fill:after{right:-2px;top:auto;bottom:0}.kemet-governance .kg-oversight{margin:0 0 18px;height:auto;justify-content:flex-start}.kemet-governance .kg-oversight:before{flex:0 0 20px;border-left:0}.kemet-governance .kg-oversight:after{border-right:0}.kemet-governance .kg-network{width:140%;right:-70%;opacity:.15}}
@media(prefers-reduced-motion:reduce){.kemet-governance .kg-number,.kemet-governance h3{transition:none}}

.kemet-governance{background:#050608;background-image:radial-gradient(ellipse at 88% 52%,rgba(228,178,67,.075),transparent 65%),linear-gradient(135deg,#14100A,#0B0906)}
.kemet-governance .kg-network{inset:0;width:100%;height:100%;right:0;top:0;opacity:.7;mask-image:none;-webkit-mask-image:none;background-image:linear-gradient(90deg,#050608 0%,rgba(5,6,8,.97) 35%,rgba(5,6,8,.7) 62%,rgba(5,6,8,.1) 100%),url("images/governance-background.svg");background-repeat:no-repeat;background-position:center center,right center;background-size:100% 100%,cover}
.kemet-governance .kg-section{background:transparent}
.kemet-governance .kg-line{background:rgba(237,200,102,.26)}
.kemet-governance .kg-number{border-color:#C9A227;color:#E8C765;background:#050608}
.kemet-governance .kg-step.is-active .kg-number{background:#E8C765;color:#050608;border-color:#E8C765;box-shadow:0 0 22px rgba(228,178,67,.25)}
.kemet-governance .kg-eyebrow,.kemet-governance .kg-step.is-done h3{color:#C9A227}
.kemet-governance .kg-oversight{color:#E8C765}
.kemet-governance 
@media(max-width:760px){.kemet-governance .kg-network{inset:0;width:100%;height:100%;opacity:.5;background-position:center,right bottom;background-size:100% 100%,auto 65%;background-image:linear-gradient(90deg,rgba(5,6,8,.97),rgba(5,6,8,.6)),url("images/governance-background.svg")}}

/* ==================================================================
   Pinned scroll ("our process" behaviour)
   The section sticks to the viewport while the page scrolls THROUGH
   .kg-pin-track; that travel is what advances the stages 1 -> 4, so the
   reader moves sideways along the timeline instead of down the page.

   .kg-pin-track's height IS the scroll budget: 300vh gives roughly 65vh of
   scrolling per stage. Shorten it to make the sweep quicker.

   Deliberately disabled in two cases:
   - prefers-reduced-motion: pinning holds the page against the reader's own
     scrolling, which is exactly the kind of thing that setting asks us not
     to do. The section then behaves as a normal band.
   - <=760px: the governance CSS stacks the four stages vertically there, and
     a stack taller than the viewport cannot be pinned without clipping.
   In both cases the track collapses to auto height and the driver falls back
   to its viewport-relative progress, so the stages still advance on scroll.
   ================================================================== */
.kg-pin-track{position:relative;height:300vh;}
.kg-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;}
/* Fill the pinned viewport. At 588px in a 940px pin the band floated with
   ~176px of flat --ink above and below it, which reads as a black gap around
   the section while it is pinned. Filling the height means the band's own
   background (its warm radial) covers the whole screen instead, and the
   content centres inside it. */
.kg-pin > .kemet-governance{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;}

@media (prefers-reduced-motion:reduce){
  .kg-pin-track{height:auto;}
  .kg-pin{position:static;height:auto;display:block;}
}
@media (max-width:760px){
  .kg-pin-track{height:auto;}
  .kg-pin{position:static;height:auto;display:block;}
}

/* The section rail (fixed index down the left margin of the host page) is
   shown at >=1650px and occupies the first 104px. The band's own 64px padding
   put the eyebrow, headline and stage 1 underneath it. Clear the rail at the
   same breakpoint the rail itself uses; below that there is no rail and the
   padding stays as designed. */
@media (min-width:1650px){
  /* must carry the .kemet-governance scope: every other rule in this file
     was rewritten to .kemet-governance .kg-section (0,2,0), so a bare
     .kg-section (0,1,0) loses on specificity no matter where it sits. */
  .kemet-governance .kg-section{padding-left:clamp(128px,7.2vw,160px);}
}

/* ==================================================================
   LIGHT THEME
   .kemet-governance lives inside .proc-governance, which preview-v3.html
   deliberately re-pins to the DARK token values even when
   html[data-theme="light"] is set (it is one of that page's "dark
   islands" — see its own CSS comment above :root[data-theme="light"]
   .proc-governance). That means var(--gold)/var(--ink)/etc, as inherited
   here, stay dark on purpose and cannot be used to flip this component.
   Instead we key off the [data-theme="light"] attribute on <html>
   directly (still visible to a descendant-combinator selector) and
   hardcode this band's own light values to match the page's light
   palette (--ink:#E4DCC9, --sand:#16181C, --sand-dim:#464A4F,
   --gold:#6B5320, --gold-lit:#4A3A10, --gold-deep:#A98C4E, --paper
   unchanged at #FBF8F1) — every value below is copied from those tokens,
   not invented. Dark mode (no attribute) is untouched: nothing here
   changes any rule above, it only adds new, higher-specificity rules
   that apply solely under [data-theme="light"].

   NOTE: every rule must be written as
   "[data-theme="light"] .kemet-governance .kg-*", never a bare
   ".kg-*" — every selector above is scoped ".kemet-governance .kg-*"
   (specificity 0,2,0), so anything less specific silently loses.
   ================================================================== */

/* Local tokens: most of the var()-driven rules above (eyebrow text,
   eyebrow underline, oversight braces, line-fill + its travelling dot,
   is-done number border/text, is-active outline, h2/h3/copy colour,
   the base component colour) recompute automatically once these are
   redefined — no separate rule needed for them. */
[data-theme="light"] .kemet-governance{
  --kg-gold:#6B5320;
  --kg-yellow:#4A3A10;
  --kg-ink:#E4DCC9;
  --kg-white:#16181C;
  --kg-muted:#464A4F;
}

/* The lead paragraph sits over the background line-art, where the ground is
   at its lightest and busiest, so the shared muted grey (5.5:1 on flat
   ground, less over the art) reads washed out. Darkened for this paragraph
   only - still lighter than the h2 above it, so the hierarchy holds. */
[data-theme="light"] .kemet-governance .kg-intro{color:#33373D;}

/* Ground + background art. Fades the same SVG from the light ink colour
   instead of near-black, and turns the opacity down so the gold line-art
   doesn't fight the (now dark-on-light) copy. */
[data-theme="light"] .kemet-governance{
  background:#E4DCC9;
  background-image:radial-gradient(ellipse at 88% 52%,rgba(201,162,39,.09),transparent 65%),linear-gradient(135deg,#DCD3BD,#D2C8B0);
}
[data-theme="light"] .kemet-governance .kg-network{
  opacity:.32;
  background-image:linear-gradient(90deg,#E4DCC9 0%,rgba(228,220,201,.97) 35%,rgba(228,220,201,.72) 62%,rgba(228,220,201,.12) 100%),url("images/governance-background.svg");
}
@media(max-width:760px){
  [data-theme="light"] .kemet-governance .kg-network{
    opacity:.2;
    background-image:linear-gradient(90deg,rgba(228,220,201,.97),rgba(228,220,201,.6)),url("images/governance-background.svg");
  }
}

/* Timeline: dim backing line in gold-deep, gold-text glow tuned to match
   (both were hardcoded literals above and don't follow the token swap). */
[data-theme="light"] .kemet-governance .kg-line{background:rgba(201,162,39,.55)}
[data-theme="light"] .kemet-governance .kg-line-fill{box-shadow:0 0 9px rgba(201,162,39,.45)}

/* Step numbers: idle number was hardcoded to the dark ink/gold pairing
   above (border-color/color/background), so it needs a literal light
   override too — cream disc, gold-text border, 6.87:1. */
[data-theme="light"] .kemet-governance .kg-number{border-color:#6B5320;color:#6B5320;background:#FBF8F1}
/* Active step keeps the bright brand gold disc (decorative, not a text
   token) but swaps its on-gold text to the page's dark ink — 9:1 on
   #C9A227, comfortably over the 4.5:1 floor. */
[data-theme="light"] .kemet-governance .kg-step.is-active .kg-number{background:#C9A227;color:#16181C;border-color:#C9A227;box-shadow:0 0 22px rgba(201,162,39,.38)}

/* Eyebrow label + "done" heading and the oversight status line were also
   hardcoded above; repoint them at the light gold / light ink. */
[data-theme="light"] .kemet-governance .kg-eyebrow,
[data-theme="light"] .kemet-governance .kg-step.is-done h3{color:#6B5320}
/* Belt-and-braces: .kg-step.is-done .kg-number (line 21 above) is
   var(--kg-gold)/var(--kg-yellow)-driven and should already recompute
   from the light token redefinition, but it sits at the same specificity
   band as several other number rules; pin it explicitly so "done" steps
   are never ambiguous. */
[data-theme="light"] .kemet-governance .kg-step.is-done .kg-number{border-color:#6B5320;color:#4A3A10}
[data-theme="light"] .kemet-governance .kg-oversight{color:#16181C}
/* The active/done step headings are yellow (#E8C765 / #C9A227) and had NO
   light override, so they sat straight on cream at ~1.9:1. They keep the
   brand yellow and pick up the shared dark edge instead of being darkened. */
/* The BASE .kg-step h3 is --kg-white and had no light override at all, so
   inactive steps rendered white on cream at 1.37:1 - invisible. Inactive now
   reads as muted ink, which also restores the active/inactive distinction
   the dark theme has. Active and done take the display yellow. */
[data-theme="light"] .kemet-governance .kg-step h3{color:var(--mid-txt)}
[data-theme="light"] .kemet-governance .kg-step.is-active h3{color:var(--gold-display);text-shadow:var(--yellow-edge)}
[data-theme="light"] .kemet-governance .kg-step.is-done h3{color:var(--gold-display);text-shadow:var(--yellow-edge)}

/* Stage-control buttons: border/hover fill were hardcoded golds tuned for
   the dark ground; re-tune for the light one. */
[data-theme="light"] .kemet-governance .kg-control{border-color:rgba(201,162,39,.75)}
[data-theme="light"] .kemet-governance .kg-control:hover{background:rgba(201,162,39,.20)}

/* ---- light mode: keep the band LIGHT, darken the type ----
   An earlier revision pinned this whole band to ink so its white heading would
   read. That was backwards: the ask is a light band with dark type. The light
   block above already sets --kg-white:#16181C, so the heading and step titles
   go dark on their own. Only the yellow needed attention - #E8C765 measures
   ~1.2:1 on this ground, so active/done steps take --gold-display (#96760D),
   the brightest yellow that clears the 3:1 large-text floor on cream. */
[data-theme="light"] .kemet-governance .kg-step.is-active h3,
[data-theme="light"] .kemet-governance .kg-step.is-done h3{color:var(--gold-display)}