/* ============================================================
   Jefferson County Prevention & Recovery Board - modern edition
   Same content and palette as the faithful build, restructured.
   ============================================================ */
:root{
  /* brand - carried over unchanged */
  --navy:#1f365c;
  --navy-deep:#152742;
  --navy-ink:#0e1c31;
  --pink:#ed1064;
  --pink-dark:#c60b52;
  --orange:#f15a21;
  --amber:#ffb536;
  --blue:#0093d0;

  /* neutrals */
  --ink:#101b2d;
  --body:#5a6675;
  --muted:#8b96a5;
  --line:#e5e9ef;
  --surface:#f5f7fa;
  --surface-2:#eef2f7;

  --wrap:1400px;
  --gutter:clamp(20px,4vw,56px);
  --r-sm:10px;
  --r:16px;
  --r-lg:26px;
  --shadow-sm:0 1px 2px rgba(16,27,45,.05),0 4px 12px rgba(16,27,45,.05);
  --shadow:0 2px 6px rgba(16,27,45,.05),0 14px 38px rgba(16,27,45,.10);
  --shadow-lg:0 4px 12px rgba(16,27,45,.07),0 30px 70px rgba(16,27,45,.16);
  --ease:cubic-bezier(.33,1,.68,1);
}
*{box-sizing:border-box}
/* overflow-anchor:none is load-bearing - do not drop it.
   The sticky header is ~28px shorter once .stuck lands (smaller logo, less
   padding). Because a sticky element still occupies its space in normal
   flow, that shrink pulls the whole page up by 28px. Scroll anchoring then
   "helpfully" subtracts those 28px from the scroll position to hold the
   visible content still - which lands the page back BELOW the point that
   triggered .stuck, so the header unsticks, grows, and the scroll position
   is pushed back down again. Stopping anywhere in that ~28px band left the
   header flipping between its two sizes forever.
   The trade: the browser no longer compensates for above-the-fold content
   that resizes after load. Nothing here does. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-anchor:none}
body{
  margin:0;background:#fff;color:var(--body);
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{
  font-family:"Open Sans Condensed","Oswald","Arial Narrow",Impact,sans-serif;
  font-weight:700;color:var(--ink);margin:0;line-height:1.06;letter-spacing:-.005em;
  text-wrap:balance;
}
/* ------------------------------------------------------------
   Line breaking - set once here, not per-component.
   ------------------------------------------------------------
   Copy on this site is short: intros, notes and captions, nearly
   all of which run to two lines at desktop width. Left to the
   browser's default those break lopsidedly - a full first line
   and a stub second line at 30-50% - which reads like a mistake
   next to the full-width cards beside it.

   `balance` evens the lines of anything short. Browsers stop
   applying it past a handful of lines (Chrome allows six), so a
   genuinely long paragraph added later is left alone and falls
   back to `pretty` below, which just prevents a lone word on the
   last line. Between the two, new pages get sane breaks with no
   per-element fixes - which is what kept going wrong before.

   Unsupported browsers ignore both and wrap as they always have.
   ------------------------------------------------------------ */
p,li,dd,figcaption{text-wrap:pretty}
/* Only the short, centred display lines are balanced. Running body copy
   is NOT - balancing a two-line paragraph splits it into two half-width
   lines with the right half of the column left empty, which is what made
   these pages look broken. */
.pagehead .lede,
.card p,
.provider p{text-wrap:balance}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--pink);color:#fff;padding:12px 20px;z-index:999;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- shared bits ---------- */
/* Off-screen for sighted readers, still announced by screen readers and still
   counted in the heading outline. Used where a logo does the identifying but
   the section still needs a real heading - the home page's 988 card. Do not
   swap this for display:none, which hides it from screen readers too. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.eyebrow{
  font-family:"Open Sans",sans-serif;font-weight:700;color:var(--pink);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;
  display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--pink);border-radius:2px}
.eyebrow.center{justify-content:center}
.h2{font-size:clamp(34px,4vw,60px)}
.lede{font-size:clamp(16.5px,1.25vw,19px);line-height:1.7}

.btn{
  display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  border-radius:999px;font-weight:700;font-size:15.5px;line-height:1;
  padding:16px 30px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;fill:currentColor;flex:none;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 6px 18px rgba(237,16,100,.28)}
.btn-primary:hover{background:var(--pink-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(237,16,100,.34)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn-ghost:hover{background:#fff;color:var(--navy);box-shadow:none;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--navy);transform:translateY(-2px)}
.btn-sm{padding:12px 22px;font-size:14px}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ============================================================
   HEADER  - utility strip + sticky main bar
   ============================================================ */
.utility{background:var(--navy-deep);color:#c2cfe2;font-size:13.5px}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;flex-wrap:wrap}
.utility ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:7px 0;flex-wrap:wrap}
.utility li{display:flex;align-items:center;gap:9px}
/* phone + email wrap their icon in the <a>, so the link needs to be a flex row itself */
.utility li > a{display:inline-flex;align-items:center;gap:9px}
.utility svg{width:15px;height:15px;fill:currentColor;opacity:.75;flex:none;display:block}
.utility a:hover{color:#fff}

.sitehead-sentinel{height:1px;margin-bottom:-1px}
.sitehead{
  position:sticky;top:0;z-index:120;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.sitehead.stuck{box-shadow:0 4px 24px rgba(16,27,45,.10);border-color:transparent}
.sitehead .wrap{display:flex;align-items:center;gap:clamp(14px,2vw,32px);padding-top:11px;padding-bottom:11px;transition:padding .3s var(--ease)}
.sitehead.stuck .wrap{padding-top:7px;padding-bottom:7px}
.brand{display:flex;align-items:center;flex:none}
/* The logo is a wide stacked lockup (484x194, ~2.5:1), so every pixel of
   height costs 2.5 across. It was set small enough that the wordmark went
   hard to read; it is now ~30% taller, and the header's own vertical
   padding was cut to pay for most of that so the bar itself barely grows.
   The extra width is why the nav breakpoint below is 1220px, not 1150px. */
.brand img{height:clamp(58px,6.2vw,96px);width:auto;transition:height .3s var(--ease)}
.sitehead.stuck .brand img{height:clamp(46px,4.6vw,68px)}

.mainnav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.mainnav a{
  position:relative;padding:11px 14px;border-radius:999px;
  font-size:15px;font-weight:600;color:var(--navy);white-space:nowrap;
  transition:color .2s,background .2s;
}
.mainnav a::after{
  content:"";position:absolute;left:50%;bottom:5px;width:0;height:2px;border-radius:2px;
  background:var(--pink);transform:translateX(-50%);transition:width .25s var(--ease);
}
.mainnav a:hover{color:var(--pink)}
.mainnav a:hover::after,.mainnav a[aria-current]::after{width:20px}
.mainnav a[aria-current]{color:var(--pink)}

/* ---------- Resources drop-down ----------
   Opens on hover and on keyboard focus (:focus-within), so it needs no
   JavaScript. The parent is still a real link to /resources/ - the menu
   adds the child pages, it does not replace the section landing page.
   Below 1150px the whole nav becomes a stacked panel and the children
   simply sit indented under the parent - see the responsive block. */
.navitem{position:relative}
.mainnav .navitem > a{display:inline-flex;align-items:center;gap:5px}
.caret{width:11px;height:11px;fill:currentColor;flex:none;opacity:.65;transition:transform .25s var(--ease)}
.navitem:hover .caret,.navitem:focus-within .caret{transform:rotate(180deg)}

.subnav{
  position:absolute;left:50%;top:100%;margin-top:9px;
  transform:translateX(-50%) translateY(6px);
  min-width:296px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
/* invisible bridge across the gap, so the menu does not close as the
   pointer travels from the nav item down onto it */
.subnav::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.navitem:hover .subnav,.navitem:focus-within .subnav{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.mainnav .subnav a{
  padding:11px 14px;border-radius:var(--r-sm);
  white-space:normal;font-size:14.5px;line-height:1.35;
}
.mainnav .subnav a::after{display:none}
.mainnav .subnav a:hover{background:var(--surface);color:var(--pink)}

.head-tools{display:flex;align-items:center;gap:12px;flex:none}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--navy);transition:background .2s,color .2s,transform .2s var(--ease);
}
.icon-btn:hover{background:var(--pink);color:#fff;transform:translateY(-2px)}
.icon-btn svg{width:16px;height:16px;fill:currentColor}

.navtoggle{display:none;width:44px;height:44px;border-radius:12px;border:0;background:var(--surface);color:var(--navy);align-items:center;justify-content:center;cursor:pointer}
.navtoggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:clamp(48px,6vw,96px) 0 0;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0 0 auto;height:78%;z-index:-2;
  background:linear-gradient(168deg,var(--surface) 0%,#fff 62%);
}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{max-width:640px}
.hero h1{
  font-size:clamp(46px,6.4vw,104px);text-transform:uppercase;color:var(--navy);
  letter-spacing:-.02em;margin:0 0 22px;
}
.hero-rule{width:120px;height:7px;border-radius:7px;margin-bottom:26px;
  background:linear-gradient(90deg,var(--orange),var(--pink))}
.hero-copy p{margin:0 0 34px;color:#4a5768;max-width:540px}
.hero-copy p b{color:var(--navy);font-weight:700}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.hero-media{position:relative}
.hero-media .shot{
  position:relative;z-index:2;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);aspect-ratio:4/3.1;
}
.hero-media .shot img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* angled accent - a nod to the original's diagonal hero cut */
.hero-media::after{
  content:"";position:absolute;z-index:1;right:-18px;top:-18px;width:56%;height:62%;
  border-radius:var(--r-lg);background:linear-gradient(150deg,var(--amber),var(--orange));
  opacity:.16;transform:rotate(6deg);
}

/* ---------- crisis card - lifted out of the old thin band ---------- */
.crisis-shell{position:relative;z-index:5;margin-top:clamp(44px,5vw,76px);padding-bottom:clamp(48px,6vw,88px)}
.crisis{
  position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;
  padding:clamp(30px,3.6vw,52px);box-shadow:var(--shadow-lg);
  background:linear-gradient(112deg,var(--navy-ink) 0%,var(--navy-deep) 34%,var(--navy) 66%,#2c5083 100%);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(26px,3.2vw,46px);row-gap:clamp(20px,2.6vw,32px);align-items:center;
}
.crisis::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 130% at 88% 40%,rgba(0,147,208,.30) 0%,rgba(0,147,208,0) 60%);
}
.crisis > *{position:relative;z-index:2}
/* The 988 Ohio logo took over the column the old round icon badge held, so
   the card keeps its three-part rhythm: mark | copy | actions.

   The VERTICAL lockup is used here, for two reasons. The horizontal one was
   tried first and, being 5:1, could only sit above the headline - which left
   it stranded on its own line with dead space beside it and pulled the card's
   middle open into a void. And DBH's style guide says to prefer the vertical
   version anyway, reserving the horizontal for tight spaces.

   Clear space comes from the column gap plus the frame drawn into the artwork
   itself, so this needs no margin - which is just as well, since `.crisis p`
   would out-specify one written as a bare `.crisis-logo`. Size by width only
   and leave height auto: setting both is what distorts a logo. */
.crisis .crisis-logo{margin:0}
.crisis .crisis-logo img{width:clamp(86px,7.4vw,112px);height:auto;display:block}
.crisis .shout{
  display:block;font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:clamp(26px,2.6vw,38px);line-height:1.1;color:#fff;margin:0 0 10px;
}
.crisis .shout em{font-style:italic;color:var(--amber)}
.crisis p{margin:0;font-size:15px;line-height:1.6;color:#c8d6ea;max-width:76ch;text-wrap:balance}
/* the "24/7" line is the promise; the paragraph below it is the detail */
.crisis .crisis-lead{color:#fff;font-weight:600;font-size:16px;margin:0 0 6px}
/* Action panel. The two buttons share a column and stretch to the same
   width, so the pair reads as one block instead of a stray button floating
   in the card's right-hand space. */
.crisis-act{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.crisis-act .btn{justify-content:center;white-space:nowrap}
@media (max-width:900px){
  /* stacked card: let the buttons sit side by side again rather than
     becoming two full-width bars under the text */
  .crisis-act{flex-direction:row;flex-wrap:wrap}
  /* basis 0, not auto: with auto the two buttons size to their own text and
     come out 10px apart, which reads as a mistake rather than a pair */
  .crisis-act .btn{flex:1 1 0;min-width:150px}
}

/* ============================================================
   BOARDS  - moved up, ahead of the news feed
   ============================================================ */
.boards{background:var(--navy);color:#fff;padding:clamp(64px,7vw,112px) 0;position:relative;overflow:hidden}
.boards::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 15% 12%,rgba(0,147,208,.20) 0%,rgba(0,147,208,0) 55%);
}
.boards .wrap{position:relative;z-index:2}
.boards .head{max-width:760px;margin:0 0 clamp(44px,5vw,72px)}
.boards .head h2{color:#fff}
.boards .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(44px,6vw,90px);align-items:center}

/* --- segmented ring --- */
.donutwrap{display:flex;justify-content:center}
.donut{position:relative;width:clamp(320px,32vw,480px);aspect-ratio:1;max-width:100%}
.donut svg.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.donut .arc{
  fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;opacity:.25;
  transition:stroke .45s var(--ease),stroke-width .45s var(--ease),opacity .45s var(--ease);
}
.donut .arc.active{stroke:var(--amber);stroke-width:5;opacity:1}

.chip-pos{position:absolute;inset:0;transform:rotate(var(--a));pointer-events:none}
.chip-pos.s0{--a:0deg;   --i:0}
.chip-pos.s1{--a:72deg;  --i:1}
.chip-pos.s2{--a:144deg; --i:2}
.chip-pos.s3{--a:216deg; --i:3}
.chip-pos.s4{--a:288deg; --i:4}
.chip{
  position:absolute;left:50%;top:7%;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  -webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;outline:0;background:none;
  width:clamp(48px,4.4vw,64px);height:clamp(48px,4.4vw,64px);
  border-radius:50%;cursor:pointer;pointer-events:auto;
}
.chip::-moz-focus-inner{border:0;padding:0}
.chip-dot{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%;background:var(--amber);color:#fff;
  opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(255,181,54,0);
  transition:transform .45s var(--ease),opacity .3s ease,box-shadow .45s ease;
}
.chip svg{width:42%;height:42%;fill:var(--navy-deep);pointer-events:none}
.chip:hover .chip-dot{transform:scale(1.1)}
.chip:focus-visible .chip-dot{box-shadow:0 0 0 3px #fff}
.donut:not(.revealed) .chip-dot{opacity:0;transform:scale(0);transition:none}
.donut.revealing .chip-dot{
  transition-timing-function:cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i) * .13s + .2s);
}
.chip.active .chip-dot{
  animation:chip-grow .5s var(--ease) forwards, chip-breathe 3s ease-in-out .5s infinite;
}
@keyframes chip-grow{
  from{transform:scale(1);    box-shadow:0 0 0 0 rgba(255,181,54,0)}
  to  {transform:scale(1.12); box-shadow:0 0 0 9px rgba(255,181,54,.18)}
}
@keyframes chip-breathe{
  0%,100%{transform:scale(1.12); box-shadow:0 0 0 9px rgba(255,181,54,.18)}
  50%    {transform:scale(1.21); box-shadow:0 0 0 16px rgba(255,181,54,.05)}
}
.donut .core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64%;height:64%;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:9%;
  box-shadow:0 18px 50px rgba(6,15,30,.34);
  opacity:0;transition:opacity .5s ease .12s;
}
.donut.revealed .core{opacity:1}
.core-content{transition:opacity .38s ease}
.core-content.out{opacity:0}
.donut .core h3{font-size:clamp(21px,1.9vw,29px);color:var(--navy);margin:0 0 8px}
.donut .core p{margin:0;font-size:clamp(13px,1.05vw,15.5px);line-height:1.5;color:#6a7686}

/* --- numbered list --- */
.boards h3.sub{font-size:clamp(24px,2.3vw,34px);color:#fff;margin:0 0 30px;max-width:22ch}
ol.duties{list-style:none;margin:0 0 36px;padding:0;counter-reset:d}
ol.duties li{
  counter-increment:d;position:relative;padding:0 0 20px 56px;
  font-size:clamp(15px,1.2vw,17.5px);line-height:1.6;color:#d3ddec;
}
ol.duties li::before{
  content:counter(d,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:17px;color:var(--pink);letter-spacing:.04em;
}
ol.duties li::after{
  content:"";position:absolute;left:2px;top:30px;bottom:6px;width:1px;background:rgba(255,255,255,.14);
}
ol.duties li:last-child::after{display:none}
ol.duties a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
ol.duties a:hover{border-color:#fff}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{padding:clamp(56px,6vw,92px) 0;background:var(--surface);border-top:1px solid var(--line)}
.partners .head{text-align:center;margin-bottom:clamp(30px,3.4vw,48px)}
.partners h2{font-size:clamp(28px,2.8vw,40px)}
/* equal-width cells keep the three logos evenly spaced and centred on one
   axis, whatever their individual proportions */
.plogos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,3.2vw,56px);margin:0 auto;
}
.plogos img{
  max-height:124px;width:auto;max-width:min(100%,520px);object-fit:contain;
  transition:transform .3s var(--ease);
}
.plogos img.tall{max-height:168px}   /* NAMI mark carries its own border + padding */
.plogos img:hover{transform:translateY(-3px)}
@media (max-width:720px){
  .plogos img{max-height:96px}
  .plogos img.tall{max-height:130px}
}

/* ============================================================
   FOOTER
   Two shallow bands rather than tall columns: brand + documents
   on top, contact details in a single horizontal row beneath.
   ============================================================ */
footer{
  position:relative;background:var(--navy-ink);color:#9fb0c6;
  padding:clamp(38px,4vw,54px) 0 clamp(30px,3.4vw,44px);
  font-size:15px;
}
/* One colour, edge to edge. This used to be pink for the first 22%
   and blue after, with a hard stop between them - which did not read
   as a deliberate accent, it read as the line failing to paint. */
footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--blue);
}
footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 12% 0%,rgba(0,147,208,.13) 0%,rgba(0,147,208,0) 60%);
}
footer .wrap{position:relative;z-index:2}

/* --- upper band: brand left, the two documents right --- */
.ftop{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,3vw,52px);flex-wrap:wrap;
  padding-bottom:clamp(24px,2.6vw,34px);
}
.fbrand{display:flex;align-items:center;gap:14px;flex:none}
.fbrand img{height:48px;width:auto;flex:none}
.fbrand span{
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  color:#fff;font-size:21px;line-height:1.16;max-width:15ch;
}
.fdocs{display:flex;gap:12px;flex-wrap:wrap}
.fdoc{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:#dbe4f0;font-weight:600;font-size:14.5px;line-height:1.2;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--ease);
}
.fdoc .doc{width:17px;height:17px;fill:currentColor;opacity:.5;flex:none}
.fdoc .arrow{width:14px;height:14px;fill:currentColor;opacity:.45;flex:none;
  transition:transform .25s var(--ease),opacity .25s}
.fdoc:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;transform:translateY(-2px)}
.fdoc:hover .arrow{transform:translateX(3px);opacity:1}

/* --- lower band: contact details on one line --- */
.fbar{
  /* one child now - Facebook moved into .finfo, so there is no second block
     to push to the far edge and space-between would do nothing */
  display:flex;align-items:center;
  gap:clamp(18px,2.5vw,40px);flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:clamp(20px,2.2vw,28px);
}
.finfo{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,38px);flex-wrap:wrap;
}
.finfo li{display:flex;align-items:center;gap:10px;line-height:1.4}
.finfo svg{width:16px;height:16px;fill:currentColor;opacity:.45;flex:none}
.finfo a{transition:color .2s}
.finfo a:hover{color:#fff}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .hero-inner{grid-template-columns:1fr;gap:38px}
  .hero-media .shot{aspect-ratio:16/9}
  .boards .cols{grid-template-columns:1fr;gap:52px}
  /* the action panel drops below rather than squeezing the copy; the logo
     keeps its column beside the text so it never strands on a line of its own */
  .crisis{grid-template-columns:auto minmax(0,1fr)}
  .crisis-act{grid-column:1 / -1}
}
/* The header row is logo + six nav items + tools, and it must never wrap -
   a wrapped nav pushes the whole page down and looks broken. Measured, at
   the widest the nav ever gets (About Us and Resources both carry a caret):

     gutters + logo + gap + nav + gap + tools  =  needs ~1235px

   so the menu collapses to the burger at 1260px, leaving ~25px of slack.
   Raised from 1150px when the logo grew - it is ~50px wider than it was,
   and the About Us caret added a little more. If you add a seventh nav
   item or lengthen a label, re-measure and raise this number to match. */
@media (max-width:1260px){
  .navtoggle{display:flex}
  .mainnav{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px var(--gutter) 18px;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  }
  .mainnav.open{display:flex}
  .mainnav a{padding:14px 12px;border-radius:var(--r-sm);font-size:16.5px}
  .mainnav a::after{display:none}
  .mainnav a:hover{background:var(--surface)}
  /* the drop-down flattens: children sit indented under their parent */
  .navitem{display:flex;flex-direction:column}
  .caret{display:none}
  .subnav{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;margin:0 0 0 14px;padding:0 0 0 12px;
    background:transparent;border:0;border-left:2px solid var(--line);
    border-radius:0;box-shadow:none;
  }
  .subnav::before{display:none}
  .mainnav .subnav a{font-size:15.5px;padding:12px}
  .sitehead .wrap{position:relative}
  .head-tools{margin-left:auto}
}
@media (max-width:640px){
  /* the icon buttons and the full utility row don't fit next to the CTA;
     both sets of details are still reachable in the footer */
  .head-tools .icon-btn{display:none}
  .head-tools{gap:9px}
  .brand img,.sitehead.stuck .brand img{height:48px}
  .sitehead .btn-sm{padding:11px 16px;font-size:13.5px}
  .utility ul:first-child{display:none}
  .utility .wrap{justify-content:flex-start}
}
@media (max-width:720px){
  body{font-size:16px}
  /* the long board name wraps to two lines here, which strands the little
     dash beside the first line - drop it rather than leave it floating */
  .pagehead .eyebrow::before{display:none}
  .pagehead .eyebrow{gap:0}
  .utility ul{gap:16px;font-size:12.5px}
  .crisis{grid-template-columns:1fr;text-align:left}
    .ftop{flex-direction:column;align-items:flex-start}
  .fbar{flex-direction:column;align-items:flex-start;gap:22px}
  .finfo{flex-direction:column;align-items:flex-start;gap:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .donut:not(.revealed) .chip-dot{opacity:1;transform:scale(1)}
  .donut .core{opacity:1}
}

/* ============================================================
   INNER PAGES
   Shared furniture for every page other than the home page.
   ============================================================ */
.pagehead{
  /* Every vertical measure in the band comes from these, so the rhythm is
     tuned in one place. The two gaps step down (flame -> title is the larger
     move, title -> lede the smaller) which is what makes the stack read as
     one group rather than three stacked things.

     Padding is deliberately SYMMETRIC. It used to be 52/46, which put ~5px
     more air above the content than below and made the band look like it
     was sitting low in its own box. Four interior pages have no lede and
     end at the title, so the band has to balance in both shapes - equal
     padding is the only value that does. */
  /* capped at 90px on purpose: the source art is 180px tall, so 90 is
     exactly 2x - the largest size that stays crisp on a retina screen */
  --flame-h:clamp(64px,6.6vw,90px);
  --head-gap:clamp(16px,1.9vw,26px);
  --lede-gap:clamp(11px,1.25vw,17px);
  /* mirrors of the type sizes, so the half-leading trim below stays tied to
     the same numbers the text is actually set in */
  --lede-fs:clamp(16.5px,1.25vw,19px);
  --title-fs:clamp(34px,4vw,60px);
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--surface) 0%,#fff 100%);
  border-bottom:1px solid var(--line);
  padding:clamp(34px,3.6vw,54px) 0;
}
/* faint brand wash, echoing the home page hero */
.pagehead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 120% at 88% 0%,rgba(0,147,208,.10) 0%,rgba(0,147,208,0) 60%);
}
.pagehead .wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pagehead .eyebrow{justify-content:center}
/* Interior pages lead with the flame where the board's name used to be set
   in text. The mark alone, not the full lockup: the sticky header already
   carries the lockup a few pixels above, and repeating it there read as the
   same logo twice - and its wordmark was too small to actually read.

   The flame is cropped from the lockup artwork (75x180) rather than the
   28x60 icon the footer uses, which was too small to show at this size
   without going soft.

   Alt text is the board's name, so it degrades back to the words it
   replaced for a screen reader or when images fail. */
.pagehead-logo{
  position:relative;display:flex;justify-content:center;
  margin:0 0 var(--head-gap);
}
.pagehead-logo img{
  height:var(--flame-h);width:auto;display:block;position:relative;z-index:2;
  filter:drop-shadow(0 4px 12px rgba(237,16,100,.24));
  animation:flame-float 6.5s ease-in-out infinite;
}
/* the glow is its own layer so the pulse animates opacity only - animating a
   filter every frame is the expensive way to do this */
.pagehead-logo::before{
  content:"";position:absolute;left:50%;top:50%;
  width:calc(var(--flame-h) * 1.55);height:calc(var(--flame-h) * 1.95);
  transform:translate(-50%,-50%);pointer-events:none;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(237,16,100,.22) 0%, rgba(147,39,143,.13) 40%, rgba(237,16,100,0) 72%);
  animation:flame-glow 6.5s ease-in-out infinite;
}
@keyframes flame-float{
  0%,100%{transform:translateY(0)      scale(1)}
  50%    {transform:translateY(-5px)   scale(1.025)}
}
@keyframes flame-glow{
  0%,100%{opacity:.75}
  50%    {opacity:1}
}
/* Motion is decoration here - the mark still reads perfectly still. */
@media (prefers-reduced-motion:reduce){
  .pagehead-logo img,.pagehead-logo::before{animation:none}
}
.pagehead h1{color:var(--navy);font-size:var(--title-fs)}
.pagehead .lede{margin:var(--lede-gap) auto 0;font-size:var(--lede-fs);max-width:62ch;color:#4a5768;text-wrap:balance}

/* Half-leading trim on whichever element ends the band.
   A line box is taller than its letters: with line-height 1.7 the lede
   carries 0.35em of invisible space under its last line, headings 0.03em.
   Symmetric PADDING therefore still looks bottom-heavy, because the eye
   measures from the ink, not from the box. Pulling that leading back makes
   the visible whitespace above and below the band match.
   Both selectors are needed: thirteen interior pages end on the lede, four
   (Meetings, Managing Stress, Anxiety, Declaration) end on the title. */
.pagehead .lede:last-child{margin-bottom:calc(var(--lede-fs) * -0.35)}
.pagehead h1:last-child{margin-bottom:calc(var(--title-fs) * -0.03)}
/* Interior pages run on a narrower column than the header and footer.
   The 1400px site container is right for the home page's wide grids, but
   for a page that is mostly words it left prose ending halfway across the
   screen with a dead right half. 1080px is filled by the text itself. */
.pagebody{padding:clamp(44px,5.5vw,88px) 0}
.pagebody > .wrap{max-width:1080px}
.pagebody h2{font-size:clamp(26px,2.6vw,38px);margin:0 0 16px}
.pagebody h3{font-size:clamp(21px,2vw,27px);margin:34px 0 12px}
/* Body copy sits in a 72ch measure inside a 1400px container, so a
   paragraph running just past one line left a stub second line
   (698px followed by 323px). `balance` evens them out. Browsers stop
   balancing past a handful of lines, so long running copy keeps its
   normal flush-left rag - only the short paragraphs that caused the
   problem change. Older browsers ignore it and render as before.

   BALANCE EVENS LINE LENGTHS, NOT MEANING. It can still break after a
   short word - a line ending "...calendar below. For" strands the
   first word of the next sentence and is what actually reads as
   broken. CSS cannot see that; it is fixed in the copy by joining the
   two words with a non-breaking space (U+00A0), e.g. "For<nbsp>questions".
   Watch for it whenever a line would end on a short function word
   (a, an, and, or, is, of, to, the, For). Two such joins exist today,
   in src/pages/meetings.html and src/pages/get-help.html - keep them if
   you re-edit that copy. */
.pagebody p{margin:0 0 20px}

/* a statement line opening a section - centred, because what it introduces
   (card grids, provider columns) is itself symmetric.
   Two classes so it outranks `.pagebody h2` and keeps `margin:0 auto`. */
.pagebody .lead-in{
  font-size:clamp(21px,2vw,29px);line-height:1.32;color:var(--ink);
  margin:0 auto clamp(30px,3.2vw,48px);max-width:62ch;
  text-align:center;text-wrap:balance;
}
.pagebody > .wrap > :first-child{margin-top:0}
/* The 988 card reused inside an interior page. .crisis carries its own
   gradient, radius and padding, so it only needs page-flow margins here -
   and it must NOT get .crisis-shell, which exists to lift the card out of
   the home page's hero and would drag it off-grid in a .pagebody. */
.pagebody .crisis-inline{margin:0 0 clamp(38px,4vw,58px)}

/* section lead-in - a statement line above a block of content */
ul.ticks{list-style:none;margin:0 0 24px;padding:0}
ul.ticks li{position:relative;padding:0 0 12px 34px}
ul.ticks li::before{
  content:"";position:absolute;left:2px;top:9px;width:9px;height:5px;
  border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(-45deg);
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:0 0 28px}
.card{
  padding:26px;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.card h3{margin:0 0 10px;font-size:21px}
.card p{margin:0;font-size:15.5px}

/* ------------------------------------------------------------
   Upcoming meetings list (Meetings page)
   Sits above the embedded calendar and answers the question most
   visitors actually arrive with: when is the next meeting.
   Rendered by site.js from the public Google Calendar; the markup
   in the page is the fallback shown if that ever fails.
   ------------------------------------------------------------ */
.upcoming{margin:0 0 clamp(34px,4vw,56px)}
.upcoming h2{margin:0 0 20px}

.meetings{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.meeting{
  display:flex;align-items:stretch;gap:0;
  border:1px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;
}

/* date block - the scannable part, so it carries the colour */
.meeting-when{
  flex:0 0 96px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:16px 10px;background:var(--navy);color:#fff;text-align:center;
}
.meeting-mon{
  font-family:"Open Sans",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
}
.meeting-day{
  font-family:"Open Sans Condensed","Oswald","Arial Narrow",Impact,sans-serif;
  font-weight:700;font-size:36px;line-height:1.05;margin:2px 0;
}
.meeting-year{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.72)}

.meeting-body{padding:18px 22px;display:flex;flex-direction:column;justify-content:center}
.meeting-body h3{margin:0 0 6px;font-size:20px;color:var(--ink)}
.meeting-time{margin:0;font-size:15.5px;color:var(--body)}
.meeting-where{margin:4px 0 0;font-size:15px;color:var(--muted)}

/* fallback copy - hidden by script once real events render */
.meetings-note{margin:0;color:var(--body)}
.meetings-note[hidden]{display:none}

@media (max-width:520px){
  .meeting-when{flex-basis:76px;padding:14px 8px}
  .meeting-day{font-size:30px}
  .meeting-body{padding:15px 17px}
  .meeting-body h3{font-size:18px}
}

/* ------------------------------------------------------------
   Month grid, drawn by site.js from the meetings feed.

   Not an embed: Microsoft sends its published calendar with
   X-Frame-Options: SAMEORIGIN and refuses to be framed. Drawing
   it ourselves is the only way to show a calendar here, and it
   gets to use the site's own type and colour rather than
   Outlook's.

   Everything from .cal down is inert until the script builds
   the grid, so a visitor with no JS sees only the plain link.
   ------------------------------------------------------------ */
.calendar{margin:clamp(30px,3.6vw,48px) 0 0}
.cal{
  border:1px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;
  /* the gap down to the Outlook button. It sits HERE and not on
     .calendar-link because ".pagebody p" is a more specific selector
     than a single class and silently wins, which left the button
     jammed against the bottom of the grid. */
  margin:0 0 clamp(30px,3.6vw,44px);
}

/* month name, with a button either side */
.cal-head{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;border-bottom:1px solid var(--line);
  background:var(--surface);
}
.cal-title{
  margin:0;flex:1;text-align:center;
  font-size:clamp(18px,2.2vw,22px);color:var(--ink);letter-spacing:-.01em;
}
.cal-nav{
  flex:0 0 auto;width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:50%;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease);
}
.cal-nav:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy)}
.cal-nav:disabled{opacity:.32;cursor:default}

.cal-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.cal-grid th{
  padding:10px 6px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.cal-grid td{
  vertical-align:top;height:104px;padding:7px 8px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cal-grid tr td:last-child{border-right:0}
.cal-grid tr:last-child td{border-bottom:0}
.cal-pad{background:var(--surface)}

.cal-date{display:block;font-size:14px;font-weight:600;color:var(--body);margin:0 0 5px}
.cal-day.is-today .cal-date{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;margin:-3px 0 3px -3px;padding:0 5px;
  background:var(--pink);color:#fff;border-radius:999px;
}

.cal-events{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cal-event{
  padding:5px 7px;border-radius:var(--r-sm);
  background:rgba(0,147,208,.10);border-left:3px solid var(--blue);
  font-size:13px;line-height:1.3;color:var(--ink);
}
.cal-event-time{display:block;font-weight:700;color:var(--navy)}
.cal-event-name{display:block}
.cal-dots,.cal-agenda{display:none}

/* shown at every width when the visible month has nothing in it */
.cal-empty{
  margin:0;padding:16px 18px;border-top:1px solid var(--line);
  background:var(--surface);color:var(--body);font-size:15.5px;
}
.cal-empty[hidden]{display:none}

/* ---- phone ----
   Seven columns leave squares far too narrow for a meeting title,
   so the squares fall back to a dot and the detail moves to a
   list underneath the grid. */
@media (max-width:640px){
  .cal-grid td{height:56px;padding:5px 4px;text-align:center}
  .cal-date{font-size:13px;margin:0}
  .cal-events{display:none}
  .cal-dots{
    display:flex;justify-content:center;gap:3px;margin:4px 0 0;
  }
  .cal-dot{width:5px;height:5px;border-radius:50%;background:var(--pink)}
  .cal-grid th{font-size:11px;letter-spacing:.02em}

  .cal-agenda{
    display:block;list-style:none;margin:0;padding:14px 16px;
    border-top:1px solid var(--line);background:var(--surface);
  }
  .cal-agenda[hidden]{display:none}
  .cal-agenda-item{display:flex;gap:12px;padding:9px 0}
  .cal-agenda-item + .cal-agenda-item{border-top:1px solid var(--line)}
  .cal-agenda-date{
    flex:0 0 52px;font-size:13px;font-weight:700;color:var(--pink);
    text-transform:uppercase;letter-spacing:.03em;padding-top:2px;
  }
  .cal-agenda-body{display:block;font-size:15px;color:var(--ink)}
  .cal-agenda-time,.cal-agenda-where{display:block;font-size:14px;color:var(--body)}
}

/* The link out to Outlook, under the grid. Its spacing above comes from
   .cal's bottom margin - see the note there. */
.calendar-link{margin:0}

/* ------------------------------------------------------------
   Provider cards (Get Help)
   The phone number is the point of this page, so it carries the
   most weight in the card - same emphasis the old page gave it.
   ------------------------------------------------------------ */
.providers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(22px,2.6vw,36px);margin:0 0 clamp(36px,4.4vw,64px);
}
.provider{
  display:flex;flex-direction:column;
  padding:clamp(28px,3vw,44px);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.provider:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.provider-logo{
  display:flex;align-items:center;min-height:118px;
  padding-bottom:clamp(22px,2.4vw,30px);margin-bottom:clamp(22px,2.4vw,30px);
  border-bottom:1px solid var(--line);
}
.provider-logo img{max-height:92px;max-width:min(100%,340px);width:auto;object-fit:contain}

ul.ticks.linked{margin-bottom:18px}
ul.ticks.linked li{padding-bottom:15px}
ul.ticks.linked a{
  color:var(--ink);font-weight:600;font-size:16.5px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
ul.ticks.linked a:hover{color:var(--pink);border-color:var(--pink)}
/* Optional second line under a linked item, same treatment as ul.reslist:
   the link is the label, the span says what it is for. Without display:block
   the description runs straight on from the link with nothing between them. */
ul.ticks.linked span{display:block;margin-top:3px;font-size:15.5px;color:var(--body);text-wrap:pretty}

.provider-more{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:15px;font-weight:700;color:var(--blue);
}
.provider-more svg{width:13px;height:13px;fill:currentColor;transition:transform .2s var(--ease)}
.provider-more:hover{color:var(--pink)}
.provider-more:hover svg{transform:translateX(3px)}

.provider-foot{
  display:flex;flex-direction:column;align-items:stretch;gap:11px;
  margin-top:auto;padding-top:clamp(26px,2.8vw,36px);
}
/* the call button is the card's centre of gravity */
.btn-call{
  width:100%;justify-content:center;
  font-size:clamp(20px,1.8vw,26px);padding:19px 24px;letter-spacing:.005em;
}
.btn-call svg{width:21px;height:21px}
.btn-call:hover svg{transform:none}
.tap{text-align:center;font-size:13.5px;color:var(--muted);margin-top:-3px}
.provider-site{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:14px 20px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  color:var(--navy);font-weight:600;font-size:15.5px;
  transition:border-color .25s,color .25s,transform .25s var(--ease);
}
.provider-site:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}

/* ------------------------------------------------------------
   Notice - a highlighted aside for policy / eligibility copy
   ------------------------------------------------------------ */
.notice{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  padding:clamp(28px,3.2vw,48px) clamp(26px,3.2vw,52px);
  background:linear-gradient(112deg,var(--navy-ink) 0%,var(--navy-deep) 40%,var(--navy) 100%);
  color:#c8d6ea;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(22px,3.5vw,60px);align-items:center;
}
.notice::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 130% at 92% 30%,rgba(0,147,208,.24) 0%,rgba(0,147,208,0) 60%);
}
.notice > *{position:relative;z-index:2}
.notice p{margin:0 0 12px;font-size:15.5px;line-height:1.65;max-width:none}
.notice-body p:last-child{margin-bottom:0}
/* declared after .notice p so it wins the cascade, not just on specificity */
.notice p.notice-lead{
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:clamp(24px,2.4vw,36px);line-height:1.18;color:#fff;margin:0;max-width:none;
  text-wrap:balance;
}
.notice p:last-child{margin-bottom:0}
/* A notice is usually the last thing on a page, so it carries no bottom
   margin. When copy does continue after one, the next block needs the gap -
   otherwise the following heading sits right on the panel's edge. */
.pagebody .notice + *{margin-top:clamp(34px,3.6vw,52px)}

@media (max-width:900px){
  .notice{grid-template-columns:1fr;gap:18px}
}
@media (max-width:720px){
  .provider-foot{gap:10px}
}

/* ------------------------------------------------------------
   Jump bar - in-page anchors (Resources, FAQ)
   Both pages are long lists. The bar puts the section names in
   view at the top so nobody has to scroll to find out what is
   on the page.
   ------------------------------------------------------------ */
.jumpbar{
  display:flex;flex-wrap:wrap;gap:9px;
  margin:0 0 clamp(34px,4vw,56px);
}
/* An anchor jump parks the target at the very top of the viewport, which
   puts it underneath the sticky header - you land on the section with its
   own heading hidden behind the bar. scroll-margin-top reserves room for
   the header so the heading lands just below it.

   Sized against the TALLER, un-stuck header (32px of padding plus a
   clamp(52px,5vw,74px) logo, so 77px on a phone up to 107px on a wide
   desktop), because a jump made from the top of the page happens before
   the header has shrunk. That leaves 20-30px of clear space in the stuck
   state, which is what you want anyway - the heading should not sit flush
   against the bar.

   CSS, not a scroll handler: this also covers pasted #links, the back
   button, and keyboard navigation, which a click handler would miss. */
.pagebody [id]{scroll-margin-top:clamp(100px,8.5vw,134px)}
.jumpbar a{
  display:inline-flex;align-items:center;
  padding:10px 19px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--navy);font-weight:600;font-size:14.5px;line-height:1;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.jumpbar a:hover,.jumpbar a:focus-visible{
  background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px);
}

/* ------------------------------------------------------------
   Link sets (Resources)
   A heading followed either by a grid of plain outbound links
   (.linkgrid) or by links with a line of explanation (.reslist).
   ------------------------------------------------------------ */
.linkset{margin:0 0 clamp(40px,4.6vw,72px)}
.linkset:last-of-type{margin-bottom:clamp(36px,4vw,56px)}
.linkset > h2{
  padding-bottom:14px;margin-bottom:24px;
  border-bottom:2px solid var(--line);color:var(--navy);
}
.linkset > h3{margin:clamp(26px,3vw,40px) 0 14px;color:var(--ink)}
.linkset > h3:first-of-type{margin-top:clamp(22px,2.4vw,32px)}

.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.linkgrid a{
  position:relative;display:flex;align-items:center;
  padding:15px 42px 15px 20px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  color:var(--ink);font-weight:600;font-size:16px;line-height:1.4;
  transition:border-color .2s,color .2s,transform .2s var(--ease),box-shadow .2s var(--ease);
}
/* chevron, drawn in CSS - there are sixty of these links and an
   inline SVG in each one would be sixty copies of the same path */
.linkgrid a::after{
  content:"";position:absolute;right:20px;top:50%;
  width:7px;height:7px;
  border-top:2px solid var(--muted);border-right:2px solid var(--muted);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .2s var(--ease),border-color .2s;
}
.linkgrid a:hover,.linkgrid a:focus-visible{
  border-color:var(--pink);color:var(--pink);
  transform:translateY(-2px);box-shadow:var(--shadow);
}
.linkgrid a:hover::after,.linkgrid a:focus-visible::after{
  border-color:var(--pink);transform:translateY(-50%) translateX(3px) rotate(45deg);
}

/* annotated links - title on its own line, explanation beneath */
ul.reslist{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px}
ul.reslist li{
  position:relative;padding:14px 0 14px 26px;
  border-bottom:1px solid var(--line);
}
ul.reslist li:last-child{border-bottom:0}
ul.reslist li::before{
  content:"";position:absolute;left:2px;top:23px;width:9px;height:5px;
  border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:rotate(-45deg);
}
ul.reslist a{
  display:inline-block;color:var(--ink);font-weight:700;font-size:16.5px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
ul.reslist a:hover,ul.reslist a:focus-visible{color:var(--pink);border-color:var(--pink)}
ul.reslist span{display:block;margin-top:3px;font-size:15.5px;color:var(--body);text-wrap:pretty}

/* buttons sitting together inside a notice */
.notice .btn{margin:6px 10px 0 0}

/* ------------------------------------------------------------
   Notice, contact variant - a named person and how to reach them.
   Plain .notice runs its body as a flat stack of paragraphs, which
   left the name, the address and the buttons all reading at the
   same weight. This gives the body a hierarchy (name -> actions ->
   address) and puts the buttons in their own flex row so they sit
   side by side instead of wrapping at mid widths.
   ------------------------------------------------------------ */
.notice-contact .notice-sub{
  margin:14px 0 0;font-size:15.5px;line-height:1.6;color:#a9bcd6;max-width:36ch;
}
.notice-contact .contact-name{
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:clamp(22px,2vw,29px);line-height:1.15;color:#fff;margin:0;
}
.notice-contact .contact-role{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:#9fb4d0}
.notice-contact .contact-actions{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;
}
/* beats .notice .btn's margins - the flex gap does that job here */
.notice-contact .contact-actions .btn{margin:0;flex:1 1 auto;justify-content:center}
.notice-contact .contact-addr{
  display:flex;align-items:center;gap:9px;margin:20px 0 0;
  padding-top:17px;border-top:1px solid rgba(255,255,255,.14);
  font-size:14.5px;line-height:1.5;color:#a9bcd6;
}
.notice-contact .contact-addr svg{width:15px;height:15px;fill:currentColor;opacity:.7;flex:none}
/* Same row treatment as .contact-addr, but for a stack of them (phone, fax,
   email, hours) rather than a single line. */
.notice-contact .contact-lines{
  margin:20px 0 0;padding-top:17px;border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:11px;
}
.notice-contact .contact-lines p{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:14.5px;line-height:1.5;color:#a9bcd6;
}
.notice-contact .contact-lines svg{width:15px;height:15px;fill:currentColor;opacity:.7;flex:none}
.notice-contact .contact-lines a{color:inherit;border-bottom:1px solid rgba(255,255,255,.3)}
.notice-contact .contact-lines a:hover{color:#fff;border-bottom-color:#fff}

/* ------------------------------------------------------------
   Hours ring - office hours as a week dial.
   Borrows the home page donut's language deliberately (thin white
   track, amber for the live segments, white core) so the two read as
   the same family. Unlike the donut this is static: no JavaScript,
   no states, nothing to cycle. It only has one thing to say.
   Geometry: r=78 in a 200x200 box (circumference 490.09) split into
   7 segments of 70.01 with a 7-unit gap -> dash 63.01. First segment is
   centred on 12 o'clock, so Monday starts at the top. The ring sits at
   39% of the box and the day letters at 48%, which is what keeps the
   letters off the stroke - move one and you must move the other.
   ------------------------------------------------------------ */
.hoursring{position:relative;width:100%;max-width:290px;margin:0 auto;aspect-ratio:1}
.hoursring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hr-arc{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;opacity:.22}
.hr-arc.is-open{stroke:var(--amber);stroke-width:5;opacity:1}

/* day letters ride the ring the same way the donut's chips do:
   rotate the full-size wrapper, then counter-rotate the label so the
   text stays upright */
.hr-day{position:absolute;inset:0;transform:rotate(var(--a));pointer-events:none}
.hr-day span{
  /* Three-letter names are ~3x wider than the single letters this started
     with, so they sit closer in (46% instead of 48%) to keep the widest of
     them inside the ring's own box. The ring radius moved in to match -
     see the note on .hr-arc. */
  position:absolute;left:50%;top:4%;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.5);white-space:nowrap;
}
.hr-day.is-open span{color:var(--amber)}
.hr-day.d0{--a:0deg}      .hr-day.d1{--a:51.429deg}  .hr-day.d2{--a:102.857deg}
.hr-day.d3{--a:154.286deg} .hr-day.d4{--a:205.714deg} .hr-day.d5{--a:257.143deg}
.hr-day.d6{--a:308.571deg}

.hr-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66%;height:66%;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8%;box-shadow:0 18px 50px rgba(6,15,30,.34);
}
.hr-core p{margin:0;max-width:none}
.hr-time{
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:clamp(23px,2.5vw,30px);line-height:1.05;color:var(--navy);white-space:nowrap;
}
.hr-time span{font-size:.55em;margin-left:2px;color:var(--body)}
.hr-sep{font-size:12.5px;line-height:1;color:var(--body);margin:3px 0 !important;opacity:.75}
.hr-days{margin-top:7px !important;font-size:12.5px;font-weight:700;color:var(--pink);letter-spacing:.04em}

@media (max-width:900px){
  /* 266, not 250: the three-letter day names left barely a pixel between
     "Wed" and the edge of the ring's box at 250. The notice's own padding
     leaves ~283px of content width on a 375px phone, so this still fits. */
  .hoursring{max-width:266px}
}

/* ------------------------------------------------------------
   FAQ accordion
   Native <details>/<summary>: opens with no JavaScript, keyboard
   accessible for free, and the browser's own find-in-page can
   still reach closed answers in current browsers.
   ------------------------------------------------------------ */
.faq{margin:0 0 clamp(40px,4.6vw,72px)}
.faq > h2{
  padding-bottom:14px;margin-bottom:20px;
  border-bottom:2px solid var(--line);color:var(--navy);
}

.qa{
  border:1px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:var(--shadow-sm);
  margin:0 0 10px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s var(--ease);
}
.qa:hover{box-shadow:var(--shadow)}
.qa[open]{border-color:#cfd8e5}

.qa summary{
  position:relative;display:block;cursor:pointer;list-style:none;
  padding:20px 62px 20px 24px;
  font-family:"Open Sans",sans-serif;font-weight:700;
  font-size:clamp(16.5px,1.35vw,19px);line-height:1.42;color:var(--ink);
  text-wrap:balance;transition:color .2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--pink)}
.qa summary:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}

/* the +/- disc on the right */
.qa summary::after{
  content:"";position:absolute;right:20px;top:50%;
  width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:var(--surface);
  transition:background .2s;
}
.qa summary::before{
  content:"";position:absolute;right:27px;top:50%;z-index:2;
  width:14px;height:14px;margin-top:-7px;
  background:
    linear-gradient(var(--navy),var(--navy)) center/14px 2px no-repeat,
    linear-gradient(var(--navy),var(--navy)) center/2px 14px no-repeat;
  transition:transform .28s var(--ease),background .2s;
}
.qa[open] summary::before{transform:rotate(180deg);background-size:14px 2px,0 0}
.qa summary:hover::after{background:#fdeaf1}
.qa summary:hover::before{background-image:linear-gradient(var(--pink),var(--pink)),linear-gradient(var(--pink),var(--pink))}

.qa-body{
  padding:0 24px 22px;
  animation:qa-in .3s var(--ease);
}
@keyframes qa-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.qa-body p{margin:0 0 15px;font-size:16.5px}
.qa-body > :last-child{margin-bottom:0}
.qa-body ul.ticks{margin:10px 0 4px}

/* numbered answers - the warning-sign lists */
ol.qa-steps{margin:0 0 4px;padding:0 0 0 4px;list-style:none;counter-reset:qa}
ol.qa-steps > li{
  position:relative;counter-increment:qa;
  padding:0 0 12px 38px;text-wrap:pretty;
}
ol.qa-steps > li::before{
  content:counter(qa);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:50%;
  background:var(--surface);color:var(--navy);
  font-family:"Open Sans",sans-serif;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
ol.qa-steps ul.ticks{margin:10px 0 4px}

/* condition / rate pairs */
ul.statlist{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:460px}
ul.statlist li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 18px;border-radius:var(--r-sm);background:var(--surface);
}
.statlist-label{font-weight:600;color:var(--ink);font-size:16px}
.statlist-value{
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:26px;line-height:1;color:var(--pink);flex:none;
}

@media (max-width:560px){
  .linkgrid{grid-template-columns:1fr}
  .qa summary{padding:17px 54px 17px 18px}
  .qa summary::after{right:15px}
  .qa summary::before{right:22px}
  .qa-body{padding:0 18px 19px}
}
@media (prefers-reduced-motion:reduce){
  .qa-body{animation:none}
}

/* ------------------------------------------------------------
   Long-form interior pages
   Standalone pages that open with a full-width image and then run
   as ordinary prose - Managing Stress, When You Can't Shake
   Anxiety, the Declaration. They are NOT posts: no date line, no
   author, no "related" rail. Same page furniture as every other
   interior page, with a lead image and a lead paragraph on top.
   ------------------------------------------------------------ */
.longform-hero{
  margin:0 0 clamp(30px,3.4vw,48px);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);
}
.longform-hero img{width:100%;aspect-ratio:12/5;object-fit:cover}
/* A wide, short banner graphic, and only 600px wide to begin with.
   Cropping it to the 12/5 hero shape would cut the artwork, and
   stretching it to the full column would upscale it 1.6x and go
   soft - so it keeps its own size and centres instead. */
.longform-hero.banner{
  max-width:620px;margin-left:auto;margin-right:auto;
  box-shadow:none;border-radius:var(--r-sm);
}
.longform-hero.banner img{aspect-ratio:auto;object-fit:contain}

.longform h2{margin:clamp(34px,3.6vw,52px) 0 14px}
.longform h2:first-child{margin-top:0}
.longform h3{margin:clamp(26px,2.6vw,36px) 0 10px}
.longform .longform-lead{
  font-size:clamp(18px,1.5vw,22px);line-height:1.6;color:var(--ink);
  margin:0 0 22px;
}
.longform .longform-close{
  margin:clamp(30px,3.2vw,44px) 0 0;padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line);
  font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--ink);
}
.longform .cards{margin-top:22px}
.longform + .notice{margin-top:clamp(40px,4.6vw,68px)}

/* a plain list that is long but each item is short - two columns
   stops it running down the page as a single thin ribbon */
ul.ticks.cols{columns:2;column-gap:clamp(24px,3vw,48px)}
ul.ticks.cols li{break-inside:avoid}
@media (max-width:560px){
  ul.ticks.cols{columns:1}
}

/* ------------------------------------------------------------
   Download list
   The Board's published documents - annual reports, strategic
   plans, policies. One <a class="doc"> per document inside a
   <div class="doclist">.

   Two rules the markup depends on:

   1. `download` on the <a> makes the browser SAVE the PDF rather
      than open it in its built-in reader. Use it for the Board's
      own files. Leave it OFF for links that leave the site
      (Canva, Adobe Cloud) - `download` is ignored cross-origin
      anyway, and those need to open in a new tab instead.

   2. `<span class="doc-size"></span>` is left EMPTY in the source.
      build.py measures the actual file in src/files/ and writes
      the size in. Nothing to update when a document is replaced.
   ------------------------------------------------------------ */
.doclist{display:grid;gap:10px;margin:0 0 clamp(30px,3.2vw,44px);max-width:760px}
.doclist .doc{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease);
}
.doclist .doc:hover{border-color:#cfd8e5;box-shadow:var(--shadow);transform:translateY(-2px)}
.doclist .doc:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* the file-type badge on the left */
.doc-icon{
  width:42px;height:42px;border-radius:var(--r-sm);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--navy);transition:background .2s,color .2s;
}
.doc-icon svg{width:19px;height:19px;fill:currentColor}
.doclist .doc:hover .doc-icon{background:var(--pink);color:#fff}

.doc-text{min-width:0;flex:1}
.doc-name{
  display:block;font-weight:700;color:var(--ink);font-size:17px;line-height:1.35;
  transition:color .2s;
}
.doclist .doc:hover .doc-name{color:var(--pink)}
/* size is written by build.py; when it is empty the separator would be a
   stray dot, so the dot lives on the size itself and disappears with it */
.doc-meta{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.doc-size:not(:empty)::before{content:" \00b7  "}

.doc-go{width:17px;height:17px;flex:none;fill:currentColor;color:var(--muted);
  transition:transform .25s var(--ease),color .2s}
.doclist .doc:hover .doc-go{color:var(--pink);transform:translateY(2px)}
/* offsite documents get an arrow that leaves, not one that descends */
.doclist .doc.offsite:hover .doc-go{transform:translate(2px,-2px)}

@media (max-width:560px){
  .doclist .doc{gap:13px;padding:14px 16px}
  .doc-icon{width:36px;height:36px}
  .doc-name{font-size:16px}
}

/* ------------------------------------------------------------
   Roster - people, in cards
   Board officers and staff. Each .person is a role + a name, in
   that order: on a page listing eighteen people, the role is what
   someone is scanning for, so it reads first and the name follows
   as the answer.

   .person.featured spans the full row and adds a portrait - used
   for the Executive Director. Everyone else is a plain card, which
   is deliberate: photographs for some people and not others reads
   as a ranking. One clearly-framed exception at the top does not.
   ------------------------------------------------------------ */
.roster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;margin:0 0 clamp(30px,3.2vw,44px);
}
.person{
  padding:22px 24px;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}

.person .person-role{
  font-family:"Open Sans",sans-serif;font-weight:700;color:var(--pink);
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  margin:0 0 7px;line-height:1.3;
  /* Role labels run to different lengths - "Finance Manager" is one line,
     "Substance Use Disorder & Prevention Coordinator" is two - which left
     the names sitting at different heights across a row of cards. Holding
     two lines of space aligns them. A label long enough to need a third
     line pushes its own name down, which only happens on narrow screens
     where the cards are stacked one per row and nothing is beside them to
     line up against anyway. */
  min-height:2.6em;
}
.person .person-name{
  font-family:"Open Sans Condensed","Arial Narrow",sans-serif;font-weight:700;
  font-size:23px;line-height:1.16;color:var(--ink);margin:0;letter-spacing:-.005em;
}
.person .person-detail{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--body)}

/* The featured person sits OUTSIDE .roster, as its own full-width block.
   Inside the grid it counted as a track-filling item, which pushed the
   auto-fit column count up and left the three cards beside it stranded in
   a four-column row with a gap on the end. */
.person.featured{
  display:flex;align-items:center;gap:clamp(20px,2.8vw,36px);flex-wrap:wrap;
  padding:clamp(24px,2.6vw,32px);
  margin:0 0 16px;
}
.person.featured .person-name{font-size:clamp(26px,2.4vw,32px)}
/* A portrait cropped to a circle puts the face too low if it is centred -
   the sitter's head sits in the upper third of the frame. */
.person-photo{
  width:132px;height:132px;flex:none;border-radius:50%;
  object-fit:cover;object-position:50% 18%;
  box-shadow:var(--shadow);
}
.person.featured .person-body{min-width:min(100%,240px)}

@media (max-width:560px){
  .person.featured{flex-direction:column;align-items:flex-start;text-align:left}
  .person-photo{width:108px;height:108px}
}

/* ------------------------------------------------------------
   Links inside running prose
   The base reset is `a{color:inherit;text-decoration:none}`, which is
   right for nav items, cards and buttons - every link on the site used
   to be one of those, so a link inside a sentence had no styling at all
   and was invisible. These pages have them, so they need a treatment.

   Underlined at rest, not just on hover: a reader scanning a paragraph
   has to be able to see what is clickable without moving the mouse over
   it, and on a touch screen there is no hover at all. Pink on hover,
   matching every other link on the site.

   Buttons are excluded, and so are the list styles that already have
   their own treatment (ul.ticks.linked, ul.reslist).
   ------------------------------------------------------------ */
.pagebody p a:not(.btn),
.pagebody ul.ticks:not(.linked) li a:not(.btn),
.pagebody ol li a:not(.btn){
  color:var(--navy);font-weight:600;
  border-bottom:1px solid rgba(31,54,92,.3);
  transition:color .2s,border-color .2s;
}
.pagebody p a:not(.btn):hover,
.pagebody ul.ticks:not(.linked) li a:not(.btn):hover,
.pagebody ol li a:not(.btn):hover{color:var(--pink);border-color:var(--pink)}
.pagebody p a:not(.btn):focus-visible,
.pagebody ol li a:not(.btn):focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* The notice is a dark navy panel, so a navy link inside one disappears.
   Same shape, inverted. */
.pagebody .notice p a:not(.btn){color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.pagebody .notice p a:not(.btn):hover{color:#fff;border-bottom-color:#fff}