/* Rockdale Energy Center — community information site (v4, logo palette)
   Palette, taken from the logo files: navy #17294D, maroon #7B2138, gold #E2A52E, on white.
   The three are used in the same proportions as the logo:
     navy   = most of it: type, dark bands, footer, anything that says "yes / allowed"
     maroon = second: links, buttons on white, status chips, anything that says "no / prohibited"
     gold   = sparing: the main button on dark surfaces, check marks on dark bands, the current step
   Gold never carries text on white (it fails contrast there) and maroon is never used on navy.
   Map overlays are the one exception to the palette: they have to read on aerial imagery.

   LABEL RULE (replaces "eyebrows"):
   No small lead-in text above section headings. Two kinds of label are allowed, and only these:
   1. .status chips, where the content itself is not settled: "Proposed, not yet adopted",
      "Preliminary estimates", "Happening now". They flag status. They never restate the heading.
   2. .tag labels on the is / is-not cards, where the label is the classification.
   If a new section doesn't meet one of those two tests, it gets a heading and nothing above it. */

:root{
  --navy:#17294D;
  --navy-deep:#0F1C36;
  --maroon:#7B2138;
  --maroon-deep:#5E1829;
  --gold:#E2A52E;
  --gold-light:#EFBE5C;
  --ink:#17294D;
  --ink-soft:#4A556B;
  --paper:#FFFFFF;
  --mist:#F3F4F7;
  --steel:#9FB0CF;
  /* the average colour of the aerial photo: what the maps show for a moment before the photo arrives */
  --aerial:#657E6A;
  --line:#DCE0E8;
  /* every divider, rule and container outline uses these two, so they stay in step */
  --rule:rgba(23,41,77,.2);
  --rule-w:2px;
  --maxw:1120px;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--body);font-size:18px;line-height:1.7;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:var(--maroon)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.map:focus-visible{outline:3px solid var(--maroon);outline-offset:2px}
.notice :focus-visible,.hero :focus-visible,.subhero :focus-visible,.band.dark :focus-visible,.ask-box :focus-visible,.map-side :focus-visible,footer.site :focus-visible,ol.process li.now :focus-visible{outline-color:#fff}
.map:focus-visible{outline-color:#fff;outline-offset:-4px}
.skip{position:absolute;left:12px;top:-60px;z-index:2000;background:#fff;color:var(--ink);font-family:var(--display);font-weight:700;padding:10px 16px;border-radius:8px;border:2px solid var(--ink)}
.skip:focus{top:10px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;letter-spacing:-0.012em}
h1{font-size:clamp(2.2rem,4.8vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;max-width:24ch}
h3,h4,.h3{font-size:1.12rem;font-weight:700}
.h3{max-width:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lede{font-size:1.14rem;color:var(--ink-soft);max-width:60ch;margin-top:14px}
.fine{font-size:.9rem;color:var(--ink-soft)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* icons: one stroke style everywhere */
.ico{width:30px;height:30px;flex:none;fill:none;stroke:var(--maroon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- draft notice + header ---------- */
.notice{background:var(--maroon);color:#F6ECEF;font-family:var(--display);font-size:.88rem}
.notice .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.notice a{color:#fff;font-weight:700;text-underline-offset:3px}
header.site{position:sticky;top:0;z-index:1100;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:8px;padding-bottom:8px}
/* the brand is the horizontal logo; the text styles stay as the fallback if the image can't load */
.brand{display:block;flex:none;line-height:0;font-family:var(--display);font-weight:800;font-size:1.08rem;text-decoration:none;color:var(--ink)}
.brand img{height:64px;width:auto;max-width:none}
@media(max-width:480px){.brand img{height:52px}}
nav.main{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
nav.main a{font-family:var(--display);font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:6px;transition:background-color .15s,color .15s}
/* hover: brand navy. current: the soft background plus the underline, so the underline has a shape to sit on. */
nav.main a:hover{background:var(--navy);color:#fff}
nav.main a[aria-current]{background:var(--mist);color:var(--navy);border-radius:6px 6px 0 0;box-shadow:inset 0 -3px 0 var(--maroon)}
nav.main a[aria-current]:hover{background:var(--navy);color:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
nav.main a.cta{background:var(--maroon);color:#fff;margin-left:8px;padding:9px 16px;border-radius:6px}
nav.main a.cta:hover{background:var(--maroon-deep)}
nav.main a.cta[aria-current],nav.main a.cta[aria-current]:hover{box-shadow:none;color:#fff;background:var(--maroon-deep);border-radius:6px}
.nav-toggle{display:none}
@media(max-width:960px){
  .nav-toggle{display:block;font-family:var(--display);font-weight:700;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;color:var(--ink)}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;flex-direction:column;align-items:stretch}
  nav.main.open{display:flex}
  nav.main a[aria-current]{border-radius:6px;box-shadow:inset 3px 0 0 var(--maroon)}
  nav.main a.cta{margin:8px 0 0;text-align:center}
}

/* ---------- hero: the land itself, live aerial with the property drawn on it ---------- */
.hero{position:relative;color:#fff;background:linear-gradient(176deg,#0B142A 0%,#12213F 55%,var(--navy) 100%);overflow:hidden;isolation:isolate}
.hero-map{position:absolute;inset:0;z-index:0;background:var(--aerial);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,18,36,.97) 0%,rgba(10,18,36,.93) 30%,rgba(10,18,36,.62) 48%,rgba(10,18,36,.08) 66%,rgba(10,18,36,0) 100%)}
.hero .wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:min(640px,78vh);padding-top:72px;padding-bottom:96px;pointer-events:none}
.hero-copy{max-width:560px;pointer-events:auto}
.hero h1{font-size:clamp(2.3rem,5.2vw,4rem);max-width:none;letter-spacing:-0.02em;line-height:1.04}
.hero h1 .nb{white-space:nowrap}
@media(max-width:420px){.hero h1 .nb{white-space:normal}}
.hero p{margin-top:20px;font-size:1.14rem;max-width:46ch;color:#DCE2EE}
.hero .actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero-key{position:absolute;z-index:2;right:24px;bottom:34px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right;
  font-family:var(--display);font-size:.84rem;color:#E6EAF2}
.hero-key ul{list-style:none;display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:flex-end;background:rgba(10,18,36,.78);padding:9px 14px;border-radius:8px}
.hero-key li{display:flex;align-items:center;gap:8px;font-weight:600}
.hero-key p{margin:0;font-size:.8rem;color:#DCE2EE;max-width:none;background:rgba(10,18,36,.78);padding:5px 12px;border-radius:8px}
.hero-key a{color:#fff;font-weight:700;text-underline-offset:3px}
@media(min-width:901px) and (max-width:1180px){
  .hero::after{background:linear-gradient(90deg,rgba(10,18,36,.97) 0%,rgba(10,18,36,.94) 46%,rgba(10,18,36,.7) 56%,rgba(10,18,36,.1) 72%,rgba(10,18,36,0) 100%)}
}
/* To use a rendering or photo instead of the live aerial: delete #hero-map and .hero-key, then add
   class="hero has-photo" style="--hero-photo:url(assets/hero.jpg)" on the section. */
.hero.has-photo{background:var(--navy-deep) var(--hero-photo) center/cover no-repeat}
@media(max-width:900px){
  .hero{display:flex;flex-direction:column}
  .hero::after{display:none}
  .hero .wrap{order:1;width:100%;min-height:0;padding-top:48px;padding-bottom:36px}
  .hero-copy{max-width:600px}
  .hero-map{order:2;position:relative;inset:auto;height:340px}
  .hero-key{order:3;position:static;align-items:flex-start;text-align:left;padding:14px 24px 22px;background:var(--navy-deep)}
  .hero-key ul{justify-content:flex-start;background:none;padding:0}
  .hero-key p{background:none;padding:0}
  .hero.has-photo{background-position:center;min-height:0}
  .hero.has-photo .wrap{background:linear-gradient(180deg,rgba(10,18,36,.9),rgba(10,18,36,.78))}
}
.subhero{padding:60px 0;color:#fff;background:linear-gradient(176deg,var(--navy-deep),var(--navy))}
.subhero h1{max-width:20ch}
.subhero p{margin-top:16px;font-size:1.12rem;max-width:58ch;color:#D5DCEA}
.subhero a{color:#fff}

/* map key swatches (hero key + map legend) */
.sw{display:inline-block;flex:none;width:26px;height:0;border-top:3px solid #fff}
.sw.boundary{border-top-color:#4DF06A}
.sw.facility{width:18px;height:13px;border:2.5px solid #fff;background:rgba(255,255,255,.22)}
.sw.park{width:18px;height:13px;border:2.5px dashed #fff;background:rgba(159,199,176,.45)}
.sw.preserved{width:18px;height:13px;border:0;background:rgba(77,240,106,.32);outline:1px solid rgba(77,240,106,.7)}
.sw.power{border-top-color:#FF8A3D}
.sw.gas{border-top-color:#FFE14A}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:.97rem;text-decoration:none;padding:13px 22px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:background-color .15s}
.btn.primary{background:var(--gold);color:var(--navy)}
.btn.primary:hover{background:var(--gold-light)}
.btn.solid{background:var(--maroon);color:#fff}
.btn.solid:hover{background:var(--maroon-deep)}
.btn.ghost{border-color:#fff;color:#fff;background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.quiet{border-color:var(--line);color:var(--ink);background:#fff;padding:9px 14px;font-size:.88rem}
.btn.quiet:hover{background:var(--mist)}

/* ---------- status chips: see LABEL RULE at the top of this file ---------- */
.status{display:inline-block;font-family:var(--display);font-size:.8rem;font-weight:700;line-height:1;padding:6px 11px;border-radius:999px;border:1.5px solid var(--maroon);color:var(--maroon);margin-bottom:14px}
.status.study{border-color:#8A93A6;color:var(--ink-soft)}

/* ---------- ask a question: the one action we most want before the open house ---------- */
section.band.ask{padding:0 0 8px}
.ask-box{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:28px 48px;align-items:center;background:var(--navy);color:#fff;border-radius:14px;padding:38px 42px}
.ask-box h2{max-width:22ch}
.ask-box .lede{color:#CFD7E6;max-width:58ch}
.ask-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:220px}
.ask-actions .btn{text-align:center}
.ask-actions .btn.solid{background:var(--gold);color:var(--navy);font-size:1.08rem;padding:16px 26px}
.ask-actions .btn.solid:hover{background:var(--gold-light)}
.ask-actions .btn.quiet{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.ask-actions .btn.quiet:hover{background:rgba(255,255,255,.12)}
@media(max-width:860px){.ask-box{grid-template-columns:1fr;padding:30px 24px}.ask-actions{flex-direction:row;flex-wrap:wrap}.ask-actions .btn{flex:1 1 180px}}

/* ---------- sections ---------- */
section.band{padding:76px 0;scroll-margin-top:92px}
section.band.tint{background:var(--mist)}
section.band.dark{background:var(--navy);color:#fff}
section.band.dark .lede{color:#CFD7E6}
.sec-head{margin-bottom:36px}
.sec-head.center,.center{text-align:center}
.sec-head.center h2,.sec-head.center .lede,.center h2,.center .lede,.center p{margin-left:auto;margin-right:auto}
hr.rule{border:0;border-top:var(--rule-w) solid var(--rule);margin:0 0 28px}
@media(max-width:700px){section.band{padding:56px 0}}

/* ---------- open house: when and where, in one block ---------- */
.event{background:var(--mist);border-radius:14px;padding:28px 32px 30px;margin:0 0 44px;scroll-margin-top:110px}
.event-title{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
.event-title h3{font-size:1.45rem}
.event-title p{color:var(--ink-soft);margin-top:4px}
.event dl{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:20px 32px;margin-top:22px;padding-top:22px;border-top:var(--rule-w) solid var(--rule)}
.event dt{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink-soft)}
.event dd{font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.4;margin-top:4px}
@media(max-width:700px){.event{padding:24px 22px 26px}.event dl{grid-template-columns:1fr}}

/* ---------- facts strip: every item carries the same left rule, first one included ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;padding:34px 0 8px}
.facts>div{padding:2px 0 4px 20px;border-left:var(--rule-w) solid var(--rule)}
.facts .num{font-family:var(--display);font-weight:800;font-size:2.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.facts .num small{font-size:1.05rem;font-weight:700}
.facts .lbl{font-size:.95rem;color:var(--ink-soft);margin-top:6px;line-height:1.45}
.facts.ruled{border-top:var(--rule-w) solid var(--rule)}
@media(max-width:860px){.facts{grid-template-columns:1fr 1fr;gap:26px 22px}}
@media(max-width:480px){.facts>div{padding-left:14px}.facts .num{font-size:1.7rem}.facts .num small{font-size:.9rem}.facts .lbl{font-size:.88rem}}

/* how the acres split: one bar, drawn to scale */
.split{margin-top:22px}
.split .bar{display:flex;gap:3px;height:18px}
.split .bar span{display:block;height:100%;transform-origin:left center;border-radius:3px}
.split .bar .dev{background:var(--maroon)}
.split .bar .pre{background:var(--navy)}
.split .bar .park{background:var(--gold);box-shadow:inset 0 0 0 1.5px var(--navy)}
.split.armed .bar span{transform:scaleX(0)}
.split.armed.go .bar span{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.split.armed.go .bar .pre{transition-delay:.12s}
.split.armed.go .bar .park{transition-delay:.24s}
.split .key{display:flex;gap:6px 22px;flex-wrap:wrap;margin-top:10px;font-family:var(--display);font-size:.84rem;font-weight:600;color:var(--ink-soft);list-style:none}
.split .key li{display:flex;align-items:center;gap:8px}
.split .key i{width:12px;height:12px;border-radius:3px;display:inline-block}
.split .key .dev{background:var(--maroon)}.split .key .pre{background:var(--navy)}.split .key .park{background:var(--gold);box-shadow:inset 0 0 0 1.5px var(--navy)}

/* ---------- three-up plain columns, each led by an icon ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.cols3>div{border-top:var(--rule-w) solid var(--rule);padding-top:18px}
.cols3 .ico{margin-bottom:10px;display:block}
.cols3 p{color:var(--ink-soft);margin-top:8px;font-size:1rem}
@media(max-width:800px){.cols3{grid-template-columns:1fr;gap:26px}}

/* two column */
.two-col{display:grid;gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.two-col.wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.two-col.mid{align-items:center}
@media(max-width:860px){.two-col,.two-col.wide-left{grid-template-columns:minmax(0,1fr);gap:32px}}

/* how it works: a real sequence, so it is numbered */
ol.steps{list-style:none;counter-reset:s;margin-top:26px;display:grid;gap:16px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;font-size:1rem}
ol.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;width:38px;height:38px;border-radius:50%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem}

/* how it works: the diagram. Numbers match the steps beside it. */
.cycle{border:var(--rule-w) solid var(--rule);border-radius:12px;background:#fff;padding:18px 18px 8px}
.cycle svg{width:100%;height:auto;display:block;font-family:var(--display)}
@media(max-width:860px){.cycle{max-width:520px;width:100%;margin:0 auto}}
@media(max-width:560px){.cycle{padding:12px 10px 6px}}
.cycle figcaption{font-family:var(--display);font-size:.84rem;color:var(--ink-soft);padding:10px 0 8px;border-top:var(--rule-w) solid var(--rule);margin-top:10px}
.cycle .unit{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.cycle .unit.soft{fill:var(--mist)}
.cycle .blade{stroke:var(--ink);stroke-width:3;stroke-linecap:round;fill:none}
.cycle .spin{transform-box:fill-box;transform-origin:center;animation:cyc-spin 4s linear infinite}
.cycle .spin.fast{animation-duration:1.8s}
.cycle .pipe{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.cycle .pipe.gas{stroke:var(--ink)}
.cycle .pipe.heat{stroke:#8A93A6}
.cycle .pipe.steam{stroke:var(--steel)}
.cycle .pipe.water{stroke:#8A93A6;stroke-width:3}
.cycle .bolt{fill:var(--gold);stroke:var(--navy);stroke-width:1.4;stroke-linejoin:round}
.cycle .hub{fill:var(--ink)}
.cycle .wave{fill:none;stroke:var(--steel);stroke-width:3;stroke-linecap:round}
.cycle .pipe.power{stroke:var(--maroon);stroke-width:5}
.cycle .flow{stroke-dasharray:7 9;animation:cyc-flow 1.1s linear infinite}
.cycle .label{font-size:16px;font-weight:600;fill:var(--ink)}
.cycle .label.soft{fill:var(--ink-soft);font-weight:500}
.cycle .badge circle{fill:var(--maroon)}
.cycle .badge text{fill:#fff;font-weight:800;font-size:15px;text-anchor:middle;dominant-baseline:central}
.cycle .tower{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cycle .air{fill:none;stroke:#8A93A6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:cyc-rise 2.2s ease-in-out infinite}
.cycle .air.b{animation-delay:.5s}
@keyframes cyc-spin{to{transform:rotate(360deg)}}
@keyframes cyc-flow{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}
@keyframes cyc-rise{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}

/* is / is not: the label is the point, so it leads each card */
.isnt{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:22px}
@media(max-width:860px){.isnt{grid-template-columns:1fr}}
.isnt .tile{border-radius:12px;padding:22px 22px 24px;border:var(--rule-w) solid var(--rule);background:#fff}
.isnt .tile.yes{background:var(--navy);color:#fff;border-color:var(--navy)}
.isnt .tag{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--ink);padding-bottom:12px;margin-bottom:14px;border-bottom:var(--rule-w) solid var(--rule)}
.isnt .tag svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.isnt .tile.yes .tag{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.isnt .tile.no .tag{color:var(--maroon)}
.isnt .tile h4{font-size:1.22rem}
.isnt .tile p{margin-top:8px;font-size:.98rem;color:var(--ink-soft)}
.isnt .tile.yes p{color:#DFE5F0}

/* check lists; .no swaps the check for a prohibition mark */
ul.checks{list-style:none;display:grid;gap:14px}
ul.checks li{padding-left:32px;position:relative}
ul.checks li::before{content:"";position:absolute;left:0;top:8px;width:17px;height:17px;border-radius:4px;background:var(--navy);clip-path:polygon(14% 44%,0 60%,40% 100%,100% 16%,84% 4%,40% 70%)}
ul.checks.no li::before{clip-path:none;border-radius:50%;width:18px;height:18px;top:7px;background:
  linear-gradient(45deg,transparent 44%,var(--maroon) 44%,var(--maroon) 56%,transparent 56%) center/100% 100% no-repeat;border:2.5px solid var(--maroon)}
ul.checks li strong{font-family:var(--display);font-weight:700;display:block;line-height:1.3}
ul.checks li span{color:var(--ink-soft);font-size:.98rem}
.band.dark ul.checks li::before{background:var(--gold)}
.band.dark ul.checks li span{color:#CFD7E6}
/* the two group headings sit on a solid bar so they can't be mistaken for one of the items below them */
.list-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;padding:14px 18px;border-radius:10px;color:#fff}
.list-head.yes{background:var(--navy)}
.list-head.no{background:var(--maroon)}
.list-head h4{font-size:1.3rem;font-weight:800;color:#fff}
.list-head .ico{width:28px;height:28px;stroke:#fff;stroke-width:2}
.list-head+ul.checks{padding:0 6px 0 18px}

/* ---------- live map ---------- */
.mapbox{display:grid;grid-template-columns:1fr 290px;gap:0;border:var(--rule-w) solid var(--rule);border-radius:12px;overflow:hidden;background:#fff;margin-top:34px}
.map{height:560px;background:var(--aerial);z-index:0}
.map-side{padding:22px 22px 20px;background:var(--navy-deep);color:#fff;display:flex;flex-direction:column;gap:16px}
.map-side h3{font-size:1rem}
.map-side fieldset{border:0;display:grid;gap:11px}
.map-side label{display:grid;grid-template-columns:18px 26px 1fr;gap:10px;align-items:center;font-family:var(--display);font-size:.88rem;font-weight:600;line-height:1.3;cursor:pointer}
.map-side input{width:17px;height:17px;accent-color:var(--gold);cursor:pointer}
.map-side .sw{justify-self:center}
.map-side .fine{font-size:.82rem;line-height:1.5;margin-top:auto;color:#BCC6D8}
.map-actions{display:flex;gap:8px;flex-wrap:wrap}
.map-wrap{position:relative}
.map-lock{position:absolute;inset:0;z-index:500;display:none;align-items:flex-end;justify-content:center;padding:18px;background:linear-gradient(180deg,rgba(10,18,36,0) 55%,rgba(10,18,36,.55))}
.map-lock button{font-family:var(--display);font-weight:700;font-size:.92rem;border:0;border-radius:999px;background:#fff;color:var(--navy);padding:11px 18px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.map-wrap.locked .map-lock{display:flex}
@media(max-width:900px){
  .mapbox{grid-template-columns:1fr}
  .map{height:420px}
}
/* if the map library can't load, the written description replaces the map */
.no-map .mapbox,.no-map .hero-key{display:none}
.map-fallback[hidden]{display:none}
/* Leaflet overrides, to keep the map in the site's type and shape language */
/* Leaflet brightens the seams between imagery tiles to hide gaps. With the bundled photo underneath (see BASE in
   site.js) a gap just shows the photo, so that is switched off; left on, it draws faint bright lines at some sizes. */
.leaflet-container img.leaflet-tile{mix-blend-mode:normal}
.leaflet-container{font-family:var(--display);font-size:.85rem}
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.28)}
.leaflet-popup-content{margin:14px 16px;line-height:1.45;color:var(--ink-soft);font-family:var(--body);font-size:.92rem}
.leaflet-popup-content strong{display:block;font-family:var(--display);color:var(--ink);font-size:.98rem;margin-bottom:3px}
.leaflet-tooltip.maplabel{background:rgba(10,18,36,.82);border:0;color:#fff;font-family:var(--display);font-weight:700;font-size:.78rem;padding:3px 8px;border-radius:5px;box-shadow:none;white-space:nowrap}
.leaflet-tooltip.maplabel::before{display:none}
/* on narrow maps the two line labels would be cut off at the edges; the key names them instead */
@media(max-width:900px){.leaflet-tooltip.maplabel.wide-only{display:none}}
.leaflet-container .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.72)}
.leaflet-bar a{color:var(--ink)}

/* ---------- process: one line, bullets centred on it, the current step raised ---------- */
/* box-sizing:border-box above doesn't reach pseudo-elements, so the dot sets its own */
ol.process{--dot:27px;--rail:var(--rule-w);--step-gap:22px;list-style:none;position:relative;display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:0 var(--step-gap);margin-top:8px}
ol.process>li{position:relative;padding:44px 0 0}
ol.process>li::before{content:"";box-sizing:border-box;position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);border-radius:50%;background:#fff;border:3px solid rgba(23,41,77,.4);z-index:1}
/* each step draws the rail to the next dot, so the line stops at the last one */
ol.process>li::after{content:"";position:absolute;top:calc((var(--dot) - var(--rail))/2);left:calc(var(--dot)/2);right:calc(-1*(var(--step-gap) + var(--dot)/2));height:var(--rail);background:var(--rule)}
ol.process>li:last-child::after{content:none}
ol.process .when{display:block;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink-soft)}
ol.process h3{margin-top:4px}
ol.process p{font-size:.95rem;color:var(--ink-soft);margin-top:6px;line-height:1.55}
ol.process li.now::before{background:var(--gold);border-color:var(--navy);box-shadow:0 0 0 6px rgba(226,165,46,.3);animation:step-pulse 2.6s cubic-bezier(.3,.6,.3,1) infinite}
@keyframes step-pulse{
  0%{box-shadow:0 0 0 6px rgba(226,165,46,.3),0 0 0 6px rgba(226,165,46,.5)}
  65%,100%{box-shadow:0 0 0 6px rgba(226,165,46,.3),0 0 0 19px rgba(226,165,46,0)}
}
ol.process li.now .card{background:var(--navy);color:#fff;border-radius:12px;padding:20px 22px 22px;margin-right:6px}
ol.process li.now h3{font-size:1.45rem;margin-top:2px}
ol.process li.now p{color:#D5DCEA;font-size:1rem}
ol.process li.now .status{margin-bottom:12px;background:var(--gold);color:var(--navy);border-color:var(--gold)}
ol.process li.now ul{list-style:none;margin-top:12px;display:grid;gap:6px;font-family:var(--display);font-size:.9rem;font-weight:600}
ol.process li.now ul li{padding:0 0 0 18px;position:relative}
ol.process li.now ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--gold);border:0;box-shadow:none}
@media(max-width:980px){
  ol.process{grid-template-columns:1fr;gap:0;margin-left:2px}
  ol.process>li{padding:0 0 28px 42px}
  ol.process>li:last-child{padding-bottom:0}
  ol.process>li::before{top:2px}
  ol.process>li::after{top:calc(2px + var(--dot)/2);bottom:calc(-2px - var(--dot)/2);left:calc((var(--dot) - var(--rail))/2);right:auto;width:var(--rail);height:auto}
  ol.process li.now .card{margin-right:0}
}

/* FAQ */
details.faq{border-bottom:var(--rule-w) solid var(--rule)}
details.faq:first-of-type{border-top:var(--rule-w) solid var(--rule)}
details.faq summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.08rem;padding:20px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.5rem;color:var(--maroon);flex:none;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 0 22px;color:var(--ink-soft);max-width:68ch}
details.faq .a p+p{margin-top:10px}

/* forms */
form.signup{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:640px}
form.signup .full{grid-column:1/-1}
@media(max-width:560px){form.signup{grid-template-columns:minmax(0,1fr)}}
form.signup label{font-family:var(--display);font-weight:600;font-size:.88rem;display:block;margin-bottom:6px}
form.signup input,form.signup textarea,form.signup select{width:100%;font-family:var(--body);font-size:1rem;padding:12px;border:1px solid #6F7A90;border-radius:8px;background:#fff;color:var(--ink)}
form.signup textarea{min-height:140px;resize:vertical}
form.signup .req-note{font-family:var(--display);font-size:.85rem;color:var(--ink-soft);margin:0}
.band.dark form.signup .req-note{color:#CFD7E6}
form.signup label.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:0}
form.signup label.check input{width:auto;margin-top:4px}
form.signup button[disabled]{opacity:.6;cursor:progress}
.form-msg{display:none;font-family:var(--display);font-weight:600;font-size:.95rem;padding:12px 14px;border-radius:8px;background:var(--mist);border:var(--rule-w) solid var(--rule);color:var(--ink)}
.form-msg.show{display:block}
.form-msg a{color:var(--maroon)}

/* plain panels (used sparingly) */
.panel{border:var(--rule-w) solid var(--rule);border-radius:12px;padding:24px;background:#fff}
.panel+.panel{margin-top:18px}
.panel p{color:var(--ink-soft);font-size:.98rem;margin-top:8px}
.heard{border-left:var(--rule-w) solid var(--rule);background:#fff;padding:20px 22px;border-radius:0 10px 10px 0;text-align:left}
.heard p{color:var(--ink-soft);margin-top:6px}

/* thank-you page */
.thanks{padding:84px 0 92px;text-align:center}
.thanks .mark{width:64px;height:64px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.thanks .mark svg{width:32px;height:32px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.thanks h1{color:var(--ink);font-size:clamp(2rem,4.2vw,3rem);max-width:24ch;margin:0 auto}
.thanks .lede{margin-left:auto;margin-right:auto}
.thanks .next{max-width:760px;margin:44px auto 0;text-align:left;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.thanks .actions{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* footer: legal line centred */
footer.site{background:var(--navy);color:#CDD4E2;padding:52px 0 36px;font-size:.95rem;border-top:6px solid var(--maroon)}
footer.site .cols{display:grid;gap:32px 40px;grid-template-columns:auto 2fr 1fr;align-items:center}
footer.site .seal{width:140px;height:140px}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr;justify-items:start}footer.site .seal{width:112px;height:112px}}
footer.site p{max-width:56ch}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site ul{list-style:none}
footer.site li{margin-top:8px}
footer.site .legal{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem;color:#AAB4C8;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}

.mt-md{margin-top:22px}
.mt-lg{margin-top:40px}

/* print and save-as-PDF: always the real figures, never a number caught mid-count */
@media print{
  .count .tick{display:none}
  .count .sr-only{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  header.site{position:static}
  .split .bar span{transform:none!important}
}