/* 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:16px;
  --radius-sm:10px;
  --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.12;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:46px}
h2{font-size:32px;max-width:24ch}
h3{font-size:20px;line-height:1.25}
h4{font-size:16px;line-height:1.3}
@media (max-width:1024px){h1{font-size:38px}h2{font-size:28px}}
@media (max-width:640px){h1{font-size:32px}h2{font-size:24px}h3{font-size:18px}}
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:12.5px;font-weight:700;letter-spacing:.14em;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}
.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}
.text-link{font-weight:700;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:16px}
.text-link:hover{color:var(--gold-700);text-decoration:underline}
.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:999px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-size:15.5px;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(-1px)}
.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:8px;font-size:15px;white-space:nowrap}
.nav-primary a:hover{background:var(--navy-tint);color:var(--navy)}
.nav-primary a[aria-current="page"]{color:var(--navy);background:var(--navy-tint)}
.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:999px;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:999px;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:8px;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:14px;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:999px;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)}
.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:560px;padding:40px 44px;border-radius:20px;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:var(--gold-700)}
.hero-copy .eyebrow .dot{background:var(--gold)}
.hero-copy h1{color:var(--navy-700);font-size:42px;line-height:1.06}
.hero-copy .lead{color:#33404f;max-width:52ch}
.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 20px;bottom:auto;background:var(--glass-strong)}
  .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:34px}
  .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}
.quick-card a:hover{background:var(--navy-tint);color:var(--ink)}
.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:16px}
  .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}
.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:18px}
.card .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);background:var(--gold-tint);padding:4px 10px;border-radius:999px;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:radial-gradient(120% 100% at 50% 0%,#ffffff 0%,#f3f1ea 62%,#efece2 100%);color:var(--ink);padding:52px 0 70px;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:42px;max-width:22ch}
.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:30px}}

/* ---------- 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-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start}
.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-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.record .rdate{flex:none;width:74px;text-align:center;background:var(--navy-tint);color:var(--navy);border-radius:10px;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:999px}
.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:999px;padding:8px 16px;cursor:pointer}
.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:8px;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}
.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{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}
.footer-grid a:hover{color:#fff;text-decoration:underline}
.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:#fff}
@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 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}
@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:9px;min-height:52px;padding:0 20px;border:0;
  border-radius:999px;cursor:pointer;font:700 14px/1 inherit;color:#fff;
  background:linear-gradient(180deg,var(--navy),var(--navy-700));
  box-shadow:0 14px 34px rgba(23,52,86,.34),0 0 26px -8px rgba(23,52,86,.5)}
.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:14px;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:13px;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:10px;min-height:44px}
.chat-form button{min-height:44px;padding:0 16px;font-size:13px;border:0;border-radius:999px;
  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}