/* Threshold Security Consulting
   Rebuilt to match the current site design.
   Typeface note: the original site's font could not be read out of its source.
   Archivo (headings), Inter (body) and IBM Plex Mono (labels) are the stand-in.
   To change it, edit --display / --sans / --mono below and the Google Fonts
   <link> at the top of each HTML page. Nothing else needs to move. */

/* ------------------------------------------------------------------ *
 * Self-hosted fonts.
 *
 * These used to come from fonts.googleapis.com, which meant two extra DNS
 * lookups and TLS handshakes before a single character could paint, and it
 * handed every visitor's IP address to Google before the cookie banner had
 * asked them anything. Both are gone. The files are served from our own
 * origin under /assets/, which the worker caches immutable for a year.
 *
 * Inter and Archivo are variable fonts: one file each covers every weight.
 * IBM Plex Mono has no variable build, so 400 and 700 ship as static files.
 * 700 is the one the design actually uses for buttons, labels and eyebrows;
 * the old Google Fonts link requested 400/500/600 and never loaded a real
 * bold, so every mono bold on the site was a synthesised fake.
 * ------------------------------------------------------------------ */
@font-face{
  font-family:'Inter Var';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/inter-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Archivo Var';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/archivo-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Plex Mono';font-style:normal;font-display:swap;font-weight:400;
  src:url(/assets/fonts/plexmono-400-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Plex Mono';font-style:normal;font-display:swap;font-weight:700;
  src:url(/assets/fonts/plexmono-700-latin.woff2) format('woff2');
}

:root{
  --bg:#0d0f11;
  --panel:#141619;
  --ink:#f2f0ec;
  --muted:#9aa0a4;
  --dim:#7b8185;
  --accent:#E85C43;
  --hair:rgba(255,255,255,0.11);
  --hair-strong:rgba(255,255,255,0.18);
  --display:'Archivo Var',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --sans:'Inter Var',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --pad:56px;
  --maxw:1240px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);}
img,svg{max-width:100%;}
a{color:inherit;}
h1,h2,h3,.brand-name,.stat-num{font-family:var(--display);}
h1,h2,h3{letter-spacing:-0.025em;}

/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--pad);background:rgba(13,15,17,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;}
.brand-name{font-weight:700;font-size:21px;letter-spacing:0.01em;line-height:1;display:block;}
.brand-sub{display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:var(--muted);margin-top:5px;}
.nav{display:flex;gap:34px;font-family:var(--mono);font-size:12px;letter-spacing:0.12em;}
.nav a{color:var(--ink);text-decoration:none;}
.nav a:hover{color:var(--accent);}

/* ---------------- buttons ---------------- */
.btn{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:0.12em;
  padding:17px 32px;text-decoration:none;border:0;cursor:pointer;text-align:center;}
.btn-accent{background:var(--accent);color:#12100f;}
.btn-accent:hover{background:#f16a51;}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hair-strong);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-dark{background:#111214;color:var(--ink);width:100%;padding:20px 32px;}
.btn-dark[disabled]{opacity:0.55;cursor:not-allowed;}
.btn-sm{font-size:12px;padding:14px 26px;letter-spacing:0.1em;}

/* ---------------- layout ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto;}
.sec{padding:110px var(--pad);max-width:var(--maxw);margin:0 auto;}
.eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:28px;}
.rule{width:34px;height:2px;background:var(--accent);display:block;flex:none;}
.eyebrow-label{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.18em;color:var(--accent);}
h2{font-size:42px;font-weight:700;line-height:1.12;max-width:21ch;margin:0 0 32px;}
h2.wide{max-width:26ch;}
.body-copy{font-size:17px;line-height:1.7;color:var(--muted);max-width:74ch;margin:0 0 22px;}
.body-copy.narrow{max-width:62ch;}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:120px var(--pad) 100px;}
.hero-deco{position:absolute;top:150px;right:80px;width:330px;height:400px;pointer-events:none;z-index:0;}
.hero .wrap{position:relative;}
h1{font-size:66px;font-weight:700;line-height:1.05;max-width:17ch;margin:0 0 34px;}
.lede{font-size:19px;line-height:1.65;color:var(--muted);max-width:58ch;margin:0 0 44px;}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------------- assess cards ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);margin-top:56px;}
.card{padding:34px 32px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.card:nth-child(3n){border-right:none;}
.card:nth-child(n+4){border-bottom:none;}
.card h3{font-size:20px;font-weight:700;margin:0 0 14px;}
.card p{font-size:15px;line-height:1.65;color:var(--muted);margin:0;}

/* ---------------- anatomy table ---------------- */
.anatomy{border:1px solid var(--hair);margin-top:48px;}
.anatomy-head{display:flex;justify-content:space-between;gap:24px;padding:20px 32px;border-bottom:1px solid var(--hair);flex-wrap:wrap;}
.anatomy-head span{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--accent);}
.anatomy-head span.right{color:var(--dim);}
.anatomy-row{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:26px 32px;border-bottom:1px solid var(--hair);}
.anatomy-row:last-child{border-bottom:none;}
.anatomy-key{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--accent);}
.anatomy-val{font-size:16px;line-height:1.65;color:var(--muted);margin:0;}
.anatomy-val strong{color:var(--ink);font-weight:700;}

/* ---------------- handling block ---------------- */
.handling{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;border-left:3px solid var(--accent);
  padding:40px 44px;margin-top:40px;background:var(--panel);}
.handling h3{font-size:26px;font-weight:700;line-height:1.2;margin:16px 0 0;max-width:20ch;}
.handling ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;}
.handling li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:16px;line-height:1.65;color:var(--muted);}
.handling li::before{content:"—";color:var(--accent);}

/* ---------------- funding ---------------- */
.funding{border-left:3px solid var(--accent);padding:44px 48px;background:var(--panel);}
.funding h2{font-size:28px;max-width:44ch;margin-bottom:36px;line-height:1.3;}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;padding-bottom:32px;border-bottom:1px solid var(--hair);margin-bottom:32px;max-width:760px;}
.stat-label{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--accent);margin-bottom:10px;}
.stat-num{font-size:38px;font-weight:700;letter-spacing:-0.02em;line-height:1;margin-bottom:10px;}
.stat-note{font-size:15px;color:var(--muted);line-height:1.5;}
.fine{border-top:1px solid var(--hair);margin-top:32px;padding-top:28px;}
.fine p{font-size:15px;line-height:1.65;color:var(--dim);max-width:80ch;margin:0;}

/* ---------------- team ---------------- */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:52px;max-width:840px;}
.member{border-top:2px solid var(--accent);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  border-left:1px solid var(--hair);padding:32px;display:flex;flex-direction:column;}
.role{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--accent);margin-bottom:16px;}
.member h3{font-size:24px;font-weight:700;margin:0 0 16px;}
.member p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 28px;flex:1;}
.creds{border-top:1px solid var(--hair);padding-top:18px;display:flex;flex-direction:column;gap:7px;}
.cred{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--dim);}

/* ---------------- contact ---------------- */
.contact{background:var(--accent);padding:110px var(--pad);}
.contact-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start;}
.contact .eyebrow-label{color:#12100f;}
.contact .rule{background:#12100f;}
.contact h2{font-size:46px;color:#12100f;margin:0 0 24px;max-width:14ch;}
.contact .intro{font-size:17px;line-height:1.65;color:rgba(18,16,15,0.88);max-width:46ch;margin:0 0 40px;}
.direct-label{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:rgba(18,16,15,0.9);margin-bottom:12px;}
.direct-link{font-size:22px;font-weight:700;color:#12100f;text-decoration:none;border-bottom:1px solid rgba(18,16,15,0.45);padding-bottom:5px;display:inline-block;}
.direct-link-sm{font-size:15px;font-weight:600;letter-spacing:0.005em;overflow-wrap:anywhere;padding-bottom:4px;}
.scope-note{font-size:13px;line-height:1.75;color:rgba(18,16,15,0.96);max-width:56ch;margin:40px 0 0;}

/* ---------------- form ---------------- */
.form{display:flex;flex-direction:column;gap:22px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;}
.field label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.14em;color:#12100f;}
.field input,.field select,.field textarea{background:#F6DCD4;color:#12100f;border:0;padding:15px 16px;
  font-family:var(--sans);font-size:16px;width:100%;border-radius:0;}
.field textarea{min-height:120px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:rgba(18,16,15,0.62);}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #12100f;outline-offset:2px;}
.field-help{font-size:13px;line-height:1.55;color:rgba(18,16,15,0.92);margin:0;}
.consent{display:flex;gap:12px;align-items:flex-start;}
.consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:#12100f;}
.consent span{font-size:13px;line-height:1.6;color:rgba(18,16,15,0.92);}
.consent a{color:#12100f;}
.required-note{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;line-height:1.8;color:rgba(18,16,15,0.92);margin:0;}
.form-status{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:#12100f;min-height:18px;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* keyboard focus, everywhere, not just form fields */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;}
.contact a:focus-visible,.contact button:focus-visible{outline-color:#12100f;}

/* ---------------- footer ---------------- */
.ftr{padding:44px var(--pad);}
.ftr-inner{max-width:var(--maxw);margin:0 auto;}
.ftr-inner .ftr-scope{padding:0;margin-left:0;}
.ftr-disclaimer{font-size:15px;line-height:1.7;color:var(--muted);max-width:70ch;margin:0 0 28px;}
.ftr-scope{font-size:13px;line-height:1.8;color:var(--muted);max-width:100ch;margin:0 auto 28px;padding:0 var(--pad);}
.ftr-bar{border-top:1px solid var(--hair);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--dim);}
.ftr-links{display:flex;gap:24px;flex-wrap:wrap;}
.ftr a{color:var(--dim);text-decoration:none;}
.ftr a:hover{color:var(--accent);}

/* ---------------- legal pages ---------------- */
.legal{padding:80px var(--pad) 110px;max-width:840px;margin:0 auto;}
.legal h1{font-size:44px;margin:0 0 14px;max-width:none;}
.legal .updated{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--accent);margin:0 0 52px;}
.legal h2{font-size:24px;margin:52px 0 16px;max-width:none;}
.legal h3{font-size:16px;margin:30px 0 10px;font-weight:700;letter-spacing:0;}
.legal p,.legal li{font-size:16px;line-height:1.75;color:var(--muted);}
.legal p{margin:0 0 18px;}
.legal ul{margin:0 0 18px;padding-left:20px;}
.legal li{margin-bottom:9px;}
.legal strong{color:var(--ink);font-weight:700;}
.legal a{color:var(--accent);}
.legal code{font-family:var(--mono);font-size:14px;color:var(--ink);}
.legal .box{background:var(--panel);border-left:3px solid var(--accent);padding:26px 30px;margin:0 0 26px;}
.legal .box p:last-child{margin-bottom:0;}
.legal table{width:100%;border-collapse:collapse;margin:0 0 26px;}
.legal th,.legal td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.6;vertical-align:top;}
.legal th{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--accent);font-weight:700;}
.legal td{color:var(--muted);}
.table-scroll{overflow-x:auto;}

/* ---------------- cookie banner ---------------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--hair-strong);
  padding:22px var(--pad);display:none;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:9999;}
.cookie-banner[data-open="true"]{display:flex;}
.cookie-copy{font-size:14px;line-height:1.65;color:var(--muted);max-width:78ch;margin:0;}
.cookie-copy a{color:var(--accent);}
.cookie-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  :root{--pad:24px;}
  .nav{display:none;}
  h1{font-size:40px;}
  h2{font-size:30px;}
  .hero{padding:64px var(--pad) 56px;}
  .hero-deco{display:none;}
  .sec{padding:64px var(--pad);}
  .card-grid{grid-template-columns:1fr;}
  /* The base rules strip the right border from every 3rd card and the bottom
     border from cards 4 to 6, which is correct for the three-column desktop
     grid. In one column it merged the last three cards into a single box.
     A media query adds no specificity, so plain ".card" could never win
     against ".card:nth-child(n+4)". These selectors match it. */
  .card,
  .card:nth-child(3n){border-right:none;}
  .card,
  .card:nth-child(n+4){border-bottom:1px solid var(--hair);}
  .card:last-child,
  .card:nth-child(n+4):last-child{border-bottom:none;}
  .anatomy-row{grid-template-columns:1fr;gap:10px;padding:22px 20px;}
  .anatomy-head{padding:16px 20px;}
  .handling{grid-template-columns:1fr;gap:28px;padding:28px 24px;}
  .funding{padding:28px 24px;}
  .stats{grid-template-columns:1fr;gap:28px;}
  .team-grid{grid-template-columns:1fr;}
  .contact{padding:64px var(--pad);}
  .contact h2{font-size:32px;}
  .contact-grid{grid-template-columns:1fr;gap:44px;}
  .field-row{grid-template-columns:1fr;}
  .legal{padding:56px var(--pad) 80px;}
  .legal h1{font-size:32px;}
  .cookie-banner{padding:20px var(--pad);}
}

/* ------------------------------------------------------------------ *
 * Fixes
 * ------------------------------------------------------------------ */

/* The header is sticky, so an anchor jump used to park the target heading
   underneath it. Every in-page link on the site depends on this. */
[id]{scroll-margin-top:100px;}

/* Symmetry of choice: Decline and Accept have to read as equal options.
   The default ghost border is 1.69:1 against the panel, which is also
   below the 3:1 WCAG needs for a control boundary. */
.cookie-actions .btn-ghost{border-color:var(--ink);}
.cookie-actions .btn-ghost:hover{border-color:var(--accent);}

/* Email address in the contact panel. */
.direct-label-2{margin-top:30px;}

@media (max-width:1000px){
  [id]{scroll-margin-top:80px;}
}

/* ================================================================== *
 * iOS AND SMALL-SCREEN REFINEMENTS
 *
 * Everything below was added after testing the site at iPhone widths.
 * Nothing here changes the desktop layout.
 * ================================================================== */

/* Dark backgrounds make stems look heavy on Retina displays unless the text
   is antialiased rather than subpixel-rendered. */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* Safari applies a translucent grey wash to anything tappable. The default is
   a muddy black over this palette; the accent at low alpha reads as intentional. */
a,button,input,select,textarea,.btn{-webkit-tap-highlight-color:rgba(232,92,67,0.24);}

/* Safari needs the prefix; without it the sticky header has no blur at all. */
.hdr{-webkit-backdrop-filter:blur(8px);}

/* ---------------- safe areas ----------------
   Paired with viewport-fit=cover in the <meta viewport> of every page.
   Without these, content sits underneath the Dynamic Island in landscape
   and underneath the home indicator at the bottom of every iPhone. */
.hdr{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
.sec,.hero,.contact,.ftr,.legal{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
.ftr{padding-bottom:max(44px,calc(env(safe-area-inset-bottom) + 20px));}

/* ---------------- form controls ----------------
   iOS draws its own chrome on inputs and selects: rounded corners, an inner
   top shadow, and a system-blue caret well. -webkit-appearance:none strips it
   so the fields match the flat design on every platform. Scoped to .field so
   the two consent checkboxes keep their native control, which is what makes
   them recognisable as checkboxes. */
.field input,.field select,.field textarea{
  -webkit-appearance:none;appearance:none;border-radius:0;
}
/* Stripping the appearance also removes the select's arrow, so it is drawn
   back in as a background image. */
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2312100f' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:46px;
}
/* Safari ignores accent-color on checkboxes before 17.4; the outline keeps
   the unchecked state visible against the orange panel either way. */
.consent input{outline:1px solid rgba(18,16,15,0.55);outline-offset:0;}

/* ---------------- mobile header ----------------
   At 375px the brand and the CTA could not share a row, so the button wrapped
   and the sticky header became 140px tall. On an iPhone SE that is a fifth of
   the screen, permanently, on every scroll position. The header is now one
   compact row and the call to action moved to the bottom bar, which is where
   a thumb already is. */
@media (max-width:760px){
  .hdr{padding-top:13px;padding-bottom:13px;gap:12px;flex-wrap:nowrap;}
  .hdr .btn-accent{display:none;}
  .brand{gap:11px;}
  .brand svg{width:30px;height:32px;flex:none;}
  .brand-name{font-size:18px;}
  .brand-sub{font-size:9px;letter-spacing:0.18em;margin-top:4px;}
  [id]{scroll-margin-top:74px;}
}

/* ---------------- mobile action bar ----------------
   Phone is this business's main inbound channel, so on a phone it gets a
   permanent thumb-height target. Hidden until the cookie choice is made so
   the two never stack on top of each other. */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  display:none;grid-template-columns:1fr 1.35fr;gap:1px;
  background:var(--hair-strong);
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--hair-strong);
}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.12em;
  text-decoration:none;padding:17px 10px;min-height:54px;
}
.mobile-bar-call{background:var(--panel);color:var(--ink);}
.mobile-bar-cta{background:var(--accent);color:#12100f;}
@media (max-width:760px){
  .mobile-bar[data-open="true"]{display:grid;}
  /* Keep the last of the footer clear of the bar. */
  body[data-bar="true"] .ftr{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
}

/* ---------------- cookie banner on a phone ----------------
   Six lines of copy plus two buttons in a row covered the entire hero on an
   iPhone SE. Stacked, capped, and scrollable, with the two choices equally
   weighted side by side. */
.cookie-banner{padding-bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));}
@media (max-width:760px){
  .cookie-banner{
    flex-direction:column;align-items:stretch;gap:16px;
    max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .cookie-copy{font-size:13.5px;}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .cookie-actions .btn{width:100%;}
}

/* ---------------- small phones ---------------- */
@media (max-width:400px){
  h1{font-size:34px;}
  .contact h2{font-size:28px;}
  .stat-num{font-size:32px;}
  .direct-link{font-size:20px;}
}

/* ================================================================== *
 * LANDING PAGE COMPONENTS
 * Used by the county and grant pages. Built from the existing tokens so
 * the new pages are visibly the same site.
 * ================================================================== */

.crumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:0.13em;color:var(--dim);
  padding:26px var(--pad) 0;max-width:var(--maxw);margin:0 auto;
}
.crumbs a{color:var(--dim);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{margin:0 9px;color:var(--hair-strong);}

.page-hero{padding:56px var(--pad) 8px;max-width:var(--maxw);margin:0 auto;}
.page-hero h1{font-size:52px;max-width:20ch;margin:0 0 26px;}
.page-hero .lede{margin-bottom:34px;}
@media (max-width:1000px){
  .page-hero{padding:34px var(--pad) 4px;}
  .page-hero h1{font-size:34px;}
}

/* Two-column prose + aside used on the grant pages. */
.split{display:grid;grid-template-columns:1.35fr 0.9fr;gap:56px;align-items:start;}
@media (max-width:1000px){.split{grid-template-columns:1fr;gap:36px;}}

.aside{border-left:3px solid var(--accent);background:var(--panel);padding:30px 32px;}
.aside h3{font-size:19px;margin:0 0 16px;}
.aside p,.aside li{font-size:15px;line-height:1.7;color:var(--muted);}
.aside p{margin:0 0 14px;}
.aside ul{margin:0;padding-left:18px;}
.aside li{margin-bottom:10px;}
.aside .stat-num{font-size:30px;margin:6px 0 4px;}
.aside .stat-label{margin-bottom:2px;}

/* Numbered process list. */
.steps{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--hair);}
.steps li{
  display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:26px 0;border-bottom:1px solid var(--hair);
}
.steps .n{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--accent);padding-top:4px;}
.steps h3{font-size:19px;margin:0 0 9px;}
.steps p{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0;max-width:70ch;}
@media (max-width:1000px){
  .steps li{grid-template-columns:1fr;gap:8px;padding:22px 0;}
}

/* FAQ. Plain details/summary so it works with JavaScript switched off,
   which is also what lets Google read the answers. */
.faq{border-top:1px solid var(--hair);margin-top:12px;}
.faq details{border-bottom:1px solid var(--hair);}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-0.015em;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:22px;color:var(--accent);line-height:1;
}
.faq details[open] summary::after{content:"\2013";}
.faq summary:hover{color:var(--accent);}
.faq .answer{padding:0 0 26px;}
.faq .answer p{font-size:16px;line-height:1.72;color:var(--muted);margin:0 0 14px;max-width:76ch;}
.faq .answer p:last-child{margin-bottom:0;}
.faq .answer a{color:var(--accent);}

/* Cross-links between the landing pages. */
.also{border-top:1px solid var(--hair);margin-top:56px;padding-top:34px;}
.also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);}
.also-grid a{
  background:var(--bg);padding:26px 24px;text-decoration:none;display:block;
}
.also-grid a:hover{background:var(--panel);}
.also-grid .k{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--accent);display:block;margin-bottom:11px;}
.also-grid .t{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);display:block;line-height:1.3;}
@media (max-width:1000px){.also-grid{grid-template-columns:1fr;}}

/* Closing call to action on the landing pages. */
.endcap{background:var(--accent);padding:72px var(--pad);}
.endcap-inner{max-width:var(--maxw);margin:0 auto;}
.endcap h2{color:#12100f;font-size:38px;max-width:20ch;margin:0 0 20px;}
.endcap p{font-size:17px;line-height:1.65;color:rgba(18,16,15,0.88);max-width:60ch;margin:0 0 30px;}
.endcap .btn-ghost{border-color:rgba(18,16,15,0.5);color:#12100f;}
.endcap .btn-ghost:hover{border-color:#12100f;color:#12100f;}
.endcap .btn-dark{width:auto;}
.endcap .eyebrow-label{color:#12100f;}
.endcap .rule{background:#12100f;}
@media (max-width:1000px){
  .endcap{padding:52px var(--pad);}
  .endcap h2{font-size:28px;}
}

/* The landing page hero already carries bottom padding, so the first section
   under it does not need a full 110px on top as well. */
.page-hero + .sec{padding-top:48px;}
@media (max-width:1000px){.page-hero + .sec{padding-top:34px;}}



/* ------------------------------------------------------------------ *
 * Mobile density.
 *
 * The home page runs to six sections, two of which are six-item lists. At
 * desktop padding those lists alone were nearly three screens of phone
 * scrolling. Tightening the padding on small screens costs nothing legible
 * and takes roughly two screens off the page.
 * ------------------------------------------------------------------ */
@media (max-width:760px){
  .sec{padding-top:52px;padding-bottom:52px;}
  .card{padding:22px 20px;}
  .card h3{font-size:18px;margin-bottom:9px;}
  .card p{font-size:14.5px;}
  .anatomy-row{padding:18px 18px;gap:7px;}
  .anatomy-val{font-size:15px;}
  .handling{padding:24px 20px;gap:20px;}
  .handling ul{gap:16px;}
  .handling li{font-size:15px;}
  .funding{padding:24px 20px;}
  .member{padding:24px 20px;}
  .member p{margin-bottom:20px;}
  .team-grid{gap:20px;margin-top:36px;}
  .card-grid{margin-top:36px;}
  .anatomy{margin-top:32px;}
  .body-copy{font-size:16px;}
  .faq summary{padding-top:20px;padding-bottom:20px;font-size:17.5px;}
}


/* ================================================================== *
 * COLLAPSIBLE SECTIONS
 *
 * Funding and the FAQ are reference material: most visitors do not need them
 * on the way to the contact form, and the two of them together were nearly
 * three phone screens. Folded shut by default, one tap to open, and the nav
 * links open them automatically so a jump to #funding never lands on a
 * closed box. Built on <details> so the content stays in the DOM, stays
 * indexable, and still works with JavaScript switched off.
 * ================================================================== */
.fold{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.fold > summary{
  cursor:pointer;list-style:none;display:block;position:relative;
  padding:34px 56px 34px 0;
}
.fold > summary::-webkit-details-marker{display:none;}
.fold > summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:28px;font-weight:400;color:var(--accent);line-height:1;
}
.fold[open] > summary::after{content:"\2013";}
.fold > summary:hover .fold-title{color:var(--accent);}
.fold-title{
  font-family:var(--display);font-size:27px;font-weight:700;line-height:1.2;
  letter-spacing:-0.025em;color:var(--ink);margin:0;max-width:30ch;
  transition:color .15s ease;
}
.fold-sub{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--dim);
  margin:12px 0 0;
}
.fold-body{padding:6px 0 44px;}
/* The eyebrow inside a summary keeps its row layout. */
.fold > summary .eyebrow{margin-bottom:18px;}

@media (max-width:760px){
  .fold > summary{padding:26px 44px 26px 0;}
  .fold-title{font-size:21px;}
  .fold > summary::after{font-size:24px;}
  .fold-body{padding-bottom:32px;}
}

/* A section that is nothing but a fold does not need its own big padding. */
.sec.sec-fold{padding-top:0;padding-bottom:0;}
.sec.sec-fold + .sec.sec-fold{padding-top:0;}

/* ------------------------------------------------------------------ *
 * Tap targets
 *
 * The footer links render at 14px tall, which is roughly a third of the
 * ~44px a thumb reliably hits, and they sit in a tight wrapping row. Padding
 * grows the hit area without moving the type, and the row gap comes down so
 * the footer does not get taller for it. Inline links inside a sentence are
 * deliberately left alone: padding those would break the line they sit in.
 * ------------------------------------------------------------------ */
.ftr-links{gap:2px 24px;}
.ftr-links a{display:inline-block;padding:13px 0;}
.ftr-bar > span a{display:inline-block;padding:13px 0;}
.ftr-bar{padding-top:14px;}

/* The phone number in the contact panel is a primary action on mobile. */
.direct-link{padding:10px 0 9px;}

/* Summary rows are already tall, but make the whole row obviously live. */
.faq summary,.fold > summary{-webkit-tap-highlight-color:rgba(232,92,67,0.18);}

/* Nav links sat at 15px tall. Fine for a mouse, too small for a finger on an
   iPad, where the nav is still on screen. Padding grows the hit area to ~39px
   without changing the header height, since the brand block is already taller. */
.nav a{display:inline-block;padding:12px 0;}

/* The consent boxes are inside their <label>, so the whole row already toggles
   them. Bigger boxes just make a direct hit easier. Applied on every touch
   width, which includes iPad portrait at 768px, not just phones. */
@media (pointer:coarse),(max-width:1024px){
  .consent input{width:21px;height:21px;margin-top:1px;}
  .consent{gap:14px;}
}

/* ------------------------------------------------------------------ *
 * Narrow-screen overflow
 *
 * Contact@ThresholdSecurityConsulting.com is 39 characters with no break
 * opportunity in it. At 320px it rendered 332px wide, pushed the document
 * past the viewport, and dragged the fixed cookie banner out with it, so a
 * page with no table on it was still scrolling sideways. The contact panel
 * already handled this with overflow-wrap; everywhere else did not.
 * ------------------------------------------------------------------ */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere;}
.legal p,.legal li,.legal td,.legal th,.body-copy,.ftr-scope,.ftr-disclaimer{overflow-wrap:break-word;}
.legal code{overflow-wrap:anywhere;}

/* Belt and braces on the table wrapper: without an explicit max-width a wide
   table can still push its scroll container instead of scrolling inside it. */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* The banner is fixed to the viewport, so it should never be sized by the
   document width even if something else on the page misbehaves later. */
.cookie-banner{max-width:100vw;box-sizing:border-box;}

/* One quiet line of county links under the hero. Deliberately not a card
   grid: it gives the county pages an entry point at the top of the page
   without putting another block of boxes between the hero and the work. */
.hero-geo{
  margin:30px 0 0;
  /* Label comes from .eyebrow-label so it matches every other label on the
     site: mono, 12px, 700, accent. The county links pick up the same mono
     treatment the nav uses, in ink, so the line reads as one piece. */
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.12em;color:var(--dim);
}
.hero-geo .eyebrow-label{margin-right:8px;}
.hero-geo a{
  /* Same tracking as the label. In a mono face a different letter-spacing on
     the same line is the thing that reads as "wrong font". */
  color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:0.18em;
  border-bottom:1px solid var(--hair-strong);padding:10px 0 3px;display:inline-block;
}
.hero-geo a:hover{color:var(--accent);border-bottom-color:var(--accent);}
@media (max-width:760px){
  /* Size and tracking stay put so the label matches every other one on the
     site. Only the line-height changes, to give the wrap room on a phone. */
  .hero-geo{line-height:2.3;margin-top:24px;}
}

/* Headings inside a merged fold sit a level below the fold's own title. */
.fold-h{
  font-family:var(--display);font-size:26px;font-weight:700;line-height:1.2;
  letter-spacing:-0.025em;color:var(--ink);margin:0 0 26px;max-width:24ch;
}
.fold-body > .fold-h:not(:first-child){margin-top:64px;}
@media (max-width:760px){
  .fold-h{font-size:21px;margin-bottom:20px;}
  .fold-body > .fold-h:not(:first-child){margin-top:44px;}
}

/* ------------------------------------------------------------------ *
 * The standard
 *
 * Sits above the two bios so the commitment reads as a firm-wide standard
 * rather than a description of two specific people. Accent edge and panel,
 * the same treatment the funding and handling blocks get, because it is the
 * same kind of statement: this is how we operate, not a nice-to-have.
 * ------------------------------------------------------------------ */
.standard{
  border-left:3px solid var(--accent);background:var(--panel);
  padding:32px 36px;margin:40px 0 0;max-width:78ch;
}
/* Matches .body-copy exactly. The accent edge carries the emphasis; the type
   should not also be a different size and colour from the rest of the page. */
.standard p{
  font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 18px;max-width:64ch;
}
.standard p:last-child{margin-bottom:0;}

@media (max-width:760px){
  .standard{padding:24px 20px;margin-top:32px;}
  .standard p{font-size:16px;}
}