/* ============================================================
   Florence Matthews Women's Center — single shared stylesheet.
   Five colours. Four type sizes. One card. No gradients.
   ============================================================ */

:root{
  /* ============================================================
     COLOUR TOKENS — thirteen. One place to edit.
     ============================================================ */
  --color-ink:        #241B28;  /* body text, most headings          */
  --color-ink-soft:   #6B5A74;  /* secondary and helper text         */
  --color-plum:       #7B2D96;  /* header bar, links                 */
  --color-coral:      #D85A30;  /* PRIMARY BUTTON                    */
  --color-teal:       #0F6E56;  /* trust bar, solid full-bleed       */
  --color-cream:      #FDF3E8;  /* hero band                         */
  --color-mint:       #E8F3F1;  /* tiles band, one tile square       */
  --color-marigold:   #EF9F27;  /* rules, underlines, tile square    */
  --color-peach:      #F0997B;  /* tile square, image placeholder    */
  --color-green:      #5DCAA5;  /* tile square                       */
  --color-surface:    #FFFFFF;
  --color-page:       #FFFFFF;
  --color-line:       #E4D3EE;

  /* ---- legacy aliases so no page breaks ---- */
  --color-primary:var(--color-plum); --color-primary-sf:var(--color-plum);
  --color-accent:var(--color-coral); --color-accent-ink:#FFFFFF;
  --color-primary-deep:#5E2073; --color-tint:var(--color-mint);
  --plum:var(--color-plum); --plum-700:var(--color-primary-deep);
  --cream:var(--color-cream); --white:var(--color-surface);
  --gold:var(--color-marigold); --gold-ink:var(--color-ink);
  --ink:var(--color-ink); --muted:var(--color-ink-soft); --line:var(--color-line);
  --brand:var(--color-plum); --brand-600:var(--color-primary-deep);
  --brand-900:var(--color-primary-deep);
  --t1:var(--color-plum); --t2:var(--color-plum); --t3:var(--color-plum);
  --t4:var(--color-plum); --t5:var(--color-plum); --t6:var(--color-plum);
  --teal:var(--color-teal); --rose:var(--color-coral);
  --indigo:var(--color-plum); --violet:var(--color-plum);
  --amber:var(--color-marigold); --amber-ink:var(--color-ink);
  --ink-2:var(--color-ink-soft); --ink-3:var(--color-ink-soft);
  --ink-soft:var(--color-ink-soft);
  --card:var(--color-surface); --ground:var(--color-page);
  --tint:var(--color-mint); --amber-tint:var(--color-cream);
  --teal-tint:var(--color-mint); --sage-tint:var(--color-mint);
  --line-2:var(--color-line);

  /* ---- type ---- */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --fs-h1:48px;
  --fs-h:clamp(1.6rem,2.6vw,2rem);
  --fs-title:1.0625rem;
  --fs-body:1.0625rem;
  --fs-small:0.9375rem;

  --radius:12px;
  --shadow:0 1px 2px rgba(36,27,40,.04), 0 4px 12px rgba(36,27,40,.05);
  --shadow-h:0 2px 4px rgba(36,27,40,.06), 0 10px 24px rgba(36,27,40,.09);
  --r:var(--radius); --r-lg:var(--radius); --r-sm:8px;
  --sh-1:var(--shadow); --sh-2:var(--shadow-h); --sh-3:var(--shadow-h);
  --maxw:1100px;
  --measure:70ch;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --disp:var(--serif);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--color-page); color:var(--color-ink);
  font:400 var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing:antialiased}

h1,h2{font-family:var(--serif); font-weight:600; line-height:1.2;
  letter-spacing:-.01em; color:var(--color-ink); margin:0 0 .5em}
h3,h4{font-family:var(--serif); font-size:var(--fs-title); font-weight:600;
  line-height:1.35; color:var(--color-ink); margin:0 0 .5em}
/* only the hero H1 and the logo lockup carry the primary colour */
.hero h1{font-family:var(--serif); font-size:var(--fs-h1); font-weight:600;
  color:var(--color-ink); line-height:1.15}
.brand{color:var(--color-primary)}
p,li,td,th,dd,dt{font-size:var(--fs-body)}
p{margin:0 0 1em; max-width:var(--measure)}
strong,b{font-weight:700; color:var(--ink)}
a{color:var(--plum); text-underline-offset:3px}
a:hover{color:var(--plum-700)}
ul.tight{margin:0; padding-left:1.15em; line-height:1.7}
ul.tight li{margin-bottom:.3em; max-width:var(--measure)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
@media(max-width:700px){.wrap{padding:0 24px}}
.ctr{text-align:center}
.ctr p,.ctr .lede{margin-left:auto; margin-right:auto}
p,li,ul,ol,dl,.body-copy,.lede,.intro-1{text-align:left}
.sec-head{text-align:left; max-width:var(--measure); margin:0 0 28px}
.sec-head h1,.sec-head h2{text-align:left}
.sec-head p,.sec-head .lede,.sec-head .intro-1{text-align:left; margin-left:0; margin-right:0}
.sec-head .rule{width:56px; height:4px; border-radius:2px; margin:0 0 16px;
  background:var(--color-marigold)}
.sec-head .rule{width:56px; height:3px; border-radius:2px; margin:0 auto 16px;
  background:var(--color-marigold)}
.sec-head .lede,.sec-head .intro-1{text-align:left}
/* only single-line intros stay centred; body copy is left-aligned */
.body-copy{max-width:var(--measure); margin:0; text-align:left}
.intro-1{max-width:var(--measure); margin:0 0 20px; text-align:left}
.narrow,.narrower{max-width:var(--measure); margin-left:0; margin-right:0}
.lede{font-size:var(--fs-body); color:var(--muted); max-width:var(--measure); line-height:1.65}
.small,.src,.cite,.count,.track-m,.ev-date,.memb-note,.rules-lead{font-size:var(--fs-small)}

/* ---------- sections: flat fills, alternating ---------- */
section{padding:96px 0; background:var(--color-page)}
section.tint,section.tint-teal,section.tint-amber,section.tint-cream,section.tint-sage{
  background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media(max-width:700px){section{padding:64px 0}}
.sec-head{text-align:center; max-width:var(--measure); margin:0 auto 32px}
.sec-head .lede{margin:0 auto}
.rule{width:32px; height:3px; border-radius:2px; margin:0 auto 16px;
  background:var(--color-accent)}
.eyebrow{display:inline-block; font-size:var(--fs-small); letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-ink); font-weight:700; margin-bottom:10px}

/* ---------- header ---------- */
header.site{background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60; padding:14px 0}
header.site .bar{display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap}
header.site a{text-decoration:none}
.brand{font-size:1.25rem; font-weight:700; color:var(--plum); letter-spacing:-.02em;
  line-height:1.15; display:block}
.brand small{display:block; font-size:var(--fs-small); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:3px}
nav.site ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
nav.site a{display:block; font-size:var(--fs-small); font-weight:600; color:var(--muted);
  padding:9px 14px; border-radius:8px; transition:.14s}
nav.site a:hover{background:var(--cream); color:var(--plum)}
nav.site a[aria-current="page"]{background:var(--plum); color:var(--white)}
.subnav{display:flex; gap:8px; flex-wrap:wrap; padding:16px 0 0}
.subnav a{font-size:var(--fs-small); font-weight:600; text-decoration:none; padding:8px 15px;
  border-radius:8px; border:1px solid var(--line); background:var(--white); color:var(--muted)}
.subnav a:hover{border-color:var(--plum); color:var(--plum)}
.subnav a[aria-current="page"]{background:var(--plum); border-color:var(--plum); color:var(--white)}

/* ---------- hero: short, so the first cards peek above the fold ---------- */
.hero{background:var(--white); border-bottom:1px solid var(--line); padding:28px 0 32px;
  text-align:center; color:var(--ink)}
.hero h1{margin:0 auto .35em; max-width:20ch}
.hero p.lead,.hero .lead{font-size:var(--fs-body); color:var(--muted);
  max-width:var(--measure); margin:0 auto 1.2em; line-height:1.65}
.hero .lead b,.hero .lead strong{color:var(--plum)}
.hero-art{max-width:300px; margin:0 auto 10px}
.hero-art svg{width:100%; height:auto; display:block}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0}
.kicker{display:inline-block; font-size:var(--fs-small); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-ink); margin-bottom:10px}
.wordmark{font-size:var(--fs-h); font-weight:600; color:var(--plum); margin:0 auto 6px;
  max-width:24ch; line-height:1.15; letter-spacing:-.022em}
.whois{max-width:var(--measure); margin:0 auto 16px; color:var(--muted); line-height:1.65}
.whois b{color:var(--plum)}
.hero-split{display:grid; grid-template-columns:1fr; gap:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font:600 var(--fs-body)/1 var(--sans);
  padding:14px 26px; border-radius:8px; cursor:pointer; text-decoration:none; transition:.15s;
  background:#FFFFFF; color:var(--color-plum); border:1px solid var(--color-plum)}
.btn:hover{background:var(--color-tint); color:var(--color-primary-deep);
  border-color:var(--color-primary-deep)}
.btn-primary,#go{background:var(--color-coral);
  border-color:var(--color-coral); color:#FFFFFF; font-weight:600}
.btn-primary:hover,#go:hover{background:#C24E27;
  border-color:#C24E27; color:#FFFFFF}
.btn-quiet,.btn-ghost{background:var(--color-surface); color:var(--color-primary);
  border-color:var(--color-primary)}
.btn-quiet:hover,.btn-ghost:hover{border-color:var(--plum); background:var(--white); color:var(--plum)}
.btn-lg{padding:15px 28px}

/* ---------- ONE card style, everywhere ---------- */
.card,.res,.stat,.wk,.seat,.kind,.track,.memb-l,.memb-r,.jobcard,.cov,.lk,.q,.step,.story,
.tool,.role,.callout,.vid{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); transition:.15s}
.card:hover,.res:hover,.wk:hover,.kind:hover,.track:hover,.jobcard:hover,.cov:hover,
.lk:hover,.q:hover,.tool:hover,.role:hover{box-shadow:var(--shadow-h); border-color:var(--plum)}
.card h3,.res h4,.wk h3,.track h3,.kind h3,.role h3{margin-top:0}
.card p:last-child,.res p:last-child{margin-bottom:0}
.topband,.topband.b2,.topband.b3{border-top:1px solid var(--line)}   /* colour bars removed */
.callout{border-left:3px solid var(--gold)}
.callout h3{color:var(--gold-ink)}
.story{padding:28px}
.story-lead{font-size:var(--fs-body); font-weight:700; color:var(--plum)}
.story-close{border-top:1px solid var(--line); padding-top:16px; margin-bottom:0}

/* ---------- grids: fill the row, equal height ---------- */
.grid,.g2,.g3,.tiles,.qgrid,.covgrid,.linkrow,.needs,.assess-grid,.exlist,.band-grid,.memb{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;
  align-items:stretch}
.memb{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.exch-wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px;
  align-items:start}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.grid > *,.qgrid > *,.covgrid > *,.linkrow > *{height:100%}

/* ---------- every icon tile: plum with a white icon ---------- */
.ico-badge,.qi,.nic,.adot,.track-ic,.step-n{
  width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--color-tint); color:var(--color-primary);
  flex:none; margin-bottom:12px}
.ico-badge .ico,.qi .ico,.nic .ico,.adot .ico,.track-ic .ico{width:20px; height:20px;
  color:var(--color-primary)}
.ico{width:1.2em; height:1.2em; flex:none; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em}
.step-n{margin:0 12px 0 0; font-weight:600; border-radius:50%;
  background:var(--color-tint); color:var(--color-primary)}
.ico-badge.a,.ico-badge.t,.ico-badge.r,.ico-badge.i{background:var(--color-tint); color:var(--color-primary)}

/* quick-pick tiles */
.q,.tile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  justify-content:flex-start; text-decoration:none; color:var(--ink); font-weight:600;
  min-height:0; border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow)}
.q:hover,.tile:hover{color:var(--plum)}
.q .qi{margin-bottom:0}
.lk{display:flex; flex-direction:row; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.lk .ico{width:22px; height:22px; color:var(--plum)}
.lk b{display:block; font-size:var(--fs-title); font-weight:600; line-height:1.25; color:var(--plum)}
.lk em{display:block; font-style:normal; font-size:var(--fs-small); color:var(--muted); margin-top:2px}

/* ---------- forms ---------- */
label.fld{display:block; font-size:var(--fs-small); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px}
input[type=text],select{width:100%; font:inherit; padding:13px 14px; border:1px solid var(--line);
  border-radius:8px; background:var(--white); color:var(--ink)}
input[type=text]:focus,select:focus{outline:none; border-color:var(--plum);
  box-shadow:0 0 0 3px rgba(123,45,150,.14)}
.step-head{display:flex; align-items:center; margin-bottom:6px}
.step-head h2{margin:0; font-size:var(--fs-title)}
.step .hint{color:var(--muted); margin:0 0 18px; max-width:var(--measure)}
#step3{padding:20px}
#step3 #gohint{margin:10px 0 0 !important; font-size:var(--fs-small)}
.needs .need,.assess-grid .acard{position:relative}
.need input,.acard input{position:absolute; opacity:0; width:1px; height:1px}

/* ONE box per option. Icon on top, title on its own full-width line,
   description underneath. Only the DIRECT child span is the card —
   scoping this loosely is what produced a card inside a card. */
.need > span,.acard > span.box{display:flex; flex-direction:column; align-items:flex-start;
  gap:10px; height:100%; min-height:150px;
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; cursor:pointer;
  background:var(--white); box-shadow:var(--shadow); transition:.15s}
.need > span > span,.acard > span.box > span{display:block; width:100%; border:none;
  background:none; box-shadow:none; padding:0; margin:0}
.acard em{flex:1 1 auto}
.acard .arow{margin-top:auto; padding-top:12px}
.need > span:hover,.acard > span.box:hover{border-color:var(--plum)}
.need input:checked + span,.acard input:checked + span.box{border-color:var(--plum);
  box-shadow:0 0 0 2px var(--plum)}
.need b,.acard b{display:block; width:100%; font-weight:600; font-size:var(--fs-title);
  line-height:1.3; color:var(--plum)}
.need em,.acard em{display:block; width:100%; font-style:normal; font-size:var(--fs-small);
  color:var(--muted); margin-top:4px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.needs,.assess-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.need .nic,.acard .adot{margin-bottom:0}
.atop{display:flex; align-items:center; gap:10px}
.arow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; flex-wrap:wrap; width:100%}
.atag,.ttag,.tag,.tagline,.atake,.takebtn{font-size:var(--fs-small); font-weight:700}
.atag,.tag,.tagline{display:inline-block; font-size:.72rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:transparent;
  border:1px solid var(--line); padding:2px 8px; border-radius:5px;
  white-space:nowrap; line-height:1.6}
.atake,.takebtn{display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:var(--white); background:var(--plum); padding:9px 16px; border-radius:8px; white-space:nowrap}
.atake:hover,a.atap:hover .takebtn{background:var(--plum-700); color:var(--white)}
.ttag{display:inline-block; color:var(--white); background:var(--plum);
  padding:4px 10px; border-radius:6px; letter-spacing:.06em; text-transform:uppercase}
.zipmsg{margin-top:12px; font-size:var(--fs-small); padding:11px 13px; border-radius:8px; display:none}
.zipmsg.ok{display:block; background:var(--cream); border:1px solid var(--line); color:var(--ink)}
.zipmsg.bad{display:block; background:var(--cream); border:1px solid var(--gold); color:var(--gold-ink)}

/* ---------- the report ---------- */
#report{display:none; padding-top:16px}
.rpt-head{background:var(--plum); color:var(--white); border-radius:var(--radius);
  padding:28px; margin-bottom:24px}
.rpt-head h2,.rpt-head p{color:var(--white); margin:0}
.rpt-head h2{margin-bottom:6px}
.rpt-meta{font-size:var(--fs-small); letter-spacing:.12em; text-transform:uppercase;
  color:var(--white); opacity:.85; margin-bottom:8px}
.rsec{margin-bottom:36px}
.rsec > h3{display:flex; align-items:center; gap:12px; font-size:var(--fs-h);
  padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--color-line)}
.rsec > h3 .ico-badge{margin-bottom:0; width:34px; height:34px}
.rsec > h3 .count{margin-left:auto; font-weight:700; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase}
.rsec > .blurb{color:var(--muted); margin:0 0 18px; max-width:var(--measure)}
.res{margin-bottom:14px; border-left:3px solid var(--plum)}
.res.local{border-left-color:var(--gold); background:var(--cream)}
.res .tagline{margin-bottom:8px}
.res .who{color:var(--muted)}
.res dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:12px 0 0}
.res dt{font-size:var(--fs-small); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding-top:3px}
.res dd{margin:0}
.res .links,.links{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.res .links a,.links a{font-size:var(--fs-small); font-weight:600; text-decoration:none;
  padding:7px 13px; border-radius:8px; background:var(--cream); color:var(--plum);
  border:1px solid var(--line)}
.res .links a:hover,.links a:hover{background:var(--plum); color:var(--white); border-color:var(--plum)}
.res .note,.res .verify{margin-top:12px; padding:10px 12px; border-radius:8px;
  font-size:var(--fs-small); background:var(--cream); border:1px solid var(--line); color:var(--ink)}
.res .verify{border-left:3px solid var(--gold); color:var(--gold-ink)}
.res .verify b{letter-spacing:.08em; text-transform:uppercase}
.res .src,.src{margin-top:12px; color:var(--muted); word-break:break-word; font-size:var(--fs-small)}
.src a{color:var(--muted)}

/* ---------- stats, tables, misc ---------- */
.band{background:var(--color-tint); border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line); padding:24px 0}
.band-n{font-size:var(--fs-h); font-weight:600; color:var(--plum); line-height:1}
.band-l{color:var(--muted); margin-top:6px; font-size:var(--fs-small)}
.strip{background:var(--color-tint); color:var(--color-ink); padding:14px 0;
  font-size:var(--fs-small); border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line)}
.strip .wrap{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}
.strip b{color:var(--color-ink); font-weight:600}
.strip a{color:var(--color-primary); font-weight:600; text-decoration:underline; white-space:nowrap}
.stat .num{font-size:var(--fs-h); font-weight:600; color:var(--plum); line-height:1}
.stat .lbl{margin-top:6px}
table.data{width:100%; border-collapse:collapse; background:var(--white)}
table.data th,table.data td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
  vertical-align:top}
table.data th{font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--cream); font-weight:700}
table.budget td.num,table.budget th.num{text-align:right; white-space:nowrap}
table.budget td.dim{color:var(--muted); font-size:var(--fs-small)}
table.budget tr.grp td{background:var(--cream)}
table.budget tr.tot td,table.budget tr.tot strong{background:var(--plum); color:var(--white)}
.scroll-x{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
.glance{display:grid; grid-template-columns:auto 1fr; gap:10px 18px}
.glance dt{font-size:var(--fs-small); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--plum); padding-top:4px; white-space:nowrap}
.glance dd{margin:0; padding-bottom:10px; border-bottom:1px solid var(--line)}
.seat{border-style:dashed}
.fields{list-style:none; margin:10px 0 0; padding:0}
.fields li{padding:10px 0 10px 26px; border-top:1px solid var(--line); position:relative}
.fields li:first-child{border-top:none}
.fields li:before{content:"✓"; position:absolute; left:4px; top:10px; font-weight:700; color:var(--plum)}
.fields b{display:block}
.fields span{display:block; font-size:var(--fs-small); color:var(--muted); margin-top:2px}

/* ---------- tabs ---------- */
.tabs{position:sticky; top:66px; z-index:40; background:var(--cream);
  padding:14px 0 12px; border-bottom:1px solid var(--line)}
.tablist{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
.tablist::-webkit-scrollbar{display:none}
.tablist button{flex:none; font:600 var(--fs-small)/1 var(--sans); padding:11px 16px;
  border-radius:8px; border:1px solid var(--line); background:var(--white); color:var(--muted);
  cursor:pointer; white-space:nowrap; transition:.15s}
.tablist button:hover{border-color:var(--plum); color:var(--plum)}
.tablist button[aria-selected="true"]{background:var(--plum); border-color:var(--plum); color:var(--white)}
.panel{padding:28px 0 56px}

/* ---------- workshops, tracks, roles, calendar, exchange ---------- */
.wk{margin-bottom:16px; border-left:3px solid var(--plum)}
.wk-head{margin-bottom:12px}
.wk-sub{font-size:var(--fs-small); color:var(--muted); font-weight:600; margin:0}
.outcome{background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:8px; padding:14px 16px; margin-top:14px; font-size:var(--fs-small); color:var(--ink)}
.outcome b{display:block; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px;
  color:var(--gold-ink)}
.track,.kind{margin-bottom:14px; border-left:3px solid var(--plum)}
.track-h{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.track-h h3{margin:0}
.track-ic{margin-bottom:0}
.track-m{color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.track-why{color:var(--muted)}
.track-s{counter-reset:st; list-style:none; margin:6px 0 0; padding:0}
.track-s li{counter-increment:st; position:relative; padding:14px 0 14px 40px;
  border-top:1px solid var(--line); max-width:none}
.track-s li:before{content:counter(st); position:absolute; left:0; top:14px; width:26px; height:26px;
  border-radius:50%; background:var(--plum); color:var(--white); font-weight:700;
  font-size:var(--fs-small); display:flex; align-items:center; justify-content:center}
.track-s b{display:block; font-size:var(--fs-title); margin-bottom:3px}
.track-s span{display:block; color:var(--muted); font-size:var(--fs-small); line-height:1.55}
.qtoggle{display:block; width:100%; text-align:left; font:700 var(--fs-small)/1.3 var(--sans);
  color:var(--plum); background:var(--cream); border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; cursor:pointer; margin:8px 0 10px}
.qtoggle:hover{background:var(--plum); color:var(--white); border-color:var(--plum)}
.qtoggle .chev{float:right}
.qlist{margin:0 0 12px; padding-left:1.1em; font-size:var(--fs-small); color:var(--muted)}
.qlist li{margin-bottom:6px}
.rolebody{border-top:1px solid var(--line); margin-top:12px; padding-top:12px}
.rolebody h4{font-size:var(--fs-small); letter-spacing:.1em; text-transform:uppercase;
  color:var(--plum); margin:14px 0 6px}
.rolepurpose{border-left:3px solid var(--gold); padding-left:12px; color:var(--muted)}
.mo{padding:0; overflow:hidden}
.mo-head{padding:16px 20px; background:var(--plum); color:var(--white)}
.mo-name{display:block; font-size:var(--fs-title); font-weight:600}
.mo-theme{display:block; font-size:var(--fs-small); color:var(--white); opacity:.9; margin-top:2px}
.ev{padding:16px 20px; border-top:1px solid var(--line)}
.ev.live{background:var(--cream)}
.ev-kind{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-small);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--plum); margin-bottom:6px}
.ev-kind .ico{width:14px; height:14px}
.ev-topic{font-size:var(--fs-title); font-weight:600; color:var(--plum); line-height:1.3}
.ev-who{font-size:var(--fs-small); color:var(--gold-ink); font-weight:600; margin-top:2px}
.ev-blurb{font-size:var(--fs-small); color:var(--muted); margin:8px 0 10px}
.ev-date{font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.rules{background:var(--plum); color:var(--white); border-radius:var(--radius); padding:24px}
.rules h3,.rules-lead,.rules-list li{color:var(--white)}
.rules-list{counter-reset:rl; list-style:none; margin:14px 0 0; padding:0}
.rules-list li{counter-increment:rl; position:relative; padding:11px 0 11px 32px;
  border-top:1px solid rgba(255,255,255,.25); font-size:var(--fs-small); max-width:none}
.rules-list li:before{content:counter(rl); position:absolute; left:0; top:11px; width:22px; height:22px;
  border-radius:50%; background:rgba(255,255,255,.2); color:var(--white); font-weight:700;
  font-size:var(--fs-small); display:flex; align-items:center; justify-content:center}
.rules-list b{color:var(--white); display:block; margin-bottom:2px}
.rules-foot{margin:16px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.25)}
.rules-foot a{color:var(--white)}
.ex{font-size:var(--fs-small); padding:10px 12px; border-radius:8px;
  background:var(--cream); border:1px solid var(--line)}
.ex-t{display:inline-block; font-size:var(--fs-small); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 8px; border-radius:99px; margin-right:8px;
  background:var(--plum); color:var(--white)}
.ex.want .ex-t{background:var(--gold); color:var(--ink)}
.cov{display:block; text-decoration:none; color:var(--ink)}
.cov.has{border-color:var(--gold)}
.cov-n{display:block; font-weight:600; color:var(--plum)}
.cov-z,.cov-c{display:block; font-size:var(--fs-small); color:var(--muted); margin-top:3px}
.cov-c b{color:var(--gold-ink)}
.awrap{margin-bottom:16px}
a.wk.atap,a.card.atap{display:block; text-decoration:none; color:var(--ink)}
a.atap:hover{color:var(--ink)}
.taphint{display:none}
.extras{margin-top:-1px; padding:12px 20px; background:var(--white);
  border:1px solid var(--line); border-top:none; border-radius:0 0 var(--radius) var(--radius)}
.alertline{font-size:var(--fs-small); color:var(--muted); background:var(--cream);
  border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-top:10px}
.memb-r{border-color:var(--plum)}
.jobcard.big,.feature-sp{border-color:var(--plum)}

/* ---------- footer ---------- */
footer.site{background:var(--plum); color:var(--white); padding:36px 0; margin-top:0}
footer.site p,footer.site h4{color:var(--white)}
footer.site a{color:var(--white); text-decoration:underline}

/* ---------- print ---------- */
@media print{
  header.site,nav.site,footer.site,.no-print,.hero,.tabs,.subnav,.strip{display:none!important}
  body{background:#fff; font-size:11pt}
  .step{display:none}
  #report{display:block!important}
  .rpt-head{background:#fff; color:#000; border:1px solid #000}
  .rpt-head h2,.rpt-head p,.rpt-meta{color:#000}
  .res,.card,.stat,.wk,.track{break-inside:avoid; box-shadow:none; border:1px solid #999}
  .res.local,.callout,.outcome{background:#fff!important}
  .links a{background:none; color:#000; padding:0; text-decoration:underline; border:none}
  a{color:#000}
  .panel{display:block!important}
}

/* ---------- the one screener that needs its own framing ---------- */
.sens{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:22px; margin:18px 0; box-shadow:var(--shadow)}
.sens h3{margin-top:0}
.sens p{max-width:var(--measure)}
.sens-help{background:var(--cream); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; font-size:var(--fs-small); line-height:1.7; margin-bottom:14px}
.senscheck{display:flex; align-items:center; gap:10px; margin:0 0 14px; cursor:pointer;
  font-size:var(--fs-small); font-weight:600}
.senscheck input{width:18px; height:18px; accent-color:var(--plum)}

/* ---------- warmth: gold earns its place beyond the one button ---------- */

.eyebrow{color:var(--gold-ink)}
.card,.res,.wk,.track,.kind,.tool,.role,.jobcard,.stat,.cov,.q,.lk,.memb-l,.memb-r,.seat{
  border-color:var(--line)}
.rsec > h3{border-bottom:2px solid var(--gold)}
.rsec > h3 .count{color:var(--gold-ink)}
.band,.strip{border-color:var(--gold)}
.band-n,.stat .num{color:var(--plum)}
.glance dt{color:var(--gold-ink)}
table.data th{color:var(--gold-ink)}
.mo-head{border-bottom:3px solid var(--gold)}
.ev-who{color:var(--gold-ink)}
.hero{background:var(--white); border-bottom:3px solid var(--gold)}
footer.site{border-top:4px solid var(--gold)}


/* ---------- homepage: hero, crisis strip, member block, footer links ---------- */

.hero-eyebrow{font-size:var(--fs-small); letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-ink-soft); font-weight:600; margin:0 auto 18px}
.hero h1{max-width:18ch; margin:0 auto .5em}
.hero-sub{max-width:var(--measure); margin:0 auto 28px; text-align:left;
  color:var(--color-ink-soft); font-size:var(--fs-body); line-height:1.6}
.crisis{background:var(--color-surface); border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line); padding:14px 0}
.crisis .wrap{border-left:4px solid var(--color-accent); border-radius:0; padding-left:16px}
.crisis p{margin:0; font-size:15px; line-height:1.55; max-width:none; color:var(--color-ink)}
.memb-block{max-width:var(--measure); margin:0; text-align:left}
.memb-block h3{margin-top:26px}
.memb-block ul.tight li{margin-bottom:.45em}
.footlinks{display:flex; gap:20px; flex-wrap:wrap; margin:18px 0}
.footlinks a{color:var(--color-surface); font-size:var(--fs-small); text-decoration:underline}
.q{min-height:120px; justify-content:center}

/* ================= full-bleed section bands ================= */
header.site{background:var(--color-plum); border-bottom:none}
header.site .brand,header.site .brand small{color:#FFFFFF}
header.site nav.site a{color:rgba(255,255,255,.86)}
header.site nav.site a:hover{background:rgba(255,255,255,.14); color:#FFFFFF}
header.site nav.site a[aria-current="page"]{background:#FFFFFF; color:var(--color-plum)}

.hero{background:var(--color-cream); border-bottom:none; text-align:left; padding:64px 0}
.hero h1{max-width:20ch; margin:0 0 .4em}
.hero-sub{max-width:var(--measure); margin:0 0 28px; text-align:left; color:var(--color-ink-soft)}
.hero-cta{justify-content:flex-start}

.crisis{background:var(--color-teal); border:none; padding:16px 0}
.crisis .wrap{border-left:4px solid var(--color-marigold); border-radius:0; padding-left:16px}
.crisis p,.crisis strong{color:#FFFFFF}

section{background:#FFFFFF}
section.band-mint{background:var(--color-mint)}
section.band-cream{background:var(--color-cream)}
section.band-white{background:#FFFFFF}
.strip{background:var(--color-mint); color:var(--color-ink);
  border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line)}
.strip a{color:var(--color-plum)}

/* ---- tile icon squares: 56px, four colours, two tiles each ---- */
.q .qi{width:56px; height:56px; border-radius:12px; margin-bottom:0}
.q .qi .ico{width:28px; height:28px; color:var(--color-ink); stroke-width:1.7}
.q:nth-child(8n+1) .qi,.q:nth-child(8n+2) .qi{background:var(--color-peach)}
.q:nth-child(8n+3) .qi,.q:nth-child(8n+4) .qi{background:var(--color-marigold)}
.q:nth-child(8n+5) .qi,.q:nth-child(8n+6) .qi{background:var(--color-green)}
.q:nth-child(8n+7) .qi,.q:nth-child(8n+8) .qi{background:var(--color-mint)}
.q{align-items:flex-start; text-align:left; gap:14px; min-height:132px; padding:22px;
  border-top:4px solid var(--color-line)}

/* ---- image containers, awaiting photographs ---- */
.photo{background:var(--color-peach); border-radius:var(--radius); display:flex;
  align-items:center; justify-content:center; color:var(--color-ink);
  font-family:var(--sans); font-size:var(--fs-small); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; overflow:hidden}
.photo-hero{aspect-ratio:4/3; width:100%}
.photo-wide{aspect-ratio:21/9; width:100%; margin:28px 0}
.photo-sq{aspect-ratio:1/1; width:100%}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr; gap:24px}}
.photo-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:28px}

/* ================= colour, from the thirteen tokens ================= */
/* section headings alternate so the page has rhythm */
section:nth-of-type(odd)  .sec-head h2{color:var(--color-plum)}
section:nth-of-type(even) .sec-head h2{color:var(--color-teal)}
section:nth-of-type(odd)  .sec-head .rule{background:var(--color-coral)}
section:nth-of-type(even) .sec-head .rule{background:var(--color-marigold)}

/* tiles: the icon colour carries through to the card's top edge */
.q:nth-child(8n+1),.q:nth-child(8n+2){border-top-color:var(--color-peach)}
.q:nth-child(8n+3),.q:nth-child(8n+4){border-top-color:var(--color-marigold)}
.q:nth-child(8n+5),.q:nth-child(8n+6){border-top-color:var(--color-green)}
.q:nth-child(8n+7),.q:nth-child(8n+8){border-top-color:var(--color-teal)}
.q:hover{border-color:var(--color-line)}
.q:nth-child(8n+1):hover,.q:nth-child(8n+2):hover{border-top-color:var(--color-coral)}
.q b,.q span:last-child{color:var(--color-ink)}

/* the four "also here" links each take a colour */
.lk{border-left:4px solid var(--color-line)}
.lk:nth-child(1){border-left-color:var(--color-coral)}
.lk:nth-child(2){border-left-color:var(--color-teal)}
.lk:nth-child(3){border-left-color:var(--color-marigold)}
.lk:nth-child(4){border-left-color:var(--color-green)}
.lk:nth-child(1) .ico{color:var(--color-coral)}
.lk:nth-child(2) .ico{color:var(--color-teal)}
.lk:nth-child(3) .ico{color:var(--color-marigold)}
.lk:nth-child(4) .ico{color:var(--color-green)}
.lk b{color:var(--color-ink)}

/* member block, and the lists inside it */
.memb-block h3{color:var(--color-teal); border-bottom:2px solid var(--color-marigold);
  padding-bottom:8px; display:inline-block}
.memb-block ul.tight li::marker{color:var(--color-coral)}

/* body links pick up the section colour rather than sitting grey */
.body-copy a{color:var(--color-coral); font-weight:600}
.body-copy a:hover{color:var(--color-teal)}

/* photo placeholders alternate so five identical blocks do not repeat */
.photo{background:var(--color-peach)}
.photo-wide{background:var(--color-mint); color:var(--color-teal)}
.photo-row .photo:nth-child(2){background:var(--color-green)}

/* footer picks up the brand bar */
footer.site{background:var(--color-plum); border-top:4px solid var(--color-marigold)}

/* ============================================================
   v3 (2026-09-05) — clean-up pass. Centered section heads, tinted
   colour boxes, real photographs, tighter vertical rhythm.
   ============================================================ */
:root{
  --tint-peach:#FDEBE4; --tint-marigold:#FEF1D9; --tint-green:#E3F6EE;
  --tint-plum:#F3E4FA;  --tint-teal:#DDEFEA;     --tint-coral:#FBE3DA;
}
section{padding:64px 0}
@media(max-width:700px){section{padding:44px 0}}
.sec-head{text-align:center; max-width:var(--measure); margin:0 auto 32px}
.sec-head h1,.sec-head h2,.sec-head p,.sec-head .lede,.sec-head .intro-1{text-align:center; margin-left:auto; margin-right:auto}
.sec-head .rule{margin:0 auto 16px}
.sec-head .eyebrow{display:block; margin-bottom:8px}
.sec-head h2{font-size:var(--fs-h); margin-bottom:.4em}
.sec-head .intro-1,.sec-head .lede{margin-bottom:0; color:var(--color-ink-soft)}
.sec-head.left,.sec-head.left h2,.sec-head.left p{text-align:left; margin-left:0; margin-right:0}
.sec-head.left .rule{margin-left:0}
.ctr-block{text-align:center}
.ctr-block p{margin-left:auto; margin-right:auto}

/* photographs */
.photo{position:relative; overflow:hidden; background:var(--color-mint); border-radius:16px;
  box-shadow:var(--shadow-h); text-transform:none; letter-spacing:0}
.photo img{display:block; width:100%; height:100%; object-fit:cover}
.photo-hero{aspect-ratio:4/5; width:100%; max-width:440px; margin:0 auto}
.photo-wide{aspect-ratio:21/9; width:100%; margin:0 0 32px}
.photo-side{aspect-ratio:4/3; width:100%}
.photo-credit{position:absolute; right:10px; bottom:8px; font-size:11px; font-weight:500;
  color:#fff; background:rgba(36,27,40,.55); padding:3px 8px; border-radius:6px; text-decoration:none}
.photo-credit:hover{color:#fff; background:rgba(36,27,40,.8)}

/* hero */
.hero{padding:56px 0 60px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.hero-eyebrow{display:block; font-size:var(--fs-small); letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-teal); font-weight:700; margin:0 0 14px}
.hero h1{max-width:16ch; margin:0 0 .5em; font-size:clamp(2rem,4.2vw,3rem)}
.hero-sub{max-width:52ch; margin:0 0 28px; color:var(--color-ink-soft)}
.hero-cta{justify-content:flex-start; gap:12px}
@media(max-width:820px){
  .hero{padding:40px 0 44px; text-align:center}
  .hero-grid{grid-template-columns:1fr; gap:28px}
  .hero-grid > div:first-child{order:2}
  .hero h1,.hero-sub{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .photo-hero{max-width:360px; aspect-ratio:4/3}
}

/* crisis strip: one clean row of items */
.crisis{padding:14px 0}
.crisis .wrap{border-left:none; padding-left:32px}
.crisis ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 0; font-size:15px; line-height:1.5}
.crisis li{color:#fff; padding:0 14px; border-left:1px solid rgba(255,255,255,.35); white-space:nowrap}
.crisis li:first-child{border-left:none; font-weight:700; color:var(--color-marigold)}
.crisis li strong{color:#fff}

/* two-column text + photo */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.split .body-copy{max-width:56ch}
.split .body-copy p:last-child{margin-bottom:0}
@media(max-width:820px){.split{grid-template-columns:1fr; gap:28px}}

/* coloured quick-pick tiles */
.qgrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.q{flex-direction:row; align-items:center; gap:16px; min-height:96px; padding:18px 20px;
  border:2px solid transparent; border-top-width:2px; border-radius:14px; box-shadow:var(--shadow);
  font-size:var(--fs-title); font-weight:600; color:var(--color-ink); transition:.15s}
.q .qi{width:52px; height:52px; border-radius:12px; flex:none; margin:0}
.q .qi .ico{width:26px; height:26px; color:#fff; stroke-width:2}
.q span:last-child{color:var(--color-ink); line-height:1.3}
.q:hover{transform:translateY(-2px); box-shadow:var(--shadow-h)}
.q.c-coral{background:var(--tint-coral)}     .q.c-coral .qi{background:var(--color-coral)}     .q.c-coral:hover{border-color:var(--color-coral)}
.q.c-marigold{background:var(--tint-marigold)} .q.c-marigold .qi{background:var(--color-marigold)} .q.c-marigold:hover{border-color:var(--color-marigold)}
.q.c-teal{background:var(--tint-teal)}       .q.c-teal .qi{background:var(--color-teal)}       .q.c-teal:hover{border-color:var(--color-teal)}
.q.c-plum{background:var(--tint-plum)}       .q.c-plum .qi{background:var(--color-plum)}       .q.c-plum:hover{border-color:var(--color-plum)}
.q.c-green{background:var(--tint-green)}     .q.c-green .qi{background:#2FA57F}                .q.c-green:hover{border-color:#2FA57F}
.q.c-peach{background:var(--tint-peach)}     .q.c-peach .qi{background:#E0764F}                .q.c-peach:hover{border-color:#E0764F}
/* reset the older nth-child colouring so the classes above win */
.q:nth-child(n) .qi{background:inherit}
.q.c-coral .qi{background:var(--color-coral)} .q.c-marigold .qi{background:var(--color-marigold)}
.q.c-teal .qi{background:var(--color-teal)}   .q.c-plum .qi{background:var(--color-plum)}
.q.c-green .qi{background:#2FA57F}            .q.c-peach .qi{background:#E0764F}
.q:nth-child(n){border-top-color:transparent}
.q:nth-child(n):hover{border-top-color:inherit}
.q.c-coral:hover{border-color:var(--color-coral)} .q.c-marigold:hover{border-color:var(--color-marigold)}
.q.c-teal:hover{border-color:var(--color-teal)}   .q.c-plum:hover{border-color:var(--color-plum)}
.q.c-green:hover{border-color:#2FA57F}            .q.c-peach:hover{border-color:#E0764F}

/* three steps, straight across */
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:960px; margin:0 auto}
.steps3 > div{background:#fff; border:1px solid var(--color-line); border-radius:14px; padding:24px 22px;
  text-align:center; box-shadow:var(--shadow)}
.steps3 .n{width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-weight:700; font-size:1.1rem; color:#fff; margin-bottom:12px}
.steps3 > div:nth-child(1) .n{background:var(--color-coral)}
.steps3 > div:nth-child(2) .n{background:var(--color-marigold)}
.steps3 > div:nth-child(3) .n{background:var(--color-teal)}
.steps3 h3{margin:0 0 6px}
.steps3 p{margin:0 auto; font-size:var(--fs-small); color:var(--color-ink-soft)}
@media(max-width:700px){.steps3{grid-template-columns:1fr}}

/* also-here link cards, coloured */
.linkrow{gap:18px}
.lk{border:1px solid var(--color-line); border-left-width:6px; border-radius:14px; padding:20px 22px}
.lk .ico{width:30px; height:30px}
.lk:nth-child(1){background:var(--tint-coral)}    .lk:nth-child(2){background:var(--tint-teal)}
.lk:nth-child(3){background:var(--tint-marigold)} .lk:nth-child(4){background:var(--tint-green)}
.lk:hover{transform:translateY(-2px)}

/* member block: two lists side by side */
.memb-block{max-width:960px; margin:0 auto; text-align:left}
.memb-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px}
.memb-cols > div{background:#fff; border:1px solid var(--color-line); border-radius:14px; padding:22px 24px;
  box-shadow:var(--shadow)}
.memb-cols h3{margin:0 0 12px; color:var(--color-teal); border-bottom:2px solid var(--color-marigold);
  padding-bottom:8px; display:inline-block}
.memb-cols ul.tight li{margin-bottom:.5em}
@media(max-width:700px){.memb-cols{grid-template-columns:1fr}}
.memb-cta{text-align:center; margin:28px 0 0}

/* buttons: a bit rounder and clearer */
.btn{border-radius:10px; border-width:2px}
.btn-primary{box-shadow:0 2px 6px rgba(216,90,48,.3)}

/* ---- Find Help (navigator): coloured steps and need boxes ---- */
.step{padding:28px; margin-bottom:22px; border-radius:16px; border-top:6px solid var(--color-line)}
#step1{border-top-color:var(--color-coral)}
#step2{border-top-color:var(--color-marigold)}
#stepA{border-top-color:var(--color-teal)}
#step3{border-top-color:var(--color-plum); padding:28px}
.step-head{margin-bottom:8px}
.step-head h2{font-size:1.35rem}
.step-head .step-n{width:36px; height:36px; color:#fff; font-size:1rem}
#step1 .step-n{background:var(--color-coral)} #step2 .step-n{background:var(--color-marigold)}
#stepA .step-n{background:var(--color-teal)}
.needs{grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px}
.need > span{min-height:0; padding:18px; border:2px solid transparent; border-radius:14px; gap:8px;
  box-shadow:var(--shadow)}
.need > span:hover{transform:translateY(-2px); box-shadow:var(--shadow-h)}
.need .nic{width:46px; height:46px; border-radius:11px; margin-bottom:2px}
.need .nic .ico{width:24px; height:24px; color:#fff; stroke-width:2}
.need b{color:var(--color-ink); font-size:1.05rem}
.need em{color:var(--color-ink-soft)}
.need.n1 > span{background:var(--tint-coral)}    .need.n1 .nic{background:var(--color-coral)}
.need.n2 > span{background:var(--tint-marigold)} .need.n2 .nic{background:var(--color-marigold)}
.need.n3 > span{background:var(--tint-teal)}     .need.n3 .nic{background:var(--color-teal)}
.need.n4 > span{background:var(--tint-plum)}     .need.n4 .nic{background:var(--color-plum)}
.need.n5 > span{background:var(--tint-green)}    .need.n5 .nic{background:#2FA57F}
.need.n6 > span{background:var(--tint-peach)}    .need.n6 .nic{background:#E0764F}
.need.n1 > span:hover,.need.n1 input:checked + span{border-color:var(--color-coral)}
.need.n2 > span:hover,.need.n2 input:checked + span{border-color:var(--color-marigold)}
.need.n3 > span:hover,.need.n3 input:checked + span{border-color:var(--color-teal)}
.need.n4 > span:hover,.need.n4 input:checked + span{border-color:var(--color-plum)}
.need.n5 > span:hover,.need.n5 input:checked + span{border-color:#2FA57F}
.need.n6 > span:hover,.need.n6 input:checked + span{border-color:#E0764F}
.need input:checked + span{box-shadow:var(--shadow-h)}
.need > span{position:relative}
.need input:checked + span::after{content:"✓"; position:absolute; top:14px; right:14px; width:26px; height:26px;
  border-radius:50%; background:var(--color-ink); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center}
.need input:focus-visible + span{outline:3px solid var(--color-plum); outline-offset:2px}

/* one box for the assessments */
.assess-box{display:grid; grid-template-columns:1.1fr .9fr; gap:0; border-radius:16px; overflow:hidden;
  border:1px solid var(--color-line); box-shadow:var(--shadow)}
.assess-box-l{background:var(--tint-teal); padding:28px}
.assess-box-l .qi{width:56px; height:56px; border-radius:14px; background:var(--color-teal); margin-bottom:14px}
.assess-box-l .qi .ico{width:28px; height:28px; color:#fff}
.assess-box-l h3{font-size:1.35rem; margin:0 0 8px}
.assess-box-l p{color:var(--color-ink); margin-bottom:18px}
.assess-box-l .btn{background:var(--color-teal); border-color:var(--color-teal); color:#fff}
.assess-box-l .btn:hover{background:#0B5643; border-color:#0B5643; color:#fff}
.assess-box-r{background:#fff; padding:24px 28px}
.assess-box-r h4{font-size:1rem; margin:0 0 4px; color:var(--color-teal)}
.assess-box-r > p{font-size:var(--fs-small); color:var(--color-ink-soft); margin:0 0 12px}
.assess-ticks{display:flex; flex-direction:column; gap:6px}
.tick{display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:8px 10px; border-radius:8px;
  border:1px solid var(--color-line); font-size:var(--fs-small); line-height:1.35}
.tick:hover{border-color:var(--color-teal); background:var(--tint-teal)}
.tick input{width:18px; height:18px; margin-top:1px; accent-color:var(--color-teal); flex:none}
.tick b{font-weight:600; color:var(--color-ink)}
.tick em{display:block; font-style:normal; color:var(--color-ink-soft); font-size:.85rem}
.tick.sens{border-left:4px solid var(--color-marigold)}
.tick-help{font-size:.85rem; color:var(--color-ink-soft); margin:8px 0 0}
@media(max-width:760px){.assess-box{grid-template-columns:1fr}}
#step3{text-align:center}
#step3 .btn-lg{padding:18px 40px; font-size:1.1rem}
#step3 #gohint{text-align:center}
input[type=text],select{height:50px}

/* ---- Calendar (events) ---- */
.hero.ctr{text-align:center}
.hero.ctr .kicker,.hero.ctr h1,.hero.ctr .lead{margin-left:auto; margin-right:auto; text-align:center}
.hero.ctr h1{max-width:18ch}
.hero.ctr .hero-cta{justify-content:center}
.hero.ctr .kicker{display:block; color:var(--color-teal)}
.fmt{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:960px; margin:0 auto}
.fmt > div{border-radius:16px; padding:24px 26px; display:flex; gap:16px; align-items:flex-start;
  border:2px solid transparent; box-shadow:var(--shadow)}
.fmt .qi{width:52px; height:52px; border-radius:12px; margin:0; flex:none}
.fmt .qi .ico{width:26px; height:26px; color:#fff}
.fmt h3{margin:0 0 4px; font-size:1.2rem}
.fmt p{margin:0; font-size:var(--fs-small); color:var(--color-ink)}
.fmt .pill{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; padding:3px 10px; border-radius:99px; margin-bottom:8px}
.fmt .live{background:var(--tint-teal); border-color:var(--color-teal)}
.fmt .live .qi,.fmt .live .pill{background:var(--color-teal)}
.fmt .ip{background:var(--tint-coral); border-color:var(--color-coral)}
.fmt .ip .qi,.fmt .ip .pill{background:var(--color-coral)}
@media(max-width:700px){.fmt{grid-template-columns:1fr}}

.special{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1000px; margin:0 auto}
.sp{border-radius:16px; padding:26px 28px; box-shadow:var(--shadow); border:2px solid transparent}
.sp:nth-child(1){background:var(--tint-plum); border-color:var(--color-plum)}
.sp:nth-child(2){background:var(--tint-marigold); border-color:var(--color-marigold)}
.sp .ttag{margin-bottom:12px}
.sp:nth-child(2) .ttag{background:var(--color-marigold); color:var(--color-ink)}
.sp h3{font-size:1.35rem; margin:0 0 6px; line-height:1.25}
.sp .who{font-size:var(--fs-small); color:var(--color-ink-soft); margin:0 0 12px}
.sp .who .pill{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 9px; border-radius:99px; margin-right:6px; color:#fff}
.sp .pill.live{background:var(--color-teal)} .sp .pill.ip{background:var(--color-coral)}
.sp > p{font-size:var(--fs-small); color:var(--color-ink)}
.sp .covers{background:#fff; border:1px solid var(--color-line); border-radius:12px; padding:16px 18px 16px 18px; margin-top:14px}
.sp .covers h4{margin:0 0 8px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-teal)}
.sp .covers ul{margin:0; padding-left:1.2em; font-size:var(--fs-small); line-height:1.6}
.sp .covers li{margin-bottom:4px}
@media(max-width:760px){.special{grid-template-columns:1fr}}

.about-dates{max-width:74ch; margin:0 auto 28px; text-align:center; background:#fff; border:1px solid var(--color-line);
  border-radius:12px; padding:16px 22px; font-size:var(--fs-small)}
.about-dates p{margin:0 auto}
.about-dates b{color:var(--color-teal)}

/* months: one horizontal row each */
.months{display:grid; grid-template-columns:1fr; gap:16px; max-width:1040px; margin:0 auto}
.mo{display:grid; grid-template-columns:200px 1fr 1fr; border:2px solid var(--color-primary-deep); border-radius:16px;
  overflow:hidden; background:#fff; box-shadow:var(--shadow); padding:0}
.mo-head{background:var(--color-primary-deep); color:#fff; padding:22px 20px; border-bottom:none;
  display:flex; flex-direction:column; justify-content:center}
.mo-name{font-size:1.5rem; font-weight:600; font-family:var(--serif); line-height:1.1}
.mo-theme{opacity:.92; margin-top:6px; font-size:var(--fs-small)}
.mo .ev{padding:18px 20px; border-top:none; border-left:1px solid var(--color-line); background:#fff}
.mo .ev.live{background:var(--tint-teal); border-left:none}
.mo .ev-kind{color:#fff; border-radius:99px; padding:3px 10px; font-size:.72rem; background:var(--color-coral); margin-bottom:8px}
.mo .ev.live .ev-kind{background:var(--color-teal)}
.mo .ev-topic{font-size:1.05rem; color:var(--color-ink)}
.mo .ev-who{color:var(--color-teal)}
.mo .ev-date{font-size:.75rem}
.mo .qtoggle{margin:10px 0 8px; background:#fff}
@media(max-width:820px){.mo{grid-template-columns:1fr} .mo .ev{border-left:none; border-top:1px solid var(--color-line)}}

/* ---- Programs: area cards instead of a scrolling tab strip ---- */
.prog-intro{text-align:center; max-width:var(--measure); margin:0 auto}
.prog-intro h1,.prog-intro p,.prog-intro .eyebrow{margin-left:auto; margin-right:auto; text-align:center}
.prog-intro h1{max-width:20ch}
.prog-intro .callout{text-align:left; margin-top:22px}
.tabs{position:static; background:transparent; border:none; padding:8px 0 0}
.tablist{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; overflow:visible}
.tablist button{display:flex; align-items:center; gap:14px; text-align:left; white-space:normal; padding:16px 18px;
  border-radius:14px; border:2px solid transparent; background:#fff; color:var(--color-ink); line-height:1.25;
  font:600 1rem/1.25 var(--sans); box-shadow:var(--shadow); transition:.15s}
.tablist button .tico{width:44px; height:44px; border-radius:11px; display:inline-flex; align-items:center;
  justify-content:center; flex:none; color:#fff}
.tablist button .tico .ico{width:22px; height:22px; stroke-width:2}
.tablist button small{display:block; font-weight:400; font-size:.85rem; color:var(--color-ink-soft); margin-top:2px}
.tablist button:hover{transform:translateY(-2px); box-shadow:var(--shadow-h)}
.tablist button[aria-selected="true"]{color:#fff; box-shadow:var(--shadow-h)}
.tablist button[aria-selected="true"] small{color:rgba(255,255,255,.85)}
.tablist button[aria-selected="true"] .tico{background:rgba(255,255,255,.22)!important}
@media(max-width:820px){.tablist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tablist{grid-template-columns:1fr}}
/* nine areas, six colours */
.tablist button[data-k="navigation"]{background:var(--tint-teal)}     .tablist button[data-k="navigation"] .tico{background:var(--color-teal)}
.tablist button[data-k="circles"]{background:var(--tint-coral)}       .tablist button[data-k="circles"] .tico{background:var(--color-coral)}
.tablist button[data-k="career"]{background:var(--tint-plum)}         .tablist button[data-k="career"] .tico{background:var(--color-plum)}
.tablist button[data-k="wellness"]{background:var(--tint-green)}      .tablist button[data-k="wellness"] .tico{background:#2FA57F}
.tablist button[data-k="workshops"]{background:var(--tint-marigold)}  .tablist button[data-k="workshops"] .tico{background:var(--color-marigold)}
.tablist button[data-k="connection"]{background:var(--tint-peach)}    .tablist button[data-k="connection"] .tico{background:#E0764F}
.tablist button[data-k="library"]{background:var(--tint-teal)}        .tablist button[data-k="library"] .tico{background:var(--color-teal)}
.tablist button[data-k="online"]{background:var(--tint-plum)}         .tablist button[data-k="online"] .tico{background:var(--color-plum)}
.tablist button[data-k="materials"]{background:var(--tint-coral)}     .tablist button[data-k="materials"] .tico{background:var(--color-coral)}
.tablist button[data-k="navigation"][aria-selected="true"],.tablist button[data-k="library"][aria-selected="true"]{background:var(--color-teal)}
.tablist button[data-k="circles"][aria-selected="true"],.tablist button[data-k="materials"][aria-selected="true"]{background:var(--color-coral)}
.tablist button[data-k="career"][aria-selected="true"],.tablist button[data-k="online"][aria-selected="true"]{background:var(--color-plum)}
.tablist button[data-k="wellness"][aria-selected="true"]{background:#2FA57F}
.tablist button[data-k="workshops"][aria-selected="true"]{background:#D98A12}
.tablist button[data-k="connection"][aria-selected="true"]{background:#E0764F}

/* the open panel: a coloured, centered header, then the content */
.panel{padding:32px 0 56px}
.panel-head{text-align:center; max-width:var(--measure); margin:0 auto 32px; padding:28px 28px 24px;
  border-radius:16px; border-top:6px solid var(--color-line)}
.panel-head .eyebrow,.panel-head h2,.panel-head .lede{text-align:center; margin-left:auto; margin-right:auto}
.panel-head h2{margin-bottom:.35em}
.panel-head .lede{margin-bottom:0}
#panel-navigation .panel-head,#panel-library .panel-head{background:var(--tint-teal); border-top-color:var(--color-teal)}
#panel-circles .panel-head,#panel-materials .panel-head{background:var(--tint-coral); border-top-color:var(--color-coral)}
#panel-career .panel-head,#panel-online .panel-head{background:var(--tint-plum); border-top-color:var(--color-plum)}
#panel-wellness .panel-head{background:var(--tint-green); border-top-color:#2FA57F}
#panel-workshops .panel-head{background:var(--tint-marigold); border-top-color:var(--color-marigold)}
#panel-connection .panel-head{background:var(--tint-peach); border-top-color:#E0764F}
#panel-navigation .panel-head .eyebrow,#panel-library .panel-head .eyebrow{color:var(--color-teal)}
#panel-circles .panel-head .eyebrow,#panel-materials .panel-head .eyebrow{color:var(--color-coral)}
#panel-career .panel-head .eyebrow,#panel-online .panel-head .eyebrow{color:var(--color-plum)}
#panel-wellness .panel-head .eyebrow{color:#1F8A67}
#panel-workshops .panel-head .eyebrow{color:#B87209}
#panel-connection .panel-head .eyebrow{color:#C4562F}
.panel > h3{text-align:center; font-size:1.3rem; margin:34px auto 18px; max-width:var(--measure)}
.panel > p{margin-left:auto; margin-right:auto}
.panel > .callout{max-width:var(--measure); margin:22px auto; border-left-width:5px; background:var(--color-cream)}
.panel .card{border-top:5px solid var(--color-line); border-radius:14px}
#panel-navigation .card,#panel-library .card{border-top-color:var(--color-teal)}
#panel-circles .card,#panel-materials .card{border-top-color:var(--color-coral)}
#panel-career .card,#panel-online .card{border-top-color:var(--color-plum)}
#panel-wellness .card{border-top-color:#2FA57F}
#panel-workshops .card,#panel-workshops .wk{border-top-color:var(--color-marigold)}
#panel-connection .card{border-top-color:#E0764F}
.panel .card .eyebrow{color:var(--color-teal); font-size:.75rem}
.prog-intro .callout p,.prog-intro .callout h3{text-align:left; margin-left:0; margin-right:0}
@media(max-width:700px){.crisis li{white-space:normal; text-align:center; border-left:none; padding:0 8px}
  .crisis li strong{white-space:nowrap} .crisis .wrap{padding-left:24px}}

/* ============================================================
   v4 (2026-09-07) — section bands, horizontal cards, budget scenarios
   ============================================================ */
:root{--green-solid:#2FA57F; --peach-solid:#E0764F; --marigold-deep:#D98A12}

/* a solid colour bar that opens each section, so sections read as separate */
.sect{padding:0 0 64px}
.sect-head{color:#fff; padding:34px 0 30px; margin-bottom:36px; text-align:center}
.sect-head .eyebrow{color:rgba(255,255,255,.85); margin-bottom:6px}
.sect-head h2{color:#fff; margin:0 auto .3em; max-width:24ch; font-size:var(--fs-h)}
.sect-head .lede{color:rgba(255,255,255,.92); margin:0 auto; max-width:var(--measure)}
.sect-head a{color:#fff}
.sect.teal .sect-head{background:var(--color-teal)}
.sect.plum .sect-head{background:var(--color-plum)}
.sect.coral .sect-head{background:var(--color-coral)}
.sect.green .sect-head{background:var(--green-solid)}
.sect.marigold .sect-head{background:var(--marigold-deep)}
.sect.peach .sect-head{background:var(--peach-solid)}
.sect.teal{background:#F4FAF8} .sect.plum{background:#FBF6FD} .sect.coral{background:#FEF6F2}
.sect.green{background:#F2FBF7} .sect.marigold{background:#FFFAF0} .sect.peach{background:#FEF5F1}
.sect .callout{border-left-width:6px; border-radius:12px; max-width:none}
.sect.teal .callout{border-left-color:var(--color-teal); background:var(--tint-teal)}
.sect.plum .callout{border-left-color:var(--color-plum); background:var(--tint-plum)}
.sect.coral .callout{border-left-color:var(--color-coral); background:var(--tint-coral)}
.sect.green .callout{border-left-color:var(--green-solid); background:var(--tint-green)}
.sect.marigold .callout{border-left-color:var(--marigold-deep); background:var(--tint-marigold)}
.sect .callout h3{color:var(--color-ink)}
.sect h3.sub{text-align:center; font-size:1.3rem; margin:36px auto 18px}

/* jump buttons in a hero: one per section, in the section's colour */
.jumps{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0}
.jumps a{display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:600;
  padding:14px 22px; border-radius:10px; box-shadow:var(--shadow); transition:.15s}
.jumps a:hover{transform:translateY(-2px); color:#fff; box-shadow:var(--shadow-h)}
.jumps a.teal{background:var(--color-teal)} .jumps a.plum{background:var(--color-plum)}
.jumps a.coral{background:var(--color-coral)} .jumps a.green{background:var(--green-solid)}
.jumps a.marigold{background:var(--marigold-deep)}

/* horizontal cards: icon column on the left, coloured; text on the right */
.hgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(440px,1fr)); gap:18px}
@media(max-width:520px){.hgrid{grid-template-columns:1fr}}
.hc{display:grid; grid-template-columns:72px 1fr; background:#fff; border:2px solid transparent; border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow); transition:.15s}
.hc:hover{box-shadow:var(--shadow-h); transform:translateY(-2px)}
.hc .hc-ic{display:flex; align-items:flex-start; justify-content:center; padding-top:20px; color:#fff}
.hc .hc-ic .ico{width:28px; height:28px; stroke-width:1.9}
.hc .hc-body{padding:18px 20px 16px 4px}
.hc h3{margin:0 0 6px; font-size:1.15rem}
.hc p{margin:0 0 8px; font-size:var(--fs-small); max-width:none}
.hc .meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin:4px 0 0; padding-top:10px; border-top:1px solid var(--color-line);
  font-size:.85rem; color:var(--color-ink-soft)}
.hc .meta b{color:var(--color-ink)}
.hc .meta a{font-weight:600; margin-left:auto; white-space:nowrap}
.hc.c1{border-color:var(--color-teal)}      .hc.c1 .hc-ic{background:var(--color-teal)}
.hc.c2{border-color:var(--color-coral)}     .hc.c2 .hc-ic{background:var(--color-coral)}
.hc.c3{border-color:var(--color-plum)}      .hc.c3 .hc-ic{background:var(--color-plum)}
.hc.c4{border-color:var(--green-solid)}     .hc.c4 .hc-ic{background:var(--green-solid)}
.hc.c5{border-color:var(--marigold-deep)}   .hc.c5 .hc-ic{background:var(--marigold-deep)}
.hc.c6{border-color:var(--peach-solid)}     .hc.c6 .hc-ic{background:var(--peach-solid)}
.hc.c1 .hc-body{background:#F4FAF8} .hc.c2 .hc-body{background:#FEF6F2} .hc.c3 .hc-body{background:#FBF6FD}
.hc.c4 .hc-body{background:#F2FBF7} .hc.c5 .hc-body{background:#FFFAF0} .hc.c6 .hc-body{background:#FEF5F1}

/* tinted plain cards in six colours (values, responsibilities, seats) */
.tcard{background:#fff; border:1px solid var(--color-line); border-top:6px solid var(--color-line); border-radius:14px;
  padding:20px 22px; box-shadow:var(--shadow)}
.tcard h3{margin:0 0 8px; font-size:1.1rem}
.tcard p{margin:0; font-size:var(--fs-small); max-width:none}
.tcard p + p{margin-top:8px}
.tcard .tag{margin-bottom:10px; color:#fff; border:none; font-weight:700}
.tcard.c1{border-top-color:var(--color-teal); background:#F4FAF8}    .tcard.c1 .tag{background:var(--color-teal)}
.tcard.c2{border-top-color:var(--color-coral); background:#FEF6F2}   .tcard.c2 .tag{background:var(--color-coral)}
.tcard.c3{border-top-color:var(--color-plum); background:#FBF6FD}    .tcard.c3 .tag{background:var(--color-plum)}
.tcard.c4{border-top-color:var(--green-solid); background:#F2FBF7}   .tcard.c4 .tag{background:var(--green-solid)}
.tcard.c5{border-top-color:var(--marigold-deep); background:#FFFAF0} .tcard.c5 .tag{background:var(--marigold-deep)}
.tcard.c6{border-top-color:var(--peach-solid); background:#FEF5F1}   .tcard.c6 .tag{background:var(--peach-solid)}
.tgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.tgrid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.rules-box{background:#fff; border:2px solid var(--color-ink); border-radius:14px; padding:22px 26px; max-width:760px; margin:28px auto 0}
.rules-box h3{margin:0 0 10px; text-align:center}
.rules-box ul{columns:2; column-gap:28px; margin:0; padding-left:1.1em; font-size:var(--fs-small)}
.rules-box li{margin-bottom:6px; break-inside:avoid}
@media(max-width:600px){.rules-box ul{columns:1}}

/* mission / vision boxes on About */
.mv{border-radius:16px; padding:28px 30px; color:#fff; box-shadow:var(--shadow)}
.mv h3,.mv p{color:#fff; max-width:none}
.mv h3{font-size:1.35rem; margin:0 0 8px}
.mv p:last-child{margin-bottom:0}
.mv-m{background:var(--color-plum)} .mv-v{background:var(--color-teal)}

/* at-a-glance: coloured labels */
.glance-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.gl{background:#fff; border:1px solid var(--color-line); border-left:6px solid var(--color-line); border-radius:12px; padding:14px 18px}
.gl dt{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px}
.gl dd{margin:0; font-size:var(--fs-small)}
.gl.c1{border-left-color:var(--color-teal)} .gl.c1 dt{color:var(--color-teal)}
.gl.c2{border-left-color:var(--color-coral)} .gl.c2 dt{color:var(--color-coral)}
.gl.c3{border-left-color:var(--color-plum)} .gl.c3 dt{color:var(--color-plum)}
.gl.c4{border-left-color:var(--green-solid)} .gl.c4 dt{color:#1F8A67}
.gl.c5{border-left-color:var(--marigold-deep)} .gl.c5 dt{color:#B87209}
.gl.c6{border-left-color:var(--peach-solid)} .gl.c6 dt{color:#C4562F}

/* budget scenarios */
.scen{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 0 30px}
@media(max-width:760px){.scen{grid-template-columns:1fr}}
.scen > div{border-radius:16px; padding:22px 24px; color:#fff; box-shadow:var(--shadow)}
.scen .let{display:inline-flex; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff;
  align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; margin-bottom:8px}
.scen h3{color:#fff; margin:0 0 2px; font-size:1.2rem}
.scen .tot{font-size:2rem; font-weight:700; letter-spacing:-.02em; margin:6px 0 8px; font-family:var(--serif)}
.scen p{color:rgba(255,255,255,.95); font-size:var(--fs-small); margin:0; max-width:none}
.scen .A{background:var(--color-plum)} .scen .B{background:var(--color-teal)} .scen .C{background:var(--marigold-deep)}
table.budget3 th.A,table.budget3 th.B,table.budget3 th.C{color:#fff; text-align:right; letter-spacing:.06em}
table.budget3 th.A{background:var(--color-plum)} table.budget3 th.B{background:var(--color-teal)} table.budget3 th.C{background:var(--marigold-deep)}
table.budget3 td.A{background:#FBF6FD} table.budget3 td.B{background:#F4FAF8} table.budget3 td.C{background:#FFFAF0}
table.budget3 td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
table.budget3 td.zero{color:var(--color-ink-soft)}
table.budget3 tr.grp td{background:var(--color-line); font-weight:700}
table.budget3 tr.grp td.A{background:#EBD9F3} table.budget3 tr.grp td.B{background:#D3E9E2} table.budget3 tr.grp td.C{background:#F9E7C4}
table.budget3 tr.tot td{color:#fff; background:var(--color-ink); font-weight:700; font-size:1.05rem}
table.budget3 tr.tot td.A{background:var(--color-plum)} table.budget3 tr.tot td.B{background:var(--color-teal)} table.budget3 tr.tot td.C{background:var(--marigold-deep)}
table.budget3 td.dim{color:var(--color-ink-soft); font-size:.85rem}
table.budget3 td .fte{display:block; font-size:.75rem; color:var(--color-ink-soft); font-weight:600}
table.services th.A,table.services th.B,table.services th.C{color:#fff}
table.services th.A{background:var(--color-plum)} table.services th.B{background:var(--color-teal)} table.services th.C{background:var(--marigold-deep)}
table.services td.A{background:#FBF6FD} table.services td.B{background:#F4FAF8} table.services td.C{background:#FFFAF0}
table.services td{font-size:var(--fs-small); vertical-align:top}
table.services td:first-child{font-weight:600; white-space:nowrap}

/* role cards on the Volunteers page: horizontal, coloured, expandable job description */
.role-h{display:grid; grid-template-columns:72px 1fr; border-radius:14px; overflow:hidden; border:2px solid transparent;
  background:#fff; box-shadow:var(--shadow); margin-bottom:16px}
.role-h .hc-ic{display:flex; justify-content:center; padding-top:22px; color:#fff}
.role-h .hc-ic .ico{width:28px; height:28px}
.role-h .rb{padding:20px 22px 18px 6px}
.role-h h3{margin:0 0 4px; font-size:1.2rem}
.role-h .sum{margin:0 0 10px; max-width:none}
.role-h .meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.88rem; color:var(--color-ink-soft); margin-bottom:10px}
.role-h .meta b{color:var(--color-ink)}
.role-h .qtoggle{width:auto; display:inline-block; margin:4px 0 0; color:#fff; border:none; padding:10px 16px; border-radius:8px}
.role-h .qtoggle .chev{float:none; margin-left:8px}
.role-h .rolebody{border-top:2px solid var(--color-line); margin-top:16px; padding-top:16px}
.jd{display:grid; grid-template-columns:1fr 1fr; gap:18px 28px}
@media(max-width:700px){.jd{grid-template-columns:1fr}}
.jd h4{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 6px; padding-bottom:4px; border-bottom:2px solid currentColor; display:inline-block}
.jd ul{margin:0; padding-left:1.1em; font-size:var(--fs-small); line-height:1.55}
.jd li{margin-bottom:4px}
.jd .full{grid-column:1 / -1}
.jd .purpose{font-size:1rem; font-style:italic; border-left:4px solid currentColor; padding-left:12px; margin:0 0 6px; max-width:none}
.jd .first{background:#fff; border:1px solid var(--color-line); border-radius:10px; padding:12px 14px; font-size:var(--fs-small); margin:0}
.jd .first b{display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:2px}
.role-h.c1{border-color:var(--color-teal)}    .role-h.c1 .hc-ic,.role-h.c1 .qtoggle{background:var(--color-teal)}    .role-h.c1 .jd{color:var(--color-teal)}
.role-h.c2{border-color:var(--color-coral)}   .role-h.c2 .hc-ic,.role-h.c2 .qtoggle{background:var(--color-coral)}   .role-h.c2 .jd{color:var(--color-coral)}
.role-h.c3{border-color:var(--color-plum)}    .role-h.c3 .hc-ic,.role-h.c3 .qtoggle{background:var(--color-plum)}    .role-h.c3 .jd{color:var(--color-plum)}
.role-h.c4{border-color:var(--green-solid)}   .role-h.c4 .hc-ic,.role-h.c4 .qtoggle{background:var(--green-solid)}   .role-h.c4 .jd{color:#1F8A67}
.role-h.c5{border-color:var(--marigold-deep)} .role-h.c5 .hc-ic,.role-h.c5 .qtoggle{background:var(--marigold-deep)} .role-h.c5 .jd{color:#B87209}
.role-h.c6{border-color:var(--peach-solid)}   .role-h.c6 .hc-ic,.role-h.c6 .qtoggle{background:var(--peach-solid)}   .role-h.c6 .jd{color:#C4562F}
.role-h .jd li,.role-h .jd p,.role-h .jd .first{color:var(--color-ink)}
.role-h .qtoggle:hover{filter:brightness(.9); color:#fff}
.role-h .rb > .qtoggle[aria-expanded="true"]{filter:brightness(.85)}
.page-intro{text-align:center; max-width:var(--measure); margin:0 auto}
.page-intro h1,.page-intro p,.page-intro .eyebrow{text-align:center; margin-left:auto; margin-right:auto}
table.budget3 th.A,table.budget3 th.B,table.budget3 th.C{width:14%; white-space:nowrap}
table.budget3 td.dim{width:34%}
.sect .callout.gold{border-left-color:var(--marigold-deep); background:var(--tint-marigold)}
.sect .callout.ink{border-left-color:var(--color-ink); background:#fff}
.mini-scen{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 22px}
@media(max-width:700px){.mini-scen{grid-template-columns:1fr}}
.mini-scen a{display:block; text-decoration:none; color:#fff; border-radius:12px; padding:16px 18px; box-shadow:var(--shadow)}
.mini-scen a:hover{color:#fff; transform:translateY(-2px)}
.mini-scen .let{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; opacity:.9}
.mini-scen .tot{display:block; font-family:var(--serif); font-size:1.6rem; font-weight:600; margin:2px 0}
.mini-scen small{display:block; font-size:.85rem; opacity:.95}
.mini-scen .A{background:var(--color-plum)} .mini-scen .B{background:var(--color-teal)} .mini-scen .C{background:var(--marigold-deep)}

/* ---- Why This Is Hard ---- */
.story-wrap{max-width:820px; margin:0 auto}
.story{border:none; border-radius:18px; padding:36px 40px; background:#fff; box-shadow:var(--shadow-h);
  border-top:8px solid var(--color-coral)}
.story p{max-width:none; text-align:left}
.story .story-lead{font-family:var(--serif); font-size:1.35rem; line-height:1.4; color:var(--color-plum); text-align:center;
  font-weight:600; margin:0 0 22px; padding:0 0 22px; border-bottom:1px solid var(--color-line)}
.story .story-close{border-top:1px solid var(--color-line); padding-top:18px; background:var(--tint-marigold);
  margin:22px -40px -36px; padding:22px 40px 28px; border-radius:0 0 18px 18px; border-top:4px solid var(--marigold-deep)}
@media(max-width:600px){.story{padding:24px 20px} .story .story-close{margin:18px -20px -24px; padding:18px 20px 22px}}
.arc{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-width:820px; margin:0 auto 26px; text-align:center}
.arc > div{padding:14px 6px 10px; border-radius:12px}
.arc svg{width:64px; height:64px; display:block; margin:0 auto 8px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.arc b{display:block; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase}
.arc span{display:block; font-size:.82rem; color:var(--color-ink-soft); line-height:1.35; margin-top:2px}
.arc .a1{background:var(--tint-teal)} .arc .a1 svg{stroke:var(--color-teal)} .arc .a1 b{color:var(--color-teal)}
.arc .a2{background:var(--tint-marigold)} .arc .a2 svg{stroke:var(--marigold-deep)} .arc .a2 b{color:#B87209}
.arc .a3{background:var(--tint-coral)} .arc .a3 svg{stroke:var(--color-coral)} .arc .a3 b{color:var(--color-coral)}
.arc .a4{background:var(--tint-plum)} .arc .a4 svg{stroke:var(--color-plum)} .arc .a4 b{color:var(--color-plum)}
.arc .a5{background:var(--tint-green)} .arc .a5 svg{stroke:var(--green-solid)} .arc .a5 b{color:#1F8A67}
@media(max-width:700px){.arc{grid-template-columns:repeat(2,1fr)} .arc > div:last-child{grid-column:1/-1}}
.pattern{background:var(--marigold-deep); color:#fff; padding:44px 0}
.pattern .eyebrow,.pattern h2,.pattern p{color:#fff; text-align:center; margin-left:auto; margin-right:auto}
.pattern h2{max-width:24ch}
.pattern p{max-width:var(--measure); margin-bottom:0; opacity:.95}
.stat{border-top:6px solid var(--color-line); border-radius:14px}
.stat .num{font-family:var(--serif)}
.stat.c1{border-top-color:var(--color-teal); background:#F4FAF8}     .stat.c1 .num{color:var(--color-teal)}
.stat.c2{border-top-color:var(--color-coral); background:#FEF6F2}    .stat.c2 .num{color:var(--color-coral)}
.stat.c3{border-top-color:var(--color-plum); background:#FBF6FD}     .stat.c3 .num{color:var(--color-plum)}
.stat.c4{border-top-color:var(--green-solid); background:#F2FBF7}    .stat.c4 .num{color:#1F8A67}
.stat.c5{border-top-color:var(--marigold-deep); background:#FFFAF0}  .stat.c5 .num{color:#B87209}
.stat .cite{font-size:.78rem; color:var(--color-ink-soft); margin-top:8px}
.health-card{background:#fff; border:2px solid var(--color-teal); border-radius:16px; padding:26px 30px; max-width:860px; margin:28px auto 0}
.health-card h3{color:var(--color-teal); margin:0 0 10px; text-align:center}
.pdoh-def{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px}
@media(max-width:700px){.pdoh-def{grid-template-columns:1fr}}
#pdoh table.data th{background:var(--color-plum); color:#fff}
#pdoh table.data tr:nth-child(even) td{background:#FBF6FD}
#pdoh .act{background:#fff; border:2px solid var(--color-plum); border-radius:16px; padding:22px 26px; margin-top:22px}
#pdoh .act h3{color:var(--color-plum); margin:0 0 12px; text-align:center}
#pdoh .act .links{justify-content:center}
#pdoh .act .links a{background:var(--color-plum); color:#fff; border-color:var(--color-plum); padding:10px 16px}
#pdoh .act .links a:hover{background:var(--color-primary-deep)}
#pdoh h3.vote{text-align:center; margin:30px auto 6px; font-size:1.3rem}
#pdoh p.vote{text-align:center; margin:0 auto 14px; max-width:var(--measure); color:var(--color-ink-soft)}
#sdoh{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){#sdoh{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}