/* ==========================================================================
   FirstComms — Public safety BDA / ERRC landing page
   One file on purpose: a single request, no webfonts, no external CSS.
   Mono carries the brand on headings and UI; body copy is system sans,
   which is what makes long-form text on this page actually readable.
   ========================================================================== */
:root{
  --cream-50:#FBF7F4; --cream-100:#F7F1ED; --cream-200:#EBE1DA;
  --cream-300:#E0D2C9; --cream-400:#CDB9AC;

  --brown-900:#240D07; --brown-800:#3A1710; --brown-700:#5A2415;
  --brown-600:#74341E; --brown-400:#8A5540; --brown-200:#C8B3A6;

  --orange:#FA5019; --orange-btn:#D93F12; --orange-lift:#FF6A3D; --orange-wash:#FBE3DA;

  --text:var(--brown-700); --muted:var(--brown-600);
  --line:var(--cream-300); --bg:var(--cream-200);

  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --shadow-sm:0 1px 3px rgba(36,13,7,.08);
  --shadow-md:0 12px 30px rgba(36,13,7,.10);
  --shadow-lg:0 26px 60px rgba(36,13,7,.18);
  --container:1180px; --header-h:64px; --cut:12px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--sans);font-size:1.02rem;line-height:1.65;color:var(--muted);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
img,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--mono);font-weight:700;line-height:1.2;text-transform:uppercase;
  letter-spacing:.04em;color:var(--brown-700);text-wrap:balance}
h1{font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:.05em;line-height:1.14}
h2{font-size:clamp(1.3rem,2.5vw,1.85rem)}
h3{font-size:.95rem;letter-spacing:.06em}
p{text-wrap:pretty}
strong{font-weight:700;color:var(--brown-700)}
:focus-visible{outline:3px solid var(--brown-900);outline-offset:3px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.section{padding:clamp(44px,5.5vw,72px) 0}
.bg-card{background:var(--cream-100)}
.bg-dark{background:var(--brown-900);color:var(--brown-200)}
.bg-dark h2,.bg-dark h3{color:var(--cream-100)}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange-btn);border-bottom:2px solid var(--orange);padding-bottom:5px}
.bg-dark .eyebrow{color:var(--orange-lift)}
.lede{font-size:1.05rem;max-width:60ch}
.bg-dark .lede{color:var(--brown-200)}
.section-head{max-width:62ch;margin-bottom:30px}
.section-head h2{margin-top:14px}
.section-head p{margin-top:12px}
.center{text-align:center;margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--brown-900);color:var(--cream-100);padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;
  font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;border:0;text-align:center;background:var(--orange-btn);color:#fff;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:background-color .15s ease}
.btn:hover{background:#B93209}
.btn:focus-visible{outline:none;background:var(--brown-900)}
.btn-sm{padding:11px 18px;font-size:.72rem;--cut:9px}
.btn-block{width:100%}
/* Outline variant. Square on purpose: the bevel clip-path leaves the two
   diagonal corners unstroked, so a bevelled outline button reads as a broken
   frame. Filled buttons keep the bevel. */
.btn-line{background:transparent;color:var(--brown-700);border:1px solid var(--brown-400);clip-path:none}
.btn-line:hover{background:var(--brown-900);border-color:var(--brown-900);color:#fff}
.btn-line:focus-visible{outline:2px solid var(--orange-btn);outline-offset:2px;
  background:transparent;color:var(--brown-700)}

/* Mid-page call to action. The page runs eleven sections and roughly two
   thousand words, and until these were added the only CTA in the body was the
   submit button inside the hero form — the sticky call bar is phone-only
   (display:none above 860px). A desktop visitor who read to the end therefore
   had no way to act without scrolling back to the top. Most of the ad traffic
   is desktop, so that was the single biggest gap in the page. */
.cta-band{background:var(--cream-100);border-top:1px solid var(--cream-300);
  border-bottom:1px solid var(--cream-300);padding:clamp(30px,3.6vw,44px) 0}
.cta-inner{display:grid;gap:20px;align-items:center}
@media(min-width:860px){.cta-inner{grid-template-columns:1fr auto;gap:44px}}
.cta-h{font-family:var(--mono);font-weight:700;font-size:clamp(1.12rem,1.9vw,1.42rem);
  line-height:1.25;color:var(--brown-900)}
.cta-band p{margin-top:9px;font-size:.97rem;line-height:1.55;max-width:54ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:100;background:var(--brown-900);border-bottom:2px solid var(--orange)}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand span{font-family:var(--mono);font-size:.95rem;font-weight:700;letter-spacing:.2em;
  color:var(--cream-100);white-space:nowrap}
.header-nav{display:none;gap:22px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.header-nav a{color:var(--brown-200);padding:5px 0;border-bottom:2px solid transparent}
.header-nav a:hover,.header-nav a.active{color:var(--cream-100);border-color:var(--orange)}
.header-phone{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.76rem;
  font-weight:700;letter-spacing:.06em;white-space:nowrap;padding:11px 14px;background:var(--orange-btn);color:#fff;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.header-phone:hover{background:#B93209}
.header-phone svg{stroke:#fff}
@media(min-width:620px){.header-phone{font-size:.82rem;padding:12px 18px}}
@media(min-width:980px){.header-nav{display:flex}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(30px,4.5vw,52px) 0 clamp(34px,5vw,58px)}
.hero-lines{position:absolute;top:-40px;right:-160px;width:620px;opacity:.5;pointer-events:none}
.hero-grid{position:relative;display:grid;gap:30px;align-items:start}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.02fr .98fr;gap:42px}}
.hero h1{margin-top:14px;font-size:clamp(1.7rem,3.5vw,2.6rem)}
.hero h1 .hl{color:var(--orange-btn)}
.hero-sub{margin-top:16px;font-size:1.08rem;line-height:1.6;max-width:48ch}
.hero-points{margin-top:22px;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:18px}
.hero-points li{display:flex;gap:11px;align-items:center;font-size:.97rem;line-height:1.45}
.hero-points svg{flex:none;color:var(--orange-btn)}
.badge-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.badge{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;color:var(--brown-600);border:1px solid var(--cream-400);background:var(--cream-100)}

/* Self-select chips. Styled off .badge so they read as part of the same system,
   but clearly tappable: filled background, pointer, and a 44px tap target. */
.qual{margin-top:22px}
.qual-label{display:block;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brown-400);margin-bottom:9px}
.qual-row{display:flex;flex-wrap:wrap;gap:8px}
.qual-chip{display:inline-flex;align-items:center;text-decoration:none;
  font-family:var(--sans);font-size:.88rem;font-weight:600;line-height:1.2;
  min-height:44px;padding:10px 14px;cursor:pointer;color:var(--brown-700);
  background:var(--cream-50);border:1px solid var(--cream-400);
  transition:background .14s,border-color .14s,color .14s}
.qual-chip:hover{background:#fff;border-color:var(--orange);color:var(--brown-900)}
.qual-chip.is-on{background:var(--orange-btn);border-color:var(--orange-btn);color:#fff}
.qual-chip:focus-visible{outline:2px solid var(--orange-btn);outline-offset:2px}

/* Hero photo block. On phones it sits below the copy to break up a long run of
   text; on desktop it fills the empty lower-left of the copy column. The two
   sizes are separate files behind a media query, so each viewport downloads
   only its own (65KB on phones rather than the 173KB desktop crop).
   The 2/1 aspect-ratio is the whole point: the photo is a 1.93 image, so a 2:1
   frame crops about 3% off it. The earlier fixed 168/180px heights made the box
   3.1:1, which threw away 38% of the height — precisely the band the
   firefighters' heads were in. Ratio, not a pixel height, so it stays right at
   every column width instead of drifting as the layout flexes. */
/* The image is a custom property so each landing page can set its own without a
   class per page. The fallbacks are the homepage's, so index.html sets nothing.
   Sub-pages must use absolute /images/... paths: url() in an inline style
   resolves against the document, and on /bda-systems/ a relative path would
   look for /bda-systems/images/. (In this file it resolves against the
   stylesheet, which sits at the root, so relative is correct here.) */
.hero-figure{display:block;margin:26px 0 0;aspect-ratio:2/1;
  background:var(--fig-sm,url("images/hero-mobile.jpg")) no-repeat center 45%;
  background-size:cover}
@media(min-width:1000px){
  /* stretch lets the copy column fill the row so the photo can pin to its
     bottom; the form card opts back out so it keeps its natural height
     instead of growing a band of dead space under the submit button. */
  .hero-grid{align-items:stretch}
  .hero-grid > .form-card{align-self:start}
  .hero-copy{display:flex;flex-direction:column}
  /* margin-top:auto alone would let the photo butt against the badges whenever
     the copy column has no slack, so the badges carry the minimum gap. */
  .hero-copy .badge-row{margin-bottom:36px}
  /* margin-top:auto pins the photo to the bottom of the copy column, so its
     lower edge lines up with the form card's instead of floating mid-column. */
  .hero-figure{margin:0;margin-top:auto;background-image:var(--fig-lg,url("images/hero.jpg"))}
}

/* ---------- Form ---------- */
.form-card{background:var(--cream-50);border:1px solid var(--cream-300);border-top:4px solid var(--orange);
  padding:24px 22px;box-shadow:var(--shadow-md)}
.form-card h2{font-size:1.15rem}
.form-sub{margin-top:9px;font-size:.92rem;line-height:1.55}
.field{margin-top:14px}
.field label{display:block;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:6px;color:var(--brown-700)}
.field .opt{color:var(--brown-400);font-weight:400}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;font-size:.95rem;font-family:var(--sans);
  border:1px solid var(--cream-400);background:#fff;color:var(--brown-700);border-radius:0;
  transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange-btn);
  box-shadow:0 0 0 3px rgba(250,80,25,.18)}
.field textarea{min-height:74px;resize:vertical}
.field-row{display:grid;gap:14px}
@media(min-width:520px){.field-row{grid-template-columns:1fr 1fr}}
.form-foot{margin-top:13px;font-size:.78rem;line-height:1.5;color:var(--brown-400);text-align:center}
.form-foot a{text-decoration:underline;color:var(--brown-600)}
.form-notice{margin-top:12px;padding:10px 12px;background:var(--orange-wash);border-left:3px solid var(--orange);
  font-size:.85rem;color:var(--brown-700)}

/* ---------- Capability bar ---------- */
.ticker{background:var(--brown-900);padding:15px 0;border-bottom:1px solid rgba(250,80,25,.35)}
.ticker-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 20px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;color:var(--brown-200)}
.ticker-list li{display:flex;align-items:center;gap:20px}
.ticker-list li:not(:last-child)::after{content:"";width:6px;height:6px;background:var(--orange);flex:none}

/* ---------- Spec strip: the numbers, not a table ---------- */
.specs{display:grid;gap:1px;background:var(--cream-400);border:1px solid var(--cream-400)}
@media(min-width:560px){.specs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{background:var(--cream-50);padding:24px 20px;transition:background-color .18s ease}
.spec:hover{background:#fff}
.spec b{display:block;font-family:var(--mono);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;letter-spacing:.01em;
  color:var(--orange-btn);line-height:1.1}
.spec strong{display:block;margin-top:9px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brown-700)}
.spec span{display:block;margin-top:6px;font-size:.86rem;line-height:1.5;color:var(--brown-400)}
.fineprint{margin-top:16px;font-size:.82rem;line-height:1.6;color:var(--brown-400);max-width:80ch}

/* ---------- Cards ---------- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:var(--cream-50);border:1px solid var(--cream-300);padding:22px 20px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:transform .18s ease,background-color .18s ease}
.card::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--orange);
  transition:width .28s ease}
.card:hover{transform:translateY(-3px);background:#fff}
.card:hover::before{width:100%}
.bg-dark .card:hover{background:rgba(255,255,255,.09)}
.card h3{margin-bottom:8px}
.card p{font-size:.93rem;line-height:1.6;color:var(--brown-400)}
.ico{width:38px;height:38px;display:grid;place-items:center;background:var(--orange-wash);
  color:var(--orange-btn);margin-bottom:14px}
.bg-dark .ico{background:rgba(250,80,25,.16);color:var(--orange-lift)}
.card-num{display:block;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  color:var(--orange-btn);margin-bottom:9px}
.bg-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.bg-dark .card p{color:var(--brown-200)}

/* ---------- Split rows (compliant / to-be-fixed, symptoms) ---------- */
.split{display:grid;gap:16px}
@media(min-width:700px){.split{grid-template-columns:1fr 1fr}}
.split-item{padding:20px;border:1px solid var(--cream-300);background:var(--cream-50)}
.split-item.pass{border-left:4px solid #0E8F5A}
.split-item.fix{border-left:4px solid var(--orange)}
.split-item h3{margin-bottom:8px}
.split-item p{font-size:.93rem;line-height:1.6;color:var(--brown-400)}

.checks{display:grid;gap:11px;margin-top:6px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;line-height:1.55}
.checks svg{flex:none;margin-top:3px;color:var(--orange-btn)}

/* ---------- Steps ---------- */
.steps{display:grid;gap:14px}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:20px 18px}
.step b{display:block;font-family:var(--mono);font-size:1.7rem;color:var(--orange-lift);margin-bottom:10px}
.step h3{margin-bottom:8px}
.step p{font-size:.9rem;line-height:1.55;color:var(--brown-200)}

.stats{display:grid;gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);margin-top:26px}
@media(min-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--brown-900);padding:20px 18px}
.stat b{display:block;font-family:var(--mono);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--cream-100);text-transform:uppercase}
.stat span{display:block;margin-top:6px;font-size:.83rem;line-height:1.5;color:var(--brown-200)}

/* ---------- Commissioning chips ---------- */
.chips{display:grid;gap:10px}
@media(min-width:640px){.chips{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.chips{grid-template-columns:repeat(4,1fr)}}
.chip{display:flex;gap:11px;align-items:baseline;padding:14px 16px;background:var(--cream-50);
  border:1px solid var(--cream-300);font-size:.9rem;line-height:1.45}
.chip b{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--orange-btn);flex:none}

/* ---------- Pills ---------- */
.pill-list{display:flex;flex-wrap:wrap;gap:7px}
.pill{padding:8px 13px;background:var(--cream-50);border:1px solid var(--cream-400);font-family:var(--mono);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brown-600)}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 4px;
  background:none;border:0;text-align:left;font-family:var(--mono);font-size:.85rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.45;color:var(--brown-700);cursor:pointer}
.faq-q:hover{color:var(--orange-btn)}
.faq-q .chev{flex:none;transition:transform .2s ease;color:var(--orange-btn)}
.faq-item.open .faq-q .chev{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-item.open .faq-a{max-height:420px}
.faq-a p{padding:0 4px 18px;font-size:.95rem;line-height:1.65;color:var(--brown-400);max-width:76ch}

/* ---------- Reviews (styles ready; markup is commented out in <main>) ---------- */
.review{background:var(--cream-50);border:1px solid var(--cream-300);padding:22px 20px;border-top:3px solid var(--orange)}
.stars{display:flex;gap:4px;margin-bottom:13px;color:var(--orange)}
.review blockquote{font-size:.93rem;line-height:1.7}
.review cite{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-style:normal;
  font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-700)}


/* ---------- Signal meter ---------- */
.meter{margin:26px 0 0;padding:22px 18px;background:var(--cream-50);border:1px solid var(--cream-300);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.meter svg{width:100%;max-width:900px;margin-inline:auto}

/* ---------- Statement band ---------- */
.statement{background:var(--brown-900);color:var(--cream-100);padding:clamp(38px,5vw,60px) 0;
  border-top:3px solid var(--orange)}
.statement p{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  line-height:1.25;font-size:clamp(1.35rem,3.2vw,2.3rem);max-width:22ch}
.statement em{font-style:normal;color:var(--orange-lift)}
.statement span{display:block;margin-top:16px;font-size:.98rem;line-height:1.6;color:var(--brown-200);max-width:52ch}
.statement-cta{margin-top:26px}

/* ---------- Project gallery (enable with the slot in <main>) ---------- */
.shots{display:grid;gap:16px}
@media(min-width:700px){.shots{grid-template-columns:repeat(3,1fr)}}
.shots figure{margin:0;background:var(--cream-50);border:1px solid var(--cream-300)}
.shots img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.shots figcaption{padding:12px 14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brown-400)}

/* ---------- Footer ---------- */
.footer{background:var(--brown-900);color:var(--brown-200);padding:40px 0 100px;font-size:.9rem;line-height:1.65}
@media(min-width:860px){.footer{padding-bottom:40px}}
.footer-grid{display:grid;gap:26px}
@media(min-width:760px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
.footer h4{color:var(--cream-100);font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;margin-bottom:12px}
.footer a:hover{color:var(--orange-lift)}
.footer ul{display:grid;gap:8px}
.footer-bottom{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:.78rem;line-height:1.6}

/* ---------- Mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:grid;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--brown-900);
  border-top:2px solid var(--orange)}
@media(min-width:860px){.callbar{display:none}}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- Sub-page extras ---------- */
/* Breadcrumb. Sits above the H1 on the keyword pages so a visitor arriving
   from an ad can see where they are and get to the overview in one click. */
.crumb{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brown-400);margin-bottom:14px}
.crumb a{color:var(--brown-600)}
.crumb a:hover{color:var(--orange-btn)}
.crumb span[aria-hidden]{margin:0 7px;color:var(--cream-400)}

/* Cross-links between the keyword pages. These matter for more than navigation:
   three pages that never link to each other read as three orphans. */
.related{display:grid;gap:12px;list-style:none;padding:0}
@media(min-width:760px){.related{grid-template-columns:repeat(2,1fr)}}
.related a{display:block;padding:18px 20px;background:var(--cream-50);
  border:1px solid var(--cream-300);border-left:3px solid var(--orange);
  text-decoration:none;transition:border-color .15s,background .15s}
.related a:hover{background:#fff;border-left-color:var(--orange-lift)}
.related strong{display:block;font-family:var(--mono);font-size:.95rem;
  color:var(--brown-900);margin-bottom:5px}
.related span{display:block;font-size:.9rem;line-height:1.5;color:var(--brown-400)}

/* Confirmation shown in place of the form after a successful submission. */
.form-done h2{font-size:1.15rem;color:var(--brown-900)}
.form-done p{margin-top:10px;font-size:.95rem;line-height:1.6;color:var(--brown-400)}
.form-done p a{color:var(--orange-btn);font-weight:700}
.form-done-rush{padding-top:12px;border-top:1px solid var(--cream-300)}

/* The stats component is built for the dark sections; under the hero it sits in
   the ticker band, which is already dark, so it only needs its top margin
   dropped and a tighter cell. */
.stats-hero{margin-top:0;border:0;background:rgba(255,255,255,.14)}
.stats-hero .stat{padding:16px 18px}

/* Named project list. Deliberately plain: these are buildings, not logos, and
   dressing them up as badges would be the badge clutter the audit flagged. */
.proj-list{display:grid;gap:10px;list-style:none;padding:0}
@media(min-width:620px){.proj-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.proj-list{grid-template-columns:repeat(3,1fr)}}
.proj-list li{background:var(--cream-50);border:1px solid var(--cream-300);
  border-left:3px solid var(--orange);padding:16px 18px;
  font-family:var(--mono);font-size:.9rem;line-height:1.4;color:var(--brown-900)}

/* Figures in the hero badge row. The number carries the weight; the label is
   support, so it stays in the quieter body face rather than the mono caps. */
.badge-num{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--sans);
  font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--brown-600)}
.badge-num b{font-family:var(--mono);font-size:.95rem;color:var(--brown-900)}