/* ============================================================
 * Taut Tech: design system v2
 * Radix Colors: Sand (neutral) + Tomato (accent), used per Radix step guidance:
 *   1-2 page backgrounds · 3-5 component fills · 6-8 borders · 9-10 solids · 11-12 text
 * Type: four sizes only (14 / 17 / 24 / display). Hierarchy from weight, color, spacing.
 * Shape: 0.5px hairlines, no rounding, no shadows, no stripes. Motion: 250ms ease-out, once.
 * ============================================================ */

:root{
  /* Radix Sand, light */
  --sand1:#fdfdfc;--sand2:#f9f9f8;--sand3:#f1f0ef;--sand4:#e9e8e6;--sand5:#e2e1de;--sand6:#dad9d6;
  --sand7:#cfceca;--sand8:#bcbbb5;--sand9:#8d8d86;--sand10:#82827c;--sand11:#63635e;--sand12:#21201c;
  /* Radix Sand, dark (the one dark band) */
  --sandD1:#111110;--sandD2:#191918;--sandD3:#222221;--sandD6:#3b3a37;--sandD8:#62605b;--sandD11:#b5b3ad;--sandD12:#eeeeec;
  /* Radix Tomato */
  --tomato3:#feebe7;--tomato6:#fdbdaf;--tomato9:#e54d2e;--tomato10:#dd4425;--tomato11:#d13415;--tomato12:#5c271f;

  /* roles */
  --bg:var(--sand2);--bg-raised:var(--sand1);--fill:var(--sand3);
  --line:var(--sand6);--line-strong:var(--sand8);
  --text:var(--sand12);--text-2:var(--sand11);
  --accent:#D4421E;--accent-hover:#BF3A18;--btn:#BF3A18;--btn-hover:#A9330F;--btn-active:#9A2D0C; /* white-on-orange buttons: rest 5.5:1, hover 6.6:1, active 7.6:1 */--accent-text:#9A2D0C; /* vermilion kept as the one exception to Radix Tomato; accent-text darkened to 7.2:1+ against bone (was 5.7:1) so small text clears contrast under any method, not just WCAG2 */

  /* type scale: four sizes */
  --t-14:14px;--t-17:17px;--t-24:24px;--t-display:clamp(40px,5.6vw,64px);
  --disp:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(0,0,.2,1); /* ease-out */
  --dur:250ms;
  --gutter:clamp(20px,5vw,72px);--maxw:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:var(--t-17);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--tomato6);color:var(--text)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{position:relative}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}

/* ---------- type ---------- */
.display,h1,.sec-head h2,.final h2,.ph h1{font-family:var(--disp);font-weight:700;font-size:var(--t-display);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.eyebrow{font-family:var(--body);font-weight:500;font-size:var(--t-14);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.sec-head{margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{margin-top:14px;max-width:18ch}
.t-24,h3,.prob h3,.bcard h3,.step h3,.svc-row .nm,.post .pt,.ph .sub{font-family:var(--disp);font-weight:600;font-size:var(--t-24);line-height:1.25;letter-spacing:-.015em}
.t-14,.tlabel,.attr,.foot-links a,.navlink,.btag,.who,.pidx,.soon,.foot-left p{font-size:var(--t-14);line-height:1.5}
.muted{color:var(--text-2)}

/* ---------- hairlines ---------- */
.hr{border:0;border-top:.5px solid var(--line);margin:0}

/* ---------- buttons (two identities) ---------- */
.btn{font-family:var(--body);font-weight:500;font-size:var(--t-17);line-height:1;display:inline-flex;align-items:center;justify-content:center;
  padding:0 20px;height:48px;border:.5px solid transparent;border-radius:0;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn-primary{background:var(--btn);color:#fff;border-color:var(--btn)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-primary:active{background:var(--btn-active);border-color:var(--btn-active)}
.btn-primary:focus-visible{outline:2px solid var(--sand12);outline-offset:3px}
.audit .btn-primary:focus-visible{outline-color:var(--sandD12)} /* polish 2026-10-27: sand12 is near-black, so the ring flips to the light ink on the dark audit band */
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--fill)}
.btn.sm{height:36px;padding:0 14px;font-size:var(--t-14)}
.link{color:var(--text);text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:4px;text-decoration-color:var(--line-strong);transition:text-decoration-color var(--dur) var(--ease)}
.link:hover{text-decoration-color:var(--text)}

/* ---------- email capture ---------- */
.capture{display:flex;max-width:460px;border:1px solid var(--sand9);background:var(--bg-raised)} /* sand9 #8d8d86: 3.28:1 on the sand1 field, 3.17:1 on the sand2 page (was sand8 .5px, 1.83:1) */
.capture input{flex:1 1 180px;min-width:0;font-family:var(--body);font-size:var(--t-17);color:var(--text);padding:0 16px;height:48px;border:0;background:transparent}
.capture input::placeholder{color:var(--sand11,#63635e);opacity:1} /* sand11: light #63635e 5.9:1 on the sand1 field; dark #ADA59B 7.1:1 on the #1F1C19 field (was sand9 #8d8d86, 3.28:1) */
html[data-theme=dark] .capture input::placeholder{color:var(--sand11,#ADA59B)} /* fallback if the dark block ever drops sand11 */
.capture .btn{border-color:transparent;height:48px}
@media(max-width:460px){.capture{flex-direction:column;border:0;gap:8px}.capture input{flex:0 0 auto;border:1px solid var(--sand9);height:48px}}
.capture-wrap .after{margin-top:14px;font-size:var(--t-14);color:var(--text-2)}
.capture-wrap .after a{color:var(--text)}
.field-label{display:block;font-size:var(--t-14);color:var(--text-2);margin-bottom:8px}
.hero-note{margin-top:14px;font-size:var(--t-14);color:var(--text-2)}
.hero-note-top{margin:0 0 16px;max-width:46ch}
.final-after{margin-top:14px;font-size:var(--t-14)}

/* ---------- nav ---------- */
nav.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:.5px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:inline-flex;align-items:center;gap:14px;color:var(--text)}
.mark-sm{height:28px;width:auto;display:block}
.mark-lg{height:72px;width:auto;display:block}
.brand-lg{gap:18px}
.brand-lg .mark-sm{height:44px} /* footer uses the bold small mark, scaled up, not the thin large one; the large one goes hairline at this size */
.wordmark{font-family:var(--disp);font-weight:600;font-size:var(--t-14);letter-spacing:.15em;text-transform:uppercase;line-height:1}
.brand-lg .wordmark{font-size:var(--t-17)}
.nav-links{display:flex;align-items:center;gap:28px}
.navlink{font-weight:500;color:var(--text-2);transition:color var(--dur) var(--ease)}
.navlink:hover{color:var(--text)}
.nav-cta{height:36px;padding:0 14px;font-size:var(--t-14)}
.nav-links .nav-call + .nav-cta{margin-left:-16px} /* the two nav buttons sit 12px apart, links keep 28px */
@media(max-width:640px){.nav-links{gap:16px}.navlink{display:none}.navlink.nav-svc{display:inline-flex}.nav-links .nav-call + .nav-cta{margin-left:-8px}} /* phone nav: Services stays, Systems goes */
@media(max-width:480px){.nav-call{display:none}} /* phone: hero and footer carry Book a call; nav keeps Start Audit */
@media(max-width:680px){.navlink.nav-blog{display:none}} /* Blog sits in the footer on narrow screens so the wordmark and Start Audit keep their size */
/* phone tap targets: every link and button at least 44x44px (WCAG 2.5.5); visual type sizes unchanged */
@media(max-width:640px){
  .brand{min-height:44px}
  .navlink.nav-svc,.foot-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .nav-cta,.btn.sm{height:44px}
  .foot-links{gap:4px 22px;padding-top:8px}
  .svc-row .pr-cta{display:flex;align-items:center;min-height:44px;margin-top:0}
}
@media(max-width:360px){.nav-links{gap:12px}.brand{gap:10px}.nav-cta{padding:0 12px}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{max-width:14ch}
.hero h1 .em{color:var(--accent-text)}
.hero-sub{color:var(--text-2);max-width:42ch;margin:22px 0 28px}
.hero-after{margin-top:14px;font-size:var(--t-14);color:var(--text-2)}
.hero-after a{color:var(--text)}

/* hero diagram: a plain framed figure. Column headers and the loop caption are
   real HTML text (not SVG text), so they stay >=14px at every viewport instead
   of shrinking with the drawing when the SVG scales down on narrow screens. */
.figure{margin:0;border:.5px solid var(--line);background:var(--bg-raised);padding:20px}
.figure svg{display:block;width:100%;height:auto}
/* heads sit on the same columns as the boxes below (x 16-136, 200-340, 384-504 of 520), so they stay over their box when they wrap on a phone */
.figure-heads{display:grid;grid-template-columns:minmax(0,16fr) minmax(0,120fr) minmax(0,64fr) minmax(0,140fr) minmax(0,44fr) minmax(0,120fr) minmax(0,16fr);margin-bottom:10px;align-items:end}
.figure-heads span{font-size:var(--t-14);font-weight:600;line-height:1.3;color:var(--text)}
.figure-heads span:nth-child(1){grid-column:2}.figure-heads span:nth-child(2){grid-column:4}.figure-heads span:nth-child(3){grid-column:6}
@media(max-width:1099px){.figure-heads{align-items:start}} /* narrower: heads can wrap to different line counts, so their first lines share the top edge */
@media(min-width:1100px){.figure-heads span{white-space:nowrap;justify-self:center;text-align:center}} /* desktop: one line each, centred over its box, so the three heads share a baseline */
.figure-caption{margin-top:10px;text-align:center;font-size:var(--t-14);font-weight:600;color:var(--accent-text)}

/* ---------- one motion: fade in once, 250ms ease-out ---------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
.fade-up,.reveal-line>span,.step{animation:fade var(--dur) var(--ease) both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- section rhythm ---------- */
.band{padding-block:clamp(56px,9vw,112px)}
.band + .band,.sep{border-top:.5px solid var(--line)}

/* ---------- problem ---------- */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:.5px solid var(--line);border-left:.5px solid var(--line)}
@media(max-width:860px){.prob-grid{grid-template-columns:1fr}}
.prob{padding:28px 24px 32px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line)}
.prob .pn{font-size:var(--t-14);font-weight:500;color:var(--text-2)}
.prob h3{margin:12px 0 10px}
.prob p{color:var(--text-2)}

/* ---------- systems tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:.5px solid var(--line);border-left:.5px solid var(--line)}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tiles{grid-template-columns:1fr}}
.tnum{white-space:nowrap}
.tnum .sm{font-size:var(--t-24);font-weight:600;vertical-align:.18em;margin-right:2px}
.tile{padding:26px 22px 24px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--bg);transition:background-color var(--dur) var(--ease)}
.tile:hover{background:var(--bg-raised)}
.tile .tk{position:absolute}/* removed in v2 markup; kept harmless */
.tnum{font-family:var(--disp);font-weight:700;font-size:var(--t-display);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tnum .acc{color:var(--accent-text)}
.tlabel{color:var(--text-2);margin-top:12px}

/* ---------- build cards ---------- */
.build-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:.5px solid var(--line);border-left:.5px solid var(--line)}
@media(max-width:820px){.build-grid{grid-template-columns:1fr}}
.bcard{padding:28px 24px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);display:flex;flex-direction:column;background:var(--bg);transition:background-color var(--dur) var(--ease)}
.bcard:hover{background:var(--bg-raised)}
.bcard .bn{font-size:var(--t-14);font-weight:500;color:var(--text-2)}
.bcard h3{margin:12px 0 10px}
.bcard p{color:var(--text-2);margin-bottom:18px;flex:1}
.btag{align-self:flex-start;font-weight:500;color:var(--accent-text)}

/* ---------- the audit (the one dark band) ---------- */
.audit{background:var(--sandD1);color:var(--sandD12)}
.audit .eyebrow{color:var(--sandD11)}
.audit h2{color:var(--sandD12)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:.5px solid var(--sandD6)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:28px 24px 8px 0;margin-right:24px}
.step .snum{font-family:var(--disp);font-weight:700;font-size:var(--t-24);color:var(--accent);display:block;margin-bottom:14px}
.step h3{color:var(--sandD12);margin-bottom:8px}
.step p{color:var(--sandD11)}
.step .step-cta{margin-top:20px} /* polish 2026-10-27: Start Audit under step 3 */
@media(max-width:640px){.step{padding-right:0;margin-right:0}}

/* ---------- outcomes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);border-top:.5px solid var(--line);border-left:.5px solid var(--line)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{margin:0;padding:28px 24px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);display:flex;flex-direction:column;background:var(--bg-raised)}
.quote blockquote{margin:0;font-family:var(--disp);font-weight:500;font-size:var(--t-24);line-height:1.3;letter-spacing:-.015em;flex:1}
.quote .attr{margin-top:20px;color:var(--text-2)}
.quote .attr b{color:var(--text);font-weight:500}

/* ---------- final ---------- */
.final{text-align:center;padding-block:clamp(64px,10vw,120px)}
.final h2{max-width:16ch;margin:0 auto 28px}
.final .capture{margin:0 auto}

/* ---------- footer (newsletter lives here) ---------- */
footer{border-top:.5px solid var(--line);padding-block:48px 40px}
.foot-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}
.foot-left p{color:var(--text-2);margin:14px 0 0;max-width:36ch}
.foot-news h3{margin-bottom:8px}
.foot-news p.foot-title{font-family:var(--disp);font-weight:600;font-size:var(--t-24);line-height:1.25;letter-spacing:-.015em;color:var(--text);margin-bottom:8px;max-width:none} /* polish 2026-10-27: same look as the h3 it replaces on posts */
.foot-news p{color:var(--text-2);margin-bottom:16px;max-width:40ch}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:.5px solid var(--line)}
.foot-links a{font-weight:500;color:var(--text-2);transition:color var(--dur) var(--ease)}
.foot-links a:hover{color:var(--text)}

/* ---------- subpage head ---------- */
.ph{padding-top:clamp(48px,7vw,88px);padding-bottom:8px}
.ph h1{max-width:14ch;margin-top:14px}
.ph .sub{font-family:var(--body);font-weight:400;font-size:var(--t-17);line-height:1.55;letter-spacing:0;color:var(--text-2);max-width:46ch;margin-top:20px}

/* ---------- services ---------- */
.svc{border-top:.5px solid var(--line);margin-top:clamp(28px,5vw,48px)}
.svc-row{display:grid;grid-template-columns:minmax(180px,1fr) 2fr 11rem; /* fixed price column so the description column starts and ends at the same x on every row */gap:clamp(18px,3vw,36px);padding:24px 0;border-bottom:.5px solid var(--line);align-items:start}
.svc-row .de{color:var(--text-2)}
.svc-row .who{margin-top:8px;font-weight:500;color:var(--text)} /* neutral, so it does not read as a link next to Start Audit */
.svc-row .who::before{content:"For ";color:var(--text-2)}
.svc-row .pr{font-weight:600;white-space:nowrap;text-align:right}
.svc-row .pr-cta{display:block;margin-top:8px;font-size:var(--t-14);font-weight:500}
.ph-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media(max-width:820px){.svc-row{grid-template-columns:1fr;gap:6px}.svc-row .pr{text-align:left;margin-top:4px}}

/* ---------- blog ---------- */
.posts{border-top:.5px solid var(--line);margin-top:clamp(28px,5vw,48px)}
.post{display:grid;grid-template-columns:2.5ch 1fr auto;gap:clamp(16px,3vw,32px);padding:24px 0;border-bottom:.5px solid var(--line);align-items:start}
.post .pidx{font-weight:500;color:var(--text-2);padding-top:5px;font-variant-numeric:tabular-nums}
.post .pd{color:var(--text-2);margin-top:8px;max-width:60ch}
.post .soon{font-weight:500;color:var(--text-2);white-space:nowrap;padding-top:5px}
@media(max-width:700px){.post{grid-template-columns:2.5ch 1fr}.post .soon{grid-column:2}}

/* blog: next step at the end of the list (reuses the homepage final block) */
.blog-next{border-top:.5px solid var(--line)}
.blog-next h2{margin-bottom:16px}
.blog-next .sub{color:var(--text-2);max-width:46ch;margin:0 auto 28px}

/* copy pass 2026-10-26: section lede, four proof tiles, services tier terms */
.sec-head .lede{font-size:var(--t-17);line-height:1.55;color:var(--text-2);max-width:52ch;margin-top:16px}
.tiles.t4{grid-template-columns:repeat(2,1fr)} /* four tiles read as 2x2 on desktop and tablet */
@media(max-width:480px){.tiles.t4{grid-template-columns:1fr}}
.svc-row .start-here{margin-top:6px;font-size:var(--t-14);font-weight:500;color:var(--accent-text)}
.svc-row .term{display:block;margin-top:2px;font-size:var(--t-14);font-weight:400;line-height:1.5;color:var(--text-2);white-space:normal}
.svc-row .pr-cta{white-space:normal}
@media(min-width:821px){.svc-row{grid-template-columns:minmax(180px,1fr) 2fr 15rem}} /* wider price column so tier terms fit on one line */
/* blog enrich 2026-10-27: current page in the nav (aria-current="page" on Blog for /blog/ and posts, on Services for /services/).
   Text colour --text (#21201c) on the nav background: about 16:1. Thin underline as a non-colour cue. */
.navlink[aria-current="page"]{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* home visuals 2026-10-27: hero stack diagram, How we work cards, research strip (variant B). Palette = the roles above. */
.hv-svg{display:block;width:100%;height:auto;overflow:visible}
.hv-svg .hv-node{fill:var(--bg-raised);stroke:var(--line);stroke-width:1}
.hv-svg .hv-wait{fill:var(--fill);stroke:var(--line);stroke-width:1}
.hv-svg .hv-fix{fill:var(--tomato3);stroke:var(--line);stroke-width:1}
.hv-svg .hv-bar,.hv-svg .hv-dot,.hv-svg .hv-acc-f{fill:var(--accent)}
.hv-svg .hv-ln{stroke:var(--text-2)}.hv-svg .hv-ln-f{fill:var(--text-2)}
.hv-svg .hv-acc-ln{stroke:var(--accent)}.hv-svg .hv-acc-ln-f{fill:var(--accent)}
.hv-svg .hv-t1{fill:var(--text)}.hv-svg .hv-t2{fill:var(--text-2)}.hv-svg .hv-acc{fill:var(--accent-text)}
.hv-hero .hv-head{margin:0 0 12px;padding-left:10%;font-size:var(--t-14);font-weight:600;line-height:1.3;color:var(--text-2)}
.hv-hero .hv-head-fix{color:var(--accent-text)}
.hv-hero .hv-svg{aspect-ratio:520/484}
@media(max-width:460px){.hv-hero{padding:16px 12px}}
/* How we work: 2x2 on desktop, scroll-snap row with a peek on phones; prev/next are plain links (no JS) */
.hv-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:.5px solid var(--line);border-left:.5px solid var(--line)}
.hv-card{padding:28px 24px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);background:var(--bg);display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.hv-card .hv-fig{border:.5px solid var(--line);background:var(--bg-raised);padding:20px;margin-bottom:22px}
.hv-card .hv-svg{aspect-ratio:480/300}
.hv-card h3{margin-bottom:10px}
.hv-read{justify-self:start;align-self:start;font-size:var(--t-17);font-weight:500;line-height:1.5;padding-block:4px}
.hv-count{display:none}
.hv-cards:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}
@media(max-width:700px){
  .hv-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;border:0;
    margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter) calc(100% - var(--gutter) - var(--hv-cw));--hv-cw:min(80vw,340px);scrollbar-width:thin}
  .hv-card{flex:0 0 var(--hv-cw);scroll-snap-align:start;border:.5px solid var(--line);padding:20px 14px;display:flex;flex-direction:column}
  .hv-read{align-self:flex-start}
  .hv-card .hv-fig{padding:8px}
  .hv-count{display:block;margin:auto 0 0;padding-top:16px;font-size:var(--t-14);color:var(--text-2)}
}
/* variant B: research strip under the hero */
.hv-proof{padding-block:clamp(36px,5vw,56px);border-top:.5px solid var(--line)}
.hv-proof-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:24px}
.hv-proof-head .eyebrow{margin:0}
.hv-note{font-size:var(--t-14);color:var(--text-2);max-width:52ch}
.hv-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:.5px solid var(--line);border-left:.5px solid var(--line)}
@media(max-width:820px){.hv-stats{grid-template-columns:1fr}}
.hv-stat{padding:24px 22px;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);background:var(--bg)}
.hv-num{font-family:var(--disp);font-weight:700;font-size:var(--t-display);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hv-line{color:var(--text);margin:12px 0 14px;max-width:34ch}
.hv-src{font-size:16px;line-height:1.5;color:var(--text-2)}
.hv-src a{display:inline-block;padding-block:4px}
/* night mode 2026-10-27: html[data-theme=dark] swaps the raw scale, so every role above (bg, text, line, accent...) follows.
   data-theme is set before first paint by the inline script in <head> (saved choice in localStorage "tt-theme", else prefers-color-scheme).
   Warm dark, not black. Contrast (WCAG 2): text #F2EEE8 15.9:1 on bg, 14.7:1 on surface; text-2 #ADA59B 7.7:1 / 7.1:1;
   accent-text #FA8462 7.5:1 / 6.9:1; accent (rings, rules, diagram strokes) #F0643F 5.8:1 / 5.3:1; ui #8C847A (field borders, placeholder) 5.0:1 / 4.6:1;
   white on the button #BF3A18 5.5:1, button vs bg 3.4:1. Light theme values unchanged. */
:root{color-scheme:light;--ring:var(--sand12)}
html{background:var(--bg)}
html[data-theme=dark]{color-scheme:dark;
  --sand1:#1F1C19;--sand2:#161412;--sand3:#2A2622;--sand4:#302B27;--sand5:#36312C;--sand6:#3A3530;--sand7:#4A433C;--sand8:#5E574F;
  --sand9:#8C847A;--sand10:#9A9288;--sand11:#ADA59B;--sand12:#F2EEE8;
  --sandD1:#0F0E0D;--sandD2:#161412;--sandD3:#1F1C19;--sandD6:#3A3530;--sandD8:#5E574F;--sandD11:#ADA59B;--sandD12:#F2EEE8;
  --tomato3:#3A211A;--tomato6:#6B3022;--tomato12:#FFD9CC;
  --accent:#F0643F;--accent-hover:#FA8462;--accent-text:#FA8462;--ring:#F2EEE8}
html[data-theme=dark] .audit{border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)} /* the one dark band still reads as its own band on the dark page */
.btn-primary:focus-visible{outline-color:var(--ring)}
.audit .btn-primary:focus-visible{outline-color:var(--sandD12)}
body{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)} /* off under prefers-reduced-motion (rule above) */
/* logo mark: strokes are currentColor (light ink on dark); the dot follows the accent */
.mark-sm circle,.mark-lg circle{fill:var(--accent)}
/* audit page score gauge: needle and hub follow the ink */
.gauge [stroke="#21201c"]{stroke:var(--text)}.gauge [fill="#21201c"]{fill:var(--text)}.gauge [fill="#fdfdfc"]{fill:var(--bg-raised)}
/* blog art: light and dark files side by side, only the one for the current theme shows (the hidden one is lazy, so it is not fetched) */
html:not([data-theme=dark]) img.on-dark,html[data-theme=dark] img.on-light{display:none!important}
/* theme toggle: icon button in the nav, 44x44 tap target, no rounding (house shape) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -10px;padding:0;border:0;background:transparent;color:var(--text-2);cursor:pointer;flex:0 0 auto;transition:color var(--dur) var(--ease)}
.theme-toggle:hover{color:var(--text)}
.theme-toggle svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .tt-sun,html[data-theme=dark] .theme-toggle .tt-moon{display:none}
html[data-theme=dark] .theme-toggle .tt-sun{display:block}
html:not([data-theme]) .theme-toggle{display:none} /* no script, no toggle */
/* phones: the toggle sits between Services and Start Audit. Its 44x44 box overlaps the 12px gaps (2px clear of each neighbour's own 44px box),
   so the wordmark keeps one line down to 375px wide */
@media(min-width:361px) and (max-width:520px),(min-width:641px){.brand{flex-shrink:0}.wordmark{white-space:nowrap}} /* the toggle must not push the wordmark onto two lines */
@media(min-width:521px) and (max-width:640px){.theme-toggle{margin:0 -14px}} /* both nav buttons show here: 44px box, 2px clear of each neighbour */
@media(max-width:520px){.nav-call{display:none}.nav-links .nav-call + .nav-cta{margin-left:0}} /* Book a call leaves the nav 40px earlier than before (hero and footer carry it) to make room for the toggle */
@media(max-width:400px){.nav-inner{gap:8px}.nav-links{gap:12px}.theme-toggle{margin:0 -10px}.nav-cta{padding:0 10px}}
/* site batch 2026-10-28: tap targets. Header and footer links get a 44px hit box from padding and min-height; negative margins cancel the padding so the text stays where it was. */
.brand{min-height:44px}
.foot-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
@media(min-width:641px){.navlink{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;margin:0 -8px}} /* desktop only: the phone nav keeps its own show/hide rules */
.foot-links a{min-width:44px;padding:0 8px;margin:0 -8px}
.foot-links{padding-top:8px;margin-bottom:-12px}
.nav-cta{position:relative}
.nav-cta::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;min-height:100%;transform:translateY(-50%)} /* 36px button keeps its look; the hit area is 44px tall */