/* Harmony Health of Delaware
   Shared stylesheet. Brand tokens are unchanged from the deployed site:
   the greens, gold, ivory and the Fraunces/Inter pairing are identical.
   Everything new here is layout, or a tint of a colour already in the brand. */

:root{
  /* brand, unchanged */
  --green:#1E5B3C;
  --green-2:#2E7D4F;
  --leaf:#3E9B57;
  --gold:#B8892E;
  --gold-ink:#7A5717;
  --navy:#12313F;
  --ivory:#F7F5EF;
  --paper:#FFFFFF;
  --ink:#1B2A22;
  --muted:#5F6E64;
  --border:#E4E7DD;
  --soft:#EFF2E9;
  /* derived tints of the same hues, used for section identity */
  --deep:#123B27;
  --wash-green:#E9F1EB;
  --wash-leaf:#EDF7EF;
  --wash-gold:#F8F1E1;
  --wash-navy:#E8EFF1;
  --shadow:0 1px 2px rgba(18,49,63,.05), 0 8px 24px rgba(18,49,63,.06);
  --shadow-lift:0 2px 4px rgba(18,49,63,.06), 0 18px 44px rgba(18,49,63,.11);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --side-w:266px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.18;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------------------------------------------------------------- SIDEBAR */
.side{
  position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:60;
  background:linear-gradient(176deg,var(--green) 0%,var(--deep) 78%);
  color:#DCE8DF;display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.07);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.side-brand{display:flex;align-items:center;gap:12px;padding:26px 22px 22px;border-bottom:1px solid rgba(255,255,255,.1)}
.side-brand img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:10px;padding:4px;flex:0 0 auto}
.side-brand>span{display:block;min-width:0}
.side-brand .bn{display:block;font-family:var(--serif);font-size:19px;font-weight:600;color:#fff;line-height:1.15}
.side-brand .bs{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:3px}

.side-nav{padding:16px 12px;flex:1 1 auto;overflow-y:auto}
.side-nav .navlbl{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600;padding:10px 12px 8px}
.side-nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
  color:#CFE0D4;font-size:14.5px;font-weight:500;text-decoration:none;
  border-left:3px solid transparent;margin-bottom:2px;transition:background .16s,color .16s;
}
.side-nav a .ni{width:19px;height:19px;flex:0 0 auto;opacity:.8}
.side-nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.side-nav a.is-active{background:rgba(255,255,255,.13);color:#fff;border-left-color:var(--gold);font-weight:600}
.side-nav a.is-active .ni{opacity:1}

.side-cta{margin:8px 12px 0;display:block;text-align:center;background:var(--gold);color:#fff;
  padding:12px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none}
.side-cta:hover{background:var(--gold-ink);text-decoration:none;color:#fff}
.side-cta.is-active{background:var(--gold-ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.side-foot{padding:18px 22px 22px;border-top:1px solid rgba(255,255,255,.1);font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.55)}
.side-foot b{display:block;color:rgba(255,255,255,.8);font-weight:600;font-size:12px;margin-bottom:3px}

/* mobile top bar */
.topbar{display:none;position:sticky;top:0;z-index:70;background:var(--green);
  align-items:center;justify-content:space-between;padding:11px 16px;box-shadow:0 2px 14px rgba(0,0,0,.14)}
.topbar .tb{display:flex;align-items:center;gap:10px}
.topbar img{width:34px;height:34px;background:#fff;border-radius:8px;padding:3px}
.topbar .bn{font-family:var(--serif);font-size:16px;color:#fff;font-weight:600}
.navtog{background:rgba(255,255,255,.14);border:0;color:#fff;width:40px;height:40px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.scrim{display:none;position:fixed;inset:0;background:rgba(10,30,20,.5);z-index:55}
.scrim.on{display:block}

/* ------------------------------------------------------------------- MAIN */
.main{margin-left:var(--side-w);min-height:100vh;display:flex;flex-direction:column}
.wrap{max-width:1080px;margin:0 auto;padding:0 44px;width:100%}
section{padding:74px 0}
section.tight{padding:56px 0}
section.paper{background:var(--paper);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
section.soft{background:var(--soft)}

/* ----------------------------------------------------------- PAGE HEADERS */
.phead{
  background:linear-gradient(150deg,var(--green) 0%,var(--deep) 88%);
  color:#fff;padding:64px 0 60px;position:relative;overflow:hidden;
}
.phead::after{
  content:"";position:absolute;right:-70px;top:-60px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(62,155,87,.34),rgba(62,155,87,0) 68%);
}
.phead .wrap{position:relative;z-index:2}
.phead .kick{color:var(--gold);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.phead h1{font-size:46px;color:#fff;margin:14px 0 0;max-width:20ch}
.phead .plede{font-size:18px;color:rgba(255,255,255,.83);margin-top:18px;max-width:66ch;line-height:1.62}

/* home hero */
.hero{background:linear-gradient(150deg,var(--green) 0%,var(--deep) 88%);color:#fff;
  padding:88px 0 78px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;bottom:-160px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(62,155,87,.30),rgba(62,155,87,0) 70%)}
.hero .wrap{position:relative;z-index:2}
.hero .kick{color:var(--gold);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.hero h1{font-size:53px;color:#fff;margin:16px 0 0;max-width:17ch;line-height:1.1}
.hero .plede{font-size:18.5px;color:rgba(255,255,255,.85);margin-top:20px;max-width:60ch;line-height:1.62}
.hbtns{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}

/* ---------------------------------------------------------------- BUTTONS */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:9px;
  font-size:14.5px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:.16s}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-ink);color:#fff;text-decoration:none}
.btn-line{border-color:rgba(255,255,255,.42);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--deep);color:#fff;text-decoration:none}
.btn-ghost{border-color:var(--border);color:var(--green);background:var(--paper)}
.btn-ghost:hover{border-color:var(--green-2);color:var(--green);text-decoration:none}

/* --------------------------------------------------------- SECTION HEADS */
.kick{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--green-2);font-weight:600}
.kick.gold{color:var(--gold-ink)}
.shead{max-width:74ch}
.shead h2{font-size:34px;color:var(--navy);margin:12px 0 0}
.shead .sub{font-size:17px;color:var(--muted);margin-top:14px;max-width:70ch}
.gsub{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--green-2);font-weight:600;margin:52px 0 8px}

/* -------------------------------------------------------------- STAT ROW */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:40px;
  background:rgba(255,255,255,.16);border-radius:12px;overflow:hidden}
.statrow div{background:rgba(255,255,255,.07);padding:20px 18px}
.statrow b{display:block;font-family:var(--serif);font-size:29px;color:#fff;font-weight:600;line-height:1}
.statrow span{display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:7px;line-height:1.45}

/* ----------------------------------------------------------------- TILES */
.grid{display:grid;gap:20px;margin-top:38px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:26px 24px;
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tile .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--green);margin-bottom:15px}
.tile h3{font-size:18px;color:var(--navy);margin-bottom:9px}
.tile p{font-size:14.5px;color:var(--muted);line-height:1.62}
.tile .num{position:absolute;right:18px;top:12px;font-family:var(--serif);font-size:40px;
  font-weight:600;color:var(--wash-green);line-height:1;pointer-events:none}
.tile.a1{border-top:4px solid var(--green)} .tile.a1 .ic{background:var(--green)} .tile.a1 .num{color:var(--wash-green)}
.tile.a2{border-top:4px solid var(--leaf)}  .tile.a2 .ic{background:var(--leaf)}  .tile.a2 .num{color:var(--wash-leaf)}
.tile.a3{border-top:4px solid var(--gold)}  .tile.a3 .ic{background:var(--gold)}  .tile.a3 .num{color:var(--wash-gold)}
.tile.a4{border-top:4px solid var(--navy)}  .tile.a4 .ic{background:var(--navy)}  .tile.a4 .num{color:var(--wash-navy)}
.tile.wash1{background:var(--wash-green)} .tile.wash2{background:var(--wash-leaf)}
.tile.wash3{background:var(--wash-gold)}  .tile.wash4{background:var(--wash-navy)}
.tile .tag{display:inline-block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--gold-ink);background:var(--wash-gold);padding:4px 9px;border-radius:20px;margin-bottom:11px}

/* Tiles that are themselves links. Must not inherit the global anchor colour
   or underline, so every declaration below is deliberate. */
.link-tile{cursor:pointer}
.tile.capstone{padding:32px 34px}
.tile.capstone h3{font-size:22px}
.tile.capstone p{font-size:15.5px;max-width:72ch}
/* The capstone carries a3 (gold) AND wash3 (wash-gold background), so the
   inherited .a3 .num colour would be the same value as the card behind it.
   A translucent tint of the same gold keeps the numeral legible. */
.tile.capstone .num{font-size:64px;right:26px;top:16px;color:rgba(184,137,46,.26)}
a.tile{display:block;color:inherit;text-decoration:none}
a.tile:hover{text-decoration:none;color:inherit;border-color:var(--leaf)}
a.tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a.tile h3{transition:color .16s}
a.tile:hover h3{color:var(--green)}
.tile .more{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--green-2)}
.tile .more svg{transition:transform .18s}
a.tile:hover .more svg{transform:translateX(4px)}

/* ------------------------------------------------------------- FLOW / PRT */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.fstep{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:26px 24px;
  position:relative;box-shadow:var(--shadow)}
.fstep .fn{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;font-weight:600;margin-bottom:14px}
.fstep:nth-child(2) .fn{background:var(--leaf)}
.fstep:nth-child(3) .fn{background:var(--gold)}
.fstep h3{font-size:20px;color:var(--navy)}
.fstep .fw{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin:7px 0 10px}
.fstep p{font-size:14.5px;color:var(--muted);line-height:1.62}

/* ------------------------------------------------------------- STEPPER */
.steps{margin-top:38px;position:relative;padding-left:0}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;position:relative;padding-bottom:26px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:26px;top:56px;bottom:-4px;width:2px;background:var(--border)}
.step:last-child::before{display:none}
.sdot{width:54px;height:54px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;font-weight:600;
  position:relative;z-index:2;box-shadow:0 0 0 6px var(--ivory)}
.step:nth-child(2) .sdot{background:var(--green-2)}
.step:nth-child(3) .sdot{background:var(--leaf)}
.step:nth-child(4) .sdot{background:var(--gold)}
.sbody{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow)}
.sbody .sw{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.sbody h3{font-size:19px;color:var(--navy);margin:6px 0 9px}
.sbody p{font-size:14.5px;color:var(--muted);line-height:1.62}

/* ---------------------------------------------------------------- CALLOUT */
.callout{background:var(--wash-gold);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;
  padding:24px 26px;margin-top:34px}
.callout h3{font-size:17px;color:var(--navy);margin-bottom:8px}
.callout p{font-size:14.5px;color:var(--muted);line-height:1.66}
.callout.green{background:var(--wash-green);border-left-color:var(--green)}
.callout.leaf{background:var(--wash-leaf);border-left-color:var(--leaf)}

.quote{font-family:var(--serif);font-size:30px;line-height:1.34;color:var(--navy);max-width:22ch;margin:0}
.two{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.prose p{font-size:16px;color:var(--muted);line-height:1.75;margin-top:16px}
.prose p:first-child{margin-top:0}
.prose p.big{font-size:18px;color:var(--ink)}

/* ------------------------------------------------------------ STATUS LIST */
.status{margin-top:34px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow)}
.srow{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 24px;border-bottom:1px solid var(--border);align-items:start}
.srow:last-child{border-bottom:0}
.badge{display:inline-block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:20px;white-space:nowrap}
.badge.ok{background:var(--wash-green);color:var(--green)}
.badge.prep{background:var(--wash-gold);color:var(--gold-ink)}
.badge.pend{background:var(--wash-navy);color:var(--navy)}
.srow p{font-size:14.5px;color:var(--muted);line-height:1.6}
.srow b{color:var(--ink);font-weight:600}

/* -------------------------------------------------------------------- FAQ */
.faq{margin-top:34px}
.faq details{background:var(--paper);border:1px solid var(--border);border-radius:12px;margin-bottom:11px;
  box-shadow:var(--shadow);overflow:hidden}
.faq summary{cursor:pointer;padding:19px 54px 19px 24px;font-family:var(--serif);font-size:17.5px;
  color:var(--navy);font-weight:600;position:relative;list-style:none;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:22px;color:var(--gold);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{background:var(--wash-green)}
.faq p{padding:4px 26px 22px;font-size:15px;color:var(--muted);line-height:1.72}

/* ------------------------------------------------------------------ PEOPLE */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.pcard{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow)}
.pcard .av{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:15px}
.pcard h3{font-size:17px;color:var(--navy)}
.pcard .role{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin:7px 0 10px}
.pcard p{font-size:14px;color:var(--muted);line-height:1.6}

.board{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:22px}
.bcard{background:var(--paper);border:1px solid var(--border);border-radius:13px;padding:22px 13px;
  text-align:center;box-shadow:var(--shadow);transition:transform .18s}
.bcard:hover{transform:translateY(-3px)}
.bcard.chair{border-top:3px solid var(--gold)}
.bcard .mono{width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:600}
.bcard.chair .mono{background:var(--gold-ink)}
.bcard h3{font-size:14px;color:var(--navy);line-height:1.3}
.bcard .role{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-top:6px}

/* --------------------------------------------------------------- ORG CHART */
.org{margin-top:30px}
.orow{display:flex;justify-content:center;align-items:stretch;gap:16px;flex-wrap:wrap}
.ostem{width:2px;height:22px;background:var(--border);margin:0 auto}
.obox{background:var(--paper);border:1px solid var(--border);border-top:3px solid var(--green);border-radius:12px;
  padding:16px 20px;min-width:206px;max-width:290px;text-align:center;flex:0 1 auto;box-shadow:var(--shadow)}
.obox .ot{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--navy);line-height:1.2}
.obox .os{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-top:6px}
.obox .on{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.obox.top{border-top-color:var(--gold);background:var(--wash-gold)}
.obox.prog{border-top-color:var(--leaf);max-width:360px;text-align:left}
.obox.part{border:1px dashed var(--gold-ink);background:transparent;max-width:560px;box-shadow:none}
.olist{margin-top:9px}
.olist li{font-size:12.5px;color:var(--muted);line-height:1.75;padding-left:15px;position:relative}
.olist li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--leaf)}
.onote{font-size:13.5px;color:var(--muted);margin-top:22px;max-width:78ch;line-height:1.7}

/* ------------------------------------------------------------------- LISTS */
.clist{margin-top:16px}
.clist li{font-size:14.5px;color:var(--muted);line-height:1.8;padding-left:24px;position:relative}
.clist li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--leaf)}

/* --------------------------------------------------------------- CTA BAND */
.cta{background:linear-gradient(150deg,var(--green) 0%,var(--deep) 88%);color:#fff;padding:62px 0;text-align:center}
.cta h2{font-size:34px;color:#fff;max-width:22ch;margin:0 auto}
.cta p{font-size:16.5px;color:rgba(255,255,255,.82);margin:16px auto 0;max-width:60ch}
.cta .hbtns{justify-content:center}

/* -------------------------------------------------------------- CONTACT */
.crow{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--border)}
.crow:last-child{border-bottom:0}
.crow .cl{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);
  font-weight:600;min-width:96px;padding-top:3px}
.crow .cv{font-size:15.5px;color:var(--ink)}

/* --------------------------------------------------------------- FOOTER */
footer{background:var(--deep);color:#9FB6A6;padding:44px 0 38px;font-size:13px;margin-top:auto}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;align-items:start}
footer img{width:44px;height:44px;background:#fff;border-radius:10px;padding:4px;margin-bottom:14px}
footer b{display:block;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px;font-weight:600}
footer a{color:#BFD3C5;font-size:13.5px;display:block;padding:3px 0}
footer a:hover{color:#fff}
footer .fine{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;line-height:1.7;opacity:.72;max-width:860px}

/* ------------------------------------------------------- HERO STATUS LINE */
.hstatus{margin-top:26px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72);
  max-width:72ch;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}

/* ------------------------------------------------------- SEVEN PILLAR STRIP */
.pill7{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-top:34px;
  background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.p7{background:var(--paper);padding:20px 14px;text-align:center}
.p7n{display:block;font-family:var(--serif);font-size:22px;color:var(--gold-ink);font-weight:600;line-height:1}
.p7t{display:block;font-size:12.5px;color:var(--navy);font-weight:600;margin-top:9px;line-height:1.4}
.p7.cap{background:var(--wash-gold)}

/* ------------------------------------------- WILMINGTON TO CLAYMONT ROUTE */
.route{max-width:640px;margin:34px auto 0}
.rstep{display:grid;grid-template-columns:56px 1fr;gap:20px;position:relative;padding-bottom:26px}
.rstep:last-child{padding-bottom:0}
.rstep::before{content:"";position:absolute;left:22px;top:54px;bottom:-4px;width:2px;background:var(--border)}
.rstep:last-child::before{display:none}
.rstep.dash::before{width:0;background:none;border-left:2px dashed var(--border)}
.rmark{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;
  position:relative;z-index:1}
.rstep:nth-child(2) .rmark{background:var(--green-2)}
.rstep:nth-child(3) .rmark{background:var(--deep)}
.rstep:nth-child(4) .rmark{background:var(--gold-ink)}
.rstep:nth-child(5) .rmark{background:var(--navy)}
.rstep.future .rmark{background:var(--paper);border:2px dashed var(--border);color:var(--muted)}
.rplace{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);
  font-weight:600;margin-bottom:6px}
.rbody h3{font-size:19px;color:var(--navy);margin:0;line-height:1.3}
.rbody p{font-size:14.5px;color:var(--muted);line-height:1.62;margin:8px 0 0}

/* ------------------------------------------------------------------ FORM */
.fm{margin-top:4px}
.fhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fgrp{margin-bottom:18px}
.flab{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:7px}
.fin,.fsel,.ftxt{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;line-height:1.5}
.ftxt{resize:vertical;min-height:120px}
.fin:focus,.fsel:focus,.ftxt:focus{outline:2px solid var(--green-2);outline-offset:1px;
  border-color:var(--green-2)}
.fnote{background:var(--wash-gold);border:1px solid rgba(184,137,46,.26);border-radius:14px;
  padding:22px 24px;margin-bottom:26px}
.fnote h3{font-size:16px;color:var(--gold-ink);margin:0}
.fnote p{font-size:14px;color:var(--gold-ink);line-height:1.6;margin:9px 0 0}

/* --------------------------------------------------------------- REVEAL */
.rv{transition:opacity .28s ease-out,transform .28s ease-out}
.rv.on{opacity:1;transform:none}

/* ----------------------------------------------------------- RESPONSIVE */
@media(max-width:1180px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:repeat(4,1fr)}
  .wrap{padding:0 34px}
}
@media(max-width:1020px){
  /* Drawer sits under the sticky top bar so the close button stays reachable
     and nothing in the drawer is hidden behind it. */
  .side{transform:translateX(-100%);width:288px;box-shadow:0 0 44px rgba(0,0,0,.3);top:62px}
  .side.open{transform:none}
  .side-brand{display:none}
  .side-nav{padding-top:22px}
  .scrim{top:62px}
  .main{margin-left:0}
  .topbar{display:flex}
  .hero h1{font-size:38px}
  .phead h1{font-size:34px}
  .two{grid-template-columns:1fr;gap:30px}
  .quote{max-width:none;font-size:26px}
}
@media(max-width:860px){
  .g3,.g2{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(3,1fr)}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .obox,.obox.prog{max-width:100%;width:100%;min-width:0}
  footer .fgrid{grid-template-columns:1fr;gap:24px}
  section{padding:56px 0}
  .wrap{padding:0 22px}
  .hero{padding:60px 0 54px}
  .phead{padding:44px 0 42px}
}
@media(max-width:560px){
  .g4{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:32px}
  .phead h1{font-size:29px}
  .shead h2{font-size:27px}
  .cta h2{font-size:27px}
  .step{grid-template-columns:44px 1fr;gap:15px}
  .sdot{width:44px;height:44px;font-size:16px}
  .step::before{left:21px;top:48px}
  .srow{grid-template-columns:1fr;gap:9px;justify-items:start}
  .srow .badge{width:auto}
}
@media(max-width:1020px){
  .pill7{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:560px){
  .pill7{grid-template-columns:repeat(2,1fr)}
  .route{max-width:100%}
  .rstep{grid-template-columns:44px 1fr;gap:15px}
  .rstep::before{left:21px;top:48px}
  .rmark{width:42px;height:42px}
}


/* ============================================================
   v11 additions. Ecosystem chain, destination pairs, creed band.
   Uses only existing brand tokens.
   ============================================================ */
.eco{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr;align-items:stretch;margin-top:36px}
.econ{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:22px 20px;box-shadow:var(--shadow)}
.econ .ecolbl{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px}
.econ h3{font-family:var(--serif);font-size:16.5px;color:var(--navy);margin:0 0 8px;line-height:1.25}
.econ p{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.62;margin:0}
.ecoar{display:flex;align-items:center;justify-content:center;color:var(--leaf)}
.ecoout{margin-top:18px;background:var(--deep);border-radius:14px;padding:24px 28px}
.ecoout b{display:block;font-family:var(--serif);font-size:19px;color:#fff;margin-bottom:5px}
.ecoout span{font-family:var(--sans);font-size:14.5px;color:#C6DDCD;line-height:1.6}
.econot{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.econot div{border-left:2px solid var(--gold);padding-left:15px;font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.6}
.econot b{display:block;color:var(--navy);font-size:14.5px;margin-bottom:3px}

.dpair{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.dcard{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--border);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow)}
.dfrom{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.5}
.darr{color:var(--leaf);text-align:center;font-size:19px;line-height:1}
.dto{font-family:var(--serif);font-size:16px;color:var(--green);line-height:1.35}

.creed{background:var(--deep);padding:64px 0}
.creed .cl1{font-family:var(--serif);font-size:30px;line-height:1.42;color:#fff;margin:0;max-width:20ch}
.creed .cl2{font-family:var(--sans);font-size:16px;color:#A8C6B4;margin:22px 0 0;max-width:56ch;line-height:1.65}
@media(max-width:900px){
  .eco{grid-template-columns:1fr}
  .ecoar{transform:rotate(90deg);padding:10px 0}
  .econot,.dpair{grid-template-columns:1fr}
  .dcard{grid-template-columns:1fr}
  .darr{text-align:left;transform:rotate(90deg);width:26px}
  .creed .cl1{font-size:23px}
}


/* ================================================================
   v12. Blueprint graphic standards applied to the web.
   Palette and type come from the Blueprint: navy carries authority,
   blue carries data, gold is emphasis only and stays under 5 percent
   of any page, Harmony green is kept as the brand accent from the
   logo. White space is treated as a design element.
   ================================================================ */
:root{
  --navy:#0A2540;
  --blue:#1B4F8A;
  --pale:#E8EEF5;
  --gold:#B58A2E;
  --palegold:#F5EEDC;
  --ink:#14181D;
  --gray:#5C6570;
  --paper:#FFFFFF;
  --hgreen:#1E5B3C;
  --rule:#D8E1EC;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --deep:#0A2540;
  --green:#0A2540;
  --green-2:#1B4F8A;
  --leaf:#1E5B3C;
  --gold-ink:#7A5717;
  --ivory:#F7F8FA;
  --soft:#E8EEF5;
  --border:#D8E1EC;
  --muted:#5C6570;
  --shadow:none;
}

body{font-family:var(--sans);color:var(--ink);font-size:16.5px;line-height:1.6}

/* editorial type scale, serif carries the argument */
h1,h2,h3,.quote,.cl1{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;color:var(--navy)}
h1{font-size:clamp(38px,5vw,64px);line-height:1.06}
h2{font-size:clamp(27px,3.1vw,40px);line-height:1.14}
h3{font-weight:400;letter-spacing:-.01em}
.plede{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink)}
.sub{font-family:var(--sans);color:var(--gray)}

/* mono for anything that reads as a label, a citation or a control number */
.kick,.ecolbl,.navlbl,.dfrom,.tag,.cap,.fine,.hstatus,.spinelbl,.mxlbl{
  font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.kick{font-size:10.5px;color:var(--blue)}
.kick.gold{color:var(--gold)}

/* containers give way to rules */
.pcard,.econ,.dcard,.tile,.callout{border-radius:0;box-shadow:none}
.pcard,.econ{border:none;border-top:1px solid var(--navy);padding:20px 0 0;background:transparent}
.dcard{border:none;border-bottom:1px solid var(--rule);border-radius:0;padding:16px 0;background:transparent}
section{border-bottom:none;padding:78px 0}
section + section{border-top:1px solid var(--rule)}
.paper,.hero{background:var(--paper)}
.wash1,.wash2,.wash3,.wash4{background:var(--paper)}

/* ---- the P.R.T. spine, the one device that repeats everywhere ---- */
.spine{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:340px;margin:0 0 20px}
.spine i{height:3px;background:var(--rule);display:block}
.spine[data-on="1"] i:nth-child(1),
.spine[data-on="2"] i:nth-child(-n+2),
.spine[data-on="3"] i{background:var(--blue)}
.spine[data-on="3"] i:nth-child(3){background:var(--hgreen)}
.spinerow{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}
.spinelbl{font-size:9.5px;color:var(--gray)}

/* ---- hero, asymmetric, with the pathway graphic opposite ---- */
.hero .wrap.hgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:70px;align-items:start;padding-bottom:52px}
.hero .herotext{max-width:34ch}
.hero .herotext .plede{max-width:none}
.hero{border-bottom:1px solid var(--rule)}
.hero h1{color:var(--navy)}
.hero .plede{max-width:46ch}
.herofig{border-left:1px solid var(--rule);padding-left:38px}
.hstage{padding:22px 0;border-bottom:1px solid var(--rule)}
.hstage:last-child{border-bottom:none}
.hstage .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:8px}
.hstage h4{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--navy);margin:0 0 6px;letter-spacing:-.02em}
.hstage p{font-size:14.5px;color:var(--gray);margin:0;line-height:1.55}
.statrow{background:transparent;border-top:1px solid var(--navy);border-bottom:1px solid var(--rule);border-radius:0}
.statrow div{border:none}
.statrow b{font-family:var(--serif);font-weight:300;color:var(--navy)}
.statrow span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--gray)}

/* ---- the statement moment ---- */
.creed{background:var(--navy);padding:118px 0}
.creed .cl1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,60px);line-height:1.1;color:#fff;letter-spacing:-.025em;max-width:16ch;margin:0}
.creed .cl2{font-family:var(--sans);font-size:17px;color:#9FB6CC;margin:44px 0 0;max-width:60ch;line-height:1.7;
  border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.creedlbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 30px}

/* ---- population by P.R.T. matrix ---- */
.mx{margin-top:14px;border-top:1px solid var(--navy)}
.mxhead,.mxrow{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:26px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:start}
.mxhead{padding:12px 0}
.mxlbl{font-size:10px;color:var(--blue)}
.mxrow .who{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--navy);letter-spacing:-.015em;line-height:1.25}
.mxrow p{font-family:var(--sans);font-size:14px;color:var(--gray);margin:0;line-height:1.55}
.mxrow p.dest{color:var(--hgreen);font-weight:500}
.mxnote{font-family:var(--sans);font-size:14.5px;color:var(--gray);margin-top:26px;max-width:74ch}

/* ---- ecosystem, layered rather than boxed ---- */
.eco{grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr}
.econ h3{font-size:19px}
.ecoout{background:var(--navy);border-radius:0;padding:30px 34px}
.ecoout b{font-family:var(--serif);font-weight:300;font-size:26px;letter-spacing:-.02em}
.econot div{border-left:1px solid var(--gold)}
.econot b{font-family:var(--sans);font-weight:600;color:var(--navy)}

.pill7{border-top:1px solid var(--navy)}
.p7{border:none;border-bottom:1px solid var(--rule);border-radius:0;background:transparent}
.p7n{font-family:var(--mono);color:var(--gold)}
.p7t{font-family:var(--serif);font-weight:400;color:var(--navy)}
.btn{border-radius:2px;font-family:var(--sans);font-weight:500}
.btn-gold{background:var(--gold);border-color:var(--gold)}
.side,.topbar{background:var(--navy)}
.side-cta{background:var(--gold);border-radius:2px}
.dto{font-family:var(--serif);font-weight:400;color:var(--navy)}
.darr{color:var(--gold)}

@media(max-width:1000px){
  .hero .wrap.hgrid{grid-template-columns:1fr;gap:38px}
  .hero .herotext{max-width:none}
  .herofig{border-left:none;border-top:1px solid var(--rule);padding-left:0;padding-top:20px}
  .mxhead{display:none}
  .mxrow{grid-template-columns:1fr;gap:8px}
  .mxrow .who{margin-bottom:4px}
}

/* ---- v12 fix: page headers move off the green gradient onto paper ---- */
.hero,.phead{background:var(--paper);color:var(--ink);overflow:visible}
.hero::after,.phead::after{display:none}
.hero{padding:92px 0 60px}
.phead{padding:86px 0 46px;border-bottom:1px solid var(--rule)}
.hero .kick,.phead .kick{color:var(--gold);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;font-weight:400;text-transform:uppercase}
.hero h1,.phead h1{color:var(--navy)}
.phead h1{font-size:clamp(32px,3.8vw,50px);max-width:22ch;font-weight:300;letter-spacing:-.02em}
.hero .plede,.phead .plede{color:var(--ink);font-size:18px;margin-top:22px}
.phead .plede{max-width:62ch;color:var(--gray)}
.btn-line{border:1px solid var(--navy);color:var(--navy);background:transparent}
.btn-line:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.hstatus{color:var(--gray);font-size:11px;line-height:1.7}
.statrow{margin-top:44px}

/* ---- v12: the pathway reads as a timeline, not a stack of cards ---- */
.sbody{background:transparent;border:none;border-top:1px solid var(--rule);border-radius:0;
  padding:16px 0 26px;box-shadow:none}
.sbody h3{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--navy);letter-spacing:-.02em}
.sbody .kick,.sbody .cap{color:var(--gold)}
.step::before{background:var(--rule)}
.sdot{border-radius:50%;font-family:var(--mono);font-size:13px}
.step:nth-child(1) .sdot{background:var(--navy)}
.step:nth-child(2) .sdot{background:var(--blue)}
.step:nth-child(3) .sdot{background:var(--hgreen)}
.step:nth-child(4) .sdot{background:var(--gold)}

/* ================================================================
   v13. Green restored as the primary brand signature.
   White and navy are the structure. Green is the identity and
   carries the P.R.T. system, section labels, pathway lines, key
   numbers, borders and hover states. Blue is reserved for
   healthcare and data. Gold is occasional emphasis only.
   ================================================================ */
:root{
  --hgreen:#1E5B3C;    /* deep brand green, from the logo */
  --hgreen-2:#2E7D4F;  /* mid */
  --leaf:#3E9B57;      /* bright accent */
  --greenwash:#EDF3EE; /* pale green ground */
  --greenline:#CFE0D5; /* pale green rule */
}

/* section labels are green again, not blue or gold */
.kick,.kick.gold,.mxlbl,.creedlbl{color:var(--hgreen)}
.hero .kick,.phead .kick{color:var(--hgreen)}
.hstage .n{color:var(--hgreen-2)}

/* the P.R.T. spine reads as one green system, deepening left to right */
.spine i{background:var(--greenline)}
.spine[data-on="1"] i:nth-child(1),
.spine[data-on="2"] i:nth-child(1),
.spine[data-on="3"] i:nth-child(1){background:var(--leaf)}
.spine[data-on="2"] i:nth-child(2),
.spine[data-on="3"] i:nth-child(2){background:var(--hgreen-2)}
.spine[data-on="3"] i:nth-child(3){background:var(--hgreen)}
.spine{height:auto}

/* key numbers carry the brand */
.statrow{border-top:2px solid var(--hgreen)}
.statrow b{color:var(--hgreen)}

/* the pathway line and its stages are green, deepening as it runs */
.step::before{background:var(--greenline);width:2px}
.step:nth-child(1) .sdot{background:var(--leaf)}
.step:nth-child(2) .sdot{background:var(--hgreen-2)}
.step:nth-child(3) .sdot{background:var(--hgreen)}
.step:nth-child(4) .sdot{background:var(--hgreen);box-shadow:0 0 0 4px var(--greenwash)}
.sbody{border-top:1px solid var(--greenline)}
.sbody .kick,.sbody .cap{color:var(--hgreen-2)}

/* pillars, ecosystem, destinations */
.pill7{border-top:2px solid var(--hgreen)}
.p7n{color:var(--hgreen-2)}
.p7:hover{background:var(--greenwash)}
.pcard,.econ{border-top:1px solid var(--hgreen)}
.ecolbl{color:var(--hgreen)}
.econot div{border-left:2px solid var(--hgreen)}
.darr{color:var(--leaf)}
.dcard:hover{background:var(--greenwash)}
.mx{border-top:2px solid var(--hgreen)}
.mxrow:hover{background:var(--greenwash)}
.mxrow p.dest{color:var(--hgreen);font-weight:600}

/* the statement band keeps navy for authority, with a green signature rule */
.creed{border-top:5px solid var(--hgreen)}
.creed .cl2{border-top:1px solid rgba(62,155,87,.45)}
.creedlbl{color:var(--leaf)}
.ecoout{border-left:5px solid var(--hgreen)}

/* calls to action are green, gold steps back to occasional emphasis */
.btn-gold,.side-cta{background:var(--hgreen);border-color:var(--hgreen);color:#fff}
.btn-gold:hover,.side-cta:hover{background:var(--hgreen-2);border-color:var(--hgreen-2);color:#fff}
.btn-line:hover{background:var(--hgreen);border-color:var(--hgreen);color:#fff}
a:hover{color:var(--hgreen)}

/* sidebar keeps navy structure with a green active marker */
.side-nav a.is-active{border-left-color:var(--leaf);box-shadow:inset 3px 0 0 var(--leaf)}
.side-nav a:hover{color:#BFE0CB}
.side-nav a.is-active .ni,.side-nav a:hover .ni{color:var(--leaf)}
.tb .bs,.side-brand .bs{color:var(--leaf)}


/* ================================================================
   v14. Production spec.
   Harmony lime #B6FF51 sampled from the Executive Brief wordmark is
   the signature. It is never used as text on white, where it measures
   about 1.21:1. It appears as lime on navy, or navy on lime, which is
   about 12.9:1 and clears WCAG 2.2 AA comfortably. Deep green carries
   green text on light surfaces. Target proportion is roughly 65 percent
   white and pale, 20 percent navy, 10 percent green, 5 percent blue.
   ================================================================ */
:root{
  --lime:#B6FF51;
  --lime-2:#A3EE3C;
  --green-deep:#1E5B3C;
  --blue:#2A6BB0;
  --navy:#0A2540;
  --navy-2:#123454;
  --ink:#14181D;
  --slate:#5C6570;
  --pale:#E8EEF5;
  --mist:#F5FFE8;
  --paper:#FFFFFF;
  --rule:#DCE3EC;
  --hgreen:#1E5B3C;
  --leaf:#1E5B3C;
  --gold:#5C6570;
  --gold-ink:#1E5B3C;
  --green:#0A2540;
  --border:#DCE3EC;
  --muted:#5C6570;
  --soft:#E8EEF5;
  --ivory:#FFFFFF;
  --deep:#0A2540;
  --shadow:none;
}

body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;padding:0 56px}
section{padding:132px 0;border:none}
section + section{border-top:none}

h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.6vw,80px);line-height:1.0;
  letter-spacing:-.026em;color:var(--navy)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.9vw,54px);line-height:1.05;
  letter-spacing:-.022em;color:var(--navy)}
h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.15;
  letter-spacing:-.012em;color:var(--navy)}
p{max-width:66ch}
.lead{font-size:21px;line-height:1.5;color:var(--ink);max-width:46ch}
.body{font-size:17.5px;line-height:1.6;color:var(--slate);max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-deep);margin:0 0 26px;display:block}
.eyebrow .on{color:var(--slate)}

/* buttons: the signature is navy type on lime */
.b{display:inline-block;font-family:var(--sans);font-weight:600;font-size:16px;line-height:1;
  padding:18px 28px;border-radius:7px;text-decoration:none;border:1px solid transparent;transition:.15s}
.b-lime{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.b-lime:hover{background:var(--lime-2);border-color:var(--lime-2);color:var(--navy)}
.b-line{background:transparent;color:var(--navy);border-color:var(--navy)}
.b-line:hover{background:var(--navy);color:#fff}
.b-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.b-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}

/* ---------------- hero, 55/45 ---------------- */
.hero{padding:104px 0 0;background:var(--paper);border:none;overflow:visible}
.hero::after{display:none}
.hero .wrap{display:grid;grid-template-columns:55fr 45fr;gap:72px;align-items:center}
.hero h1{max-width:13ch}
.herovis{position:relative}

/* the P.R.T. path graphic */
.pathfig{background:var(--navy);border-radius:12px;padding:44px 40px}
.pathfig .pf{display:grid;grid-template-columns:14px 1fr;gap:20px;align-items:start;padding:0 0 34px}
.pathfig .pf:last-child{padding-bottom:0}
.pathfig .dot{width:14px;height:14px;border-radius:50%;background:var(--lime);margin-top:7px;position:relative}
.pathfig .pf:not(:last-child) .dot::after{content:"";position:absolute;left:6px;top:16px;width:2px;
  height:calc(100% + 28px);background:rgba(182,255,81,.32)}
.pathfig .pl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime);display:block;margin-bottom:6px}
.pathfig .pt{font-family:var(--serif);font-weight:400;font-size:24px;color:#fff;letter-spacing:-.02em;
  line-height:1.2;margin:0}

/* ---------------- proof strip ---------------- */
.proof{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:104px}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:44px;padding-bottom:44px}
.proof b{display:block;font-family:var(--serif);font-weight:400;font-size:58px;line-height:1;
  color:var(--navy);letter-spacing:-.03em}
.proof span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--slate);margin-top:14px}

/* ---------------- the gap diagram ---------------- */
.gapwrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.gapfig{display:grid;gap:0}
.gs{display:grid;grid-template-columns:16px 1fr;gap:18px;align-items:center;padding:15px 0}
.gs .m{width:16px;height:16px;border-radius:50%;border:2px solid var(--rule);background:#fff;position:relative}
.gs:not(:last-child) .m::after{content:"";position:absolute;left:5px;top:17px;width:2px;height:31px;
  background:repeating-linear-gradient(var(--rule) 0 4px,transparent 4px 8px)}
.gs.joined .m{border-color:var(--green-deep);background:var(--green-deep)}
.gs.joined:not(:last-child) .m::after{background:var(--green-deep)}
.gs span{font-family:var(--sans);font-size:16px;color:var(--slate)}
.gs.joined span{color:var(--navy);font-weight:600}
.gaplbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin:0 0 18px}

/* ---------------- P.R.T. signature band ---------------- */
.prt{background:var(--navy);padding:150px 0}
.prt .eyebrow{color:var(--lime)}
.prtgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:16px}
.prtgrid h3{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.2vw,60px);
  color:var(--lime);letter-spacing:-.03em;line-height:1;margin:0 0 20px}
.prtgrid p{font-size:16.5px;line-height:1.6;color:#B9C9DA;margin:0;max-width:30ch}
.prtspine{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:66px}
.prtspine i{height:4px;background:var(--lime);display:block;opacity:.42}
.prtspine i:nth-child(2){opacity:.68}
.prtspine i:nth-child(3){opacity:1}

/* ---------------- outcomes ---------------- */
.oc{border-top:2px solid var(--navy);margin-top:52px}
.ocr{display:grid;grid-template-columns:1fr 30px 1fr;gap:26px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--rule)}
.ocr .who{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--slate)}
.ocr .ar{color:var(--green-deep);text-align:center;font-size:19px}
.ocr .dst{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--navy);letter-spacing:-.015em}
.ocr:hover{background:var(--mist)}

/* ---------------- ecosystem ---------------- */
.ecosys{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.enode{border-top:2px solid var(--green-deep);padding:22px 0 0}
.enode .el{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-deep);display:block;margin-bottom:10px}
.enode p{font-size:15.5px;color:var(--slate);margin:0;max-width:none;line-height:1.6}
.ecentre{grid-column:1 / -1;background:var(--navy);border-radius:12px;padding:38px 40px;
  display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:12px}
.ecentre b{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--lime);letter-spacing:-.025em}
.ecentre span{font-family:var(--sans);font-size:16px;color:#B9C9DA}

/* ---------------- brand statement ---------------- */
.stmt{background:var(--navy);padding:170px 0}
.stmt h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,78px);color:var(--lime);
  letter-spacing:-.03em;line-height:1.02;max-width:15ch;margin:0}
.stmt .four{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  border-top:1px solid rgba(182,255,81,.3);padding-top:34px}
.stmt .four p{font-family:var(--serif);font-size:22px;color:#fff;line-height:1.28;margin:0;
  letter-spacing:-.015em;max-width:none}

/* ---------------- map ---------------- */
.mapwrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:76px;align-items:center;margin-top:56px}
.place{border-top:2px solid var(--green-deep);padding:20px 0 0;margin-bottom:34px}
.place .pn{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-deep);display:block;margin-bottom:9px}
.place h3{font-size:25px;margin:0 0 8px}
.place p{font-size:15.5px;color:var(--slate);margin:0;max-width:38ch}

/* ---------------- accountability + status ---------------- */
.meas{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:52px}
.meas div{border-top:2px solid var(--navy);padding-top:20px}
.meas b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--navy);margin-bottom:8px}
.meas p{font-size:15px;color:var(--slate);margin:0;max-width:none}
.statusbar{margin-top:70px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  display:grid;grid-template-columns:repeat(4,1fr)}
.statusbar div{padding:24px 26px;border-right:1px solid var(--rule)}
.statusbar div:last-child{border-right:none}
.statusbar .sl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);display:block;margin-bottom:9px}
.statusbar .sv{font-size:15px;color:var(--navy);font-weight:500}
.statusbar .ok .sl{color:var(--green-deep)}

/* ---------------- closing ---------------- */
.close{background:var(--navy);padding:150px 0}
.close h2{color:var(--lime);max-width:14ch;font-size:clamp(38px,4.8vw,66px)}
.close p{color:#B9C9DA;font-size:19px;margin-top:26px;max-width:44ch}

/* ---------------- sidebar ---------------- */
.side,.topbar{background:var(--navy)}
.side-cta{background:var(--lime);color:var(--navy);border-radius:7px;font-weight:600}
.side-cta:hover{background:var(--lime-2);color:var(--navy)}
.side-nav a.is-active{box-shadow:inset 3px 0 0 var(--lime);color:#fff}
.side-nav a.is-active .ni,.side-nav a:hover .ni{color:var(--lime)}
.side-brand .bs,.tb .bs{color:var(--lime)}
.navlbl{font-family:var(--mono);letter-spacing:.16em}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media(max-width:1000px){
  .wrap{padding:0 24px}
  section{padding:78px 0}
  .hero{padding:64px 0 0}
  .hero .wrap,.gapwrap,.mapwrap,.ecosys,.prtgrid{grid-template-columns:1fr;gap:40px}
  .proof .wrap{grid-template-columns:1fr 1fr;gap:28px}
  .proof b{font-size:42px}
  .stmt .four,.meas{grid-template-columns:1fr 1fr;gap:24px}
  .statusbar{grid-template-columns:1fr}
  .statusbar div{border-right:none;border-bottom:1px solid var(--rule)}
  .ocr{grid-template-columns:1fr;gap:8px}
  .ocr .ar{display:none}
  .prt,.stmt,.close{padding:88px 0}
}


/* ================================================================
   v15. Palette verified against logo.png as served.
   The dominant chromatic clusters in the mark are green #A0C537,
   blue #035E9C and orange #EF842F. Green on white measures about
   2.4 to 1, so it is never used for small text on white. Navy on
   green measures about 6.6 to 1 and clears AA. #527A12 is the
   accessible green for text on light surfaces, at about 5.1 to 1.
   Treat these as provisional until the vector master is supplied.
   ================================================================ */
:root{
  --lime:#A0C537;
  --lime-2:#8FB22C;
  --green-deep:#527A12;
  --blue:#035E9C;
  --orange:#EF842F;
  --navy:#0A2540;
  --ink:#14181D;
  --slate:#5C6570;
  --pale:#E8EEF5;
  --mist:#F4F8EA;
  --rule:#DCE3EC;
  --paper:#FFFFFF;
  --hgreen:#527A12;
  --leaf:#527A12;
  --green:#0A2540;
  --border:#DCE3EC;
  --muted:#5C6570;
  --soft:#E8EEF5;
  --deep:#0A2540;
}

/* accessibility: visible focus that never hides under the sticky header */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}
.prt a:focus-visible,.stmt a:focus-visible,.close a:focus-visible,
.side a:focus-visible,.pathfig a:focus-visible{outline-color:var(--lime)}

/* pointer targets: WCAG 2.2 asks 24px, Harmony designs to 44 */
.b,.side-cta,.side-nav a,.navtog{min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
.side-nav a{justify-content:flex-start}

/* status is never carried by colour alone */
.statusbar .sl::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border-radius:50%;background:currentColor;vertical-align:middle}
.statusbar .ok .sl::before{border-radius:0;transform:rotate(45deg)}

/* the quiet status line under the proof strip */
.quietstatus{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--slate);
  letter-spacing:.02em;max-width:78ch;padding:26px 0 0}

.proof b{color:var(--navy)}
.eyebrow{color:var(--green-deep)}
.enode,.place,.oc,.meas div{border-top-color:var(--green-deep)}
.ocr .ar{color:var(--green-deep)}
.gs.joined .m{border-color:var(--green-deep);background:var(--green-deep)}
.gs.joined:not(:last-child) .m::after{background:var(--green-deep)}

/* the status line is a full-width note, not a fifth stat column */
.proof .statuswrap{display:block;padding-top:0;padding-bottom:42px}
.proof .statuswrap .quietstatus{max-width:86ch;padding-top:0}


/* ================================================================
   v15b. The last gold consumers. Gold was set to #5C6570 in v13 to
   take it out of the palette, which left any rule still reading
   var(--gold) rendering grey. These point at brand colours instead.
   ================================================================ */
:root{
  --gold:#035E9C;
  --gold-ink:#527A12;
  --wash-green:#EEF4E3;
  --wash-leaf:#F4F8EA;
  --wash-gold:#E8EEF5;
  --wash-navy:#E8EEF5;
}

/* tile accents run navy, green, blue, lime. White glyphs on the first three,
   navy on the lime so the strongest brand colour stays readable. */
.tile.a1{border-top-color:var(--navy)}       .tile.a1 .ic{background:var(--navy)}
.tile.a2{border-top-color:var(--green-deep)} .tile.a2 .ic{background:var(--green-deep)}
.tile.a3{border-top-color:var(--blue)}       .tile.a3 .ic{background:var(--blue)}
.tile.a4{border-top-color:var(--lime)}       .tile.a4 .ic{background:var(--lime)}
.tile.a4 .ic svg{stroke:var(--navy)}
.tile .ic{background:var(--green-deep)}
.tile .ic svg{stroke:#fff}
.tile.a4 .num{color:var(--wash-green)}
.tile .tag{color:var(--green-deep);background:var(--wash-green)}

/* status badges carry a colour and a weight, not colour alone */
.badge.ok{background:var(--wash-green);color:var(--green-deep)}
.badge.prep{background:var(--pale);color:var(--blue)}
.badge.pend{background:transparent;color:var(--slate);box-shadow:inset 0 0 0 1px var(--rule)}

/* callouts and notes */
.callout{background:var(--mist);border-left-color:var(--green-deep)}
.fnote{background:var(--mist);border-color:var(--rule)}
.fnote h3,.fnote p{color:var(--ink)}
.obox.top{border-top-color:var(--green-deep);background:var(--mist)}
.econot div{border-left-color:var(--green-deep)}
.p7.cap{background:var(--mist)}
a.tile:focus-visible{outline-color:var(--blue)}

/* the active sidebar call to action stays lime, so navy type keeps its contrast */
.side-cta.is-active{background:var(--lime-2);color:var(--navy);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.side-nav a.is-active{border-left-color:var(--lime)}
.btn-gold{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.btn-gold:hover{background:var(--lime-2);border-color:var(--lime-2);color:var(--navy)}


/* ================================================================
   v16. The design system from the final brief.
   Grid: 1240 max, 680 reading column, 112 to 128 section spacing.
   Type: Newsreader display at weight 300, Plex Sans body at 17,
   Plex Mono for labels and evidence. Radii restrained to 6 and 8.
   ================================================================ */
:root{
  --sp1:4px;  --sp2:8px;  --sp3:12px; --sp4:16px; --sp5:24px;
  --sp6:32px; --sp7:48px; --sp8:64px; --sp9:88px; --sp10:120px;
  --read:680px;
  --r-sm:6px; --r-md:8px;
}

body{font-size:17px;line-height:1.65}
.wrap{max-width:1240px;padding:0 40px}
section{padding:120px 0}

h1{font-weight:300;font-size:clamp(42px,5.2vw,72px);line-height:.98;letter-spacing:-.035em}
h2{font-weight:300;font-size:clamp(34px,3.6vw,48px);line-height:1.05;letter-spacing:-.025em}
h3{font-weight:400;font-size:clamp(26px,2.1vw,30px);line-height:1.12;letter-spacing:-.015em}
.lead{font-family:var(--sans);font-size:clamp(19px,1.5vw,21px);line-height:1.55;max-width:46ch}
.body,section p{max-width:var(--read)}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.25}

/* buttons: 48 tall, 6px radius, never a pill */
.b{min-height:48px;padding:0 22px;border-radius:var(--r-sm);font-family:var(--sans);
  font-size:15px;font-weight:600;letter-spacing:0}
.b-lime{background:var(--lime);color:var(--navy);border:1px solid var(--lime)}
.b-lime:hover{background:var(--lime-2);border-color:var(--lime-2);color:var(--navy)}
.b-line{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.b-line:hover{background:var(--navy);color:#fff}
.b-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.b-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.side-cta{border-radius:var(--r-sm)}
.tile,.pcard,.bcard,.obox,.fnote,.callout{border-radius:var(--r-md)}
.tile .ic{border-radius:var(--r-md)}

/* ---------------------------------------------------- hero */
.hero .wrap.hgrid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.hcard{background:var(--navy);border-radius:var(--r-md);padding:34px 32px 28px}
.hspine{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:11px}
.hspine i{height:4px;border-radius:2px;background:var(--lime);display:block}
.hspine i:nth-child(2){opacity:.72}
.hspine i:nth-child(3){opacity:.48}
.hstages{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);margin-bottom:28px}
.hends{display:grid;grid-template-columns:1fr 1fr;gap:26px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:22px}
.hends .hl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:12px}
.hends p{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:#fff;
  margin:0 0 7px;max-width:none}
.hfoot{font-family:var(--serif);font-size:17px;color:var(--lime);margin:24px 0 0;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.16);max-width:none}

/* ---------------------------------------------------- P.R.T. band */
.prth{color:var(--lime);margin:6px 0 44px;max-width:20ch}

/* ---------------------------------------------------- population matrix */
.pmx{margin:44px 0 36px;border-top:2px solid var(--green-deep)}
.pmx-h,.pmx-r{display:grid;grid-template-columns:1.15fr 1fr 1.2fr 1.2fr;gap:28px;
  padding:18px 0;border-bottom:1px solid var(--rule);align-items:start}
.pmx-h{padding:14px 0;border-bottom:1px solid var(--rule)}
.pmx-h span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate)}
.pmx-r span{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink)}
.pmx-r .who{font-weight:600;color:var(--navy)}
.pmx-r .dst{color:var(--green-deep);font-weight:600}
.pmx-r i{display:none}

/* ---------------------------------------------------- map key */
.mkey{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.mkey li{display:flex;align-items:center;gap:11px;font-family:var(--mono);
  font-size:11px;letter-spacing:.03em;color:var(--slate)}
.mkey .k{width:13px;height:13px;border-radius:50%;flex:0 0 13px}
.mkey .k-sec{background:var(--green-deep)}
.mkey .k-prep{background:#fff;box-shadow:inset 0 0 0 2.4px var(--green-deep)}
.mkey .k-plan{background:transparent;border:1.6px dashed var(--navy);opacity:.7}
.mlab{font-family:var(--sans);font-weight:600;font-size:12.5px;fill:#0A2540}
.msub{font-family:var(--sans);font-weight:600;font-size:10.5px;fill:#5C6570}

/* ---------------------------------------------------- reporting framework */
.framelbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);margin:34px 0 0;max-width:none}
.framelbl span{color:var(--slate);letter-spacing:.1em;margin-left:12px;text-transform:none;
  font-size:11px}
.rframe{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin:22px 0 0}
.rframe div{border-top:2px solid var(--green-deep);padding-top:15px}
.rframe b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.rframe p{font-size:14.5px;line-height:1.55;color:var(--slate);margin:0;max-width:none}

/* ---------------------------------------------------- closing note */
.closenote{font-family:var(--mono);font-size:11.5px;line-height:1.7;
  color:rgba(255,255,255,.62);max-width:74ch;margin:30px 0 0}

/* ---------------------------------------------------- responsive */
@media(max-width:1080px){
  .rframe{grid-template-columns:repeat(2,1fr);gap:22px}
  .pmx-h{display:none}
  .pmx-r{grid-template-columns:1fr;gap:9px;padding:22px 0}
  .pmx-r i{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--slate);font-style:normal;margin-bottom:3px}
  .pmx-r .who{font-size:17px}
}
@media(max-width:900px){
  .hero .wrap.hgrid{grid-template-columns:1fr;gap:40px}
  section{padding:72px 0}
  .wrap{padding:0 20px}
  h1{font-size:42px;line-height:1.02}
  h2{font-size:34px}
  .hends{grid-template-columns:1fr;gap:22px}
  .rframe{grid-template-columns:1fr}
}


/* v16: hero column proportions */
.hero .herotext{max-width:none}
.hero .wrap.hgrid{align-items:center}
.hero h1{max-width:11ch;margin:14px 0 0}
.hero .lead{max-width:52ch;margin-top:26px}
.hero .btns{margin-top:36px}
@media(max-width:900px){
  .hero h1{max-width:none}
  .hero .lead{max-width:none}
}


/* v16: the wide population matrix on Who We Serve */
.pmx-wide .pmx-h,.pmx-wide .pmx-r{grid-template-columns:1.5fr 1fr 1.25fr 1.25fr;
  gap:26px;padding:22px 0}
.pmx-r .who em{display:block;font-style:normal;font-weight:400;font-size:13.5px;
  line-height:1.5;color:var(--slate);margin-top:6px}
.pmxnote{font-size:15px;line-height:1.65;color:var(--slate);max-width:74ch;margin:34px 0 0;
  padding-left:18px;border-left:2px solid var(--lime)}
@media(max-width:1080px){
  .pmx-wide .pmx-h{display:none}
  .pmx-wide .pmx-r{grid-template-columns:1fr;gap:10px}
}


/* v16: the P.R.T. signature in the footer */
.fsig{display:flex;gap:34px;flex-wrap:wrap;margin:34px 0 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14)}
.fsig .fsl{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fsig .fsl i{width:26px;height:3px;border-radius:2px;background:var(--lime);display:block}
.fsig .fsl:nth-child(2) i{opacity:.72}
.fsig .fsl:nth-child(3) i{opacity:.48}

/* v16: the fourth status state */
.badge.plan{background:transparent;color:var(--slate);
  box-shadow:inset 0 0 0 1px var(--rule)}
.badge.plan::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;
  border:1.4px dashed currentColor;border-radius:50%;vertical-align:middle}


/* v16: the pre-launch status board */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:24px 0 0}
.board div{border-top:2px solid var(--navy);padding-top:16px}
.board .bl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.board b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.15;
  color:var(--navy);letter-spacing:-.015em;margin-bottom:10px}
.board p{font-size:14.5px;line-height:1.55;color:var(--slate);margin:0;max-width:none}
.boardnote{font-family:var(--mono);font-size:11.5px;line-height:1.75;color:var(--slate);
  max-width:82ch;margin:34px 0 0;padding-left:18px;border-left:2px solid var(--rule)}
@media(max-width:1080px){.board{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.board{grid-template-columns:1fr}}


/* v16: accessible green on the pale and mist grounds */
:root{--green-pale:#4F7511}
section[style*="--pale"] .eyebrow,
.paper .eyebrow,
[style*="background:var(--pale)"] .eyebrow{color:var(--green-pale)}
[style*="background:var(--pale)"] .rframe div,
[style*="background:var(--pale)"] .meas div{border-top-color:var(--green-pale)}
[style*="background:var(--pale)"] .enode,
[style*="background:var(--pale)"] .place{border-top-color:var(--green-pale)}


/* v16: everything green that sits on the pale ground */
[style*="background:var(--pale)"] .el,
[style*="background:var(--pale)"] .pn,
[style*="background:var(--pale)"] .statusbar .sl,
[style*="background:var(--pale)"] .ocr .ar,
[style*="background:var(--pale)"] .gaplbl,
[style*="background:var(--pale)"] .rframe b,
.paper .el,.paper .pn,.paper .statusbar .sl{color:var(--green-pale)}
[style*="background:var(--pale)"] .statusbar .ok .sl{color:var(--green-pale)}


/* ================================================================
   v17. The final verdict brief. 1280 grid, 18px body, no card
   shadows, radii capped at 6, and a controlled section rhythm:
   white hero, navy philosophy, white P.R.T., pale population,
   white ecosystem, mist route, white accountability, navy close.
   ================================================================ */
body{font-size:18px;line-height:1.6}
.wrap{max-width:1280px;padding:0 32px}
section{padding:132px 0}
p,li{max-width:68ch}
.side{width:265px}

h1{font-size:clamp(40px,5.6vw,78px);line-height:.98;font-weight:300;letter-spacing:-.034em}
h2{font-size:clamp(31px,3.9vw,52px);line-height:1.05;font-weight:300;letter-spacing:-.026em}
h3{font-size:clamp(24px,2.2vw,31px);line-height:1.15;font-weight:400}
.lead{font-size:clamp(19px,1.55vw,22px);line-height:1.5}
.b{padding:0 26px;border-radius:5px}

/* cards lose their shadows and most of their radius */
.tile,.pcard,.bcard,.obox,.fnote,.callout,.statuscard{box-shadow:none;border-radius:5px}
.tile:hover{transform:none;box-shadow:none;border-color:var(--slate)}
.tile .ic{border-radius:5px}
.hcard{border-radius:6px}

/* ---------------------------------------------------- 2. the philosophy band */
.creedband{background:var(--navy);color:#fff;border:none}
.creedband .eyebrow{color:var(--lime)}
.creedband h2{color:#fff;max-width:20ch}
.creedband .cbl{font-family:var(--sans);font-size:19px;line-height:1.55;
  color:rgba(255,255,255,.78);max-width:56ch;margin:24px 0 0}
.chain{display:flex;align-items:center;gap:0;margin:52px 0 0;flex-wrap:wrap}
.chain span{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);padding:0 26px 0 0}
.chain span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--lime);margin-right:11px;vertical-align:middle}
.chain span:not(:last-child)::after{content:"";position:absolute;right:6px;top:50%;
  width:14px;height:2px;background:var(--lime);opacity:.55}
.creed4{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 56px;margin:56px 0 0;
  padding-top:44px;border-top:1px solid rgba(255,255,255,.16)}
.creed4 p{font-family:var(--serif);font-weight:300;font-size:clamp(25px,2.5vw,34px);
  line-height:1.2;color:#fff;letter-spacing:-.02em;margin:0;max-width:none}
.creed4 em{font-style:normal;color:var(--lime)}

/* ---------------------------------------------------- 3. P.R.T. track on paper */
.ptin{font-family:var(--sans);font-size:19px;color:var(--slate);margin:20px 0 0;max-width:56ch}
.prtrack{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:56px 0 0}
.prtrack div{border-top:5px solid var(--lime);padding-top:22px}
.prtrack div:nth-child(2){border-top-color:var(--lime-2)}
.prtrack div:nth-child(3){border-top-color:var(--green-deep)}
.prtrack .ps{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.1vw,42px);line-height:1;color:var(--navy);letter-spacing:-.02em;
  margin-bottom:14px}
.prtrack p{font-size:17px;line-height:1.6;color:var(--slate);margin:0;max-width:32ch}

/* ---------------------------------------------------- 6. the route */
.route{list-style:none;margin:0;padding:0;counter-reset:r}
.route li{counter-increment:r;position:relative;padding:0 0 26px 44px;max-width:52ch;
  font-size:16px;line-height:1.55;color:var(--slate)}
.route li::before{content:counter(r);position:absolute;left:0;top:1px;width:26px;height:26px;
  border-radius:50%;background:var(--navy);color:#fff;font-family:var(--mono);font-size:11.5px;
  display:flex;align-items:center;justify-content:center}
.route li:not(:last-child)::after{content:"";position:absolute;left:12.5px;top:31px;bottom:6px;
  width:1.5px;background:var(--rule)}
.route .rl{display:block;font-family:var(--sans);font-weight:600;font-size:17px;
  color:var(--navy);margin-bottom:4px}
.mnote{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--slate);
  max-width:52ch;margin:8px 0 0;padding-left:18px;border-left:2px solid var(--lime)}

/* ---------------------------------------------------- 7. accountability + status */
.acctwrap{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:start}
.omeas{list-style:none;margin:40px 0 0;padding:0}
.omeas li{border-top:1px solid var(--rule);padding:18px 0;font-size:15.5px;line-height:1.5;
  color:var(--slate);max-width:none}
.omeas li:first-child{border-top:2px solid var(--green-deep)}
.omeas b{display:block;font-family:var(--sans);font-weight:600;font-size:17px;
  color:var(--navy);margin-bottom:4px}
.statuscard{background:var(--pale);border:1px solid var(--rule);padding:32px 30px 26px}
.statuscard .eyebrow{display:block;margin-bottom:22px;color:var(--green-pale)}
.statuscard .stat{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid #D6DFEA}
.statuscard .stat:last-of-type{border-bottom:none;margin-bottom:6px;padding-bottom:0}
.statuscard .sk{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}
.statuscard .sk::before{content:"";width:9px;height:9px;display:inline-block}
.sk-sec{color:var(--green-pale)}.sk-sec::before{background:var(--green-deep);transform:rotate(45deg)}
.sk-prep{color:var(--blue)}.sk-prep::before{border-radius:50%;background:var(--blue)}
.sk-pend{color:var(--slate)}.sk-pend::before{border-radius:50%;border:1.5px dashed currentColor}
.statuscard b{display:block;font-family:var(--sans);font-weight:600;font-size:16.5px;
  line-height:1.4;color:var(--navy)}
.statdate{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);margin:22px 0 0}

/* ---------------------------------------------------- 8. the close */
.close h2{max-width:16ch}
.close p{font-size:19px;color:rgba(255,255,255,.8);max-width:52ch;margin:22px auto 0}

/* ---------------------------------------------------- motion, kept quiet */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);
    transition:opacity .28s ease-out,transform .28s ease-out}
  .reveal.in{opacity:1;transform:none}
  .prtrack div{--w:0}
  .hspine i,.prtspine i{transform-origin:left center}
}

/* ---------------------------------------------------- responsive */
@media(max-width:1080px){
  .acctwrap{grid-template-columns:1fr;gap:48px}
  .prtrack{grid-template-columns:1fr;gap:30px}
  .prtrack p{max-width:none}
}
@media(max-width:900px){
  section{padding:72px 0}
  .wrap{padding:0 20px}
  .creed4{grid-template-columns:1fr;gap:20px;margin-top:40px;padding-top:32px}
  .creed4 p{font-size:25px}
  .chain{gap:10px 0;margin-top:36px}
  h1{font-size:42px}h2{font-size:31px}
  body{font-size:17px}
}


/* v17: let the long hero headline break evenly */
.hero h1{max-width:15ch;text-wrap:balance}
.creedband h2,.close h2,section h2{text-wrap:balance}
@media(max-width:900px){.hero h1{max-width:none}}


/* v17: expandable disclosures, used for property terms and the org chart */
.disc{margin:26px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  max-width:none}
.disc>summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--green-deep);
  display:flex;align-items:center;gap:11px;min-height:44px}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::before{content:"";width:11px;height:11px;flex:0 0 11px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.disc[open]>summary::before{transform:rotate(-135deg) translate(-3px,-3px)}
.disc>summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.disc>*:not(summary){padding-bottom:26px}


/* v17: the matrix destination sits on the pale ground on the homepage,
   where #527A12 measures 4.33. The deeper green clears AA. */
[style*="background:var(--pale)"] .pmx-r .dst,
[style*="background:var(--mist)"] .pmx-r .dst,
[style*="background:var(--pale)"] .pmx-r i,
[style*="background:var(--mist)"] .pmx-r i{color:var(--green-pale)}
[style*="background:var(--pale)"] .pmx,
[style*="background:var(--mist)"] .pmx{border-top-color:var(--green-pale)}
[style*="background:var(--mist)"] .eyebrow,
[style*="background:var(--mist)"] .el,
[style*="background:var(--mist)"] .pn{color:var(--green-pale)}


/* v17: nothing is hidden unless the script is running and the visitor
   has not asked for reduced motion. No JavaScript means no fade. */
@media(prefers-reduced-motion:no-preference){
  html.js .rv:not(.on){opacity:0;transform:translateY(10px)}
  html.js .reveal:not(.in){opacity:0;transform:translateY(10px)}
}
html.js .rv.on,html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv,.reveal{opacity:1 !important;transform:none !important;transition:none !important}
}


/* ================================================================
   v18. FINAL DESIGN LAYER
   ----------------------------------------------------------------
   Three things changed and everything else follows from them.

   1. Navigation moved from a fixed 265px navy sidebar to a sticky
      top masthead. With five destinations and one action, horizontal
      is the correct pattern, and the page gets its full width back.
   2. Newsreader now uses its optical size axis, so display sizes get
      the refined cut and small sizes get the sturdy one.
   3. One modular scale at 1.25, one measure at 66 characters, one
      spacing scale. Nothing is sized by eye.
   ================================================================ */

:root{
  /* modular scale, 1.25 from an 18px base */
  --t--1:14.4px; --t-0:18px; --t-1:22.5px; --t-2:28.1px;
  --t-3:35.2px; --t-4:43.9px; --t-5:54.9px; --t-6:68.7px;
  /* spacing, 4 based */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --measure:66ch;
  --mast-h:76px;
  --edge:40px;
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-size:var(--t-0);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  hanging-punctuation:first;
}
::selection{background:var(--lime);color:var(--navy)}

/* the old chrome is gone */
.side,.topbar,.scrim,.side-nav,.side-cta,.side-brand,.side-foot{display:none !important}
.main{margin-left:0 !important;width:100% !important;padding-top:var(--mast-h)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--edge);width:100%}

/* ---------------------------------------------------------------- masthead */
.mast{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--mast-h);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}
.mast.is-stuck{border-bottom-color:var(--rule);box-shadow:0 1px 0 rgba(10,37,64,.03)}
.mast-in{max-width:1240px;margin:0 auto;padding:0 var(--edge);height:100%;
  display:flex;align-items:center;gap:var(--s7)}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.mark img{border-radius:7px;display:block}
.mark-t{display:flex;flex-direction:column;line-height:1}
.mark-t b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--navy);
  letter-spacing:-.015em}
.mark-t i{font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green-deep);margin-top:4px}
.mast-nav{display:flex;align-items:center;gap:var(--s6);margin-right:auto}
.mast-nav a{position:relative;font-size:15px;font-weight:500;color:var(--navy);
  text-decoration:none;padding:6px 0;line-height:1;white-space:nowrap}
.mast-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease}
.mast-nav a:hover::after,.mast-nav a:focus-visible::after{transform:scaleX(1)}
.mast-nav a.is-active{color:var(--green-deep)}
.mast-nav a.is-active::after{transform:scaleX(1);background:var(--green-deep)}
.mast-act{display:flex;align-items:center;gap:var(--s4);flex:0 0 auto}
.b-sm{min-height:40px;padding:0 18px;font-size:14px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mobnav{position:fixed;inset:var(--mast-h) 0 0;z-index:55;background:var(--navy);
  padding:var(--s7) var(--edge);overflow-y:auto}
.mobnav nav{display:flex;flex-direction:column;gap:2px}
.mobnav a{font-family:var(--serif);font-weight:400;font-size:30px;color:#fff;
  text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);
  letter-spacing:-.015em}
.mobnav a.is-active{color:var(--lime)}
.mobnav .mn-cta{border:0;margin-top:var(--s7);background:var(--lime);color:var(--navy);
  font-family:var(--sans);font-size:16px;font-weight:600;text-align:center;
  border-radius:5px;padding:16px 20px}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-optical-sizing:auto;
  text-wrap:balance}
h1{font-size:clamp(44px,6.1vw,92px);line-height:.95;font-weight:300;letter-spacing:-.038em;
  margin:0}
h2{font-size:clamp(32px,4.1vw,var(--t-5));line-height:1.03;font-weight:300;
  letter-spacing:-.03em;margin:0}
h3{font-size:clamp(22px,2.1vw,var(--t-2));line-height:1.18;font-weight:400;
  letter-spacing:-.016em}
p,li{max-width:var(--measure);text-wrap:pretty}
.lead{font-family:var(--sans);font-size:clamp(20px,1.7vw,24px);line-height:1.48;
  font-weight:400;color:var(--slate);max-width:44ch;letter-spacing:-.006em}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;display:block}
b,strong{font-weight:600}
a{text-underline-offset:3px;text-decoration-thickness:1px}
.num,.proof b,.rframe b,.statdate,.mnote,.quietstatus,.msub,.mlab{
  font-variant-numeric:tabular-nums lining-nums}

/* ---------------------------------------------------------------- sections */
section{padding:var(--s10) 0;border:none}
section + section{border-top:none}
[id]{scroll-margin-top:calc(var(--mast-h) + 24px)}

/* the editorial section marker: a rule, a number, a label */
.sechead{display:grid;grid-template-columns:auto 1fr;gap:0 22px;align-items:start;
  margin-bottom:var(--s7)}
.sechead .sn{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--slate);padding-top:5px;font-variant-numeric:tabular-nums}
.sechead .st{min-width:0}
.sechead .eyebrow{margin-bottom:20px;color:var(--green-deep)}
.sechead h2{max-width:19ch}
.sechead .sub{font-size:var(--t-1);line-height:1.5;color:var(--slate);
  max-width:52ch;margin:22px 0 0}
.secrule{height:1px;background:var(--rule);margin:0 0 var(--s7)}

/* ---------------------------------------------------------------- buttons */
.b{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 26px;border-radius:5px;font-family:var(--sans);font-size:15px;font-weight:600;
  text-decoration:none;letter-spacing:0;transition:background .16s ease,color .16s ease,
  border-color .16s ease}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s7)}

/* ---------------------------------------------------------------- footer */
footer{background:var(--navy);color:rgba(255,255,255,.72);padding:var(--s9) 0 var(--s7)}
footer a{color:rgba(255,255,255,.72)}
footer a:hover{color:var(--lime)}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1180px){
  .mast-nav{gap:var(--s5)}
  .mast-in{gap:var(--s6)}
}
@media(max-width:1000px){
  :root{--edge:24px;--mast-h:66px}
  .mast-nav{display:none}
  .burger{display:flex}
  .mast-act .b-sm{display:none}
  .mast-in{justify-content:space-between;gap:var(--s4)}
  section{padding:var(--s9) 0}
}
@media(max-width:640px){
  :root{--edge:20px}
  section{padding:72px 0}
  .sechead{grid-template-columns:1fr;gap:14px}
  .sechead .sn{padding-top:0}
  .mobnav a{font-size:26px}
}
@media(min-width:1001px){.mobnav{display:none !important}}


/* ---------------------------------------------------------------- v18 refinements */

/* the masthead sits solid, so dark bands start cleanly beneath it */
.mast{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

/* the philosophy band, balanced across the full width */
.creedband{padding:var(--s10) 0}
.cbhead{display:grid;grid-template-columns:1.15fr 1fr;gap:0 var(--s9);align-items:end}
.cbhead .sn{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.45);margin-bottom:22px;font-variant-numeric:tabular-nums}
.creedband .eyebrow{color:var(--lime);margin-bottom:24px}
.creedband h2{color:#fff;max-width:15ch}
.cbside{padding-bottom:6px}
.creedband .cbl{font-size:var(--t-1);line-height:1.5;color:rgba(255,255,255,.76);
  max-width:44ch;margin:0}
.chain{display:flex;align-items:center;gap:0;margin:36px 0 0;flex-wrap:wrap}
.creed4{display:grid;grid-template-columns:repeat(2,1fr);gap:26px var(--s9);
  margin:var(--s9) 0 0;padding-top:var(--s7);border-top:1px solid rgba(255,255,255,.16)}
.creed4 p{font-size:clamp(26px,2.7vw,38px)}

/* section markers */
.sechead{margin-bottom:var(--s7)}
.prtrack{margin-top:0}
.pmx{margin-top:0}
.ecosys{margin-top:0}
.mapwrap{margin-top:0}

/* accountability head sits inside its own column */
.acctwrap .sechead{margin-bottom:var(--s5)}
.acctwrap .sechead h2{max-width:14ch}

/* hero, on the wider canvas */
.hero{padding-top:var(--s9);padding-bottom:0}
.hero .wrap.hgrid{grid-template-columns:1.08fr 1fr;gap:var(--s9);align-items:center}
.hero h1{max-width:13ch}
.hero .lead{margin-top:var(--s5)}
.hcard{padding:38px 36px 32px}
.proof{margin-top:var(--s9)}
.proof .wrap{padding-top:var(--s7);padding-bottom:var(--s7)}
.proof b{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.4vw,64px);
  line-height:1;letter-spacing:-.03em;color:var(--navy);display:block}
.proof span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin-top:14px}

@media(max-width:1000px){
  .cbhead{grid-template-columns:1fr;gap:var(--s7)}
  .cbside{padding-bottom:0}
  .creed4{grid-template-columns:1fr;gap:18px;margin-top:var(--s7)}
  .hero .wrap.hgrid{grid-template-columns:1fr;gap:var(--s7)}
  .hero h1{max-width:none}
}


/* ---------------------------------------------------------------- section marker */
.sechead{display:block;margin-bottom:var(--s7)}
.sechead .st{display:block}
.sechead .sn{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;color:var(--slate);margin-bottom:18px;
  font-variant-numeric:tabular-nums}
.sechead .sn::after{content:"";width:34px;height:1px;background:var(--rule);display:block}
.sechead .eyebrow{margin-bottom:22px;color:var(--green-deep)}
.sechead h2{max-width:19ch}
.sechead .sub{font-size:var(--t-1);line-height:1.5;color:var(--slate);max-width:50ch;
  margin:24px 0 0}

/* the philosophy band uses the same marker, in reverse */
.cbhead .sn{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.45);margin-bottom:18px;
  font-variant-numeric:tabular-nums}
.cbhead .sn::after{content:"";width:34px;height:1px;background:rgba(255,255,255,.28);display:block}

/* ---------------------------------------------------------------- vertical chain */
.chain{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:38px 0 0;
  flex-wrap:nowrap}
.chain span{position:relative;display:flex;align-items:center;padding:0 0 22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.74)}
.chain span::before{content:"";display:block;width:9px;height:9px;border-radius:50%;
  background:var(--lime);margin-right:14px;flex:0 0 9px}
.chain span:not(:last-child)::after{content:"";position:absolute;left:4px;top:14px;
  height:22px;width:1.5px;background:var(--lime);opacity:.5}
.chain span:last-child{padding-bottom:0}

.cbhead{align-items:start}
.cbside{padding-bottom:0;padding-top:4px}


/* ---------------------------------------------------------------- footer, v18 */
footer{background:var(--navy);color:rgba(255,255,255,.66);padding:var(--s9) 0 var(--s7)}
footer .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.05fr;gap:var(--s7);
  align-items:start}
footer .fbrand .mark{margin-bottom:22px}
footer .fbrand .mark-t b{color:#fff}
footer .fbrand .mark-t i{color:var(--lime)}
footer .ftag{font-size:15px;line-height:1.6;color:rgba(255,255,255,.66);max-width:38ch;margin:0}
footer b{display:block;color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:18px;font-weight:500}
footer .fgrid>div>a{display:block;font-size:15px;line-height:1.5;padding:5px 0;
  color:rgba(255,255,255,.66);text-decoration:none}
footer .fgrid>div>a:hover{color:var(--lime);text-decoration:underline}
footer .fmeta{display:block;font-size:14px;line-height:1.5;padding:5px 0;
  color:rgba(255,255,255,.46)}
.fsig{display:flex;gap:22px;flex-wrap:wrap;margin:26px 0 0;padding-top:0;border-top:none}
.fsig .fsl{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.fsig .fsl i{width:22px;height:3px;border-radius:2px;background:var(--lime);display:block}
.fsig .fsl:nth-child(2) i{opacity:.72}
.fsig .fsl:nth-child(3) i{opacity:.48}
footer .fine{margin:var(--s9) 0 0;padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--sans);font-size:13px;line-height:1.7;letter-spacing:0;
  text-transform:none;color:rgba(255,255,255,.46);max-width:96ch}
@media(max-width:1000px){
  footer .fgrid{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s6)}
  footer .fbrand{grid-column:1 / -1}
}
@media(max-width:560px){
  footer .fgrid{grid-template-columns:1fr}
}


/* footer: the column labels are mono uppercase, the wordmark is not */
footer .fgrid>div>b{display:block;color:#fff;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:500}
footer .fbrand .mark-t b{font-family:var(--serif);font-weight:500;font-size:19px;
  letter-spacing:-.015em;text-transform:none;margin:0;color:#fff}
footer .fbrand .mark-t i{font-family:var(--mono);font-style:normal;font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-top:4px}

/* the close is left aligned, like every other section on the page */
.close{text-align:left}
.close .wrap{text-align:left}
.close h2{max-width:15ch;margin:0}
.close p{font-size:var(--t-1);line-height:1.5;color:rgba(255,255,255,.76);
  max-width:46ch;margin:26px 0 0}
.close .btns{margin-top:var(--s7);justify-content:flex-start}


footer .fbrand .mark{display:flex !important;align-items:center;gap:12px}
footer .fine{color:rgba(255,255,255,.54)}
footer .fmeta{color:rgba(255,255,255,.56)}
.fsig .fsl{color:rgba(255,255,255,.56)}
.cbhead .sn{color:rgba(255,255,255,.58)}
.creedband .cbl{color:rgba(255,255,255,.82)}
.chain span{color:rgba(255,255,255,.8)}
.close p{color:rgba(255,255,255,.82)}
.closenote{color:rgba(255,255,255,.66)}
.hends .hl{color:rgba(255,255,255,.62)}


/* ---------------------------------------------------------------- tiles to rules */
.tile{background:none;border:0;border-top:3px solid var(--navy);border-radius:0;
  box-shadow:none;padding:24px 0 0;margin:0}
.tile:hover{transform:none;box-shadow:none;border-color:var(--navy)}
.tile .ic{width:38px;height:38px;border-radius:5px;margin-bottom:18px}
.tile h3{font-size:var(--t-1);margin-bottom:10px;letter-spacing:-.014em}
.tile p{font-size:15.5px;line-height:1.6;color:var(--slate);max-width:36ch}
.tile .num{right:0;top:-6px;font-size:44px;font-weight:300;color:var(--pale)}
.tile.a1{border-top-color:var(--navy)}
.tile.a2{border-top-color:var(--green-deep)}
.tile.a3{border-top-color:var(--blue)}
.tile.a4{border-top-color:var(--lime)}
.tile.wash1,.tile.wash2,.tile.wash3,.tile.wash4{background:none}
.tile .tag{background:none;padding:0;border-radius:0;color:var(--green-deep);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em}
a.tile:hover h3{text-decoration:underline;text-underline-offset:3px}

/* the capstone keeps a ground so it still reads as the seventh */
.tile.cap,.p7.cap{background:var(--mist);padding:32px 30px;border-top-width:3px}

/* grids of tiles get real air */
.grid,.grid.g2,.grid.g3{gap:var(--s7) var(--s6)}

/* callouts lose the box as well */
.callout,.fnote{background:none;border:0;border-left:2px solid var(--lime);
  border-radius:0;padding:4px 0 4px 20px;box-shadow:none}
.callout p,.fnote p{color:var(--slate)}
.obox{background:none;border:0;border-top:2px solid var(--rule);border-radius:0;
  box-shadow:none;padding:20px 0 0}
.obox.top{border-top-color:var(--green-deep);background:none}
.pcard,.bcard{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;
  box-shadow:none;padding:22px 0 0}

.mast-nav a{padding:15px 0;line-height:1}
.mast-nav a::after{bottom:11px}


/* ================================================================
   v19. TYPE AND MARK
   ----------------------------------------------------------------
   Newsreader and IBM Plex read as a policy institute, and monospace
   labels everywhere read as a blueprint. This organization is about
   people, so the type is now warm without giving up authority.

   Literata was drawn for long-form reading. It has weight, humanity
   and a slightly softer skeleton than Newsreader, and it holds up at
   display sizes instead of going thin.

   Karla is a humanist grotesque with open, friendly forms, widely
   used by civic and cultural organizations. It replaces IBM Plex
   Sans for body and IBM Plex Mono for every label on the site.

   Both are self-hosted variable fonts, which removes two third-party
   round trips from the critical path. 142KB for the pair, latin only.
   ================================================================ */

@font-face{
  font-family:'Literata';
  src:url('fonts/Literata.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/Karla.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}

:root{
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --sans:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
}

body{font-family:var(--sans);font-optical-sizing:auto}
h1,h2,h3,h4{font-family:var(--serif);font-optical-sizing:auto}

/* Literata carries more weight than Newsreader at the same size, so the
   display sizes come down a step and the tracking opens very slightly. */
h1{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.03em;line-height:.99;font-weight:300}
h2{font-size:clamp(30px,3.7vw,48px);letter-spacing:-.024em;line-height:1.06;font-weight:300}
h3{font-size:clamp(21px,1.95vw,28px);letter-spacing:-.012em;line-height:1.2;font-weight:400}

/* labels were monospace. They are now letterspaced Karla, which reads as a
   label without reading as a control number. */
.eyebrow,.sechead .sn,.cbhead .sn,.mark-t i,.mast-nav .navlbl,
.proof span,.rframe b,.statdate,.mkey li,.mlab,.msub,.chain span,
.fsig .fsl,footer .fgrid>div>b,.statuscard .sk,.pmx-h span,.pmx-r i,
.framelbl,.tile .tag,.gaplbl,.hstages,.hends .hl{
  font-family:var(--sans);font-weight:600;letter-spacing:.13em}
.eyebrow{font-size:11px;letter-spacing:.15em}
.quietstatus,.mnote,.boardnote,.pmxnote{font-family:var(--sans);letter-spacing:0;
  font-weight:400;font-size:14.5px;line-height:1.7}
.disc>summary{font-family:var(--sans);font-weight:600;letter-spacing:.12em}

/* Karla sets a little narrower than Plex, so the measure holds at 66ch
   and the lead can breathe one step wider. */
.lead{max-width:46ch}
.hfoot{font-family:var(--serif)}

/* ---------------------------------------------------------------- the mark */
/* mark.png is the tree alone, on transparency, square, nothing trimmed.
   No white plate, no rounded corner, no forced aspect. */
.markimg{width:42px;height:42px;object-fit:contain;border-radius:0;background:none;
  display:block;flex:0 0 42px}
.mark{gap:13px}
.mark-t b{font-size:20px;font-weight:600;letter-spacing:-.012em}
.mark-t i{font-size:8.5px;letter-spacing:.2em;margin-top:5px}

/* the footer carries the approved lockup instead of a re-typeset name */
footer .fbrand .lockup{width:186px;height:auto;display:block;margin-bottom:20px}
footer .fbrand .mark{display:block !important;margin-bottom:0}
footer .fbrand .mark-t{display:none}

@media(max-width:1000px){
  .markimg{width:38px;height:38px;flex:0 0 38px}
  .mark-t b{font-size:18px}
}


/* v19: no plate behind the mark, anywhere */
footer img,.mark img,.markimg{background:none;border-radius:0;padding:0}
.markimg{object-fit:contain}
footer .fbrand .markimg-lg{width:52px;height:52px;flex:0 0 52px;margin:0 0 0 0}
footer .fbrand .mark{display:flex !important;align-items:center;gap:14px;margin-bottom:22px}
footer .fbrand .mark-t{display:flex}
footer .fbrand .mark-t b{font-family:var(--serif);font-weight:600;font-size:21px;
  letter-spacing:-.012em;text-transform:none;margin:0;color:#fff}
footer .fbrand .mark-t i{font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-top:5px}


@media(max-width:1200px){.mast-nav{gap:26px}.mast-in{gap:34px}}
@media(max-width:1120px){.mast-nav{gap:20px}.mast-in{gap:26px}.mast-nav a{font-size:14.5px}}
@media(max-width:1080px){
  :root{--edge:24px;--mast-h:66px}
  .mast-nav{display:none}
  .burger{display:flex}
  .mast-act .b-sm{display:none}
  .mast-in{justify-content:space-between;gap:var(--s4)}
}
@media(min-width:1081px){.mobnav{display:none !important}}


/* ================================================================
   v20. The closing call to action, and the footer beneath it.
   ================================================================ */

/* --- outlined buttons on dark grounds are white, never navy --- */
.cta .btn-line,.close .btn-line,.prt .btn-line,.creedband .btn-line,.stmt .btn-line,
.cta .b-line,.close .b-line,.prt .b-line,.creedband .b-line,.stmt .b-line,
.cta .b-ghost,.close .b-ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.cta .btn-line:hover,.close .btn-line:hover,.prt .btn-line:hover,
.creedband .btn-line:hover,.stmt .btn-line:hover,
.cta .b-line:hover,.close .b-line:hover,.prt .b-line:hover,
.creedband .b-line:hover,.stmt .b-line:hover,
.cta .b-ghost:hover,.close .b-ghost:hover{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.8)}
.cta .btn-gold,.close .btn-gold{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.cta .btn-gold:hover,.close .btn-gold:hover{background:var(--lime-2);border-color:var(--lime-2);color:var(--navy)}
.cta .btn,.close .btn{border-radius:5px;padding:0 26px;min-height:48px;font-size:15px;
  font-weight:600;display:inline-flex;align-items:center;justify-content:center}

/* --- the closing call to action reads like the rest of the site --- */
.cta{background:var(--navy);background-image:none;color:#fff;text-align:left;
  padding:var(--s9) 0 var(--s9)}
.cta .wrap{text-align:left}
.cta h2{color:var(--lime);max-width:16ch;margin:0}
.cta p{font-size:var(--t-1);line-height:1.5;color:rgba(255,255,255,.82);
  max-width:52ch;margin:24px 0 0}
.cta .hbtns{justify-content:flex-start;margin-top:var(--s7);gap:14px}
.close{padding:var(--s9) 0}

/* --- the footer is a deeper ground, so the bottom reads as two things --- */
footer{background:#061727;border-top:1px solid rgba(255,255,255,.14);
  padding:var(--s8) 0 var(--s7)}
footer .fgrid{gap:var(--s7) var(--s6)}
footer .fgrid>div>b{font-size:12px;letter-spacing:.14em;color:#fff;font-weight:600;
  margin-bottom:20px}
footer .fgrid>div>a{font-size:16px;padding:7px 0;color:rgba(255,255,255,.76)}
footer .fgrid>div>a:hover{color:var(--lime)}
footer .ftag{font-size:15.5px;color:rgba(255,255,255,.7)}
footer .fmeta{font-size:15px;color:rgba(255,255,255,.6);padding:7px 0}
footer .fine{margin-top:var(--s8);padding-top:var(--s5);font-size:13px;
  color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.12)}
.fsig{margin-top:var(--s5)}
.fsig .fsl{color:rgba(255,255,255,.6)}

@media(max-width:640px){
  .cta{padding:72px 0}
  footer{padding:56px 0 40px}
}