/* ===================================================================
   BCG WATER BRAND TOKENS
   Sourced from the official logo SVG and the live portal UI.
     #0e6993  deep water blue   (WATER wordmark, primary wave)
     #4fc2c5  BCG teal          (secondary wave, CTA)
     #464647  charcoal          (BCG letterforms, body copy)
     #2f4c66  slate navy        (portal panel ground)
   =================================================================== */
:root{
  --blue:#0e6993;
  --blue-deep:#0a4f6f;
  --blue-tint:#e3f0f7;
  --teal:#4fc2c5;
  --teal-deep:#33a3a7;
  --teal-tint:#e6f7f7;
  --charcoal:#464647;
  --slate:#2f4c66;
  --slate-2:#3c5c78;

  --ink:#22323d;
  --muted:#5d6d79;
  --muted-2:#8a97a1;
  --line:rgba(14,105,147,.14);
  --line-strong:rgba(14,105,147,.26);

  --bg:#ffffff;
  --bg-tint:#f4fafd;
  --bg-tint-2:#eaf4f9;

  --st-over:#c8392c;    --st-over-bg:#fdf1ef;
  --st-appr:#d9782a;    --st-appr-bg:#fdf5ec;
  --st-up:#1b6d99;      --st-up-bg:#eef6fb;
  --st-ok:#2f8a6a;      --st-ok-bg:#eef8f3;
  --signal:#b8791f;
  --signal-bg:#fdf6ea;
  --alert:#a8443c;
  --alert-bg:#fdf0ef;
  --ok:#2f8a6a;

  --step--2:clamp(.69rem,.67rem + .1vw,.75rem);
  --step--1:clamp(.85rem,.82rem + .15vw,.93rem);
  --step-0:clamp(1rem,.96rem + .22vw,1.09rem);
  --step-1:clamp(1.18rem,1.06rem + .5vw,1.4rem);
  --step-2:clamp(1.5rem,1.24rem + 1.05vw,2.05rem);
  --step-3:clamp(1.95rem,1.5rem + 2vw,2.95rem);
  --step-4:clamp(2.4rem,1.7rem + 3.4vw,4.2rem);
  --step-5:clamp(2.3rem,1.5rem + 3.1vw,4.15rem);

  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;

  --sh-sm:0 1px 2px rgba(20,50,70,.06),0 2px 8px rgba(20,50,70,.05);
  --sh-md:0 3px 8px rgba(20,50,70,.07),0 12px 28px rgba(20,50,70,.08);
  --sh-lg:0 8px 20px rgba(20,50,70,.09),0 28px 60px rgba(20,50,70,.11);

  --gut:clamp(1.25rem,5vw,5.5rem);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  background:
    radial-gradient(70% 44% at 82% 2%,rgba(120,190,225,.22) 0%,rgba(120,190,225,0) 62%),
    radial-gradient(58% 40% at 6% 20%,rgba(79,194,197,.15) 0%,rgba(79,194,197,0) 66%),
    radial-gradient(80% 50% at 50% 74%,rgba(140,200,232,.18) 0%,rgba(140,200,232,0) 68%),
    linear-gradient(180deg,#f2f9fd 0%,#eaf4fb 40%,#f4fafd 100%);
  background-attachment:fixed;
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--step-0);line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-sm)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.serif{font-family:'Lora',Georgia,serif;font-weight:600}
.lbl{font-size:var(--step--2);letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:var(--step--2);
  letter-spacing:.02em}

/* ===================================================================
   LOADER
   =================================================================== */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:grid;place-items:center;transition:opacity .7s var(--ease-out-expo),visibility .7s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.ld{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.ld img{width:150px;opacity:0;animation:ldIn 1s var(--ease-out-expo) .1s forwards}
.ld-bar{width:150px;height:2px;background:var(--blue-tint);border-radius:2px;
  position:relative;overflow:hidden}
.ld-bar::after{content:'';position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--blue));
  transform:translateX(-100%);animation:ldSweep 1.3s var(--ease-in-out) .3s forwards}
@keyframes ldIn{to{opacity:1}}
@keyframes ldSweep{to{transform:translateX(0)}}

/* ===================================================================
   NAV
   =================================================================== */
header{position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease-in-out),border-color .45s,backdrop-filter .45s}
header.stuck{background:rgba(244,250,253,.92);backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.1rem;
  padding-block:.95rem}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex-shrink:0;
  position:relative;z-index:1;padding:.4rem .85rem .4rem .7rem}
/* the mark is a light Didone on a pale ground, so it needs a plate under it */
.brand::before{content:'';position:absolute;inset:-3px -6px;z-index:-1;border-radius:16px;
  background:rgba(30,52,74,.93);backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 2px 6px rgba(16,40,60,.22),0 10px 26px rgba(16,40,60,.18),
             inset 0 1px 0 rgba(255,255,255,.14)}
header.stuck .brand::before{background:rgba(30,52,74,.96);
  box-shadow:0 2px 6px rgba(16,40,60,.20),0 8px 20px rgba(16,40,60,.16),
             inset 0 1px 0 rgba(255,255,255,.14)}
/* The logo is an SVG in an img. A CSS filter on it forces the browser to
   rasterise the vector before compositing, which is what made it look grainy.
   So the sharp copy carries NO filter, and a blurred duplicate sits behind it
   to cast the shadow. */
.brand-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.brand img.lg{height:54px;width:auto;display:block;position:relative;z-index:1;filter:none}
.brand img.lg-sh{position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  filter:brightness(0) opacity(.45) blur(5px);
  transform:translate(1px,4px)}
.brand-tag{padding-left:.9rem;border-left:1px solid rgba(255,255,255,.28);
  font-size:var(--step--1);font-weight:600;letter-spacing:.02em;color:#ffffff;
  line-height:1.15}
.brand-tag span{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.66);font-weight:600}
@media(max-width:520px){.brand img.lg{height:40px}.brand-tag{padding-left:.6rem}}

.nav-links{display:flex;align-items:center;gap:1.5rem;white-space:nowrap}
.nav-links a{text-decoration:none;font-size:.72rem;color:var(--charcoal);
  position:relative;padding-block:.25rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  transition:color .3s var(--ease-in-out)}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out-expo)}
.nav-links a:hover{color:var(--blue)}
.nav-links a:hover::after{transform:scaleX(1)}
@media(max-width:1120px){.nav-links{display:none}}

.btn[hidden]{display:none}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.4rem;
  border-radius:100px;font-size:var(--step--1);font-weight:600;text-decoration:none;
  white-space:nowrap;border:1px solid var(--line-strong);color:var(--blue);
  background:#fff;
  transition:transform .3s var(--ease-spring),border-color .3s,background .3s,
    box-shadow .3s,color .3s}
.btn:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--sh-md)}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#0c3f47}
.btn-primary:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;
  box-shadow:0 6px 20px rgba(79,194,197,.42)}
.btn-blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;
  box-shadow:0 6px 20px rgba(14,105,147,.32)}
.btn .arw{transition:transform .35s var(--ease-out-expo)}
.btn:hover .arw{transform:translateX(4px)}
@media(max-width:640px){.nav > .btn{display:none}}
.cswitch[hidden]{display:none}
.cswitch{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .9rem;
  border-radius:100px;border:1px solid var(--teal);background:var(--teal-tint);
  font-size:var(--step--2);color:var(--blue);font-weight:600;
  transition:background .3s,border-color .3s,transform .3s var(--ease-spring)}
.cswitch:hover{background:#fff;transform:translateY(-1px)}
.cswitch .cs-dot{width:7px;height:7px;border-radius:50%;background:var(--teal-deep)}
.cswitch .cs-x{padding-left:.55rem;border-left:1px solid rgba(14,105,147,.28);
  color:var(--teal-deep);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:.6rem}
@media(max-width:820px){.cswitch .cs-x{display:none}}
@media(max-width:520px){.cswitch{display:none}}
body[data-county] .county:not([aria-pressed="true"]){opacity:.5}
body[data-county] .county:not([aria-pressed="true"]):hover{opacity:1}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;padding-top:clamp(6.5rem,12vh,8.5rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}

/* the Command Center splash ring, carrying the countdown */
.ring{position:relative;display:grid;place-items:center;
  width:min(100%,520px);aspect-ratio:1;margin-inline:auto}
.ring picture,.ring img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block}
.ring img{transform:rotate(-135deg);
  filter:drop-shadow(0 18px 40px rgba(14,105,147,.22))}
/* The glass orb is a real element now, not a pseudo, so the readout can live
   INSIDE it. Bubble and text move as one object, which keeps the small line at
   the bottom on the plate instead of drifting off it. */
.ring-bubble{position:absolute;left:50%;top:50%;
  width:70%;aspect-ratio:1;border-radius:50%;z-index:2;
  display:grid;place-items:center;
  transform:translate(-50%,-50%);
  animation:breathe 7s var(--ease-in-out) infinite;
  backdrop-filter:blur(9px) saturate(135%) brightness(1.08);
  background:
    radial-gradient(circle at 34% 27%,
      rgba(255,255,255,.90) 0%,rgba(255,255,255,.38) 17%,rgba(255,255,255,0) 42%),
    radial-gradient(circle at 64% 80%,
      rgba(126,206,224,.26) 0%,rgba(126,206,224,0) 48%),
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.74) 0%,rgba(255,255,255,.66) 52%,
      rgba(246,252,255,.46) 74%,rgba(232,246,252,.20) 88%,rgba(255,255,255,0) 100%);
  box-shadow:
    inset 0 14px 30px rgba(255,255,255,.72),
    inset 0 -20px 42px rgba(14,105,147,.20),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 18px 42px rgba(14,105,147,.18)}
.ring-core{position:relative;z-index:1;text-align:center;width:70%;padding:0}
/* the centring transform has to be carried through every keyframe */
@keyframes breathe{
  0%,100%{transform:translate(-50%,-50%)}
  50%    {transform:translate(-50%,calc(-50% - 8px))}
}
.ring-core .lbl{display:block;color:var(--teal-deep);margin-bottom:.35rem;
  text-shadow:0 1px 8px rgba(255,255,255,.95)}
.ring-unit,.ring-clock,.ring-sub{text-shadow:0 1px 8px rgba(255,255,255,.92)}
.ring-num{font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:clamp(2.3rem,1.3rem + 4.5vw,4.1rem);line-height:.95;color:var(--blue);
  display:block;letter-spacing:-.03em;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 12px rgba(255,255,255,.7)}
.ring-unit{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-top:.7rem}
.ring-clock{display:flex;align-items:flex-end;justify-content:center;gap:.28rem;
  margin-top:.6rem;font-family:'IBM Plex Mono',monospace;color:var(--blue)}
.ring-clock .cseg{display:flex;flex-direction:column;align-items:center;line-height:1}
.ring-clock b{font-size:clamp(1rem,.85rem + .7vw,1.35rem);font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ring-clock i{font-style:normal;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-top:.28rem}
.ring-clock em{font-style:normal;font-size:clamp(1rem,.85rem + .7vw,1.35rem);
  color:var(--teal-deep);position:relative;top:-.34em;animation:tick 1s steps(1,end) infinite}
@keyframes tick{0%,50%{opacity:1}51%,100%{opacity:.28}}
.ring-sub{display:block;font-size:.63rem;color:var(--charcoal);margin-top:.45rem;
  line-height:1.4}
@media(prefers-reduced-motion:reduce){.ring-bubble{animation:none}}
.eyebrow{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1.5rem}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 4px rgba(79,194,197,.22);animation:pulse 2.8s var(--ease-in-out) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(79,194,197,.22)}
  50%{box-shadow:0 0 0 10px rgba(79,194,197,0)}}
h1{font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:var(--step-5);line-height:1.06;letter-spacing:-.015em;
  margin:0 0 clamp(2rem,4vw,3.2rem);
  color:var(--slate);padding-left:.06em}
h1 .ln{display:block}
/* the signature move, borrowed from the bcgwater.com hero */

.hero-sub{font-size:var(--step-1);color:var(--muted);max-width:36ch;line-height:1.5;
  margin:0 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-note{margin:0 0 1.6rem;padding-left:.95rem;border-left:3px solid var(--teal);
  font-size:var(--step--1);color:var(--muted);max-width:46ch;line-height:1.55}

.countdown{border-left:3px solid var(--teal);padding-left:clamp(1.1rem,2.2vw,1.9rem);
  padding-block:.35rem .5rem}
@media(max-width:900px){.countdown{margin-top:.5rem}}
.cd-num{font-family:'Lora',Georgia,serif;font-weight:600;font-size:var(--step-4);
  line-height:1;letter-spacing:-.02em;display:block;margin:.45rem 0 .4rem;color:var(--blue)}
.cd-label{color:var(--muted);font-size:var(--step--1);max-width:28ch;line-height:1.5}

/* the BCG wave, carrying the timeline */
.wave{position:relative;margin-top:clamp(2.5rem,6vh,4.5rem);
  height:clamp(270px,34vh,350px)}
.wave canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wave-marks{position:absolute;inset:0;pointer-events:none}
.mk{--h:20px;position:absolute;top:56%;transform:translate(-50%,0);text-align:center;
  width:112px}
.wave-marks{pointer-events:none}
button.mk{pointer-events:auto;background:none;border:0;padding:0;cursor:pointer;
  transition:transform .3s var(--ease-out-expo)}
button.mk:hover{transform:translate(-50%,-3px)}
button.mk:hover .mk-txt,button.mk:hover .mk-date{color:var(--blue)}
button.mk:hover .mk-line{background:var(--teal)}
button.mk .mk-txt{text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color .3s,color .3s}
button.mk:hover .mk-txt{text-decoration-color:var(--teal)}
.tile{cursor:pointer;text-align:left;width:100%;font:inherit}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tile .t-go{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--teal-deep);opacity:0;transform:translateX(-4px);
  transition:opacity .3s,transform .3s var(--ease-out-expo)}
.tile:hover .t-go{opacity:1;transform:none}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(79,194,197,.55)}
  100%{box-shadow:0 0 0 16px rgba(79,194,197,0)}}
.item.flash{animation:flash 1.1s var(--ease-out-expo) 2;border-left-color:var(--teal)}
.mk.row2{--h:62px}
.mk-line{width:1px;height:var(--h);background:var(--line-strong);margin:0 auto}
/* the ribbon swings through this band, so labels carry their own halo */
.mk-date{margin-top:.5rem;font-family:'IBM Plex Mono',monospace;font-size:.61rem;
  letter-spacing:.07em;color:var(--muted-2);font-weight:500;
  text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 16px #fff}
.mk-txt{font-size:.68rem;color:var(--muted);line-height:1.34;margin-top:.2rem;
  text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 16px #fff}
.mk.up .mk-date{color:var(--signal)}
.mk.now{top:auto;bottom:56%;display:flex;flex-direction:column-reverse;--h:26px}
.mk.now .mk-date{color:var(--blue);margin:0 0 .45rem;font-weight:600}
.mk.now .mk-line{background:var(--blue)}
@media(max-width:760px){.mk{width:74px}.mk-txt{display:none}.mk.row2{--h:46px}}

/* the vertical timeline, phones only ---------------------------------- */
.wvlist-wrap{display:none}
.wvlist{list-style:none;margin:0;padding:0;position:relative}
.wvlist::before{content:'';position:absolute;left:7px;top:14px;bottom:14px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--teal))}
.wvrow{position:relative;display:block;width:100%;text-align:left;background:none;
  border:0;font:inherit;cursor:pointer;padding:.8rem 0 .8rem 2.15rem;
  -webkit-tap-highlight-color:transparent}
.wvrow::before{content:'';position:absolute;left:0;top:1.15rem;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--blue);
  box-shadow:0 0 0 4px var(--bg)}
.wvrow.up::before{border-color:var(--signal)}
.wvrow .wv-d{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.07em;font-weight:500;color:var(--muted-2);text-transform:uppercase}
.wvrow.up .wv-d{color:var(--signal)}
.wvrow .wv-t{display:block;font-size:.95rem;line-height:1.4;color:var(--charcoal);
  margin-top:.18rem}
.wvrow:active .wv-t{color:var(--blue)}
.wvrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.wvnow{position:relative;display:flex;align-items:center;gap:.6rem;
  padding:.5rem 0 .5rem 2.15rem}
.wvnow::before{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 4px var(--bg),0 0 0 7px rgba(79,194,197,.30)}
.wvnow span{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;
  font-weight:600;text-transform:uppercase;color:var(--teal-deep)}
.wvnow i{flex:1;height:1px;font-style:normal;
  background:linear-gradient(90deg,rgba(79,194,197,.55),rgba(79,194,197,0))}

@media(max-width:760px){
  .wave{height:112px;margin-top:clamp(1.5rem,4vh,2.2rem)}
  .wave-marks{display:none}
  .wvlist-wrap{display:block;margin-top:.5rem}
}

/* ===================================================================
   SECTIONS
   =================================================================== */
.sec{padding-block:clamp(4rem,10vh,7.5rem)}
.sec-head{max-width:62ch;margin-bottom:clamp(2rem,4.5vh,3.4rem)}
.sec-head h2{font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:var(--step-3);line-height:1.08;letter-spacing:-.012em;margin:.85rem 0 .95rem;
  color:var(--blue)}
.sec-head p{color:var(--muted);margin:0;max-width:56ch}

.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.reveal.in{opacity:1;transform:none}

/* ===================================================================
   SNAPSHOT BAND, after the Compliance Hub tiles
   =================================================================== */
.snapband{padding-block:clamp(2.5rem,6vh,4rem) 0}
.snap-lbl{display:block;margin-bottom:.9rem}
.snap{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.tile{background:#fff;border:1px solid var(--line);border-top:3px solid var(--st-up);
  border-radius:var(--r-md);padding:1.15rem 1.3rem 1.25rem;box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease-out-expo),box-shadow .4s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.tile .t-lbl{display:block;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700}
.tile .t-num{display:block;font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:clamp(2rem,1.4rem + 1.9vw,2.9rem);line-height:1.05;margin:.35rem 0 .2rem}
.tile .t-sub{display:block;font-size:var(--step--2);color:var(--muted);line-height:1.45}
.tile.over{border-top-color:var(--st-over)} .tile.over .t-num{color:var(--st-over)}
.tile.appr{border-top-color:var(--st-appr)} .tile.appr .t-num{color:var(--st-appr)}
.tile.up{border-top-color:var(--st-up)}     .tile.up .t-num{color:var(--st-up)}
.tile.ok{border-top-color:var(--st-ok)}     .tile.ok .t-num{color:var(--st-ok)}

/* ===================================================================
   COUNTY PICKER
   =================================================================== */
#choose{background:transparent}
.picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1.15rem}
.county{position:relative;text-align:left;padding:clamp(1.6rem,3vw,2.3rem);
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease-out-expo),border-color .45s,box-shadow .45s}
.county::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--blue));
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out-expo)}
.county:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--sh-lg)}
.county:hover::after,.county[aria-pressed="true"]::after{transform:scaleX(1)}
.county[aria-pressed="true"]{border-color:var(--teal);box-shadow:var(--sh-md)}
.county h3{font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:var(--step-2);margin:.7rem 0 .5rem;letter-spacing:-.015em;color:var(--blue)}
.county p{color:var(--muted);font-size:var(--step--1);margin:0 0 1.1rem;line-height:1.55}
.county .board{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-deep);font-weight:700;display:block}
.county .go{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--step--1);
  font-weight:600;color:var(--blue)}
.county .go svg{transition:transform .35s var(--ease-out-expo)}
.county:hover .go svg{transform:translateX(5px)}

/* the action block ------------------------------------------------- */
.actions{margin-top:1.75rem;border:1px solid var(--line);border-top:3px solid var(--teal);
  border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-md);overflow:hidden}
.actions[hidden]{display:none}
.act-head{padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,2.1rem) 0}
.act-head .lbl{display:block;color:var(--teal-deep);margin-bottom:.4rem}
.act-head h3{margin:0 0 .5rem;font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:var(--step-2);letter-spacing:-.015em;color:var(--blue);line-height:1.15}
.act-head p{margin:0;color:var(--muted);font-size:var(--step--1);max-width:62ch;line-height:1.6}
.act-list{list-style:none;margin:0;padding:clamp(1.2rem,3vw,1.8rem) clamp(1.3rem,3vw,2.1rem)
  clamp(1.3rem,3vw,2.1rem);counter-reset:act;display:grid;gap:1rem}
.act-list li{counter-increment:act;display:grid;
  grid-template-columns:34px minmax(0,1fr);gap:1rem;align-items:start;
  padding:1.05rem 1.15rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-tint);transition:border-color .35s,background .35s,box-shadow .35s}
.act-list li:hover{border-color:var(--teal);background:#fff;box-shadow:var(--sh-sm)}
.act-list li::before{content:counter(act);grid-row:span 2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:.82rem;font-weight:700;
  font-family:'IBM Plex Mono',monospace}
.act-list li.opt::before{background:var(--muted-2)}
.act-b{min-width:0}
.act-b h4{margin:0 0 .3rem;font-size:var(--step-0);font-weight:600;color:var(--ink);
  letter-spacing:-.01em;line-height:1.3}
.act-b p{margin:0 0 .75rem;font-size:var(--step--1);color:var(--muted);line-height:1.58;
  max-width:60ch}
.act-b p:last-child{margin-bottom:0}
.act-links{display:flex;flex-wrap:wrap;gap:.5rem}
.act-go{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;
  border-radius:100px;background:var(--teal);color:#0b3f47;font-weight:700;
  font-size:var(--step--1);text-decoration:none;white-space:nowrap;
  transition:background .3s,transform .3s var(--ease-spring),box-shadow .3s}
.act-go:hover{background:var(--teal-deep);color:#fff;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(79,194,197,.4)}
.act-2{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.05rem;
  border-radius:100px;border:1px solid var(--line-strong);color:var(--blue);
  font-weight:600;font-size:var(--step--1);text-decoration:none;white-space:nowrap;
  transition:border-color .3s,background .3s,transform .3s var(--ease-spring)}
.act-2:hover{border-color:var(--blue);background:var(--blue-tint);transform:translateY(-2px)}

/* program header, breadcrumb, growth ------------------------------- */
.progmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.1rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.progmeta span{font-size:var(--step--2);color:var(--muted-2)}
.progmeta b{font-family:'IBM Plex Mono',monospace;color:var(--blue);font-weight:500}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1.4rem;
  padding:.7rem 1.1rem;border-radius:100px;background:var(--blue-tint);
  border:1px solid rgba(14,105,147,.2);width:fit-content;
  font-size:var(--step--2)}
.crumb[hidden]{display:none}
.crumb .cr-p{color:var(--muted)}
.crumb .cr-s{color:var(--muted-2)}
.crumb .cr-c{color:var(--blue);font-weight:700}
.crumb .cr-r{color:var(--teal-deep);font-weight:600}

.pick-lbl{display:block;margin-bottom:.9rem}

.growth{margin-top:2rem;padding-top:1.6rem;border-top:1px dashed var(--line-strong)}
.growth .g-lbl{display:block;font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;margin-bottom:.85rem}
.g-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.gchip{display:inline-flex;align-items:baseline;gap:.45rem;padding:.45rem .85rem;
  border-radius:100px;border:1px dashed var(--line-strong);background:rgba(255,255,255,.5);
  font-size:var(--step--2);color:var(--muted);font-weight:600}
.gchip i{font-style:normal;font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600}
.g-note{margin:1rem 0 0;font-size:var(--step--2);color:var(--muted)}

/* ===================================================================
   PANEL
   =================================================================== */
#panel{margin-top:2.25rem;scroll-margin-top:90px}
#panel[hidden]{display:none}
.panel-in{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;
  overflow:hidden;box-shadow:var(--sh-lg)}
.panel-top{padding:clamp(1.4rem,3vw,2.1rem) clamp(1.4rem,3vw,2.4rem);
  border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;
  align-items:baseline;justify-content:space-between;background:var(--bg-tint)}
.panel-top h3{margin:.45rem 0 0;font-family:'Lora',Georgia,serif;
  font-weight:600;font-size:var(--step-2);letter-spacing:-.015em;color:var(--blue)}
.panel-body{padding:clamp(1.4rem,3vw,2.4rem)}

.qline{font-size:var(--step-1);margin:0 0 1.3rem;line-height:1.4;color:var(--ink);
  font-weight:500}
.opts{display:grid;gap:.6rem}
.opt{display:flex;gap:1rem;align-items:flex-start;text-align:left;width:100%;
  padding:1.05rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;
  transition:border-color .35s,background .35s,transform .35s var(--ease-out-expo),
    box-shadow .35s}
.opt:hover{border-color:var(--teal);background:var(--teal-tint);transform:translateX(3px)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-tint);
  box-shadow:inset 0 0 0 1px var(--blue)}
.opt .idx{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted-2);
  padding-top:.24rem;flex-shrink:0;font-weight:500}
.opt .ttl{font-weight:600;display:block;margin-bottom:.2rem;color:var(--ink)}
.opt .sub{color:var(--muted);font-size:var(--step--1);line-height:1.45}

.result{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line);
  scroll-margin-top:100px}
.result[hidden]{display:none}
.verdict{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.35rem;
  border-radius:var(--r-md);background:var(--teal-tint);
  box-shadow:inset 0 0 0 1px rgba(79,194,197,.5);margin-bottom:1.5rem}
.verdict.warn{background:var(--signal-bg);box-shadow:inset 0 0 0 1px rgba(184,121,31,.35)}
.verdict.crit{background:var(--alert-bg);box-shadow:inset 0 0 0 1px rgba(168,68,60,.32)}
.verdict h4{margin:0 0 .4rem;font-size:var(--step-1);font-weight:600;
  letter-spacing:-.01em;color:var(--ink)}
.verdict p{margin:0;color:var(--muted);font-size:var(--step--1);line-height:1.58}
.verdict .ico{flex-shrink:0;width:22px;height:22px;margin-top:.2rem;color:var(--blue)}
.verdict.warn .ico{color:var(--signal)}
.verdict.crit .ico{color:var(--alert)}

.blocks{display:grid;gap:1.5rem}
@media(min-width:860px){.blocks{grid-template-columns:1fr 1fr;gap:2.25rem}}
.block h5{margin:0 0 .8rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--teal-deep)}
.block ul{margin:0;padding-left:0;list-style:none;display:grid;gap:.65rem}
.block li{position:relative;padding-left:1.35rem;color:var(--muted);
  font-size:var(--step--1);line-height:1.58}
.block li::before{content:'';position:absolute;left:0;top:.66em;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.block li b{color:var(--ink);font-weight:600}

.caution{margin-top:1.5rem;padding:1.1rem 1.3rem;border-radius:var(--r-md);
  border:1px solid rgba(184,121,31,.28);background:var(--signal-bg);
  border-left:3px solid var(--signal)}
.caution .lbl{color:var(--signal);display:block;margin-bottom:.45rem}
.caution p{margin:0;font-size:var(--step--1);color:var(--charcoal);line-height:1.58}

.trig{margin-top:1.5rem;padding:1.25rem 1.4rem;border-radius:var(--r-md);
  background:var(--bg-tint);border:1px solid var(--line)}
.trig .lbl{display:block;margin-bottom:.7rem;color:var(--blue)}
.trig ol{margin:0;padding-left:1.15rem;display:grid;gap:.45rem;color:var(--muted);
  font-size:var(--step--1);line-height:1.5}

/* ===================================================================
   FEED
   =================================================================== */
#feed{background:transparent}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem;align-items:center}
.chip{padding:.5rem 1.05rem;border-radius:100px;border:1px solid var(--line);
  font-size:var(--step--1);color:var(--muted);background:#fff;font-weight:500;
  transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease-spring)}
.chip:hover{color:var(--blue);border-color:var(--line-strong);transform:translateY(-1px)}
.chip[aria-pressed="true"]{color:#fff;border-color:var(--blue);background:var(--blue)}
.filt-sep{width:1px;height:20px;background:var(--line-strong);margin-inline:.4rem}
.chip-conf[aria-pressed="true"]{background:var(--st-over);border-color:var(--st-over);color:#fff}

.feed{display:grid;gap:1rem}
.item{display:grid;grid-template-columns:126px minmax(0,1fr) minmax(0,200px);
  gap:clamp(1rem,2.6vw,2.2rem);padding:clamp(1.3rem,2.6vw,1.85rem);
  align-items:start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--st-up);
  border-radius:var(--r-md);box-shadow:var(--sh-sm);
  transition:box-shadow .4s var(--ease-in-out),transform .4s var(--ease-out-expo)}
.item:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
@media(max-width:820px){.item{grid-template-columns:1fr;gap:.85rem}}
.it-meta{display:flex;flex-direction:column;gap:.5rem}
@media(max-width:820px){.it-meta{flex-direction:row;align-items:center;gap:.75rem;flex-wrap:wrap}}
.it-date{font-family:'IBM Plex Mono',monospace;font-size:var(--step--2);
  letter-spacing:.05em;color:var(--ink);font-weight:500}
.tag{display:inline-block;padding:.26rem .62rem;border-radius:4px;font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;width:fit-content;font-weight:700}
.tag-deadline{background:var(--st-appr-bg);color:var(--st-appr)}
.tag-action{background:var(--st-up-bg);color:var(--st-up)}
.tag-guidance{background:var(--teal-tint);color:var(--teal-deep)}
.item.k-deadline{border-left-color:var(--st-appr)}
.item.k-action{border-left-color:var(--st-up)}
.item.k-guidance{border-left-color:var(--teal)}
.item.k-proposed{border-left-color:var(--muted-2)}
.tag-proposed{background:#f0f2f4;color:var(--muted)}
.it-body h4{margin:0 0 .45rem;font-size:var(--step-1);font-weight:600;
  letter-spacing:-.012em;line-height:1.3;color:var(--ink)}
.it-body .agency{color:var(--teal-deep);font-size:var(--step--1);margin:0 0 .7rem;
  font-weight:500}
.it-body .sum{color:var(--muted);margin:0 0 .9rem;font-size:var(--step--1);
  line-height:1.62;max-width:66ch}
.it-impact{padding-left:.9rem;border-left:3px solid var(--teal);margin-bottom:.8rem}
.it-impact .lbl{display:block;margin-bottom:.28rem;color:var(--teal-deep)}
.it-impact p{margin:0;font-size:var(--step--1);color:var(--muted);line-height:1.58;
  max-width:62ch}
.it-conf{margin-top:.95rem;padding:1.1rem 1.25rem;border-radius:var(--r-md);
  background:var(--st-over-bg);border:1px solid rgba(200,57,44,.28);
  border-left:4px solid var(--st-over)}
.it-conf .lbl{color:var(--st-over);display:block;margin-bottom:.4rem}
.it-conf h5{margin:0 0 .85rem;font-size:var(--step-0);font-weight:600;color:var(--ink);
  line-height:1.35;letter-spacing:-.01em}
.cf-sides{display:grid;gap:.7rem;align-items:stretch;margin-bottom:.9rem}
@media(min-width:700px){.cf-sides{grid-template-columns:1fr auto 1fr;gap:1rem}}
.cf-side{background:#fff;border:1px solid rgba(200,57,44,.2);border-radius:var(--r-sm);
  padding:.8rem .9rem}
.cf-side .cf-tag{display:block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--st-over);margin-bottom:.35rem}
.cf-side p{margin:0;font-size:var(--step--2);color:var(--charcoal);line-height:1.55}
.cf-v{display:grid;place-items:center;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--st-over);opacity:.6}
@media(max-width:699px){.cf-v{padding:.1rem 0}}
.it-conf .cf-eff,.it-conf .cf-do{margin:0 0 .5rem;font-size:var(--step--2);
  color:var(--charcoal);line-height:1.6}
.it-conf .cf-do{margin-bottom:0}
.it-conf b{color:var(--st-over);font-weight:700}
.item.has-conf{border-left-color:var(--st-over)}
.it-note{margin-top:.85rem;padding:.85rem 1rem;border-radius:var(--r-sm);
  background:var(--signal-bg);border:1px solid rgba(184,121,31,.24);
  border-left:3px solid var(--signal)}
.it-note .lbl{color:var(--signal);display:block;margin-bottom:.3rem}
.it-note p{margin:0;font-size:var(--step--2);color:var(--charcoal);line-height:1.62}
.it-side{display:flex;flex-direction:column;gap:.6rem;align-items:flex-end;text-align:right}
@media(max-width:820px){.it-side{flex-direction:row;align-items:center;text-align:left;
  justify-content:space-between;padding-top:.5rem;border-top:1px solid var(--line)}}
.cite{font-family:'IBM Plex Mono',monospace;font-size:var(--step--2);color:var(--muted-2);
  line-height:1.5;overflow-wrap:anywhere}
.conf{display:inline-flex;align-items:center;gap:.4rem;font-size:.63rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.conf .d{width:6px;height:6px;border-radius:50%}
.conf.verified{color:var(--ok)}.conf.verified .d{background:var(--ok)}
.conf.unverified{color:var(--signal)}.conf.unverified .d{background:var(--signal)}
.empty{padding:3rem 0;color:var(--muted-2);text-align:center;font-size:var(--step--1)}

/* ===================================================================
   LINKS, DOC CHIPS, MODAL, CALCULATOR
   =================================================================== */
a.lk{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(14,105,147,.35);
  transition:color .25s,border-color .25s}
a.lk:hover{color:var(--teal-deep);border-bottom-color:var(--teal)}
a.lk[target="_blank"]::after{content:'\2197';font-size:.78em;margin-left:.15em;opacity:.7}

.docrow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.docchip{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem;
  border-radius:100px;border:1px solid var(--line);background:#fff;font-size:var(--step--1);
  font-weight:600;color:var(--blue);box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease-spring),box-shadow .3s,border-color .3s}
.docchip:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--teal)}
.docchip svg{flex-shrink:0;color:var(--teal-deep)}
.docchip .pg{font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--muted-2);
  font-weight:400}

#modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;
  justify-content:center;padding:clamp(.6rem,3vw,2.2rem);
  background:rgba(20,45,62,.55);backdrop-filter:blur(6px)}
#modal.open{display:flex}
.mbox{background:#fff;border-radius:var(--r-lg);width:min(1080px,100%);height:min(88vh,900px);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-lg)}
.mtop{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:var(--bg-tint)}
.mtop h4{margin:0;font-family:'Lora',Georgia,serif;font-weight:600;font-size:var(--step-1);
  color:var(--blue);line-height:1.25}
.mtop .msrc{display:block;font-size:var(--step--2);color:var(--muted);font-weight:400;
  font-family:'Inter Tight',sans-serif;margin-top:.2rem}
.mact{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
.mclose{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:#fff;color:var(--muted);
  transition:background .25s,color .25s,border-color .25s}
.mclose:hover{background:var(--st-over-bg);color:var(--st-over);border-color:var(--st-over)}
.mbody{flex:1;min-height:0;background:#f0f4f7;position:relative}
.mbody iframe{width:100%;height:100%;border:0;display:block;position:relative;z-index:1}
.mfallback{position:absolute;inset:0;display:grid;place-items:center;padding:2rem;z-index:0}
.mfallback p{margin:0;max-width:44ch;text-align:center;color:var(--muted);
  font-size:var(--step--1);line-height:1.6}
@media(max-width:640px){.mtop{flex-wrap:wrap}.mact{width:100%;justify-content:flex-end}}

#calc{position:relative}
.calc{background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
.calc-body{padding:clamp(1.4rem,3vw,2.4rem)}
.cstep{margin-bottom:1.5rem}
.cstep:last-of-type{margin-bottom:0}
.cstep > .lbl{display:block;margin-bottom:.7rem;color:var(--teal-deep)}
.cq{font-size:var(--step-1);font-weight:600;margin:0 0 .9rem;line-height:1.35}
.copts{display:flex;flex-wrap:wrap;gap:.55rem}
.copt{padding:.7rem 1.15rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;font-size:var(--step--1);font-weight:500;text-align:left;
  transition:border-color .3s,background .3s,transform .3s var(--ease-out-expo)}
.copt:hover{border-color:var(--teal);background:var(--teal-tint);transform:translateY(-2px)}
.copt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-tint);
  box-shadow:inset 0 0 0 1px var(--blue)}
.copt small{display:block;font-weight:400;color:var(--muted);font-size:.78em;margin-top:.15rem}
.cnum{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.9rem}
.cnum input{padding:.75rem 1rem;border:1px solid var(--line-strong);border-radius:var(--r-md);
  font:inherit;font-size:var(--step-0);width:min(240px,100%);background:#fff;color:var(--ink)}
.cnum input:focus{outline:0;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(79,194,197,.22)}
.cnum .unit{font-size:var(--step--1);color:var(--muted)}
.cout{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.cout[hidden]{display:none}
.cres{border-radius:var(--r-md);padding:1.35rem 1.5rem;background:var(--blue-tint);
  box-shadow:inset 0 0 0 1px rgba(14,105,147,.28)}
.cres .lbl{display:block;color:var(--blue);margin-bottom:.3rem}
.cres .big{font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:clamp(1.7rem,1.2rem + 1.9vw,2.5rem);line-height:1.1;color:var(--blue);
  display:block;margin-bottom:.45rem}
.cres p{margin:0;color:var(--charcoal);font-size:var(--step--1);line-height:1.6}
.cres .est{font-family:'IBM Plex Mono',monospace;font-size:var(--step--2);
  color:var(--muted);display:block;margin-top:.55rem}
.cres.exempt{background:var(--st-ok-bg);box-shadow:inset 0 0 0 1px rgba(47,138,106,.3)}
.cres.exempt .big,.cres.exempt .lbl{color:var(--st-ok)}
.cres.over{background:var(--st-over-bg);box-shadow:inset 0 0 0 1px rgba(200,57,44,.3)}
.cres.over .big,.cres.over .lbl{color:var(--st-over)}
.creq{margin-top:1.2rem}
.creq h5{margin:0 0 .6rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--teal-deep)}
.creq ul{margin:0;padding-left:0;list-style:none;display:grid;gap:.55rem}
.creq li{position:relative;padding-left:1.3rem;color:var(--muted);font-size:var(--step--1);
  line-height:1.55}
.creq li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.cwarn{margin-top:1.1rem;padding:1rem 1.2rem;border-radius:var(--r-md);
  background:var(--st-appr-bg);border-left:3px solid var(--st-appr)}
.cwarn .lbl{color:var(--st-appr);display:block;margin-bottom:.35rem}
.cwarn p{margin:0;font-size:var(--step--1);color:var(--charcoal);line-height:1.55}
.cdisc{margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed var(--line-strong)}
.cdisc .lbl{display:block;margin-bottom:.6rem}
.cdisc ol{margin:0;padding-left:1.2rem;display:grid;gap:.5rem;color:var(--muted);
  font-size:var(--step--2);line-height:1.6}
.cdisc b{color:var(--charcoal)}

/* ===================================================================
   CONTACT
   =================================================================== */
#contact{background:var(--slate);color:#fff;position:relative;overflow:hidden}
#contact::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--teal),var(--blue))}
.cta-grid{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.cta-grid{grid-template-columns:1.25fr .9fr}}
#contact .lbl{color:var(--teal)}
#contact h2{font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:var(--step-3);line-height:1.1;letter-spacing:-.012em;margin:.85rem 0 1rem;
  color:#fff}
#contact > .wrap > .cta-grid > div > p{color:rgba(255,255,255,.76);margin:0;max-width:52ch}
.mailcard{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  padding:1.9rem;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.mailcard .lbl{display:block;margin-bottom:.85rem}
.mail-addr{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;color:#fff;
  text-decoration:none;display:inline-block;margin-bottom:1.3rem;
  border-bottom:2px solid var(--teal);padding-bottom:.15rem;
  transition:color .3s,border-color .3s}
.mail-addr:hover{color:var(--teal)}
.mailcard .btn{margin-bottom:.35rem}
.mailcard .hint{font-size:var(--step--1);color:rgba(255,255,255,.6);margin:1.5rem 0 0;
  line-height:1.55;padding-top:1.15rem;border-top:1px solid rgba(255,255,255,.14)}

/* ===================================================================
   FOOTER
   =================================================================== */
footer{background:#fff;border-top:1px solid var(--line);
  padding-block:clamp(2.5rem,6vh,4rem)}
.foot-grid{display:grid;gap:2.25rem}
@media(min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-logo{height:44px;width:auto;margin-bottom:1.1rem}
.foot-grid h6{margin:0 0 .9rem;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-deep);font-weight:700}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-grid li,.foot-grid p{font-size:var(--step--1);color:var(--muted);margin:0;
  line-height:1.58}
.disclaimer{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--line);
  font-size:var(--step--2);color:var(--muted-2);line-height:1.68;max-width:92ch}
.foot-bot{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;align-items:center;font-size:var(--step--2);
  color:var(--muted-2)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ===================================================================
   HISTORY PAGE
   =================================================================== */
.pagehero{padding-top:clamp(7rem,13vh,9.5rem);padding-bottom:clamp(2rem,5vh,3.5rem)}
.pagehero h1{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.8rem);margin-bottom:1.2rem;
  color:var(--blue);padding-left:0}
.pagehero .lead{font-size:var(--step-1);color:var(--muted);max-width:60ch;line-height:1.55;
  margin:0}
.backlink{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;
  font-size:var(--step--1);font-weight:600;color:var(--teal-deep);text-decoration:none}
.backlink:hover{color:var(--blue)}

.statrow{display:grid;gap:1rem;margin:2rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.stat{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);
  border-radius:var(--r-md);padding:1.2rem 1.3rem;box-shadow:var(--sh-sm)}
.stat b{display:block;font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:clamp(1.7rem,1.3rem + 1.5vw,2.5rem);line-height:1.05;color:var(--blue);
  margin-bottom:.35rem}
.stat span{display:block;font-size:var(--step--2);color:var(--muted);line-height:1.5}
.stat.hi{border-top-color:var(--st-appr)} .stat.hi b{color:var(--st-appr)}

.story{display:grid;gap:0;margin-top:1rem}
.chap{display:grid;grid-template-columns:130px minmax(0,1fr);gap:clamp(1rem,3vw,2.4rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--line);position:relative}
@media(max-width:760px){.chap{grid-template-columns:1fr;gap:.7rem}}
.chap-when{font-family:'IBM Plex Mono',monospace;font-size:var(--step--2);
  color:var(--blue);font-weight:500;letter-spacing:.03em;padding-top:.35rem}
.chap-b h3{margin:0 0 .7rem;font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:var(--step-2);color:var(--blue);letter-spacing:-.015em;line-height:1.2}
.chap-b p{margin:0 0 .85rem;color:var(--muted);max-width:68ch;line-height:1.68}
.chap-b p:last-child{margin-bottom:0}
.chap-b b{color:var(--ink);font-weight:600}

.qa{display:grid;gap:.8rem;margin-top:1rem}
.qa details{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm)}
.qa summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-weight:600;
  font-size:var(--step-0);color:var(--ink);display:flex;align-items:flex-start;
  justify-content:space-between;gap:1rem;transition:background .3s,color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--teal-tint);color:var(--blue)}
.qa summary::after{content:'+';flex-shrink:0;font-family:'IBM Plex Mono',monospace;
  font-size:1.2rem;color:var(--teal-deep);line-height:1;transition:transform .3s var(--ease-out-expo)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .qa-b{padding:0 1.3rem 1.25rem;border-top:1px solid var(--line)}
.qa .qa-b p{margin:.95rem 0 0;color:var(--muted);font-size:var(--step--1);line-height:1.68;
  max-width:70ch}
.qa .qa-b p:first-child{margin-top:.95rem}
.qa .qa-b b{color:var(--ink);font-weight:600}


/* calculator: the optional water to wine ratio ---------------------- */
.crefine{margin-top:1.1rem;padding:1.1rem 1.25rem;border-radius:var(--r-md);
  background:var(--teal-tint);border:1px solid rgba(79,194,197,.4);
  border-left:3px solid var(--teal)}
.crefine[hidden]{display:none}
.crefine .lbl{display:block;color:var(--teal-deep);margin-bottom:.4rem}
.crefine p{margin:0;font-size:var(--step--1);color:var(--charcoal);line-height:1.6;
  max-width:64ch}
.crefine .cnum{margin-top:.85rem}
.crefine input{background:#fff}
.cratio-clear{font-size:var(--step--2);color:var(--teal-deep);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;padding:.3rem 0}
.cratio-clear[hidden]{display:none}
.cratio-clear:hover{color:var(--blue)}


/* static wave break between sections -------------------------------- */
.wavebreak{height:clamp(56px,7vw,104px);width:100%;pointer-events:none;
  background:url('wave-break.svg') center/100% 100% no-repeat;opacity:.5}

/* tier reference table --------------------------------------------- */
@media(min-width:1080px){
  /* heading and table share row one, the calculator spans both below */
  .calc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);
    gap:1.5rem 2.75rem;align-items:start}
  .calc-wrap .sec-head{grid-area:1/1;max-width:60ch;margin-bottom:0}
  .calc-wrap .tiertable{grid-area:1/2}
  .calc-wrap .calc{grid-area:2/1/3/3}
  .calc-wrap .docrow{grid-area:3/1/4/3}
}
.tiertable{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);
  border-radius:var(--r-md);padding:1.05rem 1.2rem .95rem;box-shadow:var(--sh-sm);
  margin:0 0 2rem}
@media(min-width:1080px){.tiertable{margin-bottom:0}}
.tt-head .lbl{display:block;color:var(--blue);margin-bottom:.35rem}
.tt-head p{margin:0 0 .9rem;font-size:var(--step--2);color:var(--muted);line-height:1.5}
.tiertable table{width:100%;border-collapse:collapse}
.tiertable th,.tiertable td{text-align:left;padding:.4rem .2rem;font-size:var(--step--2);
  border-bottom:1px solid var(--line)}
.tiertable thead th{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;padding-bottom:.4rem}
.tiertable tbody th{font-weight:700;color:var(--blue);white-space:nowrap}
.tiertable tbody td{color:var(--charcoal);font-family:'IBM Plex Mono',monospace;
  text-align:right;font-size:.68rem}
.tiertable tbody tr{transition:background .35s var(--ease-in-out)}
.tiertable tbody tr.on{background:var(--blue-tint)}
.tiertable tbody tr.on th,.tiertable tbody tr.on td{color:var(--blue);font-weight:700}
.tiertable tbody tr:last-child th,.tiertable tbody tr:last-child td{border-bottom:0}
.tt-src{margin:.8rem 0 0;font-size:.6rem;color:var(--muted-2);
  font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}


/* county toggle inside the orb -------------------------------------- */
.ring-toggle{display:inline-flex;gap:2px;padding:2px;border-radius:100px;
  background:rgba(14,105,147,.09);box-shadow:inset 0 0 0 1px rgba(14,105,147,.16);
  margin-bottom:.6rem}
.ring-toggle button{padding:.5rem .9rem;border-radius:100px;font-size:.58rem;min-height:34px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:background .3s var(--ease-in-out),color .3s,box-shadow .3s}
.ring-toggle button:hover{color:var(--blue)}
.ring-toggle button[aria-pressed="true"]{background:#fff;color:var(--blue);
  box-shadow:0 1px 3px rgba(14,105,147,.22)}
@media(max-width:640px){
  .ring-toggle{margin-bottom:.5rem}
  .ring-toggle button{padding:.5rem .8rem;font-size:.56rem;min-height:38px}
}


/* modal reading pane, for authored content rather than a PDF ---------- */
.mread{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;
  padding:clamp(1.1rem,4vw,2rem) clamp(1.1rem,4vw,2.4rem) clamp(2rem,6vw,3rem)}
.mread[hidden]{display:none}
.mread .cs-intro{margin:0 0 1.3rem;font-size:var(--step-0);color:var(--charcoal);
  line-height:1.62;max-width:70ch}
.mread h4{margin:1.9rem 0 .8rem;font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:var(--step-1);color:var(--blue);letter-spacing:-.01em;line-height:1.25}
.mread h4:first-of-type{margin-top:1.4rem}
.mread ul,.mread ol{margin:0 0 1.2rem;padding-left:0;list-style:none;display:grid;gap:.6rem}
.mread ul li{position:relative;padding-left:1.35rem;font-size:var(--step--1);
  color:var(--muted);line-height:1.6}
.mread ul li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.mread b{color:var(--ink);font-weight:600}
.mread ol.cs-tabs{counter-reset:tab;gap:.5rem}
.mread ol.cs-tabs li{counter-increment:tab;position:relative;padding-left:2.2rem;
  font-size:var(--step--1);color:var(--muted);line-height:1.55}
.mread ol.cs-tabs li::before{content:counter(tab);position:absolute;left:0;top:0;
  width:24px;height:24px;border-radius:50%;background:var(--blue-tint);color:var(--blue);
  font-size:.66rem;font-weight:700;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace}
.mread .cs-note{display:block;margin-top:.3rem;font-size:var(--step--2);color:var(--muted-2);
  line-height:1.55}
.mread p.cs-note{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.mread .cs-tbl{width:100%;border-collapse:collapse;margin:0 0 1.3rem}
.mread .cs-tbl th,.mread .cs-tbl td{text-align:left;vertical-align:top;padding:.7rem .8rem;
  border-bottom:1px solid var(--line);font-size:var(--step--2);line-height:1.55;
  color:var(--muted)}
.mread .cs-tbl thead th{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700}
.mread .cs-tbl td:first-child{color:var(--charcoal)}
.mread .cs-tbl .cs-all{color:var(--st-over);font-weight:700;white-space:nowrap}
.mread .cs-flag{margin:0 0 1.3rem;padding:1rem 1.15rem;border-radius:var(--r-md);
  background:var(--teal-tint);border-left:3px solid var(--teal);font-size:var(--step--1);
  color:var(--charcoal);line-height:1.6}
.mread .cs-quote{margin:0 0 1rem;padding:1rem 1.2rem;border-radius:var(--r-md);
  background:var(--bg-tint);border-left:3px solid var(--blue);font-size:var(--step--1);
  color:var(--charcoal);line-height:1.68}
.mread .cs-plain{margin:0 0 1.1rem;font-size:var(--step--1);color:var(--muted);
  line-height:1.65;max-width:70ch}
.act-doc{cursor:pointer;font:inherit}

/* on a phone the reading pane takes the whole screen */
@media(max-width:640px){
  #modal{padding:0}
  .mbox{width:100%;height:100%;max-height:100%;border-radius:0}
  .mread .cs-tbl,.mread .cs-tbl tbody,.mread .cs-tbl tr,.mread .cs-tbl td,
  .mread .cs-tbl th{display:block;width:100%}
  .mread .cs-tbl thead{display:none}
  .mread .cs-tbl tr{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .mread .cs-tbl td,.mread .cs-tbl th{border:0;padding:.15rem 0}
  .mread .cs-tbl .cs-all{margin-top:.35rem}
}


/* touch: give inline links and small controls a real hit area ---------- */
@media(hover:none) and (pointer:coarse){
  .foot-grid li a,.g-note a,.mread a,.disclaimer a{
    display:inline-block;padding-block:.45rem}
  .cratio-clear{padding:.6rem 0;min-height:42px;display:inline-flex;align-items:center}
  .chip{min-height:42px;display:inline-flex;align-items:center}
  .mail-addr{padding-block:.35rem}
  .mclose{width:44px;height:44px}
  .copt,.opt{min-height:52px}
}

/* phones: the timeline needs fewer, larger labels to stay legible ------ */
@media(max-width:520px){
  .wvrow{padding-block:.72rem}
  .cnum input{width:100%}
  .cnum .unit{font-size:var(--step--2)}
}


/* legal pages -------------------------------------------------------- */
.legal-date{margin:1.4rem 0 0;font-family:'IBM Plex Mono',monospace;
  font-size:var(--step--2);color:var(--muted-2);letter-spacing:.03em}
.legal h2{font-family:'Lora',Georgia,serif;font-weight:600;font-size:var(--step-2);
  color:var(--blue);letter-spacing:-.015em;line-height:1.2;margin:2.4rem 0 .85rem}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--muted);line-height:1.72;max-width:70ch;margin:0 0 1rem}
.legal ul{margin:0 0 1.3rem;padding-left:0;list-style:none;display:grid;gap:.7rem;
  max-width:70ch}
.legal ul li{position:relative;padding-left:1.4rem;color:var(--muted);line-height:1.68}
.legal ul li::before{content:'';position:absolute;left:0;top:.68em;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.legal b{color:var(--ink);font-weight:600}
.legal em{color:var(--charcoal);font-style:italic}
.legal code{font-family:'IBM Plex Mono',monospace;font-size:.88em;background:var(--bg-tint);
  padding:.12em .4em;border-radius:4px;color:var(--blue)}
.legal-flag{margin:0 0 2.2rem;padding:1.3rem 1.5rem;border-radius:var(--r-lg);
  background:var(--teal-tint);border-left:4px solid var(--teal);color:var(--charcoal);
  line-height:1.68;max-width:74ch}
.legal-flag-warn{background:var(--st-appr-bg);border-left-color:var(--st-appr)}
.legal-flag b{color:var(--ink)}

.legal-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.legal-links .btn{background:#fff}


/* phones: the ring is smaller, so the bubble needs a larger share of it and the
   readout needs to be a touch tighter to stay on the plate */
@media(max-width:640px){
  .ring{width:min(100%,420px)}
  .ring-bubble{width:82%}
  .ring-core{width:72%}
  .ring-num{font-size:clamp(2.1rem,1.1rem + 6vw,3.2rem)}
  .ring-unit{font-size:.62rem;letter-spacing:.18em;margin-top:.5rem}
  .ring-clock{margin-top:.45rem}
  .ring-clock b{font-size:.95rem}
  .ring-clock i{font-size:.46rem}
  .ring-sub{font-size:.56rem;margin-top:.3rem;line-height:1.35}
}