/* ============================================================================
   Top Tier Strategies, shared brutalist design system.
   Extracted and flattened from the locked consumer concept "trust-color-red"
   (apps/tts-concepts/trust-color-red). The concept carried five stacked <style>
   override blocks that fought each other; this file is the resolved final state,
   so both the consumer site and the contractor mini-sites can import one sheet
   and read as one family (W-1 Section 2: "the two properties read as one family").

   Type:  Archivo (display), Hanken Grotesk (body), IBM Plex Mono (labels).
   Color: red on white, with a slate band color and a true-navy trust panel.
   ========================================================================== */

:root{
  --paper:#ffffff;        /* page + light card surfaces (white; matches trust-color-red) */
  --ink:#2c2d31;          /* near-black text + borders */
  --muted:#5c5f66;        /* secondary text */
  --card:#ffffff;

  --red:#c0392b;          /* primary accent */
  --red-bright:#ff5a45;   /* accent digits on dark bands (reads on slate/navy) */
  --slate:#474c54;        /* metrics / trust strip / CTA / stats band color */
  --navy:#1f3a5f;         /* the "we check the contractor" vetting panel */
  --label:#3f434a;        /* readable color for small mono captions on white */

  --border:3px solid var(--ink);
  --border-thin:2px solid var(--ink);
  --shadow:8px 8px 0 var(--ink);
  --shadow-sm:5px 5px 0 var(--ink);

  /* W-5 Section 1b: one token owns every section's top/bottom rhythm. */
  --space-section:clamp(56px,7vw,88px);
  --space-section-tight:clamp(34px,4.5vw,52px);

  /* W-5: ONE body-copy size. Every prose paragraph pulls from this so the page
     can't drift into three different body sizes again. Lead/intro paragraphs use
     the same size; emphasis comes from weight and color, not a bigger font. */
  --text-body:clamp(17px,1.2vw,18.5px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Archivo",Impact,sans-serif;font-weight:800;text-transform:uppercase;line-height:0.98;letter-spacing:0.01em}
.mono{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:0.08em}
.soft{font-family:"Hanken Grotesk",sans-serif;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
a{color:inherit}
img{max-width:100%}

.section{padding:var(--space-section) 0}
.inner{max-width:1080px;margin:0 auto;padding:0 28px}

/* W-5 Section 1b: the --space-section token is the single source of section
   spacing. It is applied below at the points where a section actually owns a gap:
   the .sec-head top gap, and the self-contained bands' inner wrappers (hero,
   mapband, fin, cta). It is never picked per-component. Full-bleed bordered bands
   (metric/trust strips, the vetting panel, photo bands) butt edge-to-edge with
   their hard borders and carry only their own inner inset. */

/* The closing CTA band always gets a token of breathing room above it, so the
   last content section never butts the slate edge with no gap. */
main > .cta-band{margin-top:clamp(56px,6vw,72px)}
/* but a full-bleed bordered grid (the quote / stat blocks) butts the CTA directly,
   so its vertical dividers meet the slate band's top border, no white gap */
main > section:has(.assurances) + .cta-band,
main > section:has(.stats) + .cta-band,
main > section:has(.checks) + .cta-band,
main > .content-section + .cta-band{margin-top:0}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#ffffff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}

/* eyebrow: one style, solid black chip, white text (reads on light and dark) */
.tag{display:inline-block;background:var(--ink);color:#ffffff;border:var(--border-thin);
  padding:6px 11px;font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;line-height:1.3;margin-bottom:6px}
/* W-5: chips defend themselves. As a child of a flex/grid container they would
   otherwise be stretched to full width by the parent's default align-items:stretch
   (this is what made the about-page eyebrow span the whole panel). Pin to content
   size so the chip looks identical no matter what kind of box it sits in. */
.tag,.eyebrow{align-self:flex-start;width:fit-content;max-width:100%}

/* ---- buttons ---- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;font-size:12.5px;
  padding:12px 19px;border:var(--border);background:var(--red);color:#ffffff;
  box-shadow:var(--shadow-sm);transition:transform .08s ease, box-shadow .08s ease, background .08s ease, color .08s ease;
}
.btn:hover{background:var(--ink);color:#ffffff;box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}
.btn:active{transform:translate(5px,5px);box-shadow:none}
.btn.ink{background:var(--ink);color:#ffffff}
.btn.ink:hover{background:var(--red);color:#fff}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#ffffff}
.btn.lg{font-size:14px;padding:15px 24px;box-shadow:var(--shadow)}
.btn.lg:hover{box-shadow:3px 3px 0 var(--ink)}

/* ---- nav ---- */
header.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 28px;max-width:1180px;margin:0 auto}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wm-logo{height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:12.5px;text-transform:uppercase;letter-spacing:0.06em;padding:8px 12px;border:2px solid transparent}
.nav-links a:hover{border:var(--border-thin);background:var(--ink);color:#ffffff}
.nav-toggle{display:none}

/* ---- hero ---- */
.hero{border-bottom:var(--border-thin)}
.hero-inner{max-width:1180px;margin:0 auto;padding:var(--space-section) 28px;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(27px,3.6vw,44px);font-weight:700;margin-bottom:24px;max-width:16ch}
.hl{background:var(--red);color:#fff;padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:var(--border-thin);padding:6px 12px;background:var(--ink);color:#ffffff;font-size:12px;margin-bottom:13px}
.hero p.sub{font-size:clamp(15.5px,1.6vw,18px);max-width:48ch;margin-bottom:30px;color:var(--muted);line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
/* hero image cell: a bright photo filling the right column of a text hero so it is
   not half-empty (about). Bordered + offset like the other cards in the family. */
.hero-art{border:var(--border);box-shadow:var(--shadow);background-size:cover;background-position:center;min-height:360px;align-self:stretch;background-color:var(--navy)}
@media(max-width:900px){.hero-art{min-height:240px}}
/* about hero headline: a touch wider so each forced line ("the relationship.")
   stays whole instead of wrapping into jagged red boxes. */
#ab-h{max-width:19ch}
#fin-h{max-width:18ch}
.trust-note{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);max-width:46ch;line-height:1.5}
.trust-note .tick{width:20px;height:20px;background:var(--ink);color:#ffffff;display:grid;place-items:center;flex:0 0 auto;font-size:13px;margin-top:1px}

/* ---- location selector (primary CTA, hero) ---- */
.locator{border:var(--border);background:var(--paper);box-shadow:var(--shadow-sm);padding:16px 18px;margin-bottom:22px;max-width:46ch}
.locator label{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:6px}
.locator .row{display:flex;gap:10px;flex-wrap:wrap}
.locator select{flex:1 1 130px;min-height:46px;padding:10px 12px;border:var(--border-thin);background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",sans-serif;font-size:16px}
.locator select:disabled{opacity:.55}
.locator .btn{min-height:46px}

/* ---- before / after widget (static slider; camera capture is a placeholder) ---- */
.ba{border:var(--border);background:var(--slate);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.ba .panel-tag{position:relative;border-bottom:var(--border-thin);background:var(--paper);padding:10px 16px;font-size:11px;display:flex;justify-content:space-between;z-index:3}
.ba .panel-tag.ba-headline{align-items:center;gap:12px;padding:13px 16px}
.ba-h{font-family:"Archivo",sans-serif;font-weight:700;font-size:14px;letter-spacing:0;text-transform:none;line-height:1.22;color:var(--ink)}
.ba-drag{font-family:"IBM Plex Mono",monospace;font-size:10px;opacity:.65;white-space:nowrap;flex:0 0 auto;text-transform:uppercase;letter-spacing:.06em}
.ba-stage{position:relative;aspect-ratio:4/3.4;overflow:hidden;touch-action:none;user-select:none;cursor:ew-resize}
.ba-layer{position:absolute;inset:0}
.ba-media{position:absolute;inset:0}
.ba-media svg{width:100%;height:100%;display:block}
.ba-media img{width:100%;height:100%;object-fit:cover;display:block}
.ba-media[data-after] img{filter:brightness(1.1) saturate(1.34) contrast(1.05)}
.ba-after{clip-path:inset(0 0 0 var(--pos,45%))}
.ba-tag{position:absolute;bottom:14px;z-index:4;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border:var(--border-thin);background:var(--paper);color:var(--ink)}
.ba-tag.before{left:14px;background:var(--ink);color:#ffffff}
.ba-tag.after{right:14px}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos,55%);width:3px;background:var(--paper);z-index:5;transform:translateX(-1.5px);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos,55%);z-index:6;width:44px;height:44px;transform:translate(-50%,-50%);background:var(--red);border:var(--border);display:grid;place-items:center;color:#fff;font-size:15px;pointer-events:none;box-shadow:var(--shadow-sm)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:7;margin:0}
.ba-foot{z-index:3;border-top:var(--border-thin);background:var(--ink);color:#ffffff;padding:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ba-capture{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;
  padding:11px 14px;border:var(--border-thin);background:var(--red);color:#fff;
}
.ba-capture:hover{background:var(--paper);color:var(--ink)}
.ba-capture svg{width:17px;height:17px;flex:0 0 auto}
.ba-toggle{font-family:"IBM Plex Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;padding:11px 14px;border:var(--border-thin);background:transparent;color:#ffffff;cursor:pointer}
.ba-toggle:hover{background:var(--paper);color:var(--ink)}
.ba-hint{font-family:"IBM Plex Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--label);text-align:center;margin-top:10px}

/* ---- credibility metrics band (slate) ---- */
.metrics{background:var(--slate);color:#ffffff;border-bottom:var(--border);box-shadow:inset 0 12px 24px -22px rgba(0,0,0,.38)}
.metrics-track{display:grid;grid-template-columns:repeat(4,1fr)}
.metric{padding:30px 24px;border-right:2px solid rgba(255,255,255,.18)}
.metric:last-child{border-right:none}
.metric .big{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(30px,3.8vw,48px);line-height:0.85}
.metric .big .o{color:var(--red-bright)}
.metric .cap{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;margin-top:10px;display:block;color:#eef3f8}

/* ---- trust strip (slate, white check icons) ---- */
.trust-strip{background:color-mix(in srgb, var(--slate), #fff 16%);color:#ffffff;overflow:hidden;border-bottom:var(--border)}
.trust-track{display:flex;flex-wrap:wrap}
.trust-item{flex:1 1 0;min-width:180px;padding:18px 22px;border-right:2px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:12px}
.trust-item:last-child{border-right:none}
.trust-item .ticon{width:23px;height:23px;flex:0 0 auto;color:#ffffff}
.trust-item .lbl{font-family:"Archivo",sans-serif;font-weight:800;font-size:17px;text-transform:uppercase;letter-spacing:0.01em;line-height:1}

/* ---- section head ---- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:var(--space-section) 24px 8px;max-width:1200px;margin:0 auto}
.sec-head h2{font-size:clamp(34px,4.6vw,54px);font-weight:800}
.sec-head .idx{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--red);font-weight:700}
.sec-sub{max-width:1200px;padding:0 24px 30px;margin:0 auto;font-size:18px;color:var(--muted)}
/* W-5: prose body for a content section. Shares the .sec-head container box, so its
   left edge lines up exactly under the heading, and it is ALWAYS left-aligned. Use
   this for section copy under a .sec-head. (.finband stays the centered financing
   teaser; do not reuse it for prose, that mismatch is what caused left headings over
   centered paragraphs.) */
.sec-body{max-width:1200px;margin:0 auto;padding:0 24px;text-align:left}
.sec-body p{max-width:74ch;font-size:var(--text-body)}
.sec-body p + p{margin-top:13px}
.sec-head + .sec-body{margin-top:16px}
/* W-5: a bare content section (a .sec-head + .sec-body with no band styling) still
   needs the separating border and bottom rhythm the full-bleed bands carry, or it
   reads as floating with no line above it and its copy butts the next section with
   no gap. This gives every plain section the hard top border + bottom padding the
   bands have, so section separation is uniform down the whole page. */
.content-section{border-top:var(--border);padding-bottom:var(--space-section)}
/* chips inside a left content section align left under the heading, not centered */
.content-section .worktags{max-width:1200px;justify-content:flex-start}
/* when a section has a headline but NO sub, the grid would butt the headline; give
   it the same gap the sub would have provided */
.sec-head + .assurances,.sec-head + .stats,.sec-head + .vblocks,.sec-head + .steps,
.sec-head + .citygrid,.sec-head + .workgrid,.sec-head + .vetgrid-wrap,.sec-head + .flow{margin-top:30px}

/* ---- how it works ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border)}
.step{padding:32px 26px;border-right:var(--border);position:relative;background:var(--paper)}
.step:last-child{border-right:none}
.step .stepnum{font-family:"Archivo",sans-serif;font-weight:800;font-size:60px;line-height:0.8;color:var(--navy);-webkit-text-stroke:1.5px var(--ink);margin-bottom:14px;display:block}
.step h3{font-size:20px;font-weight:700;margin-bottom:12px}
.step p{font-size:16.5px;color:var(--muted)}
.step .arrow{position:absolute;top:34px;right:-16px;z-index:3;width:30px;height:30px;background:var(--navy);color:#ffffff;display:grid;place-items:center;border:var(--border-thin)}
.step .arrow svg{width:15px;height:15px}
.step:last-child .arrow{display:none}

/* ---- vetting panel (true navy) + check rows ---- */
.vet{border-top:var(--border);display:grid;grid-template-columns:1fr 1.15fr}
.vet-left{padding:40px 28px;border-right:var(--border);color:#eef3f8;position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  background-color:var(--navy);
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px)}
.vet-left h2,.vet-left p{align-self:stretch}
.vet-left .mono{display:inline-block;background:var(--ink);color:#fff;border:var(--border-thin);padding:6px 11px;font-size:12px;margin-bottom:22px}
.vet-left h2{font-size:clamp(24px,3vw,38px);font-weight:700;margin-bottom:18px;color:#ffffff}
.vet-left h2 .o{color:var(--red)}
.vet-left p{font-size:17px;color:#f2f6fa}
/* "Vetted Before Listed" stamp: white, rounded, rotated, hard drop shadow */
.vet-left .stamp{align-self:center;margin:48px 0 6px;background:#ffffff;color:var(--red);border:3px solid var(--red);border-radius:9px;
  box-shadow:10px 10px 0 var(--ink);transform:rotate(-4deg);padding:16px 30px;
  font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.checks{list-style:none}
.check{display:flex;gap:0;border-bottom:var(--border-thin);align-items:stretch}
.check:last-child{border-bottom:none}
.check .cnum{flex:0 0 64px;display:grid;place-items:center;border-right:var(--border-thin);font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:15px;background:var(--paper)}
/* figure rows (about "where we are today"): the cell holds a stat figure (DFW+, $0)
   not a letter, so it is wider and uses the display face. Red, the single accent. */
.checks.figures .cnum{flex:0 0 108px;font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--red);letter-spacing:0;line-height:1}
/* "where we are today" left panel: a light dot-grid texture with black text instead
   of a third navy-with-lines block (no repeat of the photosplit/vet treatment). */
.whereband .vet-left{background-color:#ffffff;
  background-image:radial-gradient(var(--hair) 1.4px, transparent 1.4px);
  background-size:22px 22px;color:var(--ink)}
.whereband .vet-left h2{color:var(--ink)}
.whereband .vet-left p{color:var(--muted)}
.check .cbody{padding:20px 22px}
.check .cbody h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:0.01em;margin-bottom:5px}
.check .cbody p{font-size:15.5px;color:var(--muted)}
.check:hover{background:var(--red);color:#fff}
.check:hover .cbody h4{color:#fff}
.check:hover .cbody p{color:#fff}
.check:hover .cnum{background:var(--ink);color:#ffffff}

/* ---- value proposition blocks ---- */
.vblocks{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border)}
.vblock{padding:32px 26px;border-right:var(--border);background:var(--paper)}
.vblock:last-child{border-right:none}
.vblock .vicon{display:block;margin-bottom:14px}
.vblock .vicon svg{width:34px;height:34px;color:var(--red)}
.vblock h3{font-size:21px;font-weight:700;margin-bottom:12px}
.vblock p{font-size:16px;color:var(--muted)}

/* ---- map band: Dallas/Fort Worth metro, on the navy band the client liked ---- */
.mapband{border-top:var(--border);border-bottom:var(--border);background:var(--navy);color:#fff;position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px)}
.mapband-inner{max-width:1200px;margin:0 auto;padding:var(--space-section) 24px}
.mapband-head{max-width:640px;margin-bottom:30px}
.mapband-h{font-size:clamp(26px,3.6vw,44px);font-weight:700;color:#fff;margin:0 0 10px}
.mapband-sub{color:#eef3f8;font-size:17px}
.mapwrap{position:relative;width:100%;aspect-ratio:16/7;border:var(--border-thin);border-color:rgba(255,255,255,.22);
  background-color:rgba(0,0,0,.16);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px}
.maplines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.maplines line{stroke:rgba(255,255,255,.18);stroke-width:1.3;vector-effect:non-scaling-stroke}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:2;text-decoration:none;line-height:0}
.pin .dot{display:block;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12);transition:background .1s ease, box-shadow .1s ease}
.pin.major .dot{width:18px;height:18px;background:var(--red);box-shadow:0 0 0 6px rgba(192,57,43,.22)}
.pin .plabel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;color:#fff;line-height:1.2}
.pin:hover .dot,.pin:focus-visible .dot{background:var(--red);box-shadow:0 0 0 7px rgba(192,57,43,.3)}
.pin:hover .plabel,.pin:focus-visible .plabel{text-decoration:underline}
@media (max-width:760px){
  .mapwrap{aspect-ratio:3/4}
  .pin .plabel{font-size:10px}
}

/* ---- geo map: real DFW county outlines (Texas state page), same navy band ---- */
.mapgeo{position:relative;width:100%;max-width:880px;margin:0 auto;
  border:var(--border-thin);border-color:rgba(255,255,255,.22);
  background-color:rgba(0,0,0,.16);overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px}
.geosvg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.geosvg .county{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.28);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.geosvg .county.live{fill:rgba(192,57,43,.15);stroke:rgba(255,120,105,.55)}
.geosvg .geolink{stroke:rgba(255,255,255,.15);stroke-width:1.2;vector-effect:non-scaling-stroke}
/* inactive cities: a muted "coming online" marker, no link */
.pin.soon{cursor:default}
.pin.soon .dot{background:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.pin.soon .plabel{color:#cfd8e2}
.pin.soon:hover .dot,.pin.soon:focus-visible .dot{background:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.pin.soon:hover .plabel{text-decoration:none}
/* directional pin labels, set per city in the data to avoid overlap. The label
   carries a subtle shadow so it stays legible over county fills. */
.pin .plabel{text-shadow:0 1px 3px rgba(10,16,26,.85)}
.pin.dir-s .plabel{top:calc(100% + 7px);bottom:auto;left:50%;right:auto;transform:translateX(-50%)}
.pin.dir-n .plabel{bottom:calc(100% + 7px);top:auto;left:50%;right:auto;transform:translateX(-50%)}
.pin.dir-e .plabel{left:calc(100% + 9px);right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
.pin.dir-w .plabel{right:calc(100% + 9px);left:auto;top:50%;bottom:auto;transform:translateY(-50%)}
.pin.dir-se .plabel{top:calc(100% + 4px);bottom:auto;left:calc(50% + 7px);right:auto;transform:none}
.pin.dir-sw .plabel{top:calc(100% + 4px);bottom:auto;right:calc(50% + 7px);left:auto;transform:none}
.pin.dir-ne .plabel{bottom:calc(100% + 4px);top:auto;left:calc(50% + 7px);right:auto;transform:none}
.pin.dir-nw .plabel{bottom:calc(100% + 4px);top:auto;right:calc(50% + 7px);left:auto;transform:none}
.maplegend{display:flex;flex-wrap:wrap;gap:18px 26px;justify-content:center;margin-top:22px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#e3eaf1}
.maplegend span{display:inline-flex;align-items:center;gap:8px}
.maplegend i{width:12px;height:12px;border-radius:50%;flex:none}
.maplegend i.live{background:var(--red);box-shadow:0 0 0 4px rgba(192,57,43,.22)}
.maplegend i.soon{background:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(255,255,255,.1)}

/* ---- Texas state outline in the hero ---- */
.txmap{position:relative;width:100%;max-width:440px;margin:0;align-self:center}
.txsvg{position:absolute;inset:0;width:100%;height:100%}
.txshape{fill:rgba(31,58,95,.06);stroke:var(--ink);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.txpin{position:absolute;transform:translate(-50%,-50%);z-index:2}
.txdot{display:block;width:16px;height:16px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(192,57,43,.22);
  animation:txpulse 2.4s ease-out infinite}
@keyframes txpulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.4)}70%{box-shadow:0 0 0 14px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}
.txlabel{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--label);line-height:1.35}
.txlabel b{color:var(--red);font-weight:600}
@media (max-width:760px){.txmap{max-width:300px;margin:0 auto}}

/* ---- city hub hero (photo banner) ---- */
.cityhero{position:relative;border-bottom:var(--border);background-color:var(--navy);background-size:cover;background-position:center;color:#fff}
.cityhero-inner{max-width:1200px;margin:0 auto;padding:clamp(54px,8vw,100px) 24px}
/* a semi-transparent text box over the FULL bright photo (no whole-image gradient
   darkening): the photo stays vivid, only the box behind the words is dimmed. */
.cityhero-box{max-width:660px;background:rgba(16,23,34,.72);border:2px solid rgba(255,255,255,.18);
  box-shadow:9px 9px 0 rgba(0,0,0,.28);padding:clamp(28px,3.6vw,46px);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.cityhero .eyebrow{background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.4);color:#fff;margin-bottom:14px}
.cityhero h1{font-size:clamp(34px,6vw,62px);font-weight:800;line-height:1.03;color:#fff;margin:0 0 18px;max-width:18ch}
.cityhero .sub{color:#e8edf2;font-size:clamp(16.5px,1.7vw,20px);max-width:62ch;margin:0 0 26px;line-height:1.6}
.cityhero .hero-cta{margin-bottom:18px}
.crumbs.light{color:#c8cfd9}
.crumbs.light a{color:#c8cfd9}
.crumbs.light a:hover{color:#fff;border-bottom-color:#fff}
.crumbs.light span[aria-hidden]{color:rgba(255,255,255,.5)}
.crumbs.light span[aria-current]{color:#fff}
.trust-note.light{color:#e0e6ec}
.trust-note.light .tick{background:var(--red)}
.btn.ghost.light{background:transparent;color:#fff;border-color:#fff}
.btn.ghost.light:hover{background:#fff;color:var(--ink)}

/* ---- financing (supporting pillar, never the headline) ---- */
.fin{border-top:var(--border);background:var(--paper);position:relative;overflow:hidden}
.fin-inner{max-width:1200px;margin:0 auto;padding:var(--space-section) 24px;display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:center}
.fin h2{font-size:clamp(22px,2.7vw,34px);font-weight:700;margin-bottom:16px}
.fin p{font-size:var(--text-body);max-width:58ch;margin-bottom:10px;color:var(--muted)}
.fin .tag{margin-bottom:20px}
.fin .fineprint{font-size:13px;font-family:"IBM Plex Mono",monospace;text-transform:none;letter-spacing:0;margin-top:14px;color:var(--label)}
.fin-card{border:var(--border);background:var(--card);box-shadow:8px 8px 0 var(--navy)}
.fin-card .fc-top{background:var(--navy);color:#ffffff;padding:14px 18px;border-bottom:var(--border);display:flex;justify-content:space-between;align-items:center}
.fin-card .fc-top .mono{font-size:12px}
.fin-card .fc-amt{font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;text-transform:uppercase}
.fin-card .fc-rows{padding:6px 18px 16px}
.fc-row{display:flex;justify-content:space-between;gap:12px;border-bottom:var(--border-thin);padding:12px 0;font-size:14px}
.fc-row:last-child{border-bottom:none}
.fc-row .mono{font-size:12px;color:var(--label)}
.fc-row b{font-family:"Archivo",sans-serif;font-weight:400;font-size:16px;text-transform:uppercase;text-align:right}

/* ---- social proof (MVP: trust language, no fabricated testimonials) ---- */
.proof{border-top:var(--border)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border)}
.stat{padding:30px 24px;border-right:var(--border);text-align:left}
.stat:last-child{border-right:none}
.stat .big{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,54px);line-height:0.85;color:var(--navy)}
.stat .big .o{color:var(--red)}
.stat .cap{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;margin-top:10px;display:block;color:var(--label)}
.assurances{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border)}
.assure{display:flex;flex-direction:column;padding:28px 24px 14px;border-right:var(--border);background:var(--paper)}
.assure:last-child{border-right:none}
.assure .qmark{font-family:"Archivo",sans-serif;font-weight:800;font-size:40px;line-height:0.6;color:var(--red);display:block;margin-bottom:12px}
.assure p{font-size:17px;color:var(--ink)}
.assure .who{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;border-top:var(--border-thin);padding-top:12px;margin-top:auto;color:var(--label)}

/* ---- final cta band (slate) ---- */
.cta-band{border-top:var(--border);background:var(--slate);color:#ffffff}
.cta-inner{max-width:1200px;margin:0 auto;padding:var(--space-section) 24px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-inner h2{font-size:clamp(25px,3.6vw,46px);font-weight:700;max-width:19ch}
.cta-inner .cta-right{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-inner .btn{background:var(--red);color:#fff;box-shadow:6px 6px 0 rgba(0,0,0,.28)}
.cta-inner .btn:hover{background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
/* secondary button: outlined, not red */
.cta-inner .btn.ghost{background:transparent;color:#ffffff;border-color:#ffffff}
.cta-inner .btn.ghost:hover{background:#ffffff;color:var(--ink);box-shadow:2px 2px 0 rgba(0,0,0,.28)}
.cta-inner .free{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700}

/* ---- footer ---- */
footer.site{background:var(--ink);color:#ffffff;border-top:var(--border)}
.foot-top{max-width:1080px;margin:0 auto;padding:50px 28px 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.foot-logo{height:28px;margin-bottom:14px}
.foot-col h5{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--red);margin-bottom:14px}
.foot-col a{display:block;text-decoration:none;font-size:15px;padding:5px 0;color:#c3c6cc}
.foot-col a:hover{color:#ffffff;text-decoration:underline}
.foot-brand p{font-size:14px;color:#a7abb2;max-width:36ch}
.foot-bottom{border-top:2px solid #45474d;max-width:1080px;margin:0 auto;padding:18px 28px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#a7abb2}

/* ---- load + scroll reveal ---- */
.stagger{opacity:0;transform:translateY(14px)}
.loaded .stagger{animation:rise .42s cubic-bezier(.2,.8,.2,1) forwards}
.loaded .stagger.d1{animation-delay:.05s}.loaded .stagger.d2{animation-delay:.12s}.loaded .stagger.d3{animation-delay:.19s}.loaded .stagger.d4{animation-delay:.26s}.loaded .stagger.d5{animation-delay:.33s}
@keyframes rise{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .4s ease, transform .4s ease}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(odd){border-right:var(--border)}
  .step:nth-child(even){border-right:none}
  .step{border-bottom:var(--border)}
  .step .arrow{display:none}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .metrics-track{grid-template-columns:1fr 1fr}
  .metric{border-bottom:2px solid rgba(255,255,255,.18)}
  .metric:nth-child(odd){border-right:2px solid rgba(255,255,255,.18)}
  .metric:nth-child(even){border-right:none}
  .vet{grid-template-columns:1fr}
  .vet-left{border-right:none;border-bottom:var(--border)}
  .fin-inner{grid-template-columns:1fr}
  .vblocks{grid-template-columns:1fr}
  .vblock{border-right:none;border-bottom:var(--border)}
  .vblock:last-child{border-bottom:none}
  .stats{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:var(--border)}
  .stat:last-child{border-bottom:none}
  .assurances{grid-template-columns:1fr}
  .assure{border-right:none;border-bottom:var(--border)}
  .assure:last-child{border-bottom:none}
  .foot-top{grid-template-columns:1fr 1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){
  body{font-size:16px}
  .steps{grid-template-columns:1fr}
  .step{border-right:none}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:var(--border);flex-direction:column;align-items:stretch;padding:8px;gap:4px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px;border:var(--border-thin)}
  .nav-inner .btn{display:none}
  .nav-toggle{display:grid;place-items:center;width:44px;height:44px;background:var(--ink);color:#ffffff;border:var(--border-thin);cursor:pointer;font-size:20px}
  .trust-item{flex:1 1 50%;min-width:0;border-bottom:2px solid rgba(255,255,255,.18)}
}
@media (max-width:430px){
  .foot-top{grid-template-columns:1fr}
  .trust-item{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stagger,.reveal{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
  .btn{transition:none}
}

/* ============================================================================
   Texas state page (/tx/): breadcrumb, city cards, work tags.
   ========================================================================== */
.crumbs{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.03em;color:var(--label);margin-bottom:16px}
.crumbs a{color:var(--label);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.crumbs span[aria-hidden]{margin:0 8px;color:var(--muted)}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}

.citygrid{max-width:1200px;margin:0 auto;padding:0 24px 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
/* photo-backed card: iconic city image, scrim, text on top */
/* the photo runs full and bright; the label lives in a slim bar BELOW it, so none
   of the image is covered (W-5 Section 7: never a full-image overlay) */
.citycard{display:flex;flex-direction:column;min-height:300px;
  border:var(--border);box-shadow:var(--shadow-sm);text-decoration:none;overflow:hidden;
  background-color:var(--navy);transition:transform .12s ease, box-shadow .12s ease}
.citycard:hover,.citycard:focus-visible{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.cc-photo{flex:1 1 auto;min-height:190px;display:block;background-color:var(--navy);background-size:cover;background-position:center}
.cc-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--navy);color:#fff;border-top:3px solid #c3c6cc;padding:15px 18px}
.cc-name{font-family:"Archivo",sans-serif;font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:#fff;margin:0;line-height:1}
.cc-go{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#fff;white-space:nowrap}
.citycard:hover .cc-go,.citycard:focus-visible .cc-go{text-decoration:underline;text-underline-offset:3px}
.citynote{max-width:1200px;margin:20px auto 44px;padding:0 24px;color:var(--muted);font-size:16px}

/* service image cards */
.workgrid{max-width:1200px;margin:6px auto 48px;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
/* same pattern as the city cards: bright photo on top, label in a slim bar below
   (slate, distinct from the navy city cards). The name wraps when it is long. */
.workcard{display:flex;flex-direction:column;min-height:184px;overflow:hidden;
  border:var(--border-thin);box-shadow:var(--shadow-sm);background-color:var(--slate)}
.wc-photo{flex:1 1 auto;min-height:116px;background-color:var(--slate);background-size:cover;background-position:center}
.wc-bar{background:var(--slate);color:#fff;border-top:3px solid #c3c6cc;padding:11px 14px}
.wc-name{font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;line-height:1.18;
  text-transform:uppercase;letter-spacing:.01em;color:#fff}

/* service tag chips (city pages) */
.worktags{max-width:1200px;margin:8px auto 0;padding:0 24px;list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.worktags li{border:var(--border-thin);background:var(--card);padding:10px 16px;font-weight:600;font-size:15px}

/* contractor listing: the substance of a city page. 3-up cards, each linking to a
   contractor's per-city page. (Sample data in the static preview; real cards render
   from the DB via the Worker once a contractor passes the publish gate.) */
.prolist{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.procard{display:flex;flex-direction:column;border:var(--border);box-shadow:var(--shadow-sm);background:#ffffff;overflow:hidden;transition:transform .12s ease, box-shadow .12s ease}
.procard:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.pc-photo{height:200px;background-size:cover;background-position:center;background-color:var(--navy);border-bottom:var(--border)}
.pc-body{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.pc-badge{align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em;background:var(--navy);color:#fff;padding:5px 10px}
.pc-name{font-family:"Archivo",sans-serif;font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.pc-spec{font-size:15px;color:var(--muted);line-height:1.5}
.pc-meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--label)}
.pc-link{margin-top:auto;padding-top:10px;font-family:"IBM Plex Mono",monospace;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;color:var(--red);text-decoration:none}
.pc-link:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.prolist{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prolist{grid-template-columns:1fr}}

/* city "residential work" as a 50/50 split: copy + pills on the left, a
   recognizable local image on the right (no awkward full-width crop). */
.worksplit{border-top:var(--border)}
.worksplit-grid{max-width:1200px;margin:0 auto;padding:var(--space-section) 24px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,56px);align-items:stretch}
.worksplit-text{display:flex;flex-direction:column;justify-content:center}
.worksplit-text h2{font-size:clamp(26px,3.2vw,44px);font-weight:800;margin-bottom:14px}
.worksplit-text .sub{font-size:var(--text-body);color:var(--muted);line-height:1.62;margin-bottom:22px;max-width:52ch}
.worksplit-tags{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.worksplit-tags li{border:var(--border-thin);background:var(--card);padding:10px 16px;font-weight:600;font-size:15px}
.worksplit-photo{min-height:400px;background-size:cover;background-position:center;border:var(--border);box-shadow:var(--shadow);background-color:var(--navy)}
@media(max-width:820px){.worksplit-grid{grid-template-columns:1fr}.worksplit-photo{min-height:280px}}

/* state "Texas character" band: a portrait marquee accent beside a short line. */
.txband{border-top:var(--border);border-bottom:var(--border)}
.txband-grid{max-width:1100px;margin:0 auto;padding:var(--space-section) 24px;display:grid;grid-template-columns:340px 1fr;gap:clamp(30px,4.5vw,60px);align-items:center}
.txband-photo{aspect-ratio:3/4;background-size:cover;background-position:center;border:var(--border);box-shadow:var(--shadow);background-color:var(--navy)}
.txband-text h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;margin:14px 0 14px}
.txband-text p{font-size:var(--text-body);color:var(--muted);line-height:1.62;max-width:54ch;margin-bottom:22px}
@media(max-width:760px){.txband-grid{grid-template-columns:1fr}.txband-photo{aspect-ratio:4/3;max-height:360px}}

.finband{max-width:760px;margin:0 auto;padding:0 24px;text-align:center}
.finband p{color:var(--muted);font-size:18px;margin:0 auto 12px;max-width:62ch}
.finband .fineprint{font-size:13px;color:var(--label);line-height:1.5}

/* ============================================================================
   PALETTE: white-dominant canvas, warm paper demoted to an accent (W-5 Section 1)
   The prototype reads bright because white is the canvas and warm texture is the
   spice behind a few containers. An earlier pass inverted that: warm paper became
   the full-bleed page and grain sat over everything, which read dark and dreary.
   This restores the ratio. The canvas is white (barely warm) everywhere with no
   grain; warm paper plus a faint grain are an ACCENT surface used only behind
   specific containers; the deep step band is retired from full-bleed. Red, navy,
   ink, slate and the grays are unchanged.
   ========================================================================== */
:root{
  --surface:#fdfcfa;          /* barely-warm white: the dominant page canvas        */
  --surface-2:#f5f1ea;        /* warm paper: an ACCENT only, behind set containers   */
  --hair:rgba(44,45,49,.05);  /* faint ink wash for material dot patterns            */
}

/* the page canvas is white (a hair warm) with no grain. Brightness lives here. */
body{ background-color:var(--surface); }

/* full-bleed .proof bands are off the heavy warm fill; they sit on the white
   canvas, so rhythm comes from the hard borders and the dark bands, not a field. */
.proof{ background:var(--paper); }

/* white cards keep a barely-there vertical tonal shift so they read as a surface,
   not a flat fill. The hard border and offset stay; this is depth, not softness. */
.step,.vblock,.assure,.stat,.fin-card,.locator,.worktags li{
  background-color:#ffffff;
  background-image:linear-gradient(180deg,#ffffff 0%, #faf8f4 100%);
}

/* financing band: the one light "material" panel, a faint blueprint dot grid. */
.fin{
  background-color:#ffffff;
  background-image:radial-gradient(var(--hair) 1.4px, transparent 1.4px);
  background-size:22px 22px;
}

/* accent paper: warm surface + a faint grain at ~0.04, the demoted "spice". Used
   ONLY behind a specific container or band to break up white, never full-page. */
.paper-accent{
  background-color:var(--surface-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ---- text emphasis: lead the eye down the page ---- */
strong,b{font-weight:700;color:var(--ink)}
/* on the dark bands, bold inherits the band's light text color so it stays
   readable instead of dropping to near-black ink */
.metrics strong,.trust-strip strong,.vet-left strong,.mapband strong,
.cityhero strong,.cta-band strong,footer.site strong,.vetnote b,.vetnote strong{color:inherit;font-weight:700}
em,i{font-style:italic}
/* marker underline: a red highlighter stroke under a key phrase */
.uline{background-image:linear-gradient(transparent 60%, rgba(192,57,43,.32) 0);padding:0 .03em}
/* opening paragraph: inked and a touch larger, not the muted gray body color */
.lead{font-size:var(--text-body);color:var(--ink);line-height:1.62}

/* ============================================================================
   Alternate section treatments, so a page that covers the same ground as another
   does NOT deliver it with the same components. The home page teases with the
   4-up .steps and the navy .vet panel; the deep-dive pages use these instead.
   ========================================================================== */

/* step flow: a vertical walkthrough with big ghosted numerals (deep-dive pages) */
.flow{max-width:940px;margin:0 auto;padding:0 24px}
.flow-step{display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:start;padding:28px 0;border-top:var(--border-thin)}
.flow-step:first-child{border-top:none;padding-top:10px}
.flow-num{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(52px,8vw,88px);line-height:.76;
  color:#ffffff;-webkit-text-stroke:2px var(--ink)}
.flow-lbl{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:7px}
.flow-body h3{font-size:clamp(20px,2.4vw,26px);font-weight:700;margin-bottom:9px}
.flow-body p{font-size:17px;color:var(--muted);max-width:60ch}
.flow-body strong{color:var(--ink)}
@media (max-width:600px){
  .flow-step{grid-template-columns:1fr;gap:4px;padding:22px 0}
  .flow-num{font-size:56px}
}

/* vetting checklist: a light bordered grid with red check marks (deep-dive pages) */
.vetgrid{max-width:1080px;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;
  border:var(--border);box-shadow:var(--shadow-sm);background:#ffffff}
.vetgrid > *{border-bottom:var(--border-thin);border-right:var(--border-thin)}
.vetgrid > *:nth-child(2n){border-right:none}
.vetgrid > *:nth-last-child(-n+2){border-bottom:none}
.vetitem{display:flex;gap:15px;padding:24px 22px;align-items:flex-start;background-image:linear-gradient(180deg,#ffffff 0%, #f7f5f0 100%)}
.vc-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;margin-top:2px}
.vc-ic svg{width:16px;height:16px}
.vetitem h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.01em;margin-bottom:4px}
.vetitem p{font-size:15.5px;color:var(--muted);line-height:1.55}
/* closing cell: a filled navy note that punctuates the grid */
.vetnote{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:24px 22px;background:var(--navy);color:#fff}
.vetnote .mono{font-size:11px;color:var(--red-bright)}
.vetnote b{font-family:"Archivo",sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;line-height:1.1}
.vetnote p{font-size:14.5px;color:#eef3f8;margin:0}
.vetgrid-wrap{max-width:1080px;margin:0 auto;padding:0 24px var(--space-section)}
@media (max-width:680px){
  .vetgrid{grid-template-columns:1fr}
  .vetgrid > *{border-right:none}
  .vetgrid > *:nth-last-child(-n+2){border-bottom:var(--border-thin)}
  .vetgrid > *:last-child{border-bottom:none}
}

/* ============================================================================
   Legal pages (/privacy/, /terms/): a clean reading layout for long-form legal
   text. Source copy lives in the L-series vault docs; nothing is invented here.
   Items still awaiting facts or counsel are wrapped in .flag so they are visible
   for review and never read as final.
   ========================================================================== */
.legal-hero{border-bottom:var(--border);background:#ffffff}
.legal-hero .inner{padding:clamp(40px,5vw,64px) 28px clamp(28px,3vw,40px)}
.legal-hero h1{font-size:clamp(30px,4vw,48px);font-weight:800;margin:14px 0 12px}
.legal-meta{font-family:"IBM Plex Mono",monospace;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--label);display:flex;flex-wrap:wrap;gap:8px 20px}
.legal-intro{max-width:820px;margin:18px auto 0;padding:0 28px;color:var(--muted);font-size:16.5px}
.legal{max-width:820px;margin:0 auto;padding:clamp(34px,4vw,52px) 28px clamp(50px,6vw,76px);font-size:16.5px}
.legal h2{font-family:"Archivo",sans-serif;font-weight:800;text-transform:none;font-size:23px;letter-spacing:0;line-height:1.15;
  margin:38px 0 12px;padding-top:20px;border-top:var(--border-thin)}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal h3{font-family:"Archivo",sans-serif;font-weight:700;text-transform:none;font-size:17px;letter-spacing:0;margin:22px 0 8px}
.legal p{margin:0 0 14px;color:#33353b;line-height:1.66}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin:0 0 8px;color:#33353b;line-height:1.6}
.legal strong{color:var(--ink)}
.legal a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.legal table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:15px}
.legal th,.legal td{border:var(--border-thin);padding:9px 12px;text-align:left;vertical-align:top}
.legal th{background:var(--ink);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.legal .allcaps{font-size:13.5px;color:#54575e;line-height:1.6;background:#faf9f7;border:var(--border-thin);padding:14px 16px}
/* a visible review flag for launch placeholders and unresolved legal inputs */
.flag{display:inline;background:#fff3f1;color:#a3271a;border:1.5px solid var(--red);border-radius:4px;
  padding:0 6px;font-family:"IBM Plex Mono",monospace;font-size:.82em;font-weight:600;letter-spacing:.01em;white-space:normal}
.legal-note{max-width:820px;margin:0 auto;padding:0 28px 40px}
.legal-note .box{border:var(--border);background:#fff3f1;box-shadow:var(--shadow-sm);padding:16px 18px;font-size:14.5px;color:#7a2418;line-height:1.55}
.legal-note .box b{color:#a3271a}

/* ============================================================================
   W-5 MARKETING KIT: shared parts the hand-authored pages pull from. Cohesion
   lives here; variety lives in which parts a page uses and in what order. Photos
   are bright stock with no flat full-image overlay (W-5 Section 7): either a
   decorative band with no text, a photo beside a solid panel, or a contained chip.
   ========================================================================== */

/* compact text hero: the how-it-works / about / financing opener. One column,
   no right-side card (the "left text + right card" home hero is NOT reused). */
.hero.compact .hero-inner{grid-template-columns:1fr;gap:0}
.hero.compact .hero-main{max-width:62ch}
.hero.compact h1{max-width:20ch}
.hero.compact p.sub{max-width:60ch}

/* photo band: a full-bleed bright stock image as a section break. Decorative,
   no text over it, so no darkening overlay is needed. */
.photoband{border-top:var(--border);border-bottom:var(--border);background-color:var(--navy);
  background-size:cover;background-position:center;height:clamp(220px,32vw,380px);position:relative}
/* a small solid caption chip, bottom-left: a contained panel, never a full scrim */
.photoband .pb-cap{position:absolute;left:0;bottom:0;margin:0;display:inline-block;
  background:var(--ink);color:#fff;border-top:var(--border-thin);border-right:var(--border-thin);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 15px}

/* photo split: a bright photo beside a solid panel. Text lives in the panel; the
   photo stays fully bright with nothing laid over it. The panel reuses the navy
   band texture so it belongs to the family. */
.photosplit{border-top:var(--border);border-bottom:var(--border);display:grid;grid-template-columns:1fr 1fr}
.photosplit .ps-text{background-color:var(--navy);
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
  color:#fff;padding:clamp(38px,4.6vw,62px) clamp(26px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.photosplit .ps-text .tag{margin-bottom:16px}
.photosplit .ps-text h2{font-size:clamp(24px,3vw,38px);font-weight:700;color:#fff;margin-bottom:16px;max-width:18ch}
.photosplit .ps-text h2 .hl{background:var(--red)}
.photosplit .ps-text p{font-size:var(--text-body);color:#eef3f8;line-height:1.62;max-width:54ch}
.photosplit .ps-text p + p{margin-top:13px}
.photosplit .ps-text strong{color:#fff}
.photosplit .ps-photo{background-size:cover;background-position:center;min-height:320px}
.photosplit.flip .ps-text{order:2}
.photosplit.flip .ps-photo{order:1}
@media (max-width:820px){
  .photosplit{grid-template-columns:1fr}
  .photosplit.flip .ps-text{order:1}
  .photosplit.flip .ps-photo{order:2}
  .photosplit .ps-photo{min-height:240px}
}

/* full-width navy statement band: text spans the inner container (matches the home
   "we check the contractor" treatment), no cramped side column. Same subtle line
   texture as the home vetting panel so the family reads consistently. */
.statement{border-top:var(--border);border-bottom:var(--border);background-color:var(--navy);
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
  color:#fff;padding:var(--space-section) 0}
.statement .inner{max-width:1080px}
.statement .tag{margin-bottom:16px}
.statement h2{font-size:clamp(28px,4vw,48px);font-weight:800;color:#fff;margin-bottom:18px;max-width:26ch}
.statement h2 .hl{background:var(--red)}
.statement p{font-size:var(--text-body);color:#eef3f8;line-height:1.62;max-width:72ch}
.statement p + p{margin-top:13px}
.statement strong{color:#fff}

/* accent-paper band: a warm contained section to break up white (mission blocks,
   honest "where we are" notes). Pulls the demoted warm paper + faint grain. */
.accentband{border-top:var(--border)}
.accentband .inner{max-width:880px}
.accentband .ab-lead{font-size:var(--text-body);color:var(--ink);line-height:1.6;max-width:64ch}
.accentband .ab-lead + p{margin-top:14px;font-size:var(--text-body);color:var(--muted);max-width:64ch;line-height:1.62}
.accentband .ab-lead strong{color:var(--ink)}

/* financing example table: the financing hero's concrete worked example. A tidy
   itemized table (distinct from the home card), amount-free per the guardrails. */
.extable{border:var(--border);background:#fff;box-shadow:var(--shadow);align-self:center}
.extable .ex-top{background:var(--navy);color:#fff;border-bottom:var(--border);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.extable .ex-top .mono{font-size:12px}
.extable .ex-top .ex-proj{font-family:"Archivo",sans-serif;font-weight:800;font-size:16px;text-transform:uppercase}
.extable .ex-rows{padding:4px 18px 14px}
.ex-row{display:flex;justify-content:space-between;gap:14px;border-bottom:var(--border-thin);padding:13px 0;font-size:14px}
.ex-row:last-child{border-bottom:none}
.ex-row .mono{font-size:12px;color:var(--label)}
.ex-row b{font-family:"Archivo",sans-serif;font-weight:400;font-size:16px;text-transform:uppercase;text-align:right}
.ex-row b .o{color:var(--red)}
.ex-note{font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:none;letter-spacing:.01em;color:var(--label);padding:0 2px;margin-top:12px}

/* ---- project request form (/request/): the form IS the page (W-5 Section 4) ---- */
.req-hero{border-bottom:var(--border);background:#fff}
.req-hero .inner{max-width:780px;padding-block:var(--space-section)}
.req-hero h1{font-size:clamp(28px,4vw,46px);font-weight:800;margin:14px 0 14px;max-width:20ch}
.req-hero .sub{font-size:clamp(16px,1.7vw,19px);color:var(--muted);max-width:60ch;line-height:1.6}
.reqwrap{max-width:780px;margin:0 auto;padding:clamp(34px,5vw,56px) 28px}
/* contact-page message form: reuses the .reqcard/.field system, constrained narrower */
.ctform-wrap{max-width:720px;margin-top:6px}
.ctform-wrap .reqcard{margin-bottom:0}
.reqstep{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);font-weight:700;margin-bottom:8px;display:block}
.reqcard{border:var(--border);background:#fff;box-shadow:var(--shadow);padding:clamp(24px,3vw,38px);margin-bottom:26px}
.reqcard h2{font-size:clamp(20px,2.4vw,28px);font-weight:800;margin-bottom:8px}
.reqcard .intro{font-size:15.5px;color:var(--muted);margin-bottom:22px;max-width:62ch;line-height:1.55}
.field{margin-bottom:18px}
.field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);font-weight:600;margin-bottom:7px}
.field .help{display:block;font-family:"Hanken Grotesk",sans-serif;text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted);font-weight:400;margin-top:3px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:var(--border-thin);background:#fff;color:var(--ink);
  font-family:"Hanken Grotesk",sans-serif;font-size:16px;line-height:1.4}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:var(--shadow-sm)}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:0}
@media (max-width:560px){.field.two{grid-template-columns:1fr}}
.consent{display:flex;gap:13px;align-items:flex-start;border:var(--border-thin);background:#faf8f4;padding:16px 18px;margin:8px 0 20px}
.consent input{flex:0 0 auto;width:22px;height:22px;margin-top:2px;accent-color:var(--red)}
.consent label{font-size:13.5px;color:#33353b;line-height:1.55}
.privacy-note{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:8px}
.privacy-note a{color:var(--red);text-underline-offset:2px}
.whatnext{border:var(--border);background:var(--navy);color:#fff;box-shadow:var(--shadow);padding:clamp(24px,3vw,34px)}
.whatnext .mono{color:var(--red-bright);font-size:11px;display:block;margin-bottom:12px}
.whatnext h2{color:#fff;font-size:clamp(19px,2.2vw,26px);margin-bottom:16px}
.whatnext ol{list-style:none;counter-reset:wn;display:grid;gap:14px}
.whatnext li{counter-increment:wn;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;font-size:15.5px;color:#eef3f8;line-height:1.5}
.whatnext li::before{content:counter(wn,decimal-leading-zero);font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;color:#fff;-webkit-text-stroke:1px var(--red-bright)}
.whatnext li strong{color:#fff}