/* City of Bruceville-Eddy — demo redesign. Royal Empire Multimedia, Sept 2026.
   Palette: civic navy + cream + gold, inspired by a Texas municipal seal/ledger,
   NOT the Landforce palette. System fonts only (host CSP: font-src 'self').
   No external images/CDNs; SVG icons inline. Grid: 12 col, 1180px max. */

:root{
  --bg:#f6f4ee;
  --bg-panel:#efece2;
  --paper:#ffffff;
  --ink:#1c2733;
  --body:#485363;
  /* Measured 4.28:1 on this palette's lightest background — just under the
     4.5:1 minimum, and this token is used 15 times site-wide for body-weight
     secondary text. Darkened once at the source. */
  --muted:#626a79;
  --line:rgba(20,32,48,.12);
  --line-strong:rgba(20,32,48,.22);
  --navy:#173456;
  --navy-700:#0e253e;
  --navy-tint:rgba(23,52,86,.08);
  --gold:#b9852f;
  /* Measured 4.4:1 on this palette's lightest background (#f6f4ee) — just
     under the 4.5:1 small-text minimum, and this token drives eyebrows, role
     labels and tags across the site, all small text. Darkened once here
     rather than patched per-use; 5.2:1+ on every background it's used on. */
  --gold-700:#875e1b;
  --gold-tint:rgba(185,133,47,.14);
  --red:#a3312a;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(20,32,48,.06),0 10px 26px rgba(20,32,48,.08);
  --shadow-hover:0 4px 10px rgba(20,32,48,.08),0 18px 40px rgba(20,32,48,.12);
  --radius:6px;
  --radius-sm:4px;
  --max:1180px;
  --gutter:28px;
  --gap:22px;
  --pad:24px;
  --section:88px;
  --btn-h:46px;
  /* Glass — frosted-panel system used across Royal Empire's other builds:
     translucent white over imagery, a soft blur, a thin light edge. */
  --glass:rgba(255,255,255,.7);
  --glass-strong:rgba(255,255,255,.86);
  --blur:blur(18px) saturate(150%);
}
@media (max-width:900px){:root{--section:56px;--gutter:20px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--body);-webkit-font-smoothing:antialiased;background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--gold-700)}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-weight:700;line-height:1.11;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:36px}
h2{font-size:32px;max-width:24ch;line-height:1.06}
h3{font-size:24px;line-height:1.17}
h4{font-size:16px;line-height:1.3}
@media (max-width:1024px){h1{font-size:32px}h2{font-size:28px}}
@media (max-width:640px){h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}}
p{margin:0 0 1em;max-width:66ch}
p:last-child{margin-bottom:0}
ul,ol{padding-left:1.2em;margin:0 0 1em;max-width:66ch}
ul:last-child,ol:last-child{margin-bottom:0}
li{margin-bottom:.4em}
strong{font-weight:700;color:var(--ink)}
small,.small{font-size:14px}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--navy);color:#fff;padding:12px 16px;border-radius:8px;z-index:1000;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}

.container{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.narrow{max-width:740px}
.section{padding:var(--section) 0}
.section-tight{padding:calc(var(--section)/2) 0}
.section-alt{background:var(--bg-panel)}
.center{text-align:center}
.center h2,.center .lead,.center p{margin-inline:auto}
.eyebrow{display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700);margin-bottom:14px}
.eyebrow .dot{display:inline-block;vertical-align:middle;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:8px;position:relative;top:-1px}
.center .eyebrow{justify-content:center}
.h2-highlight{display:inline;background:var(--gold);color:#000;padding:4px 10px;line-height:1.45;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:19px;line-height:1.55;color:var(--body);max-width:60ch;margin:14px 0 0}
.section-head{margin-bottom:36px}
.section-head h2{margin-bottom:0}
.section-head .lead{margin-top:14px}
.section-head-row{display:flex;justify-content:flex-start;align-items:flex-end;gap:30px;flex-wrap:wrap}
.section-head-row h2{margin:0}
.h2-rule{padding-bottom:16px;border-bottom:4px solid var(--gold);margin-bottom:28px;display:block;max-width:none}
.text-link{font-weight:700;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:16px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.text-link:hover{color:var(--gold-700);border-bottom-color:var(--gold)}
.arrow{display:inline-block;transition:transform .15s}
a:hover .arrow{transform:translateX(3px)}
.muted{color:var(--muted)}
.note{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:0 22px;border-radius:2px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-size:16px;line-height:1.2;font-family:inherit;white-space:nowrap;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.btn-primary{background:var(--gold);color:#211505;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-700);border-color:var(--gold-700);color:#fff}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{background:var(--bg-panel);color:var(--ink);border-color:var(--ink)}
.btn-ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.22);color:#fff;border-color:#fff}
.btn-lg{padding:0 26px;min-height:52px;font-size:16.5px}
.btn-sm{min-height:38px;padding:0 16px;font-size:14px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:28px}
.section-head .btn-row{margin-top:20px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.topbar{background:var(--navy-700);color:#dbe3ee;font-size:13.5px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:12px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar a{color:#eef2f7;text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar-links{display:flex;gap:18px;flex-wrap:wrap}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{width:44px;height:44px;flex:none}
.brand .word{line-height:1.15}
.brand .word b{display:block;font-weight:800;font-size:16.5px;letter-spacing:-.01em;color:var(--ink)}
.brand .word span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.nav-primary{display:flex;align-items:center;gap:4px}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav-primary a{color:var(--ink);text-decoration:none;font-weight:600;padding:10px 13px;border-radius:4px;font-size:15px;white-space:nowrap;border-bottom:3px solid transparent;transition:background .15s,color .15s,border-color .15s}
.nav-primary a:hover{background:var(--navy-tint);color:var(--navy);border-bottom-color:var(--gold)}
.nav-primary a[aria-current="page"]{color:var(--navy);background:var(--navy-tint);border-bottom-color:var(--gold)}
.nav-primary .btn{margin-left:10px;color:#fff}
.nav-primary .btn:hover{color:#fff}
.nav-toggle{display:none;background:#fff;border:1px solid var(--line-strong);border-radius:2px;min-height:42px;padding:0 14px;font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;align-items:center;gap:9px}
.nav-toggle .bars{display:inline-block;width:17px;height:2px;background:currentColor;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:17px;height:2px;background:currentColor}
.nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}
@media (max-width:980px){.nav-primary{display:none}.nav-toggle{display:inline-flex}.topbar-links{gap:12px}}

.nav-drawer{position:fixed;inset:0;z-index:100;display:none}
.nav-drawer.is-open{display:block}
.nav-drawer .scrim{position:absolute;inset:0;background:rgba(14,25,40,.45)}
.nav-drawer .panel{position:absolute;top:0;right:0;height:100%;width:min(340px,86vw);background:#fff;padding:18px 22px 28px;overflow:auto;box-shadow:var(--shadow-hover);display:flex;flex-direction:column;gap:2px}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer-head b{font-weight:800;color:var(--ink)}
.drawer-close{background:var(--bg-panel);border:0;border-radius:2px;min-height:40px;padding:0 14px;font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
.nav-drawer a{display:block;padding:13px 6px;border-radius:4px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px;border-bottom:1px solid var(--line)}
.nav-drawer a[aria-current="page"]{color:var(--navy);background:var(--navy-tint)}
.nav-drawer .btn{margin-top:14px;text-align:center}
.drawer-meta{margin-top:auto;padding-top:20px;font-size:14px;color:var(--muted)}

/* ---------- Alert banner (Alert Center demo module) ---------- */
.alert-banner{background:#7a2420;color:#fff;font-size:15px}
.alert-banner .container{display:flex;align-items:center;gap:12px;padding:11px 0;flex-wrap:wrap}
.alert-banner strong{color:#fff}
.alert-banner .ico{flex:none;width:20px;height:20px}
.alert-banner a{color:#ffe8c2;font-weight:700}
.alert-banner[hidden]{display:none}
/* Lives INSIDE the topbar (real flex child, not fixed/floating), so the
   collapsed launcher scrolls and sticks exactly with the header and can never
   drift over page content. Only the opened dropdown (explicit user action)
   overlays anything, like any ordinary header menu. */
.topbar-right{display:flex;align-items:center;gap:14px;flex:none}
.demo-controls{position:relative;flex:none;font-size:13.5px}
.demo-controls summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;white-space:nowrap;width:26px;height:26px;padding:0;border-radius:50%;background:rgba(255,255,255,.14);color:#e9c988}
.demo-controls summary::-webkit-details-marker{display:none}
.demo-controls summary .sw{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.demo-controls summary .sw svg{width:14px;height:14px}
.demo-controls summary .label{display:none}
.demo-controls .body{position:absolute;top:calc(100% + 10px);right:0;margin-top:0;width:min(280px,calc(100vw - 32px));background:#fff;color:var(--muted);line-height:1.5;border:1px solid var(--line-strong);border-radius:6px;box-shadow:var(--shadow-hover);padding:14px;font-size:13.5px;z-index:90}
.demo-controls:not([open]) .body{display:none}
.demo-controls .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.demo-controls button{font:inherit;font-size:13px;font-weight:700;border:1px solid var(--line-strong);background:var(--bg-panel);color:var(--ink);border-radius:2px;padding:6px 12px;cursor:pointer}
.demo-controls button:hover{background:#fff;border-color:var(--ink)}
@media (max-width:640px){
  .topbar-links{display:none}
  .topbar .container{flex-wrap:nowrap;gap:10px}
  .topbar .container>span:first-child{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- Demo disclosure ribbon ---------- */
.demo-ribbon{background:var(--gold-tint);border-bottom:1px solid var(--line)}
.demo-ribbon .container{padding:9px 0;font-size:13.5px;color:var(--navy-700);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.demo-ribbon strong{color:var(--navy-700)}

/* ---------- Hero (light theme — navy stays a small accent only) ---------- */
.hero{position:relative;height:600px;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);animation:kenburns 14s ease-out both}
.hero-slider img{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;animation:none}
.hero-slider img.is-active{opacity:1;animation:kenburns 9s ease-out both}
.hero-ctl{position:absolute;right:clamp(16px,3vw,40px);top:22px;z-index:4;display:flex;align-items:center;gap:10px}
.hero-arrow{width:40px;height:40px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;font:700 26px/1 inherit;border-radius:2px;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,border-color .15s}
.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--gold);color:#000;border-color:var(--gold)}
.hero-dots{display:flex;gap:8px}
.hero-dots button{width:26px;height:6px;border:0;border-radius:2px;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:background .15s,transform .15s}
.hero-dots button:hover{background:#fff}
.hero-dots button.is-active{background:var(--gold);transform:scaleY(1.4)}
@media (max-width:640px){.hero-ctl{right:12px;top:12px}.hero-arrow{width:34px;height:34px;font-size:22px}.hero-dots button{width:18px}}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.03)}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,37,62,.72) 0%,rgba(14,37,62,.32) 46%,rgba(14,37,62,.06) 68%)}
.hero-inner{position:relative;z-index:1;height:100%;padding:0}
.hero-grid{display:block;height:100%}
.hero-copy{position:absolute;left:0;bottom:100px;max-width:520px;padding:32px 36px;border-radius:6px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.55);box-shadow:0 26px 56px -20px rgba(9,20,34,.5)}
.hero-copy .eyebrow{color:#1a1a1a;font-size:14px;letter-spacing:.08em}
.hero-copy .eyebrow .dot{background:var(--gold)}
.hero-copy h1{color:var(--navy-700);font-size:36px;line-height:1.11;letter-spacing:-.035em}
.hero-copy .lead{color:#2c3845;max-width:48ch}
.hero-photo{display:none}
.hero-seal{position:absolute;right:44px;bottom:44px;z-index:2;display:flex}
.hero-seal img{width:76px;height:76px;border-radius:50%;box-shadow:0 8px 22px rgba(0,0,0,.35);background:#fff;padding:6px;border:1px solid rgba(255,255,255,.6)}
@media (prefers-reduced-motion:no-preference){
  .hero-media img{animation:be-hero-settle 1.4s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-copy>*{opacity:0;transform:translateY(14px);animation:be-hero-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-copy .eyebrow{animation-delay:.1s}
  .hero-copy h1{animation-delay:.2s}
  .hero-copy .lead{animation-delay:.32s}
  .hero-copy .btn-row{animation-delay:.44s}
}
@keyframes be-hero-settle{from{transform:scale(1.03)}to{transform:scale(1)}}
@keyframes be-hero-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:900px){
  .hero{height:auto;min-height:560px}
  .hero-copy{position:static;max-width:none;margin:0 var(--gutter);bottom:auto;background:var(--glass-strong);padding:28px 24px}
  .hero-seal{display:none}
}
@media (max-width:900px){
  .hero-inner{padding:40px 0 84px}
  .hero-grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .hero-copy,.hero-photo{grid-column:auto;max-width:none}
  .hero-copy .lead{margin-inline:auto}
  .hero-copy h1{font-size:30px}
  .hero-photo{order:0;margin-top:4px}
  .hero .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .hero .btn-row .btn{width:100%;min-height:50px}
  .hero-photo>img{aspect-ratio:4/3;min-height:0}
  .hero-seal{display:none}
  .btn-row{justify-content:center}
}

/* Quick-link strip overlapping hero */
.quick-strip{position:relative;z-index:3;margin-top:-64px}
.quick-cards{list-style:none;margin:0;padding:0;display:flex;background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);box-shadow:0 20px 44px -18px rgba(9,20,34,.3);overflow:hidden;max-width:none}
.quick-card{margin:0;flex:1 1 0;position:relative}
.quick-card:not(:last-child)::after{content:"";position:absolute;top:16px;bottom:16px;right:0;width:1px;background:var(--line)}
.quick-card a{display:flex;align-items:center;gap:16px;padding:22px 18px;text-decoration:none;color:var(--ink);height:100%;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;border-bottom:4px solid transparent}
.quick-card a:hover,.quick-card a:focus-visible{background:var(--gold);color:#000;border-bottom-color:#000;transform:translateY(-3px);box-shadow:0 12px 24px -10px rgba(0,0,0,.35)}
.quick-card a:hover h3,.quick-card a:focus-visible h3{color:#000}
.quick-card a:hover p,.quick-card a:focus-visible p{color:rgba(0,0,0,.72)}
.quick-card a:hover .quick-thumb-well,.quick-card a:focus-visible .quick-thumb-well{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.quick-card .chip{width:42px;height:42px;border-radius:50%;background:var(--navy-tint);color:var(--navy);display:grid;place-items:center;flex:none}
.quick-card .chip svg{width:20px;height:20px}
.quick-thumb-well{flex:none;width:68px;height:68px;border-radius:16px;background:#eef1f4;display:grid;place-items:center;overflow:hidden}
.quick-thumb{width:60px;height:60px;object-fit:cover;border-radius:12px;box-shadow:none}
.quick-card h3{font-size:15px;margin:0}
.quick-card p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.3}
@media (max-width:900px){
  .quick-cards{flex-direction:column;border-radius:6px}
  .quick-card:not(:last-child)::after{top:auto;bottom:0;left:18px;right:18px;height:1px;width:auto}
  .quick-card a{padding:16px;min-height:76px;gap:16px}
  .quick-thumb-well{width:56px;height:56px}
  .quick-thumb{width:48px;height:48px}
}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid>*{min-width:0}
@media (max-width:980px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--gold)}
.card>*{margin:0}
.card p,.card ul{color:var(--body);font-size:15.5px;max-width:none}
.card .icon{width:44px;height:44px;border-radius:50%;background:var(--navy-tint);color:var(--navy);display:grid;place-items:center;flex:none}
.card .icon svg{width:21px;height:21px}
.card .btn,.card .text-link{margin-top:auto;align-self:flex-start}
.card h3{font-size:20px}
.card .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700);background:var(--gold-tint);padding:4px 10px;border-radius:2px;align-self:flex-start}

/* 12-column split */
.feature{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.feature>.feature-copy{grid-column:span 6;min-width:0}
.feature>.feature-aside{grid-column:span 6;min-width:0}
.feature.reverse>.feature-aside{order:-1}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px}.feature>.feature-copy,.feature>.feature-aside{grid-column:auto}.feature.reverse>.feature-aside{order:0}}

/* ---------- Page hero (inner pages, light theme — navy stays a small accent only) ---------- */
.page-hero{background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink);padding:52px 0 56px;position:relative;overflow:hidden}
.page-hero .container{position:relative}
.breadcrumb{display:block;font-size:13.5px;margin-bottom:16px;color:var(--muted)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--navy);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink);font-weight:700}
.page-hero h1{color:var(--ink);font-size:36px;max-width:22ch;letter-spacing:-.035em}
.page-hero .lead{color:var(--body);max-width:62ch}
.page-hero .eyebrow{color:var(--gold-700)}
.page-hero .eyebrow .dot{background:var(--gold)}
@media (max-width:640px){.page-hero{padding:36px 0 52px}.page-hero h1{font-size:28px}}

/* ---------- Facts / info blocks ---------- */
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.fact .label{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fact .value{font-size:17px;font-weight:700;color:var(--ink);line-height:1.4}
.fact .value a{color:var(--navy)}
@media (max-width:900px){.fact-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fact-grid{grid-template-columns:1fr}}

/* ---------- Directory / staff table ---------- */
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.person{background:#fff;border:1px solid var(--line);border-top:3px solid transparent;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-top-color:var(--gold)}
.person .mono{flex:none;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.person h3{font-size:16px;margin-bottom:2px}
.person .role{font-size:13.5px;color:var(--gold-700);font-weight:700;margin-bottom:6px}
.person .meta{font-size:14px;color:var(--muted)}
.person .meta a{color:var(--body)}
@media (max-width:700px){.people-grid{grid-template-columns:1fr}}

table.data-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.data-table th,table.data-table td{padding:13px 16px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
table.data-table th{background:var(--bg-panel);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
table.data-table tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.table-wrap table.data-table{box-shadow:none;border-radius:0}

/* ---------- Agenda / bid list items ---------- */
.record-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:none}
.record{background:#fff;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.record:hover{transform:translateX(6px);box-shadow:var(--shadow-hover);border-left-color:var(--gold)}
.record:hover .rdate{background:var(--gold);color:#000}
.record .rdate{flex:none;width:74px;text-align:center;background:var(--navy-tint);color:var(--navy);border-radius:4px;padding:8px 4px;font-weight:800;font-size:13px;line-height:1.3}
.record .rdate b{display:block;font-size:19px}
.record .rbody{flex:1;min-width:220px}
.record .rbody h3{font-size:16.5px;margin-bottom:4px}
.record .rmeta{font-size:13.5px;color:var(--muted)}
.record .ractions{display:flex;gap:8px;flex-wrap:wrap}
.record.is-open{border-color:rgba(185,133,47,.55);box-shadow:0 0 0 1px rgba(185,133,47,.25),var(--shadow)}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:2px}
.status-open{background:var(--gold-tint);color:var(--gold-700)}
.status-closed{background:var(--navy-tint);color:var(--navy)}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.filter-row button{font:inherit;font-size:14px;font-weight:700;border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:2px;padding:8px 16px;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.filter-row button:hover{background:var(--gold);border-color:var(--gold);color:#000;transform:translateY(-2px)}
.filter-row button.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.sample-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a5a12;background:#fbeecb;border:1px solid #eddaa6;padding:3px 9px;border-radius:6px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#fff;border-radius:var(--radius);padding:44px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0}
.cta-band p{color:#cfd9e6;margin:8px 0 0}
@media (max-width:700px){.cta-band{padding:30px;flex-direction:column;text-align:center}}

/* ---------- Notice / callout ---------- */
.callout{border:1px solid var(--line);border-left:4px solid var(--navy);background:#fff;border-radius:var(--radius-sm);padding:18px 20px;box-shadow:var(--shadow)}
.callout.gold{border-left-color:var(--gold)}
.callout h4{margin-bottom:6px}
.callout p:last-child{margin-bottom:0}

/* ---------- Forms (visual only in this demo) ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:4px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-700);color:#c9d3e0;padding:52px 0 28px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand{display:flex;gap:12px;align-items:center;text-decoration:none}.footer-brand *{text-decoration:none}
.footer-brand img{width:44px;height:44px}
.footer-brand b{display:block;color:#fff;font-size:16px}
.footer-brand span{display:block;font-size:12.5px;color:#9fadc2}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding:32px 0}
.footer-grid h4,.footer-grid .footer-h{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-grid a{color:#c9d3e0;text-decoration:none;font-size:14.5px;display:inline-block;padding:3px 8px;margin-left:-8px;border-radius:2px;transition:background .15s,color .15s}
.footer-grid a:hover,.footer-grid a:focus-visible{color:#000;background:var(--gold);text-decoration:none}
.footer-bottom{padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#94a2b8}
.footer-demo{max-width:64ch}
.footer-admin-demo{max-width:64ch;color:#c9d3e0}
.footer-admin-demo strong{color:#fff}
.footer-admin-demo a{color:#fff;text-decoration:underline}
/* Both fall through to the page-wide `a{color:var(--navy)}` otherwise — dark
   navy text on this footer's dark navy-700 background measured 1.22:1,
   effectively invisible. Pre-existing, found while testing the new widget. */
.footer-bottom a,.footer-demo a{color:#c9d3e0}
.footer-bottom a:hover,.footer-demo a:hover{color:#000;background:var(--gold);text-decoration:none}
.footer-top-right{display:flex;align-items:center;gap:20px}
.footer-social{display:flex;gap:14px;align-items:center}
.footer-social a{color:#94a2b8;display:grid;place-items:center;width:36px;height:36px;border-radius:4px;transition:color .15s,background .15s}
.footer-social a:hover,.footer-social a:focus-visible{color:#000;background:var(--gold)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Utility reveal (kept static: content is never scroll-gated) ---------- */
.reveal{opacity:1}

/* print */
@media print{.site-header,.site-footer,.demo-controls,.alert-banner,.demo-ribbon{display:none!important}}
/* Round-1/2 critique fixes: real photos on cards + a wide banner */
.card-photo{padding-top:0;overflow:hidden}
.card-photo{overflow:hidden}
.card-photo img{width:calc(100% + 2*var(--pad));max-width:none;margin:0 calc(-1*var(--pad)) 4px;display:block;height:164px;aspect-ratio:auto;object-fit:cover;transition:transform .6s ease}
.card-photo:hover img,.card-gold-panel:hover img,.feature-split:hover img{transform:scale(1.06)}
.card-gold-panel img,.feature-split img{transition:transform .6s ease}
@media (max-width:640px){.card-photo img{height:150px}}
.wide-photo{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.wide-photo img{width:100%;display:block;aspect-ratio:2.5/1;object-fit:cover}
.wide-photo figcaption{padding:12px 4px 0;font-size:14px;color:var(--muted)}
.quick-thumb{width:56px;height:56px;object-fit:cover;border-radius:14px;box-shadow:0 4px 14px rgba(13,42,74,.12)}

/* Contact map — self-hosted static map (host CSP blocks embedded map iframes) */
.map-figure{margin:0;max-width:none}
.map-figure img{width:100%;aspect-ratio:2400/1050;object-fit:cover;display:block;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.map-figure figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.5}
@media (max-width:640px){.map-figure img{aspect-ratio:4/3;object-position:center}}

/* Leadership cards — initials monogram, never a generated likeness of a real official */
.leader-card{display:flex;flex-direction:column;align-items:flex-start}
.leader-mono{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:17px;letter-spacing:.02em;margin-bottom:14px;flex:none}
.leader-card h3{margin-bottom:2px}
.leader-role{font-size:13.5px;color:var(--gold-700);font-weight:700;margin:0 0 10px}

/* ---------- Mobile usability pass: touch targets + legible minimums ----------
   Audited at 390px: footer/nav links were rendering 16-26px tall (below the 44px
   touch guidance) and several meta strings sat at 9.5-10px. */
@media (max-width:640px){
  .footer-grid a,.footer-nav a,.footer-bottom a,.footer-social a,.footer-top a{
    display:inline-flex;align-items:center;min-height:40px}
  .footer-grid li,.footer-nav li{margin-bottom:0}
  .text-link,.card-link,.out{display:inline-flex;align-items:center;min-height:40px}
  .btn-sm{min-height:44px}
  .announce-close,.demo-controls summary{min-width:40px;min-height:40px}
  .note,.small,small,figcaption{font-size:12.5px}
  .footer-bottom,.footer-demo,.footer-tag,.footer-legal{font-size:12.5px;line-height:1.55}
  .wordmark-sub,.brand .word span,.brand-word small{font-size:10.5px}
  .breadcrumb a,.breadcrumb [aria-current]{display:inline-flex;align-items:center;min-height:36px}
}

/* Card thumbnails — photographed objects, matching the top service dock */
.card-thumb-well{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:#eef1f4;overflow:hidden;margin-bottom:14px}
.card-thumb{width:56px;height:56px;object-fit:cover;border-radius:12px;display:block}
@media (max-width:640px){.card-thumb-well{width:56px;height:56px;border-radius:14px}.card-thumb{width:48px;height:48px}}

/* ---- Ask Bruceville-Eddy — visitor chat widget ---- */
.chat-bubble{position:fixed;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);z-index:180;
  font-family:var(--sans,inherit)}
.chat-open{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;
  border-radius:4px;cursor:pointer;font:700 13.5px/1 inherit;color:#fff;
  background:linear-gradient(180deg,var(--navy),var(--navy-700));
  box-shadow:0 10px 28px rgba(23,52,86,.3),0 0 20px -6px rgba(23,52,86,.4)}
.chat-open:hover{transform:translateY(-2px)}
.chat-open.has-new::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(185,133,47,.3)}
.chat-panel{position:absolute;right:0;bottom:64px;width:min(330px,calc(100vw - 24px));
  background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 26px 64px rgba(20,32,48,.28);display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  background:var(--navy-700);color:#fff;font-size:15px}
.chat-head strong{color:#fff}
.chat-close{appearance:none;border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  width:30px;height:30px;border-radius:50%;font:700 18px/1 inherit}
.chat-log{list-style:none;margin:0;padding:12px;max-height:280px;overflow:auto;display:grid;gap:8px}
.chat-log li{padding:9px 12px;border-radius:4px;font-size:14.5px;line-height:1.35;max-width:88%}
.chat-log .them{background:var(--bg-panel,#f6f4ee);color:var(--ink);justify-self:start}
.chat-log .me{background:var(--navy-700);color:#fff;justify-self:end}
.chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.chat-form input{flex:1;font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--line);
  border-radius:4px;min-height:44px;background:#fff;color:#000}
.chat-form button{min-height:44px;padding:0 16px;font-size:13px;border:0;border-radius:2px;
  cursor:pointer;font-weight:700;color:#fff;background:var(--navy-700)}
@media (max-width:480px){.chat-open-label{display:none}.chat-open{padding:0 16px}}
@media print{.chat-bubble{display:none}}

/* ---- Install app button, in the topbar ---- */
.install-app{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:0;font:inherit;color:#eef2f7;cursor:pointer}
.install-app:hover{text-decoration:underline}

/* ================= Schaumburg: three brands on one system =================
   Light theme; the brand colour is a small accent only (eyebrows, dots, one
   CTA, thin borders). Variable names are kept from the shared system. */
.brand-village{--navy:#1a1a1a;--navy-700:#111111;--navy-tint:rgba(0,0,0,.06);--gold:#FFC627;--gold-700:#8a6b00;--gold-tint:rgba(255,198,39,.16);--bg:#ffffff;--bg-panel:#f7f7f5}
.brand-larson{--navy:#7a2436;--navy-700:#561826;--navy-tint:rgba(122,36,54,.09);--gold:#FFC627;--gold-700:#8a6b00;--gold-tint:rgba(255,198,39,.16);--bg:#ffffff;--bg-panel:#f8f5f4}
.brand-90n{--navy:#0f3d5c;--navy-700:#0a2a40;--navy-tint:rgba(15,61,92,.09);--gold:#FFC627;--gold-700:#8a6b00;--gold-tint:rgba(255,198,39,.16);--bg:#ffffff;--bg-panel:#f4f7f9}

/* Family bar — the one strip shared by all three sites */
.family-bar{background:#111111;color:#c9ccc9;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand-larson .family-bar{background:#1e0d12}.brand-90n .family-bar{background:#08161f}
.family-bar .container{display:flex;align-items:center;gap:18px;min-height:32px;flex-wrap:wrap}
.family-label{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:#9a9a9a}
.family-bar nav{display:flex;gap:4px;flex-wrap:wrap}
.family-bar nav a{color:#d9d9d9;text-decoration:none;padding:5px 10px;border-radius:2px}
.family-bar nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.family-bar nav a[aria-current]{background:rgba(255,255,255,.16);color:#fff;font-weight:700;border-bottom:2px solid var(--gold)}
@media (max-width:640px){.family-label{display:none}.family-bar nav a{padding:6px 8px;font-size:12px}}

/* Brand marks */
.brand img{width:44px;height:48px}
.mark-larson,.mark-90n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:900;letter-spacing:-.02em;color:#fff;background:var(--navy);flex:none;font-size:15px}
.mark-90n{font-size:14px}.mark-90n i{font-style:normal;font-size:10px;margin-left:1px;opacity:.85}
.footer-brand img{width:40px;height:44px;filter:brightness(1.15)}
.hero-seal img{width:82px;height:90px;border-radius:22px;padding:10px}
.demo-controls summary .sw{font-weight:900;font-size:13px}

/* Service finder */
.finder{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.finder input[type=search]{width:100%;font:inherit;font-size:17px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);-webkit-appearance:none}
.finder input[type=search]::placeholder{color:#6b7685}
.finder input[type=search]:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.finder-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 20px}
.finder-cats button{font:inherit;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:none;background:var(--gold);color:#000;border-radius:2px;padding:18px 16px;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.finder-cats button:hover{background:var(--gold-700);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.finder-cats button.is-active{background:#1a1a1a;color:var(--gold);font-weight:800}
@media (max-width:640px){.finder-cats{grid-template-columns:repeat(2,1fr);overflow-x:visible;flex-wrap:wrap;padding-bottom:0}}
.finder-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 20px;max-width:none}
.finder-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);border-left:3px solid transparent;padding:10px 4px 10px 8px;transition:border-color .15s,background .15s}
.finder-list li:hover{border-left-color:#000;background:var(--gold)}
.finder-list li:hover a,.finder-list li:hover .finder-cat{color:#000}
.finder-list a{text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;display:inline-flex;gap:6px;align-items:center;min-height:32px;transition:color .15s}
.finder-list a:hover{color:#000}
.finder-cat{font-size:11.5px;color:#5a6373;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
@media (max-width:980px){.finder-list{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.finder-list{grid-template-columns:1fr}.finder-cat{display:none}}

/* Quick-links panel — ASU-style clean link list with arrow accents */
.qlinks-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.qlinks-split .qlinks-photo{border-radius:var(--radius);overflow:hidden}
.qlinks-split .qlinks-photo img{width:100%;height:auto;display:block;object-fit:cover}
.qlinks-head{font-size:36px;font-weight:900;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;line-height:1.05}
.qlinks-rule{width:100%;height:4px;background:var(--gold);border:none;margin:0 0 28px}
.qlinks-list{list-style:none;margin:0;padding:0}
.qlinks-list li{border-bottom:1px solid var(--line)}
.qlinks-list a{display:flex;align-items:center;justify-content:space-between;padding:16px 0;text-decoration:none;color:var(--ink);font-size:17px;font-weight:600;font-style:italic;transition:color .15s,padding-left .15s}
.qlinks-list a::after{content:"\2215";color:var(--gold);font-style:normal;font-size:20px;font-weight:700;transition:transform .15s}
.qlinks-list a:hover{color:#000;background:var(--gold);padding-left:10px;padding-right:10px}
.qlinks-list a:hover::after{transform:translateX(3px)}
@media (max-width:768px){.qlinks-split{grid-template-columns:1fr;gap:28px}.qlinks-head{font-size:28px}}

/* Category grid — ASU-style 3×N grid of bold buttons */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat-grid-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.cat-grid-intro{font-size:17px;color:var(--body);line-height:1.6;max-width:42ch}
.cat-grid a{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--gold);color:#000;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:28px 16px;border-radius:2px;transition:background .15s,transform .15s,box-shadow .15s}
.cat-grid a:hover{background:var(--gold-700);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
@media (max-width:768px){.cat-grid-wrap{grid-template-columns:1fr}.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.cat-grid{grid-template-columns:1fr}}

/* Decorative zigzag accent — gold version of USF's green zigzag */
.zigzag{display:block;width:72px;height:8px;margin-bottom:14px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 12px);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8 6 0 12 8' fill='%23000'/%3E%3C/svg%3E");mask-size:12px 8px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8 6 0 12 8' fill='%23000'/%3E%3C/svg%3E");-webkit-mask-size:12px 8px}

/* Photo card with gold bottom panel — USF Visit/Apply style */
.card-gold-panel{background:var(--gold);border:none;text-decoration:none;display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.card-gold-panel:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card-gold-panel img{width:100%;height:200px;object-fit:cover;display:block}
.card-gold-panel .card-gold-body{padding:22px 24px;color:#000}
.card-gold-panel .card-gold-body h3{color:#000;font-size:18px;margin:0 0 4px;border-bottom:2px solid rgba(0,0,0,.15);padding-bottom:10px}
.card-gold-panel .card-gold-body p{color:rgba(0,0,0,.75);font-size:15px;margin:10px 0 0}
@media (max-width:640px){.card-gold-panel img{height:160px}}

/* Events-on-photo overlay — USF events-over-stadium style */
.events-photo{position:relative;border-radius:var(--radius);overflow:hidden;min-height:440px;display:flex;align-items:stretch}
.events-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform 6s ease}
.events-photo>img.is-active{opacity:1;transform:scale(1)}
.events-photo .events-overlay{position:relative;z-index:1;background:rgba(26,26,26,.88);color:#fff;padding:40px 36px;max-width:440px;display:flex;flex-direction:column;gap:18px}
.events-photo .events-overlay h2{color:#fff;font-size:28px;margin:0}
.events-photo .events-overlay .zigzag{background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 12px)}
.events-item{display:block;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 12px 14px;margin:0 -12px;border-left:3px solid transparent;transition:background .15s,border-color .15s,transform .15s}
.events-item:hover,.events-item:focus-visible{background:var(--gold);border-left-color:#000;transform:translateX(4px)}
.events-item:hover h3,.events-item:hover p,.events-item:hover .events-date,.events-item:focus-visible h3,.events-item:focus-visible p{color:#000}
.events-item:hover .events-date,.events-item:focus-visible .events-date{background:#000;color:var(--gold)}
.events-item:last-child{border-bottom:none;padding-bottom:0}
.events-item .events-date{display:inline-block;background:var(--gold);color:#000;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:2px;margin-bottom:6px}
.events-item h3{color:#fff;font-size:16px;margin:0 0 2px}
.events-item p{color:rgba(255,255,255,.7);font-size:14px;margin:0}
.events-photo .events-links{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.events-photo .events-links a{color:#fff;text-decoration:none;font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;transition:color .15s}
.events-photo .events-links a::before{content:"\203A";color:var(--gold);font-size:18px;font-weight:900}
.events-photo .events-links a{padding:4px 8px;margin-left:-8px;border-radius:2px}
.events-photo .events-links a:hover,.events-photo .events-links a:focus-visible{background:var(--gold);color:#000}
.events-photo .events-links a:hover::before{color:#000}
@media (max-width:768px){.events-photo{min-height:auto;flex-direction:column}.events-photo>img{position:relative;height:220px}.events-photo .events-overlay{max-width:none}}

/* Connect/social section — USF "Your Moment Starts Now" style */
.connect-split{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:480px;overflow:hidden;border-radius:var(--radius)}
.connect-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px}
.connect-mosaic img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9);transition:filter .3s}
.connect-mosaic img:hover{filter:saturate(1.2)}
.connect-body{background:var(--navy);color:#fff;padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.connect-body h2{color:#fff;font-size:32px;font-weight:900;letter-spacing:-.03em;margin-bottom:8px;max-width:none}
.connect-body p{color:rgba(255,255,255,.7);margin:0 0 28px;max-width:36ch}
.connect-links{list-style:none;margin:0;padding:0}
.connect-links li{border-bottom:1px solid rgba(255,255,255,.15)}
.connect-links a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;text-decoration:none;color:#fff;font-size:17px;font-weight:700;transition:color .15s,padding-left .15s}
.connect-links a::after{content:"\00BB";color:var(--gold);font-size:22px;font-weight:900;transition:transform .15s}
.connect-links a:hover{color:var(--gold);padding-left:6px}
.connect-links a:hover::after{transform:translateX(4px)}
@media (max-width:768px){.connect-split{grid-template-columns:1fr}.connect-mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;height:200px}.connect-body{padding:32px 28px}}

/* Stats band */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.stat{background:#fff;border:1px solid var(--line);border-top:3px solid transparent;border-radius:var(--radius);padding:22px 18px;text-align:center;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-top-color:var(--gold)}
.stat b{display:block;font-size:34px;line-height:1;color:var(--navy);letter-spacing:-.02em;margin-bottom:8px;transition:color .15s}
.stat:hover b{color:var(--gold-700)}
.stat span{font-size:13.5px;color:var(--muted);line-height:1.35;display:block}
@media (max-width:980px){.stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:1fr 1fr}.stat b{font-size:28px}}

/* Yellow achievement panel — ASU-style bold gold slide */
.gold-panel{background:var(--gold);color:#000;border-radius:var(--radius);padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.gold-panel h2{color:#000;font-size:48px;font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:24px;max-width:none}
.gold-panel .gold-fact{margin-bottom:18px}
.gold-panel .gold-fact b{font-size:20px;font-weight:900;letter-spacing:-.01em;display:block;margin-bottom:2px}
.gold-panel .gold-fact-label{display:inline;background:#000;color:var(--gold);font-size:13px;font-weight:800;padding:3px 8px;letter-spacing:.04em;text-transform:uppercase}
.gold-panel .gold-fact span{display:block;font-size:13px;color:rgba(0,0,0,.7);margin-top:4px}
.gold-panel .gold-fact span.gold-fact-label{display:inline-block;color:var(--gold);margin:0 0 4px}
.gold-panel-wrap::after{content:"#1";font-size:120px;font-weight:900;line-height:.85;letter-spacing:-.04em;position:absolute;right:40px;top:50%;transform:translateY(-50%);opacity:.18;pointer-events:none}
.gold-panel-wrap{position:relative;overflow:hidden}
.finder-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--gap);align-items:start}
@media (max-width:900px){.finder-grid{grid-template-columns:1fr}.gold-panel{padding:32px 28px}.gold-panel h2{font-size:36px}.gold-panel-wrap::after{font-size:80px;right:20px}}

/* Officials — the Village's own published portraits, shown as published */
.official{flex-direction:row;gap:18px;align-items:flex-start}
.official-photo{width:104px;height:139px;object-fit:cover;border-radius:12px;flex:none;box-shadow:var(--shadow)}
.official h3{margin-bottom:2px}
.official-meta{font-size:14px;color:var(--muted);line-height:1.5}
.official-meta a{color:var(--body);text-decoration:none}
.official-meta a:hover{color:var(--navy);text-decoration:underline}
@media (max-width:640px){.official{flex-direction:column}.official-photo{width:100%;height:auto;aspect-ratio:3/4;max-height:340px;object-position:top}}

/* Shows / tenants grids reuse the record filter (data-status) */
.show-grid,.record-list.grid{display:grid}
.show .show-when{font-weight:700;color:var(--navy);font-size:14.5px}
.show-plate{width:calc(100% + 2*var(--pad));margin:0 calc(-1*var(--pad)) 4px;height:120px;background:linear-gradient(120deg,var(--navy-700),var(--navy));position:relative}
.show-plate::after{content:"";position:absolute;inset:auto 18px 14px auto;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14)}
.card[hidden]{display:none}
.family-grid .card-photo img{height:140px}

/* Hero variants */
.hero-larson .hero-media::after{background:linear-gradient(100deg,rgba(40,10,18,.7) 0%,rgba(40,10,18,.3) 46%,rgba(40,10,18,.05) 68%)}
.hero-90n .hero-media::after{background:linear-gradient(100deg,rgba(6,28,44,.72) 0%,rgba(6,28,44,.3) 46%,rgba(6,28,44,.05) 68%)}
.alert-banner{background:var(--navy-700)}
.alert-banner a{color:#ffe38a}
.field label input[type=checkbox]{width:auto;margin-right:8px}

.finder-more{margin:16px 0 0;text-align:center}

/* ---- Section arrangements, 2026-09-25: feature split (news), photo tiles, bracket buttons, season list ---- */
.feature-split{display:grid;grid-template-columns:1.15fr 1fr;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:380px;text-decoration:none;background:var(--navy)}
.feature-split img{width:100%;height:100%;object-fit:cover;display:block}
.feature-split .feature-panel{background:var(--navy);color:#fff;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.feature-split .feature-panel .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:#000;padding:4px 10px;border-radius:2px;margin:0}
.feature-split .feature-panel h3,.feature-split .feature-panel .feature-title{color:#fff;font-size:28px;line-height:1.15;margin:16px 0 12px;max-width:none}
.feature-split .feature-panel p{color:rgba(255,255,255,.82);font-size:16px;margin:0 0 20px}
.feature-split .feature-panel .text-link{color:var(--gold)}
.feature-split .feature-panel .text-link:hover{color:#fff}
@media (max-width:900px){.feature-split{grid-template-columns:1fr;min-height:0}.feature-split img{height:240px}.feature-split .feature-panel{padding:28px 24px}.feature-split .feature-panel h3,.feature-split .feature-panel .feature-title{font-size:22px}}
.photo-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.photo-tiles a{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;text-decoration:none;box-shadow:var(--shadow);background:#111}
.photo-tiles img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .25s ease,transform .4s ease}
.photo-tiles a:hover img,.photo-tiles a:focus-visible img{filter:none;transform:scale(1.04)}
.photo-tiles a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.74) 100%)}
.photo-tiles .tile-label{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;color:#fff;font-size:20px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:1.05}
.photo-tiles .tile-arrow{position:absolute;top:0;right:0;z-index:1;width:40px;height:40px;background:var(--gold);color:#000;display:grid;place-items:center;font-size:20px;font-weight:900}
@media (max-width:900px){.photo-tiles{grid-template-columns:repeat(2,1fr)}.photo-tiles .tile-label{font-size:16px}}
.bracket-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.btn-bracket{position:relative;display:flex;align-items:center;justify-content:center;min-height:76px;padding:18px 24px;font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;border-left:2px solid var(--ink);border-right:2px solid var(--ink);transition:background .15s}
.btn-bracket::before,.btn-bracket::after{content:"";position:absolute;height:2px;background:var(--ink);width:86%}
.btn-bracket::before{top:0;right:0}
.btn-bracket::after{bottom:0;left:0}
.btn-bracket:hover{background:var(--gold);color:#000}
@media (max-width:760px){.bracket-row{grid-template-columns:1fr;gap:18px}}
.record .rthumb{width:96px;height:64px;object-fit:cover;border-radius:2px;flex:none}
.season-list .rdate{min-width:92px}
.season-list .rdate b{font-size:12px;letter-spacing:.06em}
.season-list .rmeta b{color:var(--navy);font-weight:700}

/* ---- Scroll reveal (all pages) ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
.official-photo,.leader-mono{transition:transform .3s ease}
.official:hover .official-photo,.person:hover .leader-mono{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero-media img,.hero-slider img.is-active{animation:none}.card-photo img,.record,.person,.stat,.card,.btn{transition:none}}

/* ---- Mobile pass 2026-09-25 ---- */
@media (max-width:640px){
  .season-list .record{align-items:flex-start;padding:14px 16px}
  .season-list .rdate{min-width:64px;width:64px;font-size:11px;padding:6px 2px}
  .season-list .rthumb{display:none}
  .season-list .rbody{flex:1 1 60%}
  .season-list .ractions{width:100%;margin-top:8px}
  .season-list .ractions .btn{width:100%}
  .h2-highlight{padding:2px 6px;line-height:1.35}
  .record .rdate b{font-size:16px}
  .cta-band .btn-row .btn{width:100%}
  .feature-split .feature-panel .text-link{margin-top:4px}
  .events-photo{min-height:0}
  .events-photo .events-overlay{max-width:none;padding:28px 20px}
  .connect-body{padding:28px 20px}
  .qlinks-head{font-size:28px}
  .bracket-row{gap:14px}
  .btn-bracket{min-height:60px;font-size:16px}
  .hero-inner{padding-top:56px}
}
@media (max-width:900px){
  .season-list .rbody h3{font-size:18px}
}

/* ---- Mobile overflow fixes ---- */
.hero{overflow:hidden}
@media (max-width:640px){
  .footer-top{flex-direction:column;align-items:stretch}
  .footer-top-right{flex-wrap:wrap;justify-content:space-between;width:100%;gap:12px}
  .footer-top-right .btn{width:100%;order:2}
  .footer-social{order:1}
}

/* ---- Tap targets ---- */
.official-meta a{display:inline-block;padding:6px 0;min-height:40px;line-height:1.6}
.family-bar a,.site-family a{display:inline-flex;align-items:center;min-height:40px}
@media (max-width:640px){
  .official-meta a{display:block;padding:8px 0}
  .topbar-links a{display:inline-flex;align-items:center;min-height:40px}
}

/* ---- WebPay portal ---- */
.pay-steps{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;counter-reset:none}
.pay-steps li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:4px solid var(--line);font-weight:700;color:var(--muted);font-size:14px}
.pay-steps li b{width:28px;height:28px;border-radius:2px;background:var(--bg-panel);color:var(--ink);display:grid;place-items:center;font-size:13px}
.pay-steps li.is-active{color:var(--ink);border-bottom-color:var(--gold)}
.pay-steps li.is-active b{background:var(--gold);color:#000}
.pay-steps li.is-done{color:var(--ink);border-bottom-color:#000}
.pay-steps li.is-done b{background:#000;color:var(--gold)}
.pay-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.pay-types button{font:inherit;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:none;background:var(--gold);color:#000;border-radius:2px;padding:26px 16px;cursor:pointer;transition:background .15s,color .15s,transform .15s,box-shadow .15s}
.pay-types button:hover,.pay-types button:focus-visible{background:#000;color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.pay-types button.is-selected{background:#000;color:var(--gold)}
.pay-review{margin:0 0 18px;display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;font-size:16px}
.pay-review dt{font-weight:700;color:var(--ink)}
.pay-review dd{margin:0}
.pay-summary .pay-amount{font-size:40px;font-weight:900;letter-spacing:-.03em;color:var(--ink);margin:10px 0 0}
.pay-side .fact-grid{margin-top:18px}
@media (max-width:900px){.pay-grid{grid-template-columns:1fr}.pay-steps{grid-template-columns:repeat(2,1fr)}.pay-steps li{font-size:13px}}
@media (max-width:640px){.pay-types{grid-template-columns:1fr 1fr}.pay-types button{padding:18px 10px;font-size:12.5px}.pay-review{grid-template-columns:1fr;gap:4px}.pay-review dd{margin-bottom:8px}}

/* ---- Long tokens (emails, URLs) must wrap inside cards and fact grids ---- */
.fact-grid,.fact-grid *,.card p,.card a,.pay-review dd,.official-meta a{overflow-wrap:anywhere;word-break:normal;min-width:0}
@media (max-width:640px){.fact-grid{grid-template-columns:1fr!important}}

/* ---- Staff-managed alerts and preview ---- */
.alert-banner.is-warning{background:var(--gold);color:#000}
.alert-banner.is-warning a,.alert-banner.is-warning strong{color:#000}
.alert-banner.is-emergency{background:#b3261e;color:#fff}
.alert-banner.is-emergency a,.alert-banner.is-emergency strong{color:#fff}
.cms-preview{position:fixed;left:0;right:0;bottom:0;z-index:999;background:#1a1a1a;color:var(--gold);font-weight:700;font-size:14px;text-align:center;padding:10px 16px}

/* ---- Site search ---- */
.nav-search{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;margin-left:10px;background:#fff}
.nav-search input{font:inherit;font-size:14px;border:0;padding:0 12px;width:150px;min-height:38px;background:transparent;color:var(--ink)}
.nav-search input:focus{outline:none;width:210px}
.nav-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-tint)}
.nav-search button{border:0;background:var(--gold);color:#000;width:40px;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.nav-search button:hover{background:#000;color:var(--gold)}
@media (max-width:1024px){.nav-primary .nav-search{display:none}}
.nav-drawer .nav-search{margin:0 0 14px;width:100%}
.nav-drawer .nav-search input{width:100%;min-height:44px}
.search-form{margin-bottom:18px}
.search-form .field input{font-size:18px;min-height:52px}
.search-filters{margin-bottom:10px}
#search-results mark{background:var(--gold);color:#000;padding:0 3px;border-radius:2px}
#search-results .rdate{min-width:86px;width:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:1320px){.nav-search input{width:118px}.nav-search input:focus{width:170px}.brand .word span{white-space:nowrap}}
@media (max-width:1140px){.nav-search input{width:96px}.nav-list a{padding-left:9px;padding-right:9px}}

/* ---- Records center + FOIA status ---- */
.records-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.records-filters .field{margin:0}
.records-filters select,.records-filters input{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:2px;background:#fff}
@media (max-width:900px){.records-filters{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.records-filters{grid-template-columns:1fr}}
.doc-links{display:flex;gap:8px;flex-wrap:wrap}
.doc-links .btn-sm{min-height:34px;padding:0 12px;font-size:13px}
.doc-links .pending{font-size:13px;color:var(--muted);align-self:center}
.foia-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:22px 24px;margin-top:20px;box-shadow:var(--shadow)}
.foia-card h3{margin-bottom:6px}
.foia-status{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:2px;background:var(--gold);color:#000;margin-bottom:12px}
.foia-status.completed{background:#000;color:var(--gold)}
.foia-status.denied{background:#b3261e;color:#fff}
.foia-timeline{list-style:none;margin:14px 0 0;padding:0;border-left:2px solid var(--line-strong)}
.foia-timeline li{padding:6px 0 6px 16px;position:relative;font-size:15px}
.foia-timeline li::before{content:"";position:absolute;left:-6px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.foia-timeline time{display:block;font-size:12.5px;color:var(--muted)}

.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- a11y + utility pages + WebPay tiles ---- */
.quick-card .qt{display:block;font-size:15px;font-weight:700;color:var(--ink);margin:0;line-height:1.2}
.callout .callout-title{font-size:16px;margin:0 0 6px}
.hero-pause{font-size:13px;letter-spacing:-2px}
.hero-pause[aria-pressed="true"]{background:var(--gold);color:#000}
.pay-types button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px 16px;text-transform:none;letter-spacing:0;font-size:14.5px;line-height:1.25}
.pay-types button img{width:64px;height:64px;border-radius:14px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.18);background:#fff;transition:transform .2s}
.pay-types button:hover img,.pay-types button.is-selected img{transform:scale(1.06)}
.pay-illus{display:flex;align-items:center;gap:14px;margin:-8px 0 18px}
.pay-illus img{width:72px;height:72px;border-radius:16px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.pay-illus p{margin:0;color:var(--body);font-size:15px}
.sitemap-list{list-style:none;margin:0;padding:0}
.sitemap-list li{margin:0}
.sitemap-list a{display:block;padding:8px 10px;margin-left:-10px;border-radius:2px;color:var(--ink);text-decoration:none;font-weight:600}
.sitemap-list a:hover{background:var(--gold);color:#000}
.footer-legal{font-size:13px;color:#94a2b8}
.footer-legal a{color:#c9d3e0;text-decoration:none;padding:2px 4px;border-radius:2px}
.footer-legal a:hover{background:var(--gold);color:#000}
@media (max-width:640px){.pay-types button{padding:14px 8px;font-size:13px}.pay-types button img{width:52px;height:52px}}

/* ---- Community engagement ---- */
.engage-list{display:grid;gap:22px}
.engage{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
.engage.closed{border-left-color:#000}
.engage h3{margin-bottom:6px}
.engage .meta{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.engage .q{font-weight:700;color:var(--ink);margin:14px 0 8px}
.engage .opts{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.engage .opts label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:2px;cursor:pointer;transition:background .15s,border-color .15s}
.engage .opts label:hover{background:var(--gold-tint);border-color:var(--gold)}
.engage .opts input{accent-color:#000}
.engage .res{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.engage .res li{position:relative;padding:8px 12px;border-radius:2px;background:var(--bg-panel);overflow:hidden;font-size:15px}
.engage .res .bar{position:absolute;left:0;top:0;bottom:0;background:var(--gold);opacity:.55;z-index:0}
.engage .res span{position:relative;z-index:1}
.engage .res b{position:relative;z-index:1;float:right}
.engage .row{display:grid;grid-template-columns:1fr 1fr 120px;gap:10px;margin-top:10px}
.engage .row input,.engage textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:2px;box-sizing:border-box}
.engage textarea{margin-top:10px}
@media (max-width:640px){.engage .row{grid-template-columns:1fr}}

.engage .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700);background:var(--gold-tint);padding:4px 10px;border-radius:2px;margin-bottom:8px}

.translate{display:inline-flex;align-items:center;gap:6px}
.translate-sel{font:inherit;font-size:13px;background:#fff;color:#000;border:1px solid var(--gold);border-radius:2px;padding:3px 6px}

/* ---- Notice bar: one slim line, never a wall ---- */
.alert-banner{font-size:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.alert-banner .container{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:nowrap;min-height:40px}
.alert-banner .alert-ico{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#000;font-weight:900;font-size:13px;display:grid;place-items:center}
.alert-banner strong{flex:none;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.alert-banner #alert-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e6e6e6}
.alert-banner a{flex:none;color:#000;background:var(--gold);text-decoration:none;font-weight:800;font-size:12.5px;padding:5px 10px;border-radius:2px}
.alert-banner a:hover{background:#fff}
.alert-banner .alert-close{flex:none;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;width:36px;height:36px;border-radius:2px;font-size:18px;line-height:1;cursor:pointer}
.alert-banner .alert-close:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.alert-banner.is-warning .alert-ico,.alert-banner.is-warning a{background:#000;color:var(--gold)}
.alert-banner.is-warning strong,.alert-banner.is-warning #alert-text{color:#000}
.alert-banner.is-emergency .alert-ico{background:#fff;color:#b3261e}
@media (max-width:640px){.alert-banner strong{display:none}.alert-banner #alert-text{white-space:normal;font-size:13px;line-height:1.35}.alert-banner .container{align-items:flex-start;padding:10px 0}}
.demo-controls{display:none!important}

/* ---- Full-screen mobile menu (Against Da Grain pattern) ---- */
.mm{position:fixed;inset:0;z-index:120;background:#fff;color:var(--ink);display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mm.is-open{display:flex}
.mm-top{display:grid;grid-template-columns:52px 1fr auto;align-items:center;min-height:64px;padding:0 14px 0 4px;border-bottom:1px solid var(--line);gap:8px}
.mm-close{border:0;background:none;font:inherit;font-size:34px;line-height:1;cursor:pointer;color:var(--ink);height:48px;width:48px}
.mm-close:hover{color:var(--gold-700)}
.mm-brand{font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:14px;text-align:center}
.mm-cta{background:var(--gold);color:#000;text-decoration:none;font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border-radius:2px;white-space:nowrap}
.mm-cta:hover{background:var(--gold-700);color:#fff}
.mm-search{display:flex;align-items:center;gap:12px;padding:0 18px;height:56px;border-bottom:1px solid var(--line)}
.mm-search svg{width:22px;height:22px;flex:none}
.mm-search input{flex:1;border:0;background:none;font:inherit;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);outline:none;height:100%;min-width:0}
.mm-search input::placeholder{color:#8a8884}
.mm-row{border-bottom:1px solid var(--ink)}
.mm-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 18px;min-height:72px;border:0;background:none;font:inherit;font-weight:800;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;text-align:left;text-decoration:none;transition:background .15s}
@media (hover:hover){.mm-item:hover{background:var(--gold);color:#000}}
.mm-item[aria-current="page"]{box-shadow:inset 5px 0 0 var(--gold)}
.mm-item svg{width:22px;height:22px;flex:none;transition:transform .25s ease}
.mm-item[aria-expanded="true"]{background:var(--gold)}
.mm-item[aria-expanded="true"] svg{transform:rotate(90deg)}
.mm-panel{display:none;padding:4px 18px 14px;background:var(--bg-panel)}
.mm-row.is-open .mm-panel{display:block}
.mm-sub{display:block;padding:13px 0;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.mm-sub:first-child{border-top:0}
.mm-sub:hover{color:var(--gold-700)}
.mm-sec{padding:14px 18px 44px;display:grid;gap:2px}
.mm-sec a{display:block;padding:12px 0;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.mm-sec a[aria-current="true"]{color:var(--gold-700)}
.mm-sec a:hover{color:var(--gold-700)}
body.mm-lock{overflow:hidden}
@media (min-width:981px){.mm{display:none !important}}
@media (prefers-reduced-motion:reduce){.mm-item svg{transition:none}}

/* mobile: family bar one scrollable row, notice clamps to two lines */
@media (max-width:640px){
  .family-bar .container{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .family-bar .container::-webkit-scrollbar{display:none}
  .family-bar nav{flex-wrap:nowrap}
  .family-bar nav a{white-space:nowrap;min-height:36px;font-size:12.5px}
  .alert-banner .container{align-items:center;gap:10px;padding:8px 0}
  .alert-banner #alert-text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.3}
  .alert-banner a{font-size:12px;padding:6px 9px}
  .alert-banner .alert-ico{width:20px;height:20px;font-size:12px}
}

body.mm-lock .chat-open,body.mm-lock .chat-panel{display:none !important}
/* Notice = solid Village gold, black type (Prince 2026-09-25); emergency stays red */
.alert-banner,.alert-banner.is-warning{background:var(--gold);color:#000;border-bottom:1px solid rgba(0,0,0,.15)}
.alert-banner .alert-ico,.alert-banner.is-warning .alert-ico{background:#000;color:var(--gold)}
.alert-banner strong,.alert-banner.is-warning strong{color:var(--gold);background:#000;padding:3px 7px;border-radius:2px;letter-spacing:.14em}
.alert-banner #alert-text,.alert-banner.is-warning #alert-text{color:#111}
.alert-banner a,.alert-banner.is-warning a{background:#000;color:var(--gold)}
.alert-banner a:hover,.alert-banner.is-warning a:hover{background:#333;color:#fff}
.alert-banner .alert-close{border-color:rgba(0,0,0,.5);color:#000;background:#fff}
.alert-banner .alert-close:hover{background:#000;color:var(--gold);border-color:#000}
.alert-banner.is-emergency{background:#b3261e;color:#fff}
.alert-banner.is-emergency .alert-ico{background:#fff;color:#b3261e}
.alert-banner.is-emergency strong{background:#fff;color:#b3261e}
.alert-banner.is-emergency #alert-text{color:#fff}
.alert-banner.is-emergency a{background:#fff;color:#b3261e}
.alert-banner.is-emergency .alert-close{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}

/* ---- Site lock: content and images not copyable or downloadable (Prince 2026-09-25) ---- */
img,picture,video,svg{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
main,article,.section,.container,.card,.record,.hero,.feature,.gold-panel,.photo-tiles,.events-panel{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
input,textarea,select,[contenteditable],.admin,.admin *{-webkit-user-select:text;user-select:text}
@media print{body *{display:none!important}body::after{content:"© Village of Schaumburg. Printing and copying are disabled on this preview.";display:block!important;padding:48px;font-size:18px;font-family:inherit}}

/* ==========================================================================
   HALTON POLICE BOARD — palette override on the Dee theme.
   Their live site's blue stays the primary colour; the crest gold becomes the
   secondary accent. Background moves from Dee's warm cream to Halton's cool
   civic grey so the blue reads as theirs, not ours.
   ========================================================================== */
@font-face{font-family:'Inter';src:url('assets/fonts/inter-variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('assets/fonts/newsreader-variable.woff2') format('woff2-variations');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* Halton blue — taken from their live stylesheet (--accent:#163d5d). */
  --navy:#163d5d;
  --navy-700:#102e46;
  --navy-tint:rgba(22,61,93,.08);
  /* Crest gold. #f2b632 is the crest value; it measures 1.9:1 on white, so
     small text uses the darkened --gold-700 while the bright value stays for
     rules, chips and panel fills where it is decorative. */
  --gold:#c8912b;
  --gold-700:#7d5713;
  --gold-tint:rgba(242,182,50,.16);
  --crest-gold:#f2b632;
  /* Cool civic greys from their live site, replacing Dee's cream. */
  --bg:#f4f6f7;
  --bg-panel:#e9eef2;
  --paper:#ffffff;
  --ink:#16293b;
  --body:#44525f;
  --muted:#5a6775;
  --line:rgba(22,61,93,.14);
  --line-strong:rgba(22,61,93,.26);
  --red:#9d2b25;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --shadow:0 1px 2px rgba(22,43,58,.06),0 10px 30px rgba(22,43,58,.075);
  --shadow-hover:0 4px 10px rgba(22,43,58,.08),0 18px 44px rgba(22,43,58,.13);
}

/* The Board's own page ground: two soft radial washes over the grey, lifted
   straight from their live stylesheet so the site still feels like theirs. */
body{
  background:
    radial-gradient(ellipse at 95% 0%, #e3eaf0 0, transparent 42rem),
    radial-gradient(ellipse at 0% 35%, #e9eef2 0, transparent 35rem),
    var(--bg);
  background-attachment:fixed;
}

/* Display serif for the hero and section heads — Newsreader is already
   self-hosted here, so it costs no extra request and no CSP change. */
.hero-copy h1,.section-head h2,.feature h2,.cta-band h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em}
.hero-copy h1{font-size:clamp(2.2rem,1.3rem + 3.1vw,4rem);line-height:1.04}
.hero-copy h1 em{font-style:italic;color:var(--crest-gold);font-weight:600}

/* Crest gold hairline under section heads, matching the Board crest. */
.section-head h2::after{content:"";display:block;width:64px;height:3px;margin-top:14px;background:var(--crest-gold);border-radius:2px}

/* Gold notice bar is the Dee default Prince approved. */
.alert-banner{background:linear-gradient(180deg,#fdf3d8,#f9e7b4);border-bottom:1px solid rgba(125,87,19,.3)}
.alert-banner strong,.alert-banner a{color:#5d400c}

/* Board member portraits keep a 4:5 civic crop. */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--gap)}
.member-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.member-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.member-card img{aspect-ratio:4/5;object-fit:cover;width:100%}
.member-card__body{padding:16px 18px 20px}
.member-card__body h3{font-size:19px;margin-bottom:2px}
.member-card__role{color:var(--gold-700);font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;display:block;margin-bottom:8px}

/* Record rows (meetings, reports, policies) on the Dee card surface. */
.record{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--crest-gold);border-radius:var(--radius-sm);padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow)}
.record h3{font-size:20px;margin-bottom:4px}
.record .record-meta{color:var(--muted);font-size:14px;margin-bottom:10px}
@media (max-width:640px){.record{padding:16px 16px}}

/* Halton additions: components the Board's pages need that Dee didn't ship. */
.callout.is-urgent{border-left-color:var(--red);background:#fdf6f5}
.callout.is-urgent strong{color:var(--red)}

.principles{counter-reset:p;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);max-width:none}
.principles li{counter-increment:p;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px 20px 62px;position:relative;box-shadow:var(--shadow);margin:0;color:var(--body)}
.principles li::before{content:counter(p);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);max-width:840px;margin-top:8px}
.form-grid .field-wide{grid-column:1/-1}
.form-grid label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:15.5px}
.form-grid input[type=text],.form-grid input[type=email],.form-grid input[type=tel],.form-grid input[type=date],.form-grid textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:#fff;font:inherit;color:var(--ink);min-height:48px}
.form-grid textarea{min-height:140px;resize:vertical}
.form-grid input:focus-visible,.form-grid textarea:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.form-grid .hint{display:block;margin-top:6px;color:var(--muted);font-size:14px}
.form-grid .field-check{display:flex;align-items:flex-start;gap:12px}
.form-grid .field-check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--navy)}
.form-grid .field-check label{margin:0;font-weight:400;color:var(--body)}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}

/* The Board crest is white-on-transparent, so it needs a navy well in light UI. */
.brand img,.footer-brand img,.mm-top img{background:var(--navy);border-radius:6px;padding:4px}

/* --- Halton hero + primary-button corrections ----------------------------
   Dee's hero is 600px with the copy pinned 100px off the bottom; the Board's
   headline runs to three lines in the display serif and was clipping against
   the top edge. Taller hero, vertically centred card, tighter clamp. */
.hero{height:auto;min-height:660px;display:flex;align-items:center}
.hero-inner{padding-block:72px}
.hero-copy{position:static;max-width:560px;margin:0}
.hero-copy h1{color:var(--navy-700);font-size:clamp(2rem,1.25rem + 2.4vw,3.1rem);line-height:1.06}
.hero-copy .eyebrow .dot{background:var(--crest-gold)}
@media (max-width:900px){.hero{min-height:560px}.hero-inner{padding-block:48px}.hero-copy{max-width:none;padding:26px 24px}}

/* Blue is the Board's colour, so the primary action is navy, not Dee's gold.
   Gold stays for the crest rule, notice bar, chips and the facts panel. */
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-navy{background:var(--crest-gold);color:#3a2806;border-color:var(--crest-gold)}
.btn-navy:hover{background:var(--gold-700);border-color:var(--gold-700);color:#fff}

/* Seven primary items plus a button overflowed at 1280–1440. */
.nav-list{gap:18px}
.nav-list a{font-size:15.5px}
@media (max-width:1180px){.nav-primary .btn{display:none}}

/* The Board's name is longer than Schaumburg's, so at 390px the brand block
   pushed the Menu button 39px past the viewport on every page. Let the brand
   shrink and drop its tagline before the toggle is forced off-screen. */
@media (max-width:640px){
  .header-inner{gap:10px}
  .brand{min-width:0;flex:1 1 auto}
  .brand .word{min-width:0}
  .brand .word b{font-size:15px;line-height:1.15;display:block}
  .brand .word span{display:none}
  .nav-toggle{flex:none;white-space:nowrap}
}
@media (max-width:420px){
  .brand img{width:34px;height:34px}
  .brand .word b{font-size:14px}
}

/* --- Hero cropped to half height (Prince, 2026-09-25) --------------------
   660px -> 330px. The glass card has to lose weight to match, or it just
   pushes the hero back out to its old height: tighter card padding, smaller
   headline and lead, buttons on one row. */
.hero{min-height:330px}
.hero-inner{padding-block:30px}
.hero-copy{max-width:600px;padding:22px 26px}
.hero-copy h1{font-size:clamp(1.55rem,1.05rem + 1.5vw,2.15rem);line-height:1.08;margin-bottom:.35em}
.hero-copy .lead{font-size:16px;line-height:1.5;margin-bottom:16px;max-width:54ch}
.hero-copy .eyebrow{margin-bottom:8px}
.hero-copy .btn{min-height:42px;font-size:15px;padding:0 18px}
.hero-copy .btn-lg{min-height:44px;font-size:15.5px}
@media (max-width:900px){
  .hero{min-height:280px}
  .hero-inner{padding-block:22px}
  .hero-copy{padding:18px 20px}
  .hero-copy .lead{font-size:15.5px}
}

/* Dee pulls .quick-strip up 64px to overlap a 660px hero. At half height the
   glass card's bottom landed 42px INSIDE the strip. Shrink the overlap and
   give the hero more room below the card; drop the overlap entirely on
   phones, where the card is tallest relative to the hero. */
.quick-strip{margin-top:-28px}
.hero-inner{padding-block:30px 46px}
@media (max-width:900px){
  .quick-strip{margin-top:0}
  .hero-inner{padding-block:22px 26px}
}

/* --- Dead space pass (Prince, 2026-09-25) --------------------------------
   Measured: every section carried 176–296px of padding waste, and each inner
   page's h1 sat alone in a 346px section holding 134px of content, with the
   next section adding another 88px of top padding underneath it. */

/* Dee's 88px section rhythm was tuned for a page with far more content per
   band than the Board has. */
:root{--section:58px}
@media (max-width:900px){:root{--section:40px}}

/* Compact page-title band, replacing the full section the h1 used to sit in. */
.page-head{padding:34px 0 26px;background:linear-gradient(180deg,var(--bg-panel),transparent)}
.page-head h1{margin:6px 0 10px;max-width:22ch}
.page-head .lead{margin:0;max-width:64ch}
.page-head + .section,.page-head + .section-alt{padding-top:var(--section)}
@media (max-width:900px){.page-head{padding:24px 0 20px}}

/* Thin sections (a heading, a line and a button) get half the rhythm. */
.section.is-slim{padding-block:calc(var(--section) * .55)}

/* Two same-coloured bands in a row doubled their padding into one dead gap. */
.section + .section{padding-top:calc(var(--section) * .7)}
.section-alt + .section-alt{padding-top:calc(var(--section) * .7)}

/* Headings and leads carried their own stacked margins on top of all that. */
.section-head{margin-bottom:22px}
.section-head h2{margin-bottom:0}
.section-head + .lead{margin-top:-6px}
.section > .container > .lead{margin-bottom:20px}
.breadcrumb{padding-block:12px}

/* --- Gold -> blue (Prince, 2026-09-25) -----------------------------------
   Every gold FILL and every hover/active state becomes the Board's blue.
   Gold survives only as the thin crest rule under section headings and on
   the notice bar. */

/* Quick-link strip: the gold hover slab Prince pointed at. */
.quick-card a:hover,.quick-card a:focus-visible{background:var(--navy);color:#fff;border-bottom-color:var(--navy-700)}
.quick-card a:hover h3,.quick-card a:focus-visible h3{color:#fff}
.quick-card a:hover p,.quick-card a:focus-visible p{color:rgba(255,255,255,.8)}

/* Buttons — every hover/press state in blue. */
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-navy{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-navy:hover,.btn-navy:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--navy-tint);color:var(--navy);border-color:var(--navy)}
.btn-ghost-light:hover,.btn-ghost-light:focus-visible{background:rgba(255,255,255,.2);color:#fff;border-color:#fff}
.btn:active{transform:translateY(0)}

/* Links and card hovers. */
a:hover{color:var(--navy-700)}
.card:hover{border-color:var(--navy)}
.member-card:hover{border-color:var(--navy)}
.text-link{color:var(--navy)}
.text-link:hover{color:var(--navy-700)}

/* The big "Governance in practice" slab: navy, not gold. */
.gold-panel{background:var(--navy);color:#fff}
.gold-panel h2{color:#fff}
.gold-panel .gold-fact b{color:#fff}
.gold-panel .gold-fact-label,.gold-panel .gold-fact span.gold-fact-label{background:#fff;color:var(--navy)}
.gold-panel .gold-fact span{color:rgba(255,255,255,.78)}
.gold-panel-wrap::after{color:#fff;opacity:.12}

/* Tags: white-on-navy inside navy panels, navy-tint elsewhere. */
.card .tag{color:var(--navy);background:var(--navy-tint)}
.feature-split .feature-panel .tag{background:#fff;color:var(--navy)}
.feature-split .feature-panel .text-link{color:#fff}
.feature-split .feature-panel .text-link:hover{color:rgba(255,255,255,.75)}

/* Record rule and member role label were gold. */
.record{border-left-color:var(--navy)}
.member-card__role{color:var(--navy)}
.eyebrow,.section-head .eyebrow{color:var(--navy)}
.hero-copy .eyebrow .dot{background:var(--navy)}
.hero-copy h1 em{color:var(--navy);font-style:italic}

/* Two-tone headline needs a second blue, or "accountability." disappears into
   the rest of the line. Mid blue reads 4.6:1 on the glass card. */
:root{--navy-mid:#2f6fa0}
.hero-copy h1 em{color:var(--navy-mid);font-style:italic}
.section-head h2::after{background:var(--navy-mid)}
.member-card__role{color:var(--navy-mid)}

/* Hero slider controls were the last gold in the chrome. */
.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--navy);color:#fff;border-color:#fff}
.hero-dots button.is-active{background:#fff;transform:scaleY(1.4)}

/* Dee's panel stamps a decorative "#1" (Schaumburg's "#1 in Illinois").
   A police board does not rank itself; remove it rather than restyle it. */
.gold-panel-wrap::after{content:none}

/* Active-menu underline and the Newsletter button were still Dee's gold. */
.nav-primary a[aria-current="page"]{color:var(--navy);background:var(--navy-tint);border-bottom-color:var(--navy)}
.nav-drawer a[aria-current="page"]{color:var(--navy);background:var(--navy-tint)}
.family-bar nav a[aria-current]{border-bottom-color:#fff}
.mm-item[aria-current="page"]{box-shadow:inset 5px 0 0 var(--navy)}
.mm-sec a[aria-current="true"]{color:var(--navy)}

/* Newsletter button in the header: solid Board blue. */
.nav-primary .btn,.nav-primary .btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.nav-primary .btn:hover,.nav-primary .btn-navy:hover,.nav-primary .btn:focus-visible{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.mm-cta{background:var(--navy);color:#fff;border-color:var(--navy)}
.mm-cta:hover{background:var(--navy-700);color:#fff}

/* --- Kill gold at the token, not rule by rule ----------------------------
   I patched the active-menu underline, then the hover underline turned out
   to be a separate rule. Rather than chase each one, repoint Dee's gold
   tokens at the Board's blues so ANY gold rule I haven't found renders blue.
   The notice bar keeps its amber because it uses literal hex, not tokens. */
:root{
  --gold:#163d5d;
  --gold-700:#102e46;
  --gold-tint:rgba(22,61,93,.10);
  --crest-gold:#2f6fa0;
}
/* Gold was also used as a LIGHT foreground on dark grounds; those need white
   now that the token is dark, or they'd be navy on navy. */
.gold-panel .gold-fact-label,.gold-panel .gold-fact span.gold-fact-label{background:#fff;color:var(--navy)}
.feature-split .feature-panel .tag{background:#fff;color:var(--navy)}
.feature-split .feature-panel .text-link{color:#fff}
.footer-legal a:hover,.site-footer a:hover{color:#fff}
.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--navy);color:#fff;border-color:#fff}
.hero-dots button.is-active{background:#fff}
.btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .text-link,.cta-band a:hover{color:#fff}

/* --- Logo fix ------------------------------------------------------------
   site-logo.png is a 350x72 horizontal lockup (crest + wordmark + "Excellence
   in Governance"), white-on-transparent. It was being forced into a 46x46
   square, which crushed it, and then sat on a navy plate to stay visible
   while the name was repeated beside it. Now: the crest alone (colour, reads
   on white) in the header, and the full white lockup in the navy footer. */
.brand img,.mm-top img{background:none;border-radius:0;padding:0}
.brand img{width:46px;height:46px;object-fit:contain}
.mm-crest{width:32px;height:32px;object-fit:contain}
.footer-brand .footer-lockup{width:auto;height:46px;max-width:100%;background:none;border-radius:0;padding:0}
.footer-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-brand div span{display:block;max-width:44ch}
@media (max-width:640px){.footer-brand .footer-lockup{height:38px}}

/* --- Restored archive UI + footer sign-in --------------------------------
   The filter form, record list and pager markup came back from the pre-Dee
   build; these style it on the Dee surface. */
.filter-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:26px;box-shadow:var(--shadow)}
.filter-controls{display:grid;grid-template-columns:minmax(220px,2fr) repeat(auto-fit,minmax(150px,1fr));gap:16px;align-items:end}
.filter-controls .field{min-width:0}
.filter-controls label{display:block;font-weight:600;color:var(--ink);font-size:14px;margin-bottom:6px}
.filter-controls input[type=search],.filter-controls select{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;font:inherit;color:var(--ink)}
.filter-controls .field-actions{display:flex;gap:10px;flex-wrap:wrap}
.filter-controls .field-actions .btn{min-height:46px}
.filter-form .hint{margin:12px 0 0;color:var(--muted);font-size:14px}
.results-heading{font-size:22px;margin:0 0 4px}
[data-results-status]{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.record-actions{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.record-actions .btn-sm{min-height:40px}
.text-link.is-ext::after{content:"\2197";margin-left:5px;font-weight:700;text-decoration:none;display:inline-block}
.note{background:var(--navy-tint);border-left:3px solid var(--navy);padding:14px 16px;border-radius:var(--radius-sm);font-size:15px;color:var(--body);margin-bottom:22px}
.pager{display:flex;align-items:center;gap:14px;margin-top:22px}
.member-card .record-actions{margin-top:10px}

/* Sign-in sits in the footer legal row, visually separated so staff can find
   it without it competing with public links. */
.footer-signin{font-weight:700;border-left:1px solid rgba(255,255,255,.28);padding-left:14px;margin-left:4px}
.footer-social{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;margin-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.footer-social-label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.75}
@media (max-width:640px){.filter-controls{grid-template-columns:1fr}.footer-signin{border-left:0;padding-left:0;margin-left:0}}

/* Dee's .btn is white-space:nowrap, so the restored long-label buttons
   ("Ask the Board about an accessible format", "Open the September 24 agenda
   (PDF)") ran past the viewport on phones. Let them wrap and fill the row. */
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;padding:10px 16px;line-height:1.25}
  .btn-row{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .btn-row .btn{width:100%}
  .record-actions{gap:10px}
  .pager{flex-wrap:wrap}
}

/* Dee's .footer-social a is a fixed 36px square built for icon glyphs; our
   text labels ("YouTube", "Facebook") overflowed it by 9px on 360px phones. */
.footer-social a{width:auto;height:auto;min-height:36px;padding:6px 12px;border-radius:2px;display:inline-flex;align-items:center;white-space:nowrap}

/* Dee names this .visually-hidden; the markup restored from the pre-Dee build
   uses .sr-only, so its screen-reader text was rendering on the page
   ("...(opens the official website in a new tab)"). Alias it. */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* =========================================================================
   VERSION 2 — circles & arcs (GPT spec, gpt/round2/V2-BUILD-SPEC.md)
   Governing rule: never put text on the element being clipped. The curve
   lives on a wrapper or a pseudo-element; the copy stays in a rectangular
   inner box. Mapped onto this site's existing tokens — no parallel palette.
   ========================================================================= */
.shape-section{position:relative;isolation:isolate}
.shape-section > *{position:relative;z-index:1}
.shape-grid > *,.glance__grid > *,.updates-grid > *{min-width:0}
.shape-grid p,.shape-grid h1,.shape-grid h2,.shape-grid h3{overflow-wrap:break-word}


/* --- 2. Boardroom band: asymmetric radius on the photo, decorative circle
       behind the copy. Both are pure decoration, never text carriers. --- */
.boardroom{overflow:hidden;padding-block:var(--section);background:var(--paper)}
.boardroom__grid{display:grid;grid-template-columns:55% 45%;align-items:center}
.boardroom__photo-wrap{position:relative;z-index:2}
.boardroom__photo{width:100%;height:420px;object-fit:cover;
  border-radius:0 52% 52% 0 / 0 50% 50% 0}
.boardroom__copy{position:relative;z-index:1;padding:48px 60px 48px 64px;
  min-height:390px;display:flex;flex-direction:column;justify-content:center}
.boardroom__copy::after{content:"";position:absolute;z-index:-1;width:430px;height:430px;
  border-radius:50%;background:rgba(47,111,160,.10);right:-220px;top:50%;
  transform:translateY(-50%);pointer-events:none}
.boardroom__copy > *{max-width:520px}
@media (max-width:980px){
  .boardroom__grid{grid-template-columns:50% 50%}
  .boardroom__photo{height:370px;border-radius:0 46% 46% 0 / 0 50% 50% 0}
  .boardroom__copy{padding:36px 34px 36px 40px}
  .boardroom__copy::after{width:330px;height:330px;right:-190px}
}
@media (max-width:680px){
  .boardroom{padding-block:0 var(--section)}
  .boardroom__grid{display:block}
  .boardroom__photo{height:250px;border-radius:0}
  .boardroom__copy{min-height:0;padding:28px 0 0}
  .boardroom__copy::after{display:none}
}

/* --- 3. At a glance: two huge background arcs, a real navy circle, and a
       column of pill links. Text is capped at 64% of the orb diameter. --- */
.glance{position:relative;overflow:hidden;padding-block:var(--section);background:var(--bg-panel)}
.glance::before,.glance::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.glance::before{width:560px;height:560px;background:rgba(47,111,160,.08);left:-300px;top:80px}
.glance::after{width:490px;height:490px;background:rgba(47,111,160,.13);right:-290px;top:-150px}
.glance__header{margin-bottom:34px;text-align:center}
.glance__header h2{margin:0 auto;font-family:var(--font-display);font-weight:600}
.glance__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.18fr) minmax(280px,.92fr);
  gap:28px;align-items:center}
.meeting-card{background:var(--paper);border:1px solid var(--line);border-radius:34px;
  padding:34px;box-shadow:0 14px 32px rgba(22,61,93,.09)}
.meeting-card h3{font-family:var(--font-display);font-weight:600;font-size:27px;line-height:1.15}
.governance-orb{width:100%;max-width:450px;aspect-ratio:1;margin-inline:auto;
  background:var(--navy);border-radius:50%;color:#fff;display:grid;place-items:center;
  box-shadow:0 20px 45px rgba(22,61,93,.16)}
.governance-orb__inner{width:64%;margin-inline:auto}
.governance-orb h3{color:#fff;font-family:var(--font-display);font-weight:600;font-size:28px;
  line-height:1.1;margin:0 0 18px}
.gov-item + .gov-item{margin-top:20px}
.gov-item strong{display:block;font-size:15px;color:#fff;margin-bottom:4px}
.gov-item .gov-tag{display:inline-block;background:#fff;color:var(--navy);font-size:11.5px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:2px}
.gov-item p{font-size:13px;color:rgba(255,255,255,.78);margin:6px 0 0;max-width:none}
.glance-links{display:grid;gap:12px}
.glance-link{min-height:72px;display:grid;grid-template-columns:48px minmax(0,1fr) 26px;
  gap:14px;align-items:center;padding:10px 18px 10px 10px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;color:var(--navy);text-decoration:none;
  box-shadow:0 8px 22px rgba(22,61,93,.07);transition:transform .15s ease,box-shadow .15s ease}
.glance-link:hover,.glance-link:focus-visible{transform:translateX(3px);box-shadow:0 10px 26px rgba(22,61,93,.14)}
.glance-link img{width:48px;height:48px;object-fit:cover;border-radius:50%;background:var(--bg-panel)}
.glance-link strong{display:block;font-size:15px;color:var(--ink)}
.glance-link small{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.glance-link__arrow{justify-self:end;color:var(--navy);font-weight:700}
@media (max-width:980px){
  .glance__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .meeting-card{grid-column:1;grid-row:1}
  .glance-links{grid-column:2;grid-row:1}
  .governance-orb{grid-column:1 / -1;grid-row:2;width:410px;margin-top:16px}
}
@media (max-width:680px){
  .glance::before,.glance::after{display:none}
  .glance__grid{grid-template-columns:1fr;gap:20px}
  .meeting-card,.governance-orb,.glance-links{grid-column:auto;grid-row:auto}
  .meeting-card{padding:24px;border-radius:18px}
  .governance-orb{width:100%;max-width:none;aspect-ratio:auto;border-radius:18px;
    display:block;padding:28px 24px}
  .governance-orb__inner{width:100%}
  .glance-link{min-height:68px;border-radius:12px;grid-template-columns:44px minmax(0,1fr) 24px}
  .glance-link img{width:44px;height:44px}
}

/* --- 4. Reports band on an oversized ellipse. --- */
.reports-band{position:relative;padding-block:var(--section);overflow:hidden}
.reports-band::before{content:"";position:absolute;z-index:-1;left:-7%;width:114%;
  top:18px;height:calc(100% - 36px);background:var(--bg-panel);border-radius:50% / 20%}
@media (max-width:980px){.reports-band::before{left:-14%;width:128%;border-radius:50% / 13%}}
@media (max-width:680px){
  .reports-band{background:var(--bg-panel)}
  .reports-band::before{display:none}
}

/* --- 5. News + newsletter, asymmetric grid; the panel carries the lobe. --- */
.updates-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(320px,.88fr);
  gap:32px;align-items:stretch}
.newsletter-panel{position:relative;overflow:hidden;background:var(--bg-panel);
  padding:40px 40px 44px 44px;
  border-radius:78px 78px 78px 180px / 72px 72px 72px 118px}
.newsletter-panel::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;
  right:-78px;bottom:-88px;background:rgba(47,111,160,.10);pointer-events:none}
.newsletter-panel > *{position:relative;z-index:1}
.newsletter-panel .form-grid{grid-template-columns:1fr;max-width:none;margin-top:14px}
@media (max-width:980px){
  .updates-grid{grid-template-columns:1fr}
  .newsletter-panel{max-width:720px;border-radius:58px 58px 58px 110px / 58px 58px 58px 82px}
}
@media (max-width:680px){
  .newsletter-panel{padding:26px 22px;border-radius:18px}
  .newsletter-panel::after{display:none}
}

/* --- 6. Closing band: clip-path on the PHOTO ONLY, copy clear of it. --- */
.concern-band{position:relative;min-height:285px;overflow:hidden;background:var(--navy);color:#fff}
.concern-band__photo{position:absolute;left:0;top:0;bottom:0;width:40%;
  clip-path:ellipse(110% 100% at 0% 50%)}
.concern-band__photo img{width:100%;height:100%;object-fit:cover}
.concern-band__inner{min-height:285px;display:flex;align-items:center}
.concern-band__copy{width:58%;margin-left:42%;padding:44px 0 44px 54px}
.concern-band h2{color:#fff;font-family:var(--font-display);font-weight:600}
.concern-band p{color:rgba(255,255,255,.85)}
@media (max-width:980px){
  .concern-band__photo{width:43%;clip-path:ellipse(118% 100% at 0% 50%)}
  .concern-band__copy{width:55%;margin-left:45%;padding-left:36px}
}
@media (max-width:680px){
  .concern-band{min-height:0}
  .concern-band__photo{position:relative;width:100%;height:190px;clip-path:none}
  .concern-band__inner{min-height:0;display:block}
  .concern-band__copy{width:100%;margin:0;padding:30px 0 34px}
}

/* One focus ring that reads on white AND on navy. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--navy)}
.hero-copy :focus-visible,.meeting-card :focus-visible,.glance-link:focus-visible{
  outline-color:var(--navy);box-shadow:0 0 0 6px rgba(255,255,255,.9)}


/* At ~1024 the three-column grid left the orb a 360px column while its copy
   needed 430px, so the "circle" rendered as a 360x430 ellipse. The three-up
   layout now only applies once the middle column can actually hold a circle;
   below that it falls to the two-up + orb-underneath arrangement. */
@media (max-width:1100px){
  .glance__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .meeting-card{grid-column:1;grid-row:1}
  .glance-links{grid-column:2;grid-row:1}
  .governance-orb{grid-column:1 / -1;grid-row:2;width:410px;margin-top:16px}
}
@media (max-width:680px){
  .glance__grid{grid-template-columns:1fr}
  .meeting-card,.governance-orb,.glance-links{grid-column:auto;grid-row:auto}
  .governance-orb{width:100%}
}


/* .head-row went out with the reverted GPT block but the markup still uses it,
   so "View all reports" / "View all news" fell under the heading. */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:24px}
.head-row .section-head{margin-bottom:0}
.head-row .text-link{padding-bottom:4px;white-space:nowrap}
@media (max-width:640px){.head-row{display:block}.head-row .text-link{display:inline-block;margin-top:12px}}


/* Measured, not eyeballed: the orb content box is 274x358, a 450px diagonal,
   inside a 428px circle — the corners of the text block were poking outside
   the curve by 23px. A centred box only fits a circle when its DIAGONAL is
   <= the diameter, so the orb grows past 450. */
.governance-orb{max-width:500px}
@media (max-width:1100px){.governance-orb{width:460px;max-width:100%}}


/* max-width:500px was inert because the middle GRID COLUMN capped the orb at
   428px. Widen the column so the circle can actually reach a diameter that
   clears the 450px content diagonal, with headroom. */
.glance__grid{grid-template-columns:minmax(0,.92fr) minmax(470px,1.3fr) minmax(280px,.92fr)}
.governance-orb{max-width:520px}
@media (max-width:1100px){.governance-orb{width:490px;max-width:100%}}
@media (max-width:680px){.governance-orb{width:100%}}

/* ORDERING FIX: the unqualified .glance__grid rule above was appended after
   the media queries, so it beat them and the 3-column desktop grid was
   applying at 375px (measured: "0px 470px 280px" in a 335px container).
   Responsive rules must come last. */
@media (max-width:1100px){
  .glance__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .meeting-card{grid-column:1;grid-row:1}
  .glance-links{grid-column:2;grid-row:1}
  .governance-orb{grid-column:1 / -1;grid-row:2;width:490px;max-width:100%;margin-top:16px}
}
@media (max-width:680px){
  .glance__grid{grid-template-columns:1fr;gap:20px}
  .meeting-card,.governance-orb,.glance-links{grid-column:auto;grid-row:auto}
  .governance-orb{width:100%;max-width:none;aspect-ratio:auto;border-radius:18px;
    display:block;padding:28px 24px;margin-top:0}
  .governance-orb__inner{width:100%}
}

/* kept from the V2 corrections block: the orb must not be stretched by the grid */
.governance-orb{align-self:center;justify-self:center;height:auto}
@media (max-width:680px){.governance-orb{align-self:stretch;justify-self:stretch}}

/* HERO REVERTED (Prince, 2026-09-25): back to the pre-Version-2 slider hero —
   frosted glass card, half height, no curved lobe. The rest of Version 2
   (boardroom arc, orb, pill cards, curved newsletter, clipped closing band)
   is untouched. */
.hero{position:relative;height:auto;min-height:330px;display:flex;align-items:center;overflow:hidden}
.hero .hero-inner{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding-block:30px 46px}
.hero .hero-grid{display:block;height:auto;width:100%}
.hero .hero-copy{position:relative;margin:0;max-width:600px;padding:22px 26px;
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.55);border-radius:6px;
  box-shadow:0 26px 56px -20px rgba(9,20,34,.5)}
.hero .hero-copy::before{content:none}
.hero .hero-copy > *{max-width:none}
.hero-copy .eyebrow{position:relative;padding-bottom:0;margin-bottom:8px}
.hero-copy .eyebrow::after{content:none}
.hero-copy .eyebrow .dot{display:inline-block;background:var(--navy)}
@media (max-width:900px){
  .hero{min-height:280px}
  .hero .hero-inner{padding-block:22px 26px}
  .hero .hero-copy{max-width:none;padding:18px 20px}
}
@media (max-width:680px){
  .hero{overflow:hidden}
  .hero-media{position:absolute;inset:0;height:auto;overflow:hidden}
  .hero-media img{height:100%}
}

/* Measured: computed inset was "-100px 0px 100px". Dee's original
   `.hero-copy{position:absolute;bottom:100px}` still applied its offsets, and
   with position:relative that `bottom:100px` shifted the panel 100px UP and
   out of the hero. Reset the offsets, don't just change position. */
.hero .hero-copy{inset:auto;top:auto;right:auto;bottom:auto;left:auto}

/* The hero panel was flush at x=0 while every other section starts at the
   container edge (130px at 1440, 203px at 1586, 370px at 1920) — measured.
   .hero-inner carries the .container class, but the revert's width:100%
   overrode it. Restore the container so the hero lines up with the theme. */
.hero .hero-inner{width:min(var(--max), 100% - 2 * var(--gutter));margin-inline:auto;padding-inline:0}
@media (max-width:680px){
  .hero .hero-inner{width:100%;margin-inline:0}
  .hero .hero-copy{padding-inline:var(--gutter)}
}

/* =========================================================================
   ABOUT PAGE — Version 2 (GPT, gpt/about/halton-about-v2.png)
   Curved hero panel, mission band with an elliptical photo edge, and the
   nine Peelian Principles as a numbered vertical spine.
   ========================================================================= */

/* --- Curved page hero: white panel left, photo right. --- */
.about-hero{position:relative;overflow:hidden;background:var(--bg-panel)}
.about-hero__grid{display:grid;grid-template-columns:58% 42%;align-items:stretch;min-height:300px}
.about-hero__panel{background:var(--paper);padding:44px 56px 48px 0;
  border-radius:0 90px 90px 0 / 0 70px 70px 0;position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center}
.about-hero__panel h1{margin:8px 0 14px}
.about-hero__panel .lead{max-width:56ch;margin:0}
.about-hero__photo{position:relative}
.about-hero__photo img{width:100%;height:100%;object-fit:cover;min-height:300px}
@media (max-width:900px){
  .about-hero__grid{grid-template-columns:1fr;min-height:0}
  .about-hero__panel{border-radius:0;padding:28px 0 26px;order:2}
  .about-hero__photo{order:1}
  .about-hero__photo img{height:200px;min-height:0}
}

/* --- Mission band: navy copy left, photo right with a curved left edge. --- */
.mission-band{background:var(--navy);color:#fff;border-radius:var(--radius);overflow:hidden;
  display:grid;grid-template-columns:47% 53%;align-items:stretch}
.mission-band__copy{padding:44px 44px 46px 48px;display:flex;flex-direction:column;justify-content:center}
.mission-band__copy h2{color:#fff;font-family:var(--font-display);font-weight:600;font-size:30px;
  line-height:1.15;margin:14px 0 12px}
.mission-band__copy p{color:rgba(255,255,255,.84);margin-bottom:22px}
.mission-band__copy .tag{background:#fff;color:var(--navy);align-self:flex-start}
.mission-band__photo{position:relative}
.mission-band__photo img{width:100%;height:100%;object-fit:cover;min-height:340px;
  border-radius:44% 0 0 44% / 50% 0 0 50%}
@media (max-width:900px){
  .mission-band{grid-template-columns:1fr}
  .mission-band__photo{order:-1}
  .mission-band__photo img{min-height:220px;border-radius:0}
  .mission-band__copy{padding:28px 24px 32px}
}

/* --- Peelian Principles: numbered spine, cards alternating either side. --- */
.principles-band{position:relative;overflow:hidden;background:var(--bg-panel);padding-block:var(--section)}
.principles-band::before,.principles-band::after{content:"";position:absolute;border-radius:50%;
  background:rgba(47,111,160,.09);pointer-events:none;z-index:0}
.principles-band::before{width:520px;height:520px;left:-280px;top:90px}
.principles-band::after{width:420px;height:420px;right:-240px;bottom:-60px}
.principles-band > .container{position:relative;z-index:1}
.principles-layout{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:40px;align-items:start}
.principles-title h2{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1.1;margin:0}
.principles-title .eyebrow{display:block;margin-bottom:8px}

/* The spine itself: one vertical rule with numbered nodes sitting on it. */
.spine{position:relative;list-style:none;margin:0;padding:0;max-width:none}
.spine::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:2px;
  background:var(--line-strong);transform:translateX(-50%)}
.spine li{position:relative;margin:0 0 18px;min-height:56px;display:grid;
  grid-template-columns:1fr 56px 1fr;align-items:center;gap:0}
.spine li:last-child{margin-bottom:0}
.spine__num{grid-column:2;justify-self:center;width:36px;height:36px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:14px;font-weight:700;display:grid;place-items:center;
  position:relative;z-index:2;box-shadow:0 0 0 6px var(--bg-panel)}
.spine__card{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;font-size:15.5px;color:var(--body);box-shadow:0 8px 20px rgba(22,61,93,.07)}
.spine li:nth-child(odd) .spine__card{grid-column:1;margin-right:22px;text-align:right}
.spine li:nth-child(even) .spine__card{grid-column:3;margin-left:22px}
.principles-band .record-actions{justify-content:center;margin-top:26px}

@media (max-width:900px){
  .principles-layout{grid-template-columns:1fr;gap:24px}
  .principles-band::before,.principles-band::after{display:none}
  /* An alternating spine cannot survive a narrow column — collapse it to a
     single left-hand rail with every card on one side. */
  .spine::before{left:18px;transform:none}
  .spine li{grid-template-columns:36px minmax(0,1fr);gap:16px;min-height:0;margin-bottom:14px}
  .spine__num{grid-column:1;justify-self:start}
  .spine li:nth-child(odd) .spine__card,
  .spine li:nth-child(even) .spine__card{grid-column:2;margin:0;text-align:left}
  .principles-band .record-actions{justify-content:flex-start}
}

/* --- Role cards with a numbered circular well (typographic, not an icon). --- */
.role-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start}
.role-card__well{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:700;letter-spacing:.02em}
.role-card h3{margin:0 0 6px}

/* --- Closing band, rounded like the mockup. --- */
.about-cta{background:var(--navy);color:#fff;border-radius:60px;padding:30px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.about-cta h2{color:#fff;font-family:var(--font-display);font-weight:600;font-size:27px;margin:0 0 4px}
.about-cta p{color:rgba(255,255,255,.82);margin:0}
@media (max-width:900px){.about-cta{border-radius:24px;padding:26px 24px;display:block}
  .about-cta .btn-row{margin-top:18px}}

/* =========================================================================
   MEETINGS PAGE — Version 3 (gpt/meetings/halton-meetings-v3.png)
   Split header, pill filter card, and the records as an alternating
   timeline with circular date medallions on a curved spine.
   ========================================================================= */

/* --- Split header: rounded white panel + navy "Attend a meeting" card. --- */
.meet-head{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:stretch}
.meet-head__main{background:var(--paper);border:1px solid var(--line);border-radius:26px;
  padding:34px 38px 36px;box-shadow:0 12px 30px rgba(22,61,93,.08)}
.meet-head__main h2{font-family:var(--font-display);font-weight:600;font-size:30px;margin:6px 0 12px}
.meet-attend{background:var(--navy);color:#fff;border-radius:26px 26px 26px 0;padding:30px 30px 32px}
.meet-attend h2{color:#fff;font-family:var(--font-display);font-weight:600;font-size:29px;
  line-height:1.1;margin:0 0 20px}
.meet-attend .gold-fact{margin-bottom:16px}
.meet-attend .gold-fact:last-child{margin-bottom:0}
@media (max-width:900px){
  .meet-head{grid-template-columns:1fr}
  .meet-head__main,.meet-attend{border-radius:18px;padding:26px 22px}
}

/* --- Filter card as a wide rounded panel. --- */
#meeting-records .filter-form{border-radius:26px;padding:26px 30px}
@media (max-width:900px){#meeting-records .filter-form{border-radius:18px;padding:22px}}

/* --- Alternating timeline. The spine is a centred rule; each record sits on
       one side with a circular date medallion and a node dot on the rule.
       A true serpentine SVG path cannot track variable card heights, so the
       curve is made from the medallion + a quarter-round connector instead. */
.timeline{position:relative;list-style:none;margin:0;padding:0;max-width:none}
.timeline::before{content:"";position:absolute;left:50%;top:30px;bottom:30px;width:2px;
  background:var(--line-strong);transform:translateX(-50%)}
.timeline > li{position:relative;display:grid;grid-template-columns:1fr 34px 1fr;
  align-items:center;margin:0 0 22px}
.timeline > li:last-child{margin-bottom:0}
.timeline__dot{grid-column:2;justify-self:center;width:11px;height:11px;border-radius:50%;
  background:var(--navy);position:relative;z-index:2;box-shadow:0 0 0 5px var(--bg-panel)}
.meet-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:18px 22px;
  box-shadow:0 10px 26px rgba(22,61,93,.08)}
.timeline > li:nth-child(odd) .meet-card{grid-column:1;margin-right:26px}
.timeline > li:nth-child(even) .meet-card{grid-column:3;margin-left:26px}
/* Curved connector from the card toward the spine. */
.timeline > li .meet-card::after{content:"";position:absolute;top:50%;width:26px;height:26px;
  border:2px solid var(--line-strong);border-radius:50%;border-left-color:transparent;
  border-bottom-color:transparent;pointer-events:none;opacity:.55}
.timeline > li:nth-child(odd) .meet-card::after{right:calc(50% - 13px);transform:translateY(-50%) rotate(45deg)}
.timeline > li:nth-child(even) .meet-card::after{left:calc(50% - 13px);transform:translateY(-50%) rotate(-135deg)}

.meet-medallion{width:92px;height:92px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-content:center;text-align:center;line-height:1.05;padding:6px}
.meet-medallion .m-mon{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.meet-medallion .m-day{display:block;font-size:30px;font-weight:700;font-family:var(--font-display)}
.meet-medallion .m-yr{display:block;font-size:11.5px;opacity:.78;letter-spacing:.06em}
.meet-card__body h3{font-size:16px;margin:0 0 4px}
.meet-card__body .record-meta{margin:0 0 6px;font-size:14px;color:var(--muted)}
.meet-card__body p{font-size:15px;margin:0 0 8px}
.meet-card__body .record-actions{margin:8px 0 0}

/* Background arcs for the records band. */
.records-band{position:relative;overflow:hidden;background:var(--bg-panel);padding-block:var(--section)}
.records-band::before,.records-band::after{content:"";position:absolute;border-radius:50%;
  background:rgba(47,111,160,.09);pointer-events:none;z-index:0}
.records-band::before{width:560px;height:560px;left:-300px;top:120px}
.records-band::after{width:460px;height:460px;right:-260px;bottom:-80px}
.records-band > .container{position:relative;z-index:1}

/* Phone/tablet: an alternating timeline cannot survive a narrow column, so it
   becomes one left rail with every card on the same side. */
@media (max-width:900px){
  .records-band::before,.records-band::after{display:none}
  .timeline::before{left:16px;transform:none}
  .timeline > li{grid-template-columns:34px minmax(0,1fr);gap:0}
  .timeline__dot{grid-column:1;justify-self:center}
  .timeline > li:nth-child(odd) .meet-card,
  .timeline > li:nth-child(even) .meet-card{grid-column:2;margin:0 0 0 12px}
  .timeline > li .meet-card::after{display:none}
  .meet-card{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px 18px;border-radius:16px}
  .meet-medallion{width:72px;height:72px}
  .meet-medallion .m-day{font-size:24px}
}
@media (max-width:480px){
  .meet-card{grid-template-columns:1fr;gap:12px}
  .meet-medallion{width:64px;height:64px}
}

/* The archive script re-appends [data-record] into [data-record-list], which
   tore each .meet-card out of its <li>. The hook now lives on the <li>, so
   the dot and card move together and the alternation survives sorting. */
.timeline > li.tl-item{background:none;border:0;box-shadow:none;padding:0}

/* .meet-attend is not a .gold-panel, so the fact labels inherited nothing and
   ran together as inline text ("in personCommunity Room— Halton Police..."). */
.meet-attend .gold-fact b{display:block;font-size:17px;font-weight:700;color:#fff;margin-bottom:6px}
.meet-attend .gold-fact-label{display:inline-block;background:#fff;color:var(--navy);
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;margin-bottom:6px}
.meet-attend .gold-fact span:not(.gold-fact-label){display:block;font-size:13px;
  color:rgba(255,255,255,.78);margin-top:2px}
.meet-attend .text-link{color:#fff}
.meet-attend .text-link:hover{color:rgba(255,255,255,.78)}

/* Spacing inside the header panel: the "Next listed meeting" eyebrow was
   colliding with the lead paragraph above it. */
.meet-head__main .lead{margin-bottom:22px}
.meet-head__main .eyebrow + h1{margin-top:6px}
.meet-head__main h1 + .lead + .eyebrow{display:block;padding-top:18px;border-top:1px solid var(--line)}

/* Measured: on odd rows the dot sat 80–110px above its card's centre while
   even rows were exact. Rather than rely on grid cross-axis centring across
   two differently-sized columns, pin the dot to the row's true vertical
   middle on the spine. Deterministic at any card height. */
@media (min-width:901px){
  .timeline > li{align-items:start}
  .timeline__dot{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);grid-column:auto;justify-self:auto}
}

/* =========================================================================
   REPORTS PAGE — Version 1 (gpt/reports/halton-reports-v1.png)
   Curved pale panel holding the filter card, then an asymmetric result grid:
   one tall featured report left, two stacked right. Navy corner wedge on
   every card. Only three records exist, so the grid must fill the width.
   ========================================================================= */
.reports-page{position:relative;overflow:hidden}
.reports-page::before,.reports-page::after{content:"";position:absolute;border-radius:50%;
  background:rgba(47,111,160,.07);pointer-events:none;z-index:0}
.reports-page::before{width:620px;height:620px;right:-260px;top:-120px}
.reports-page::after{width:520px;height:520px;right:-180px;bottom:120px}
.reports-page > *{position:relative;z-index:1}

/* Curved pale panel that carries the heading, the provenance note and the
   filter card. The filter card sits on white inside it. */
.reports-panel{background:var(--bg-panel);border-radius:60px 60px 60px 0 / 48px 48px 48px 0;
  padding:38px 44px 44px;margin-bottom:34px}
.reports-panel .section-head{margin-bottom:18px}
.reports-panel .note{max-width:70ch}
.reports-panel .filter-form{border-radius:34px;margin-bottom:0;box-shadow:0 14px 34px rgba(22,61,93,.10)}
@media (max-width:900px){
  .reports-panel{border-radius:24px;padding:26px 22px 28px}
  .reports-panel .filter-form{border-radius:18px}
}

/* Asymmetric results grid: featured card spans both rows on the left. */
.report-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:22px;align-items:stretch}
.report-grid > :first-child{grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){
  .report-grid{grid-template-columns:1fr}
  .report-grid > :first-child{grid-row:auto}
}

/* Card with a navy corner wedge at the top-left. The wedge is a quarter
   circle drawn by a pseudo-element, clipped by the card's own overflow. */
.report-card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  border-radius:22px;padding:30px 32px 30px 34px;box-shadow:0 10px 26px rgba(22,61,93,.08)}
.report-card::before{content:"";position:absolute;left:-42px;top:-42px;width:84px;height:84px;
  border-radius:50%;background:var(--navy);pointer-events:none}
.report-card h3{font-family:var(--font-display);font-weight:600;font-size:24px;margin:0 0 8px}
.report-card .record-meta{color:var(--muted);font-size:14.5px;margin:0 0 12px}
.report-card p{margin:0 0 14px}
.report-card .record-actions{margin:auto 0 0}
.report-grid > :first-child h3{font-size:28px}
@media (max-width:900px){
  .report-card{padding:24px 24px 24px 26px;border-radius:16px}
  .report-card::before{left:-34px;top:-34px;width:68px;height:68px}
}

/* Accessibility closing band on its own pale ground. */
.access-band{background:var(--bg-panel);padding-block:var(--section);position:relative;overflow:hidden}
.access-band::after{content:"";position:absolute;width:540px;height:540px;border-radius:50%;
  background:rgba(47,111,160,.08);right:-250px;top:-140px;pointer-events:none}
.access-band > .container{position:relative;z-index:1}

/* Reports V1 corrections, all measured rather than eyeballed:
   1. The featured card computed align-items:center, so its heading and copy
      were centred while the other two were left-aligned (h3 sat 40px right
      of its own meta line).
   2. .record-actions{margin:auto 0 0} pushed the link to the bottom of a
      591px card, leaving a 339px void between the copy and the link.
   3. The wedge was an 84px circle offset -42/-42, which the card's 22px
      radius + overflow:hidden clipped into a leaf instead of a corner fill. */
.report-grid > :first-child{align-items:stretch}
.report-grid > :first-child .record-actions{margin-top:18px;margin-bottom:0}
.report-card .record-actions{margin-top:auto}
.report-grid > :first-child > *{width:100%}

.report-card::before{left:0;top:0;width:58px;height:58px;
  border-radius:22px 0 100% 0;background:var(--navy)}
@media (max-width:900px){.report-card::before{width:46px;height:46px;border-radius:16px 0 100% 0}}

/* Keep the copy clear of the wedge. */
.report-card h3{padding-left:34px}
@media (max-width:900px){.report-card h3{padding-left:26px}}

/* Indenting only the h3 to dodge the wedge left it 34px out of line with its
   own meta row. Clear the wedge with card top-padding instead, so every line
   in the card shares one left edge. */
.report-card h3{padding-left:0}
.report-card{padding-top:58px}
.report-card::before{width:48px;height:48px;border-radius:22px 0 100% 0}
@media (max-width:900px){
  .report-card{padding-top:48px}
  .report-card::before{width:40px;height:40px;border-radius:16px 0 100% 0}
}

/* Root cause of the stray centred lines: .report-card inherits a flex column
   with align-items:center, so SHORT lines (a 239px meta in a 728px card)
   shrink-wrapped and centred while long ones filled the width and looked
   left-aligned. Stretch every card's children, not just the featured one. */
.report-card{align-items:stretch}
.report-card > *{width:100%}

/* =========================================================================
   BY-LAWS & POLICIES — same card language as Reports. Five records rather
   than three, so an even 3-up grid reads better than featured + stacked
   (a 1-tall + 4-stacked split leaves the right column badly unbalanced).
   ========================================================================= */
.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.policy-grid .report-card{display:flex;flex-direction:column}
.policy-grid .report-card .record-actions{margin-top:auto}
@media (max-width:1024px){.policy-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.policy-grid{grid-template-columns:1fr}}

/* Collection chip so governance / administration / by-law reads at a glance. */
.policy-chip{display:inline-block;width:auto!important;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--navy-tint);
  padding:4px 10px;border-radius:2px;margin-bottom:10px}

/* The chips rendered as full-width grey bars: in a column flex container the
   cross axis is horizontal, so align-items:stretch sizes them to the card
   width and width:auto cannot win. align-self is the lever, not width. */
.policy-chip{align-self:flex-start;width:auto!important}

/* =========================================================================
   FILE A COMPLAINT — Version 2 (gpt/complaint/halton-complaint-v2.png)
   Route cards as a decision pair joined by a node, then the intake form
   beside a navy summary panel so the reassurance stays in view while the
   person fills it in.
   ========================================================================= */
.complaint-page{position:relative;overflow:hidden}
.complaint-page::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:rgba(47,111,160,.07);right:-280px;top:-160px;pointer-events:none}
.complaint-page > *{position:relative;z-index:1}

/* Emergency notice keeps its red rule; it must read first. */
.callout.is-urgent{border-left-width:4px;border-radius:0 14px 14px 0}

/* Decision pair: two route cards with a small node between them. */
.routes{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:0}
.route-card{background:var(--paper);border:1px solid var(--line);border-radius:22px 22px 22px 0;
  padding:28px 30px 30px;box-shadow:0 12px 30px rgba(22,61,93,.09);display:flex;
  flex-direction:column;align-items:stretch;min-width:0}
.routes > .route-card:last-child{border-radius:22px 22px 0 22px}
.route-card > *{width:100%}
.route-card .eyebrow{display:block;margin-bottom:6px}
.route-card h3{font-family:var(--font-display);font-weight:600;font-size:22px;margin:0 0 10px}
.route-card p{font-size:15px;margin:0 0 18px}
.route-card .btn{align-self:flex-start;width:auto}
.routes__node{justify-self:center;width:34px;height:34px;border-radius:50%;background:var(--navy);
  color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700;position:relative}
.routes__node::before,.routes__node::after{content:"";position:absolute;top:50%;width:14px;height:1px;
  background:var(--line-strong)}
.routes__node::before{right:100%}
.routes__node::after{left:100%}
@media (max-width:900px){
  .routes{grid-template-columns:1fr;gap:18px}
  .routes__node{display:none}
  .route-card,.routes > .route-card:last-child{border-radius:16px}
}

/* Form beside a navy summary panel. */
.intake-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,.85fr);gap:28px;align-items:start}
.intake-main{background:var(--paper);border:1px solid var(--line);border-radius:26px;
  padding:32px 34px 36px;box-shadow:0 12px 30px rgba(22,61,93,.08)}
.intake-main fieldset{border:0;margin:0;padding:0}
.intake-main legend{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink);
  padding:0 0 14px}
.intake-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.intake-summary{background:var(--navy);color:#fff;border-radius:22px 22px 0 22px;padding:26px 26px 28px}
.intake-summary .eyebrow{color:#fff;opacity:.85;display:block;margin-bottom:10px}
.intake-summary h2{color:#fff;font-family:var(--font-display);font-weight:600;font-size:21px;margin:0 0 10px}
.intake-summary p{color:rgba(255,255,255,.84);font-size:15px;margin:0}
.intake-notice{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px 26px 26px}
.intake-notice h2{font-family:var(--font-display);font-weight:600;font-size:20px;margin:6px 0 10px}
.intake-notice p{font-size:14.5px;margin:0 0 16px}
.intake-notice .btn{width:100%;margin-bottom:10px;white-space:normal;line-height:1.3}
.intake-notice .btn:last-child{margin-bottom:0}
@media (max-width:980px){
  .intake-grid{grid-template-columns:1fr}
  .intake-aside{position:static}
  .intake-main{border-radius:18px;padding:26px 22px 28px}
  .intake-summary,.intake-notice{border-radius:16px}
}

/* =========================================================================
   CONTACT — Version 2 (gpt/contact/halton-contact-v2.png)
   Banded groups: office + routing pair, then the enquiry form beside a
   curved navy panel, then a three-up engage row, then two closing cards.
   ========================================================================= */
.contact-hero{position:relative;overflow:hidden}
.contact-hero__photo{position:absolute;right:0;top:0;width:44%;height:100%;
  border-radius:0 0 0 180px / 0 0 0 120px;overflow:hidden}
.contact-hero__photo img{width:100%;height:100%;object-fit:cover}
.contact-hero .container{position:relative;z-index:1}
.contact-hero .lead{max-width:46ch}
@media (max-width:900px){.contact-hero__photo{display:none}}

/* Office + routing pair. */
.reach-pair{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:stretch}
.reach-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;
  padding:30px 32px 32px;box-shadow:0 12px 30px rgba(22,61,93,.08)}
.reach-card address{font-style:normal;margin:0 0 12px;line-height:1.7}
.reach-card h2{font-family:var(--font-display);font-weight:600;font-size:23px;margin:4px 0 14px;
  padding-bottom:12px;border-bottom:2px solid var(--navy-mid);display:inline-block}
.route-panel{background:var(--navy);color:#fff;border-radius:24px 24px 0 24px;padding:30px 32px 32px}
.route-panel h2{color:#fff;font-family:var(--font-display);font-weight:600;font-size:23px;
  margin:4px 0 14px;padding-bottom:12px;border-bottom:2px solid rgba(255,255,255,.4);display:inline-block}
.route-panel p{color:rgba(255,255,255,.85)}
.route-panel .text-link{color:#fff;display:block;margin-top:10px}
.route-panel .text-link:hover{color:rgba(255,255,255,.75)}
@media (max-width:900px){
  .reach-pair{grid-template-columns:1fr}
  .reach-card,.route-panel{border-radius:16px;padding:24px 22px 26px}
}

/* Enquiry form beside a curved navy reassurance panel. */
.enquiry-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(240px,.8fr);gap:0;
  background:var(--paper);border:1px solid var(--line);border-radius:26px;overflow:hidden;
  box-shadow:0 12px 30px rgba(22,61,93,.08)}
.enquiry-main{padding:32px 34px 36px;min-width:0}
.enquiry-side{background:var(--navy);color:#fff;padding:34px 30px;display:flex;
  flex-direction:column;justify-content:center;border-radius:180px 0 0 180px / 120px 0 0 120px}
.enquiry-side h2{color:#fff;font-family:var(--font-display);font-weight:600;font-size:24px;
  line-height:1.15;margin:0 0 12px}
.enquiry-side p{color:rgba(255,255,255,.84);font-size:15px;margin:0}
@media (max-width:980px){
  .enquiry-grid{grid-template-columns:1fr;border-radius:18px}
  .enquiry-side{border-radius:0;padding:26px 24px}
  .enquiry-main{padding:26px 22px 28px}
}

/* Three-up engage row. */
.engage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.engage-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:26px 28px 28px;box-shadow:0 10px 26px rgba(22,61,93,.07);display:flex;
  flex-direction:column;align-items:stretch}
.engage-card > *{width:100%}
.engage-card h2{font-family:var(--font-display);font-weight:600;font-size:21px;margin:6px 0 10px}
.engage-card .form-grid{grid-template-columns:1fr;max-width:none;margin-top:8px}
.engage-card .record-actions{margin-top:auto}
@media (max-width:980px){.engage-row{grid-template-columns:1fr}}

/* Two closing cards. */
.closing-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.closing-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px 28px 28px}
.closing-card h2{font-family:var(--font-display);font-weight:600;font-size:21px;margin:6px 0 12px}
.access-list{list-style:none;margin:0;padding:0;max-width:none}
.access-list li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:14px;
  align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.access-list li:first-child{border-top:0}
.access-list .a-label{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.access-list .a-val{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);background:var(--navy-tint);padding:4px 10px;border-radius:2px;display:inline-block}
.access-list .a-note{grid-column:1/-1;font-size:13.5px;color:var(--muted);margin:2px 0 0}
@media (max-width:900px){.closing-pair{grid-template-columns:1fr}.access-list li{grid-template-columns:1fr}}

/* =========================================================================
   ADMIN — Board staff sign-in, MFA and dashboard.
   These pages carried their styling in inline <style> blocks, which the
   app's own CSP (style-src 'self') forbids, so they were rendering
   unstyled. Styles live here now, in the external sheet, and match the
   redesigned public theme.
   ========================================================================= */
.admin-wrap{width:min(440px,100% - 2*var(--gutter));margin:10vh auto;padding:0}
.admin-card{background:var(--paper);border:1px solid var(--line);border-radius:26px;
  padding:34px 34px 36px;box-shadow:0 18px 44px rgba(22,61,93,.12)}
.admin-card h1{font-family:var(--font-display);font-weight:600;font-size:26px;margin:0 0 6px}
.admin-card .admin-sub{color:var(--muted);font-size:15px;margin:0 0 22px}
.admin-field{margin-bottom:18px}
.admin-field label{display:block;font-weight:600;color:var(--ink);font-size:15px;margin-bottom:6px}
.admin-field input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:#fff;font:inherit;color:var(--ink)}
.admin-field input:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.admin-error{background:#fdf6f5;border:1px solid rgba(157,43,37,.35);border-left:4px solid var(--red);
  color:#7d221d;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:15px}
.admin-submit{width:100%;min-height:50px;border:1px solid var(--navy);border-radius:2px;
  background:var(--navy);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;
  transition:background .15s ease}
.admin-submit:hover{background:var(--navy-700)}
.admin-card .hint{display:block;margin-top:8px;color:var(--muted);font-size:14px}

/* Dashboard */
.admin-shell{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;padding:32px 0 64px}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.admin-top h1{font-family:var(--font-display);font-weight:600;font-size:28px;margin:0}
.admin-logout{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:2px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-weight:700;text-decoration:none}
.admin-logout:hover{background:var(--navy-tint);border-color:var(--navy);color:var(--navy)}
.admin-panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px 28px 28px;
  margin-bottom:22px;box-shadow:0 10px 26px rgba(22,61,93,.07)}
.admin-panel h2{font-family:var(--font-display);font-weight:600;font-size:21px;margin:0 0 14px}
.admin-table{width:100%;border-collapse:collapse;font-size:15px}
.admin-table th,.admin-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
.admin-table th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:700;border-bottom:2px solid var(--line-strong)}
.admin-table tr:last-child td{border-bottom:0}
.admin-empty{color:var(--muted);font-size:15px;margin:0;padding:10px 0}
.admin-status{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;background:var(--navy-tint);color:var(--navy)}
.pill{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--navy-tint);color:var(--navy)}
.admin-inline-form{display:inline}
.admin-del{border:1px solid var(--line-strong);background:#fff;color:var(--red);border-radius:2px;
  min-height:36px;padding:0 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.admin-del:hover{background:#fdf6f5;border-color:var(--red)}
@media (max-width:640px){
  .admin-wrap{margin:6vh auto}
  .admin-card{padding:26px 22px 28px;border-radius:18px}
  .admin-panel{padding:22px 18px 24px;border-radius:16px}
  .admin-table{display:block;overflow-x:auto}
}

/* =========================================================================
   ASK THE BOARD — visitor assistant widget.
   ========================================================================= */
.asst{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px}
.asst-open{min-height:50px;padding:0 22px;border-radius:999px;border:1px solid var(--navy);
  background:var(--navy);color:#fff;font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;
  box-shadow:0 12px 30px rgba(22,61,93,.28);transition:background .15s ease,transform .15s ease}
.asst-open:hover{background:var(--navy-700);transform:translateY(-2px)}
.asst-panel{width:min(370px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);
  border-radius:20px 20px 4px 20px;box-shadow:0 24px 60px rgba(22,61,93,.26);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 130px))}
.asst-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--navy);color:#fff;padding:14px 18px}
.asst-head strong{font-family:var(--font-display);font-weight:600;font-size:17px}
.asst-close{background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;
  padding:0 4px;border-radius:2px}
.asst-close:hover{opacity:.75}
.asst-log{flex:1 1 auto;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.asst-msg{max-width:100%}
.asst-msg p{margin:0;font-size:15px;line-height:1.5;max-width:none}
.asst-msg--bot p{background:var(--bg-panel);color:var(--body);padding:11px 14px;border-radius:4px 14px 14px 14px}
.asst-msg--you p{background:var(--navy);color:#fff;padding:11px 14px;border-radius:14px 14px 4px 14px;
  margin-left:auto;width:fit-content;max-width:88%}
.asst-msg.is-urgent p{background:#fdf6f5;border-left:4px solid var(--red);color:#7d221d;font-weight:600}
.asst-links{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:none}
.asst-links li{margin:0}
.asst-links a{font-size:14.5px;font-weight:700;color:var(--navy);text-decoration:underline;
  text-underline-offset:3px}
.asst-links a:hover{color:var(--navy-700)}
.asst-pending p{opacity:.7;font-style:italic}
.asst-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--paper)}
.asst-form input{flex:1 1 auto;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:2px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.asst-form input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.asst-form .btn{flex:none;min-height:44px}
.asst-foot{margin:0;padding:0 16px 14px;font-size:12.5px;color:var(--muted);line-height:1.4;max-width:none}
@media (max-width:520px){
  .asst{right:14px;bottom:14px;left:14px;align-items:stretch}
  .asst-open{width:100%}
  .asst-panel{width:100%;max-height:calc(100vh - 120px)}
}
@media print{.asst{display:none}}