/* ============================================================
   Self-hosted production typefaces. All OFL, latin subset.
   Only the display face is preloaded (see partials/head.php).
   archivo-var 90.1KB · public-sans 3x14.6KB · plex-mono 2x14.7KB = 163.6KB
   ============================================================ */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:400 700;font-stretch:62% 125%;
  src:url("/assets/fonts/archivo-var.woff2") format("woff2-variations")}
@font-face{font-family:"Public Sans";font-style:normal;font-display:swap;font-weight:400;
  src:url("/assets/fonts/public-sans-400.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-display:swap;font-weight:500;
  src:url("/assets/fonts/public-sans-500.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-display:swap;font-weight:600;
  src:url("/assets/fonts/public-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;
  src:url("/assets/fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:500;
  src:url("/assets/fonts/plex-mono-500.woff2") format("woff2")}

/* ============================================================
   Stage One Screening Solutions — "Ink & Index" v2
   Shared design system for representative mockups.
   Token names map 1:1 to the intended Tailwind theme keys.
   ============================================================ */

:root{
  /* --- ink --- */
  --ink-950:#0B1015;  --ink-900:#12181D;  --ink-800:#1C242B;  --ink-700:#2B343C;
  --slate-500:#4A5560; --slate-400:#737E89; --slate-300:#9AA3AC;
  --rule-200:#DCDEDA;  --rule-100:#E9EAE6;

  /* --- paper --- */
  --paper-50:#F4F4F2; --paper-25:#FAFAF8; --paper-0:#FFFFFF;

  /* --- patina : brand + action --- */
  --patina-900:#0F3B33; --patina-800:#164A41; --patina-700:#1E6154;
  --patina-600:#2A7A69; --patina-300:#6FBFA8; --patina-200:#A9D8C9; --patina-50:#EAF2EF;

  /* --- bronze : hairline + plate accent ONLY. never body text, never fill --- */
  /* bronze: illustration plates ONLY. Never UI chrome, never text. */
  --bronze-500:#8A6B3A; --bronze-300:#C4A277; --bronze-200:#DCC7A6;

  /* --- signal : functional only --- */
  --signal-red:#9E2B25; --signal-red-bg:#FBEFEE; --signal-red-line:#E4C6C3;
  --signal-amber:#8A5B15;

  /* --- type --- */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* --- elevation : depth is where v2 gets its richness --- */
  --e1:0 1px 2px rgba(11,16,21,.06), 0 1px 3px rgba(11,16,21,.04);
  --e2:0 2px 4px rgba(11,16,21,.05), 0 12px 28px rgba(11,16,21,.10);
  --e3:0 4px 8px rgba(11,16,21,.06), 0 24px 56px rgba(11,16,21,.16);

  --r-card:3px; --r-btn:4px;
  --gutter:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper-50); color:var(--ink-900);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:var(--patina-700)}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto}}

.wrap{max-width:1280px; margin:0 auto; padding:0 var(--gutter)}
.wrap-wide{max-width:1440px; margin:0 auto; padding:0 var(--gutter)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:99; background:var(--paper-0); padding:12px 16px; border-radius:var(--r-btn)}

/* ============ TYPE SCALE ============ */
.t-d0,.t-d1,.t-d2{font-family:var(--display); font-weight:700; font-stretch:125%; margin:0}
.t-d0{font-size:48px; line-height:1.02; letter-spacing:-.026em}
.t-d1{font-size:60px; line-height:1.03; letter-spacing:-.025em}
.t-d2{font-size:44px; line-height:1.07; letter-spacing:-.02em}
.t-h1,.t-h2{font-family:var(--display); font-weight:600; margin:0}
.t-h1{font-size:32px; line-height:1.18; letter-spacing:-.015em}
.t-h2{font-size:23px; line-height:1.28; letter-spacing:-.01em}
.t-h3{font-family:var(--body); font-weight:600; font-size:18px; line-height:1.4; margin:0}
.t-lead{font-size:20px; line-height:1.55; max-width:46ch; color:var(--slate-500); margin:0}
.t-body{font-size:16px; line-height:1.62; max-width:68ch; margin:0}
.t-sm{font-size:14px; line-height:1.55; color:var(--slate-500); margin:0}
.t-label{font-family:var(--mono); font-weight:500; font-size:12px; line-height:1.3;
  letter-spacing:.09em; text-transform:uppercase; color:var(--slate-500)}
.t-data{font-family:var(--mono); font-weight:400; font-size:14px; line-height:1.45;
  font-variant-numeric:tabular-nums}
.measure-34{max-width:34ch} .measure-46{max-width:46ch} .measure-68{max-width:68ch}
.on-ink,.on-ink .t-h1,.on-ink .t-h2,.on-ink .t-d0,.on-ink .t-d1,.on-ink .t-d2{color:var(--paper-50)}
.on-ink .t-lead,.on-ink .t-sm,.on-ink .t-label{color:var(--slate-300)}
.on-ink a{color:var(--patina-300)}


@media (max-width:1023px){ .t-d0{font-size:44px; line-height:1.04} }
@media (max-width:899px){
  .t-d0{font-size:36px; line-height:1.09; letter-spacing:-.012em; font-stretch:100%}
  .t-d1{font-size:31px; line-height:1.12; font-stretch:100%}
  .t-d2{font-size:26px; line-height:1.16; font-stretch:100%}
  .t-h1{font-size:24px} .t-h2{font-size:20px} .t-lead{font-size:18px}
  :root{--gutter:20px}
}

/* ============ SECTIONS & RHYTHM ============ */
section{padding:132px 0}
section.tight{padding:88px 0}
.s-paper{background:var(--paper-50)}
.s-white{background:var(--paper-0)}
.s-ink{background:var(--ink-950); color:var(--paper-50)}
.s-ink-800{background:var(--ink-900); color:var(--paper-50)}
@media (max-width:899px){ section{padding:72px 0} section.tight{padding:56px 0} }

/* eyebrow: bronze hairline + mono label. numbering reserved for real sequences only */
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-family:var(--mono);
  font-weight:500; font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--patina-700); margin:0 0 22px}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--patina-600); flex:none}
.on-ink .eyebrow{color:var(--patina-300)}
.on-ink .eyebrow::before{background:var(--patina-300)}

.rule{border:0; border-top:1px solid var(--rule-200); margin:0}
.on-ink .rule{border-color:#2A3339}

/* ============ HEADER ============ */
.hdr{position:sticky; top:0; z-index:40; background:rgba(11,16,21,.94);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid #222A31}
.hdr-in{display:flex; align-items:center; gap:32px; height:74px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand .mark{width:26px; height:26px; flex:none}
.brand .wordmark{white-space:nowrap; font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:15px; letter-spacing:-.01em; color:var(--paper-0); line-height:1}
.brand .wordmark span{display:block; font-family:var(--mono); font-weight:400; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-300); margin-top:3px}
.nav{display:flex; gap:28px; margin-left:auto}
.nav a{font-size:14.5px; font-weight:500; color:#C7CDD2; text-decoration:none; padding:6px 0;
  border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper-0); border-bottom-color:var(--patina-300)}
.hdr .btn{flex:none}
.hdr-mobile{display:none}
@media (max-width:1023px){
  .nav,.hdr-in > .btn{display:none}
  .hdr-mobile{display:flex; margin-left:auto; gap:10px}
  .hdr-in{gap:14px; height:66px}
}
/* measured: brand 121px + Menu 83px + CTA 130px + gaps 24px = 358px,
   against 350px usable at a 390px viewport. Shortening the label and the
   gap brings it to 328px. */
@media (max-width:429px){
  .hdr .brand .wordmark span{display:none}
  .hdr-in{gap:10px}
}

/* ============ BUTTONS ============ */
.btn{font-family:var(--body); font-weight:600; font-size:15px; line-height:1;
  padding:14px 22px; border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease}
.btn-sm{padding:10px 15px; font-size:14px}
.btn-primary{background:var(--patina-700); color:#fff; box-shadow:var(--e1)}
.btn-primary:hover{background:var(--patina-800)}
.btn-secondary{background:transparent; color:var(--ink-900); border-color:var(--ink-900)}
.btn-secondary:hover{background:var(--ink-900); color:var(--paper-50)}
.btn-tertiary{background:transparent; color:var(--patina-700); padding:6px 0; border-radius:0;
  border-bottom:1px solid var(--patina-700); font-size:14.5px}
.on-ink .btn-primary,.s-ink .btn-primary,.hdr .btn-primary{background:var(--patina-300); color:var(--ink-950); box-shadow:none}
.on-ink .btn-primary:hover,.s-ink .btn-primary:hover,.hdr .btn-primary:hover{background:var(--patina-200)}
.on-ink .btn-secondary,.s-ink .btn-secondary,.hdr .btn-secondary{color:var(--paper-50); border-color:#48525A}
.on-ink .btn-secondary:hover,.s-ink .btn-secondary:hover,.hdr .btn-secondary:hover{background:var(--paper-50); color:var(--ink-950); border-color:var(--paper-50)}
.on-ink .btn-tertiary,.s-ink .btn-tertiary{color:var(--patina-300); border-bottom-color:var(--patina-300)}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible,select:focus-visible{
  outline:2px solid var(--patina-700); outline-offset:3px}
.on-ink .btn:focus-visible,.s-ink :focus-visible,.hdr :focus-visible{outline-color:var(--patina-300)}
.btns{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* ============ VERIFICATION STAMP (signature device) ============ */
.stamp{display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--rule-200); border-radius:2px; padding:5px 9px;
  font-family:var(--mono); font-weight:500; font-size:11px; line-height:1.2;
  letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500);
  background:var(--paper-0); white-space:nowrap}
.stamp .dot{width:5px; height:5px; border-radius:50%; background:var(--patina-700); flex:none}
.stamp.on-dark{background:rgba(255,255,255,.03); border-color:#39424A; color:var(--slate-300)}
.stamp.on-dark .dot{background:var(--patina-300)}
.stamp.pending{color:var(--signal-amber); border-color:var(--bronze-200); background:#FBF7EF}
.stamp.pending .dot{background:var(--signal-amber)}

/* ============ SPECIMEN GUARD ============ */
.specimen{position:relative; isolation:isolate}
.specimen::before{
  content:"SPECIMEN"; position:absolute; z-index:3; top:0; right:0;
  font-family:var(--mono); font-weight:500; font-size:9.5px; letter-spacing:.16em;
  padding:4px 8px; border-radius:0 var(--r-card) 0 2px;
  background:var(--signal-red); color:#fff; pointer-events:none}
.specimen.no-tag::before{content:none}
/* clearances so the corner flag never lands on content */
.specimen .jcard .top{padding-right:76px}
.specimen table.cov caption{padding-right:96px}
.specimen .panel > .t-label:first-child{padding-right:80px}
.specimen::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--signal-red-line);
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(158,43,37,.045) 9px 10px)}
.specimen.tbl-wrap::after,.specimen table.cov ~ *::after{background:none}
.specimen-bar{background:var(--signal-red); color:#fff; padding:9px 0}
.specimen-bar p{margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* ============ MOCKUP-ONLY CHROME (removed in production) ============ */
.mockbar{background:var(--ink-800); border-bottom:1px solid #2E3740; padding:8px 0}
.mockbar div{display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--slate-300)}
.mockbar strong{color:var(--bronze-300); font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; margin-right:8px}
.mockbar a{color:#C7CDD2; text-decoration:none; padding:3px 8px; border:1px solid #39424A; border-radius:2px}
.mockbar a:hover{border-color:var(--patina-300); color:var(--paper-0)}
.mockbar a[aria-current="page"]{background:var(--patina-300); color:var(--ink-950); border-color:var(--patina-300)}

/* ============ HERO ============ */
.hero{background:var(--ink-950); color:var(--paper-50); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:56px; align-items:center; padding:112px 0 124px}
.hero-copy{position:relative; z-index:2}
.hero-facts{display:flex; gap:0; flex-wrap:wrap; border-top:1px solid #232B32; margin-top:0}
.hero-facts .cell{padding:22px 28px 0 0; margin-right:28px; border-right:1px solid #232B32; flex:1 1 190px}
.hero-facts .cell:last-child{border-right:0; margin-right:0}
.hero-facts .fig{font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:26px; line-height:1.1; letter-spacing:-.015em; color:var(--paper-0)}
.hero-facts .cap{font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--slate-300); margin-top:7px; line-height:1.4}
.hero-plate{position:relative}
.hero-plate .card-float{position:absolute; left:-52px; bottom:34px; width:330px; z-index:4; box-shadow:var(--e3)}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr; gap:40px; padding:64px 0 76px}
  .rail-label{display:none}          /* 9.5px mono is unreadable at plate scale */
  .rail-line{opacity:.55}
  .hero-plate .card-float{position:static; width:100%; margin-top:-26px; box-shadow:var(--e2)}
}

/* ============ JURISDICTION CARD ============ */
.jcard{background:var(--paper-0); border:1px solid var(--rule-200); border-radius:var(--r-card);
  padding:22px; box-shadow:var(--e1); transition:box-shadow .16s ease, transform .16s ease}
a.jcard{display:block; text-decoration:none; color:inherit}
a.jcard:hover{box-shadow:var(--e2); transform:translateY(-2px)}
.jcard .top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.jcard .county{display:block; font-family:var(--display); font-weight:600; font-size:22px; line-height:1.2;
  letter-spacing:-.012em; margin:0; color:var(--ink-900)}
.jcard .place{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--slate-500); margin-top:5px; text-transform:uppercase}
.jcard .court{font-size:13.5px; color:var(--slate-500); margin:14px 0 0; line-height:1.5}
.jcard hr{border:0; border-top:1px solid var(--rule-100); margin:16px 0}
.jrows{display:grid; grid-template-columns:1fr auto; gap:9px 16px; align-items:center; margin:0}
.jrows dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate-500); margin:0}
.jrows dd{font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums;
  text-align:right; margin:0; color:var(--ink-900)}
.jcard .foot{margin-top:18px; display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap}
.jcard.dim dd,.jcard.dim .county{color:var(--slate-500)}
/* gated figure placeholder — surface aware so contrast holds on both */
.fig-gated{color:var(--slate-500)}
.on-ink .fig-gated,.s-ink .fig-gated,.s-ink-800 .fig-gated{color:var(--slate-400)}

/* ============ ACCESS-METHOD BADGE (glyph + label, never hue alone) ============ */
.badge{display:inline-flex; align-items:center; gap:7px; padding:5px 9px 5px 7px;
  border:1px solid var(--rule-200); border-radius:2px; background:var(--patina-50);
  font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--patina-800); white-space:nowrap; flex:none}
.badge svg{flex:none; display:block}
.badge.exception{background:var(--signal-red-bg); border-color:var(--signal-red-line); color:var(--signal-red)}
.badge.unknown{background:var(--paper-50); border-color:var(--rule-200); color:var(--slate-500)}
.badge.on-dark{background:rgba(111,191,168,.11); border-color:#39424A; color:var(--patina-300)}

/* ============ GENERIC GRIDS & CARDS ============ */
.cols-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px}
.cols-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
.cols-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.split{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:64px; align-items:center}
.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
@media (max-width:1023px){ .cols-2,.cols-3,.cols-4,.split,.split.rev{grid-template-columns:1fr; gap:32px} }

.panel{background:var(--paper-0); border:1px solid var(--rule-200); border-radius:var(--r-card);
  padding:30px; box-shadow:var(--e1)}
.panel.on-dark{background:var(--ink-900); border-color:#2A3339; box-shadow:none}
.panel-flush{padding:0; overflow:hidden}

.claimrow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  border-top:1px solid var(--rule-200); border-bottom:1px solid var(--rule-200)}
.claimrow .c{padding:26px 28px 26px 0; border-right:1px solid var(--rule-200)}
.claimrow .c:last-child{border-right:0}
.claimrow .fig{font-family:var(--display); font-weight:700; font-stretch:112%; font-size:30px;
  line-height:1.08; letter-spacing:-.018em}
.claimrow .cap{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate-500); margin:8px 0 12px; line-height:1.45}
@media (max-width:899px){
  .claimrow{grid-template-columns:1fr}
  .claimrow .c{border-right:0; border-bottom:1px solid var(--rule-200); padding:22px 0}
  .claimrow .c:last-child{border-bottom:0}
}

/* ============ CONTRAST PAIR (database vs courthouse) ============ */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid #2A3339; border-radius:var(--r-card); overflow:hidden}
.pair > div{padding:34px}
.pair > div:first-child{background:rgba(255,255,255,.02); border-right:1px solid #2A3339}
.pair h3{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 20px; color:var(--slate-300); font-weight:500}
.pair ul{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.pair li{display:grid; grid-template-columns:18px 1fr; gap:11px; font-size:15px; line-height:1.5;
  color:#D5DADE}
.pair li svg{margin-top:4px}
@media (max-width:899px){ .pair{grid-template-columns:1fr} .pair > div{padding:26px}
  .pair > div:first-child{border-right:0; border-bottom:1px solid #2A3339} }

/* ============ PROCESS (a real sequence — numbering earns its place here) ============ */
.chain{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule-200);
  border:1px solid var(--rule-200); border-radius:var(--r-card); overflow:hidden}
.chain .stg{background:var(--paper-0); padding:24px 22px 26px; position:relative}
.chain .n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--patina-700)}
.chain .stg h3{font-family:var(--display); font-weight:600; font-size:16.5px; line-height:1.28;
  margin:12px 0 9px; letter-spacing:-.008em}
.chain .stg p{margin:0; font-size:13.5px; line-height:1.55; color:var(--slate-500)}
.chain .stg .det{margin-top:14px; padding-top:14px; border-top:1px dashed var(--rule-200)}
.chain .stg .det p{font-size:13px}
@media (max-width:1023px){ .chain{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:599px){ .chain{grid-template-columns:1fr} }

/* ============ TABLE ============ */
.tbl-wrap{border:1px solid var(--rule-200); border-radius:var(--r-card); overflow:hidden; background:var(--paper-0)}
table.cov{width:100%; border-collapse:collapse; font-size:14px}
table.cov thead th{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; text-align:left; color:var(--slate-500); background:var(--paper-50);
  padding:13px 16px; border-bottom:1px solid var(--rule-200); white-space:nowrap}
table.cov tbody td{padding:15px 16px; border-bottom:1px solid var(--rule-100); vertical-align:middle}
table.cov tbody tr:last-child td{border-bottom:0}
table.cov tbody tr:hover{background:var(--patina-50)}
table.cov .num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
table.cov th.num{text-align:right}
table.cov .cty{font-weight:600; color:var(--ink-900)}
table.cov .st{font-family:var(--mono); font-size:11px; letter-spacing:.07em; color:var(--slate-500);
  text-transform:uppercase; display:block; margin-top:3px}
.stack-cards{display:none}
@media (max-width:899px){
  .tbl-wrap{display:none}
  .stack-cards{display:grid; gap:14px}
}

/* filter bar */
.filters{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:24px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--slate-500)}
.field input,.field select{font-family:var(--body); font-size:15px; padding:11px 13px;
  border:1px solid var(--rule-200); border-radius:var(--r-btn); background:var(--paper-0); color:var(--ink-900); min-width:200px}
.field.grow{flex:1 1 260px}
.field.grow input{width:100%}

/* ============ SPECIMEN CODE BLOCK ============ */
.code{background:var(--ink-950); border:1px solid #2A3339; border-radius:var(--r-card); overflow:hidden}
.code .bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; background:#151C22; border-bottom:1px solid #2A3339}
.code .bar span{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-300)}
.code pre{margin:0; padding:20px 18px; overflow-x:auto; font-family:var(--mono); font-size:12.5px;
  line-height:1.72; color:#CDD4D9; -webkit-overflow-scrolling:touch}
.code .k{color:var(--patina-300)} .code .s{color:var(--bronze-300)} .code .c{color:#7E8A93}

/* ============ PLATE / FIGURE ============ */
figure{margin:0}
.plate{position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--ink-950)}
.plate.light{background:var(--paper-25); border:1px solid var(--rule-200)}
figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--slate-500); margin-top:14px; line-height:1.5}
.on-ink figcaption,.s-ink figcaption{color:var(--slate-300)}
.map-plate{--plate-fill:#FFFFFF; --plate-county:#D3D6D0; --plate-state:#9AA3AC; --plate-edge:#12181D}

/* ============ FOOTER ============ */
.ftr{background:var(--ink-950); color:var(--slate-300); padding:76px 0 34px; border-top:1px solid #222A31}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px}
.ftr .ftr-h{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-0); margin:0 0 16px; font-weight:500}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ftr a{color:#B6BDC3; text-decoration:none; font-size:14.5px}
.ftr a:hover{color:var(--paper-0); text-decoration:underline}
.ftr-base{margin-top:56px; padding-top:26px; border-top:1px solid #222A31;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:13px; color:var(--slate-400)}
@media (max-width:899px){ .ftr-grid{grid-template-columns:1fr 1fr; gap:32px} }

/* ============ MOBILE STICKY CTA — the single sticky element on mobile ============ */
.mcta{display:none}
@media (max-width:1023px){
  .mcta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(11,16,21,.97);
    backdrop-filter:blur(8px); border-top:1px solid #2A3339}
  .mcta .btn{flex:1; justify-content:center; min-height:46px}
  body{padding-bottom:74px}
  .hdr{position:static}
}


/* ============================================================
   v3 additions
   ============================================================ */

/* --- production header: no mockup chrome above it --- */
.hdr{top:0}

/* --- infrastructure register: metric band, systems not archives --- */
.metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:#232B32; border:1px solid #232B32; border-radius:var(--r-card); overflow:hidden}
.metrics .m{background:var(--ink-900); padding:28px 26px}
.metrics .m .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate-300)}
.metrics .m .v{font-family:var(--display); font-weight:700; font-stretch:112%; font-size:27px;
  line-height:1.1; letter-spacing:-.018em; color:var(--paper-0); margin-top:12px}
.metrics .m p{margin:10px 0 0; font-size:13.5px; line-height:1.55; color:var(--slate-300)}
@media (max-width:899px){ .metrics{grid-template-columns:1fr} }

/* --- gated slot: what an unapproved figure looks like in PRODUCTION mode --- */
.gated{border:1px dashed var(--rule-200); border-radius:var(--r-card); padding:22px;
  background:var(--paper-25)}
.gated .t-label{color:var(--slate-500)}
.gated p{margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--slate-500)}
.on-ink .gated,.s-ink .gated{border-color:#39424A; background:rgba(255,255,255,.02)}
.on-ink .gated p,.s-ink .gated p{color:var(--slate-300)}

/* --- photography slot: art-direction brief, not a grey box --- */
.photoslot{position:relative; border:1px dashed var(--rule-200); border-radius:var(--r-card);
  background:var(--paper-25); padding:34px; min-height:280px; display:flex;
  flex-direction:column; justify-content:flex-end; gap:10px}
.photoslot::before{content:"PHOTOGRAPHY SLOT"; position:absolute; top:16px; left:18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--patina-700)}
.photoslot .ps-title{font-family:var(--display); font-weight:600; font-size:19px; margin:0;
  letter-spacing:-.01em; color:var(--ink-900)}
.photoslot p{margin:0; font-size:13.5px; line-height:1.6; color:var(--slate-500); max-width:52ch}
.photoslot dl{margin:8px 0 0; display:grid; grid-template-columns:auto 1fr; gap:5px 14px;
  font-family:var(--mono); font-size:11px; line-height:1.5}
.photoslot dt{color:var(--slate-500); text-transform:uppercase; letter-spacing:.07em}
.photoslot dd{margin:0; color:var(--ink-900)}
.photoslot.on-dark{border-color:#39424A; background:rgba(255,255,255,.02)}
.photoslot.on-dark .ps-title{color:var(--paper-50)}
.photoslot.on-dark p,.photoslot.on-dark dt{color:var(--slate-300)}
.photoslot.on-dark dd{color:var(--paper-50)}
.photoslot.on-dark::before{color:var(--patina-300)}

/* --- legal / prose pages --- */
.prose{max-width:68ch}
.prose h2{font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.01em;
  margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:16px; line-height:1.68}
.prose ul{padding-left:22px; margin:14px 0}
.prose li{margin-bottom:8px}
.toc{border:1px solid var(--rule-200); border-radius:var(--r-card); padding:22px;
  background:var(--paper-0)}
.toc ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.toc a{font-size:14.5px; text-decoration:none}
.toc a:hover{text-decoration:underline}

/* --- error pages --- */
.errpage{min-height:62vh; display:flex; align-items:center}
.errcode{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--patina-300)}

/* --- contact --- */
.twocol-form{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:699px){ .twocol-form{grid-template-columns:1fr} }
.field textarea{font-family:var(--mono); font-size:14px; padding:11px 13px;
  border:1px solid var(--rule-200); border-radius:var(--r-btn); background:var(--paper-0);
  color:var(--ink-900); width:100%; resize:vertical}
.panel.on-dark .field input,.panel.on-dark .field textarea,.panel.on-dark .field select{
  background:#0E141A; border-color:#39424A; color:var(--paper-50)}
.panel.on-dark .field label{color:var(--slate-300)}

/* --- breadcrumb --- */
.crumbs{list-style:none; display:flex; gap:10px; margin:0 0 30px; padding:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  flex-wrap:wrap}
.crumbs a{text-decoration:none}
.on-ink .crumbs,.s-ink .crumbs{color:var(--slate-300)}
.on-ink .crumbs a,.s-ink .crumbs a{color:var(--slate-300)}
.on-ink .crumbs a:hover{color:var(--paper-0)}

/* --- utility --- */
.mt-0{margin-top:0}
.hairline-list{list-style:none; margin:0; padding:0}
.hairline-list li{padding:18px 0; border-bottom:1px solid var(--rule-200);
  display:grid; grid-template-columns:170px 1fr; gap:24px}
.hairline-list li:last-child{border-bottom:0}
.hairline-list dt,.hairline-list .k{font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--slate-500)}
.hairline-list .v{font-size:15.5px; line-height:1.6}
@media (max-width:699px){ .hairline-list li{grid-template-columns:1fr; gap:8px} }

/* ============================================================
   Hero headline scale — derived by measuring Archivo Expanded 700
   glyph advances (0.606 em/char) against the actual grid column
   width at each breakpoint. Target is a three-line headline.
     1280px viewport -> 624px column -> 60px  = 2.7 lines
     1440px viewport -> 711px column -> 68px  = 2.7 lines
   92px, which v2 specified, produced 4-5 lines in a 645px column.
   ============================================================ */
@media (min-width:1280px){ .t-d0{font-size:60px} }
@media (min-width:1440px){ .t-d0{font-size:68px} }

/* hero column ratio widened so the display line has room to breathe */
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}

/* ------------------------------------------------------------
   flex `gap` fallback. Modern browsers all support it; some
   locked-down enterprise browsers do not, and a nav with no
   spacing is a total failure rather than a degradation.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Mobile navigation — <details> disclosure, zero JavaScript,
   keyboard operable, works with the static mobile header.
   ------------------------------------------------------------ */
.mnav{display:none; position:relative}
.mnav > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.mnav > summary::-webkit-details-marker{display:none}
.mnav > summary::after{content:""; display:inline-block; margin-left:8px; width:9px; height:9px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.mnav[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.mnav-panel{position:absolute; right:0; top:calc(100% + 10px); z-index:60; min-width:238px;
  background:var(--ink-900); border:1px solid #2E3740; border-radius:var(--r-card);
  box-shadow:var(--e3); padding:8px; display:grid}
.mnav-panel a{display:block; padding:13px 14px; min-height:44px; font-size:15.5px; font-weight:500;
  color:#C7CDD2; text-decoration:none; border-radius:2px}
.mnav-panel a:hover,.mnav-panel a[aria-current="page"]{background:rgba(111,191,168,.12); color:var(--paper-0)}
@media (max-width:1023px){ .mnav{display:block} }

@supports not (gap: 1px){
  .nav a{margin-left:28px}
  .nav a:first-child{margin-left:0}
  .btns > * + *{margin-left:14px}
  .filters > * + *{margin-left:12px}
  .hdr-mobile > * + *{margin-left:10px}
  .mnav-panel a + a{margin-top:2px}
  .hdr-in .brand{margin-right:32px}
  .hdr-in > .btn{margin-left:32px}
  .brand .mark{margin-right:11px}
  .badge svg{margin-right:7px}
  .stamp .dot{margin-right:8px}
  .eyebrow::before{margin-right:12px}
  .hero-facts .cell + .cell{margin-left:0}
  .ftr-grid > * + *{margin-top:32px}
  .cols-2 > * + *,.cols-3 > * + *,.cols-4 > * + *,.split > * + *{margin-top:32px}
  .crumbs > * + *{margin-left:10px}
}


/* ============================================================
   PhotoFrame — the editorial treatment for the three photography
   areas. Real photography drops into this frame and inherits the
   same duotone and grain as the original plates, so sourced images
   cannot look like a stock folder next to the drawn ones.
   ============================================================ */
.pframe{position:relative; margin:0; border-radius:var(--r-card); overflow:hidden;
  background:var(--ink-950); box-shadow:var(--e2)}
.pframe > img,.pframe > svg{display:block; width:100%; height:auto}
.pframe > img{filter:url(#s1-duotone) contrast(1.04)}          /* ink -> paper duotone */
.pframe::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.28}
.pframe-bleed{border-radius:0}

/* editorial caption: hairline, then descriptive line, then mono credit */
.pcap{display:grid; gap:10px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--rule-200); max-width:60ch}
.pcap .t{font-size:15px; line-height:1.6; color:var(--slate-500); margin:0}
.pcap .c{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate-400); margin:0}
.on-ink .pcap,.s-ink .pcap{border-color:#2A3339}
.on-ink .pcap .t,.s-ink .pcap .t{color:var(--slate-300)}
.on-ink .pcap .c,.s-ink .pcap .c{color:var(--slate-400)}

/* figure sitting full-bleed out of the content column */
.bleed{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none}


/* ---- access-method cards (coverage page) ---- */
.mcards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--rule-200); border:1px solid var(--rule-200); border-radius:var(--r-card); overflow:hidden}
.mcard{background:var(--paper-0); padding:26px 24px 28px}
.mcard-top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px}
.mcard-scope{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate-500)}
.mcard p{margin:0; font-size:14.5px; line-height:1.6; color:var(--slate-500)}
@media (max-width:699px){ .mcards{grid-template-columns:1fr} }

/* ---- numbered operating-position list (compliance page) ---- */
.policylist{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-200)}
.policylist li{display:grid; grid-template-columns:64px 1fr; gap:24px; padding:26px 0;
  border-bottom:1px solid var(--rule-200)}
.policylist .k{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--patina-700);
  padding-top:3px}
.policylist p{max-width:74ch}
@media (max-width:699px){ .policylist li{grid-template-columns:1fr; gap:10px} }

/* ---- tick list (company page) ---- */
.ticklist{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.ticklist li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.6;
  color:var(--slate-500)}
.ticklist li::before{content:""; position:absolute; left:0; top:9px; width:11px; height:11px;
  border-left:1.6px solid var(--patina-700); border-bottom:1.6px solid var(--patina-700);
  transform:rotate(-45deg)}

.pframe-wrap{margin:0}
@supports not (gap: 1px){
  .mcards > * + *{margin-top:1px}
  .ticklist > * + *{margin-top:14px}
}


/* ============================================================
   v4 — pre-production correction pass
   ============================================================ */

/* --- HERO: full-bleed asymmetric plate. Symmetry was the government read. --- */
.hero{position:relative; overflow:hidden; padding:0}
.hero-inner{position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:center;
  min-height:640px; padding:104px 0 112px}
.hero-copy{max-width:640px}
.hero-bleed{position:absolute; inset:0 0 0 auto; width:52%; z-index:1; overflow:hidden}
.hero-bleed svg{width:100%; height:100%; display:block}
.hero-bleed::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--ink-950) 0%,rgba(11,16,21,.72) 22%,rgba(11,16,21,0) 62%)}
@media (max-width:1023px){
  .hero-inner{grid-template-columns:1fr; min-height:0; padding:56px 0 0}
  .hero-bleed{position:relative; inset:auto; width:100%; aspect-ratio:4/3; margin-top:40px}
  .hero-bleed::after{background:linear-gradient(180deg,var(--ink-950) 0%,rgba(11,16,21,0) 34%)}
}

/* --- editorial plate: a real composition, not a placeholder box --- */
.eplate{position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--ink-950)}
.eplate svg{display:block; width:100%; height:auto}
.eplate figcaption{position:absolute; left:0; right:0; bottom:0; margin:0; padding:16px 20px;
  background:linear-gradient(180deg,rgba(11,16,21,0),rgba(11,16,21,.92) 60%);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate-300); line-height:1.5}
.eplate.tall{aspect-ratio:4/5}
.eplate.tall svg{height:100%; object-fit:cover}

/* --- vendor pack request block (replaces gated compliance slots) --- */
.packrow{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--rule-200); border:1px solid var(--rule-200); border-radius:var(--r-card);
  overflow:hidden}
.packrow .p{background:var(--paper-0); padding:26px 28px}
.packrow .p h3{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.008em;
  margin:0 0 9px}
.packrow .p p{margin:0; font-size:14px; line-height:1.6; color:var(--slate-500)}
@media (max-width:699px){ .packrow{grid-template-columns:1fr} }

/* --- held-page banner (non-launch routes only) --- */
.heldbar{background:var(--bronze-500); color:#fff; padding:9px 0}
.heldbar p{margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
@supports not (gap: 1px){ .heldbar p > * + *{margin-left:14px} }

/* --- v4b: hero corrections from the first true Chromium render ---
   The plate was a bounded box with dead space either side, and the headline
   ran to four lines because .hero-copy capped at 640px. Both fixed here. */
.hero{position:relative; overflow:hidden; padding:0; background:var(--ink-950)}
.hero-inner{position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.92fr); align-items:center;
  min-height:600px; padding:88px 0 96px}
.hero-copy{max-width:none; padding-right:40px}
.hero-spacer{display:none}
.hero-bleed{position:absolute; top:0; bottom:0; right:0; width:50%; z-index:1;
  overflow:hidden; border-radius:0}
.hero-bleed svg{width:100%; height:100%; display:block}
.hero-bleed::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,var(--ink-950) 0%,rgba(11,16,21,.55) 7%,rgba(11,16,21,0) 26%)}
@media (min-width:1440px){ .t-d0{font-size:60px} }
@media (max-width:1023px){
  .hero-inner{grid-template-columns:1fr; min-height:0; padding:52px 0 0}
  .hero-copy{padding-right:0}
  .hero-bleed{position:relative; top:auto; bottom:auto; right:auto; width:100%;
    aspect-ratio:4/3; margin-top:36px}
  .hero-bleed::after{background:linear-gradient(180deg,var(--ink-950) 0%,rgba(11,16,21,0) 30%)}
}

/* ============================================================
   Final refinements
   ============================================================ */

/* A. Mobile hero order. The plate is absolute on desktop, so moving it after
   the copy in the DOM changes nothing there and puts the message first on mobile. */
@media (max-width:1023px){
  .hero-bleed{position:relative; top:auto; bottom:auto; right:auto; left:auto;
    width:100%; aspect-ratio:4/3; margin-top:8px}
  .hero-bleed::after{background:linear-gradient(180deg,var(--ink-950) 0%,rgba(11,16,21,0) 26%)}
  .hero-inner{padding-bottom:28px}
}

/* B. "Coverage list" is 37px wider than "Coverage". Measured header content at
   390px was 328px against 350px usable; the longer label pushes it to ~365px.
   Below 400px the wordmark becomes screen-reader-only and the mark carries the
   brand, which is standard at that width and keeps 360px clear. */
/* Measured header fit with the longer "Coverage list" label:
     430px needed the compact padding (it overflowed to 434px without it)
     390px fits with the wordmark (content 358px in 390px)
     375px and below do not, so the mark carries the brand there */
@media (max-width:479px){
  .hdr-mobile .btn{padding:11px 13px; font-size:13.5px}
  .mnav > summary{padding:11px 13px; font-size:13.5px}
}
@media (max-width:389px){
  .hdr .brand .wordmark{position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
  .hdr-in{gap:9px}
}

/* ------------------------------------------------------------
   Mobile overflow fix. `grid-template-columns:1fr` resolves to
   minmax(auto,1fr), so a nowrap child (the Verification Stamp)
   sets the column's min-content width and pushes the page wider
   than the viewport: index overflowed to 398px, coverage to 444px.
   minmax(0,1fr) lets the column shrink; the stamp wraps instead.
   ------------------------------------------------------------ */
@media (max-width:1023px){
  .cols-2,.cols-3,.cols-4,.split,.split.rev,.hero-inner,.packrow,.metrics,
  .chain,.pair,.ftr-grid,.twocol-form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){ .ftr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:699px){
  /* the stamp stays a single line wherever it fits; below this it wraps
     rather than clipping or forcing horizontal scroll */
  .stamp{white-space:normal}
}

/* ============================================================
   Production form states
   ============================================================ */
.hp{position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; border:0; padding:0; margin:-1px}
.fielderr{display:block; margin-top:7px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.04em; color:#F0A9A4}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C9635C}
.formstate{border-radius:var(--r-card); padding:20px 22px; margin-bottom:4px}
.formstate p{margin:0}
.formstate p + p{margin-top:10px; font-size:15px; line-height:1.6}
.formstate.ok{background:rgba(111,191,168,.10); border:1px solid #2E6B5E; color:var(--paper-50)}
.formstate.ok .t-label{color:var(--patina-300)}
.formstate.bad{background:rgba(158,43,37,.14); border:1px solid #8A3A34; color:var(--paper-50)}
.formstate.bad .t-label{color:#F0A9A4}

/* ============================================================
   Target size (WCAG 2.5.8). Measured in Chromium, then corrected:
     footer links were 16px tall, mobile header controls 38px,
     the brand link 26px. Footer list gap is reduced to offset the
     new padding, so footer height is unchanged.
   ============================================================ */
.ftr ul{gap:3px}
.ftr ul a{display:block; padding:5px 0; min-height:24px}
.hdr .brand{min-height:44px}
@media (max-width:1023px){
  .hdr-mobile .btn,.mnav > summary{min-height:44px}
  .mnav > summary{box-sizing:border-box}
}