/* ==========================================================================
   OPSWORQ — main.css
   One stylesheet. All colors, type and spacing come from the :root block
   below and nowhere else. No hard-coded hex values past line ~90.

   TYPOGRAPHY: Archivo + JetBrains Mono, self-hosted from /assets/fonts/.
   To change it, edit --f-display / --f-body / --f-mono in :root and swap the
   @font-face block below. No page markup changes.

   Binding contrast rules (measured, see explicit.md 4.2):
     - Buttons are CARBON text on SIGNAL. Bone on Signal is 3.25:1 and fails.
     - The site ground is PAPER (#FFFFFF). Bone is the reverse ground only.
     - GRAPHITE IS NEVER TEXT. 3.14:1 on Paper. Rules and borders only.
     - SIGNAL NEVER SETS TYPE. It fills, strokes and rules. It does not
       spell words.
   ========================================================================== */

/* ==========================================================================
   TYPEFACES — self-hosted.
   Archivo and JetBrains Mono, subset to Latin and instanced to the four and
   two weights the site actually uses. 93KB for all six faces, served from
   opsworq.com and cached for a year.

   They were on Google Fonts, which meant a third-party DNS lookup, TLS
   handshake and stylesheet fetch on the critical path of every first visit,
   before a single word could be painted. That is now gone.

   Both families are SIL Open Font License 1.1 — self-hosting is permitted.
   ========================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/archivo-600.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/archivo-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/jetbrainsmono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/jetbrainsmono-500.woff2') format('woff2');}

:root{
  /* --- brand, locked --- */
  --carbon:#16181D;
  --graphite:#8B929C;
  --signal:#F4541D;
  /* Bone is the REVERSE ground: print, merchandise, dark surfaces, and type
     knocked out of Carbon. It is no longer the site ground. See --paper. */
  --bone:#FAF9F6;

  /* --- grounds, cut on the Carbon axis (Carbon/Slate/Graphite are all cool;
         the old warm Bone/Substrate grounds were the only warm values in the
         system, which is what read as dull). Every binding contrast rule
         survives the change and two of three measurements improve:
           Carbon on Paper      17.76:1  (was 16.87 on Bone)
           Slate  on Paper       6.83:1  (was  6.48 on Bone)
           Graphite on Paper     3.14:1  — still fails AA, still never type
           Signal  on Paper      3.42:1  — still fails AA, still never type
           Carbon on Signal      5.19:1  — unchanged, CTAs unaffected      --- */
  --paper:#FFFFFF;
  --substrate:#F2F4F7;
  --slate:#565B64;

  /* --- functional --- */
  --rule:#E3E7EC;
  --rule-strong:#CDD3DA;
  --surface-hover:#E7EBF0;
  --signal-hover:#DC4713;
  --focus:var(--signal);

  /* --- drafting field (see FIELD block) --- */
  --field-major:rgba(139,146,156,.17);
  --field-minor:rgba(139,146,156,.07);

  /* --- type families (PROVISIONAL — see header note) --- */
  --f-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- type scale --- */
  --t-mono:0.6875rem;      /* 11px  eyebrows, labels */
  --t-xs:0.8125rem;        /* 13px */
  --t-sm:0.9375rem;        /* 15px */
  --t-base:1.0625rem;      /* 17px  body */
  --t-lg:1.1875rem;        /* 19px  lede */
  --t-xl:clamp(1.25rem,1.6vw,1.5rem);
  --t-2xl:clamp(1.5rem,2.4vw,2rem);
  --t-3xl:clamp(1.75rem,3.2vw,2.625rem);
  --t-4xl:clamp(1.875rem,3.6vw,2.875rem);
  --t-5xl:clamp(2.125rem,4.6vw,3.5rem);

  /* --- tracking --- */
  --tr-display:-0.03em;
  --tr-mono:0.14em;
  --tr-wordmark:0.055em;

  /* --- spacing --- */
  --s1:0.25rem; --s2:0.5rem;  --s3:0.75rem; --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:3rem;    --s8:4rem;
  --s9:6rem;    --s10:8rem;

  /* --- layout --- */
  --maxw:1200px;
  --measure:66ch;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --rhythm:clamp(4rem,9vw,8rem);
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--paper);
  color:var(--carbon);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
button{font:inherit;color:inherit;}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--carbon);color:var(--bone);
  padding:var(--s3) var(--s5);font-family:var(--f-mono);font-size:var(--t-xs);
}
.skip:focus{left:0;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.wrap--narrow{max-width:860px;}

.sec{padding-block:var(--rhythm);border-top:1px solid var(--rule);}
.sec:first-of-type{border-top:0;}
.sec--substrate{background:var(--substrate);}
.sec--flush{padding-block:0;}
.sec--tight{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2.5rem,5vw,4rem);}
.sec--tight .h1{max-width:19ch;}

.grid{display:grid;gap:var(--s6);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }

/* ==========================================================================
   TYPE
   ========================================================================== */
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);
  text-transform:uppercase;
  color:var(--carbon);
  padding-top:var(--s2);
  border-top:2px solid var(--signal);
  display:inline-block;
  margin-bottom:var(--s5);
}
.label{
  font-family:var(--f-mono);
  font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);
  text-transform:uppercase;
  color:var(--slate);
}

.h1,.h2,.h3,.h4{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:var(--tr-display);
  text-wrap:balance;
}
.h1{font-size:var(--t-5xl);line-height:1.02;}
.h2{font-size:var(--t-4xl);line-height:1.06;}
.h3{font-size:var(--t-2xl);line-height:1.14;letter-spacing:-0.022em;}
.h4{font-size:var(--t-xl);line-height:1.22;letter-spacing:-0.018em;}

.lede{
  font-size:var(--t-lg);
  line-height:1.55;
  color:var(--slate);
  max-width:60ch;
}
.lede strong{color:var(--carbon);font-weight:600;}

.prose{max-width:var(--measure);}
.prose p + p{margin-top:var(--s4);}
.prose p{line-height:1.68;}
.muted{color:var(--slate);}
.small{font-size:var(--t-sm);line-height:1.58;}

.mark-em{box-shadow:inset 0 -0.14em 0 var(--signal);}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-sm);
  letter-spacing:0.005em;
  background:var(--signal);
  color:var(--carbon);              /* 5.19:1 — Bone here fails AA */
  border:1px solid var(--signal);
  padding:0.9rem 1.5rem;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--signal-hover);border-color:var(--signal-hover);}
.btn--ghost{
  background:transparent;color:var(--carbon);border-color:var(--rule-strong);
}
.btn--ghost:hover{background:transparent;border-color:var(--carbon);}
.btn--sm{font-size:var(--t-xs);padding:0.7rem 1.1rem;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}

.btn-row{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;}

.textlink{
  font-weight:600;text-decoration:none;
  box-shadow:inset 0 -0.09em 0 var(--signal);
  transition:box-shadow .15s ease;
}
.textlink:hover{box-shadow:inset 0 -0.35em 0 var(--signal);}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-header__in{
  display:flex;align-items:center;gap:var(--s5);
  min-height:74px;
}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;flex:none;}
.brand__mark{width:34px;height:34px;flex:none;}
.brand__word{
  font-family:var(--f-display);font-weight:700;
  font-size:1.125rem;letter-spacing:var(--tr-wordmark);
  line-height:1;
}

/* --- NAV (Phase 1, 18 Sep 2026) ------------------------------------------
   Three dropdowns in journey order (Technology -> Operations -> Growth & Exit)
   plus two plain links and the Start here button. Dropdowns open on CLICK or
   TAP, never hover: hover menus fail on touch and punish imprecise mice.
   Without JavaScript they fall back to hover/focus-within so nothing is
   unreachable. Each item carries a one-line outcome so the menu reads as
   situations, not a service catalogue. */
.nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,1.75rem);margin-left:auto;}
.nav > a:not(.btn),
.nav__trigger{
  font-size:var(--t-sm);font-weight:500;text-decoration:none;white-space:nowrap;
  padding-block:var(--s2);
  border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}
.nav > a:not(.btn):hover,.nav__trigger:hover{border-bottom-color:var(--signal);}
.nav > a[aria-current="page"],
.nav__item.is-current > .nav__trigger{border-bottom-color:var(--signal);}

.nav__item{position:relative;}
.nav__trigger{
  background:none;border-top:0;border-left:0;border-right:0;border-radius:0;
  padding-inline:0;cursor:pointer;color:var(--carbon);
  display:inline-flex;align-items:center;gap:.45em;
}
.nav__trigger::after{
  content:"";width:.4em;height:.4em;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-.14em) rotate(45deg);transition:transform .15s ease;
}
.nav__trigger[aria-expanded="true"]::after{transform:translateY(.12em) rotate(-135deg);}

.nav__panel{
  display:none;position:absolute;top:calc(100% + 21px);left:-1.25rem;z-index:110;
  width:min(390px,92vw);
  background:var(--paper);border:1px solid var(--rule-strong);
  box-shadow:0 22px 44px -28px rgba(22,24,29,.38);
  padding:var(--s3);
}
.nav__item.is-open > .nav__panel{display:block;}
.no-js .nav__item:hover > .nav__panel,
.no-js .nav__item:focus-within > .nav__panel{display:block;}
.nav__panel a{
  display:block;text-decoration:none;
  padding:var(--s3) var(--s4);
  border-left:2px solid transparent;
  transition:background .12s ease,border-color .12s ease;
}
.nav__panel a:hover,.nav__panel a:focus-visible{background:var(--substrate);border-left-color:var(--signal);}
.nav__panel a[aria-current="page"]{border-left-color:var(--signal);}
.nav__list{border-top:1px solid var(--rule);margin-top:var(--s2);padding-top:var(--s2);}
.nav__t{display:block;font-size:var(--t-sm);font-weight:600;line-height:1.3;color:var(--carbon);}
.nav__d{display:block;font-size:var(--t-xs);line-height:1.45;color:var(--slate);margin-top:2px;white-space:normal;}
.nav__over .nav__t{font-weight:700;}

.nav-toggle{
  display:none;margin-left:auto;
  background:transparent;border:1px solid var(--rule-strong);
  padding:0.5rem 0.75rem;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;
}

/* the menu jumps to sections on the overview pages; keep them clear of the
   sticky header when they land */
[id]{scroll-margin-top:96px;}

@media (max-width:1080px){
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule-strong);
    padding:var(--s4) var(--gutter) var(--s6);
    margin-left:0;
    max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open{display:flex;}
  .nav > a:not(.btn),.nav__trigger{
    width:100%;padding-block:var(--s4);border-bottom:1px solid var(--rule);
    justify-content:space-between;text-align:left;
  }
  .nav > a:not(.btn):hover,.nav__trigger:hover,
  .nav > a[aria-current="page"],.nav__item.is-current > .nav__trigger{border-bottom-color:var(--rule);}
  .nav > a[aria-current="page"],.nav__item.is-current > .nav__trigger{font-weight:700;}
  .nav__trigger::after{margin-right:.35em;}
  .nav__panel{
    position:static;width:auto;border:0;box-shadow:none;
    padding:var(--s2) 0 var(--s3);border-bottom:1px solid var(--rule);
  }
  .nav__panel a{padding:var(--s3) var(--s3);}
  .nav__list{margin-top:var(--s1);padding-top:var(--s1);}
  .nav .btn{margin-top:var(--s5);justify-content:center;}
  .nav-toggle{display:block;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* Bottom padding is deliberately smaller than --rhythm so the managed-IT
   door band lands inside the first screen on a 1080p laptop. */
.hero{padding-block:clamp(3rem,6.5vw,5.5rem) clamp(2.5rem,5vw,4rem);}
.hero__rule{width:58px;height:3px;background:var(--signal);margin-bottom:var(--s6);}
.hero .h1{max-width:17ch;}
.hero__sub{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-4xl);line-height:1.04;letter-spacing:var(--tr-display);
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--rule);
  max-width:17ch;
}
.hero__line{margin-top:var(--s6);max-width:56ch;}
.hero__cta{margin-top:var(--s7);}

/* ==========================================================================
   ACCUMULATION LIST (the problem)
   ========================================================================== */
.accum{margin-top:var(--s6);max-width:var(--measure);}
.accum li{
  padding:var(--s3) 0 var(--s3) var(--s5);
  border-top:1px solid var(--rule);
  position:relative;
  font-size:var(--t-lg);
  line-height:1.4;
}
.accum li:first-child{border-top:0;}
.accum li::before{
  content:"";position:absolute;left:0;top:1.35em;
  width:9px;height:1px;background:var(--graphite);
}
.accum__close{
  margin-top:var(--s6);
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-2xl);line-height:1.16;letter-spacing:var(--tr-display);
  max-width:24ch;text-wrap:balance;
}

/* ==========================================================================
   STACK DIAGRAM
   ========================================================================== */
.stack{margin-top:var(--s7);border:1px solid var(--rule-strong);background:var(--paper);}
.stack__row{
  display:grid;
  grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:var(--s5);
  padding:var(--s5) clamp(1rem,3vw,2rem);
  border-top:1px solid var(--rule);
  align-items:baseline;
}
.stack__row:first-child{border-top:0;}
.stack__n{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);color:var(--slate);
  display:block;margin-bottom:var(--s2);
}
.stack__name{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xl);letter-spacing:-0.02em;line-height:1.1;
}
.stack__parts{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:var(--t-sm);color:var(--slate);
}
.stack__parts span{position:relative;padding-right:var(--s4);}
.stack__parts span::after{
  content:"";position:absolute;right:calc(var(--s4) / 2);top:50%;
  width:3px;height:3px;background:var(--graphite);border-radius:50%;
}
.stack__parts span:last-child::after{display:none;}
.stack__foot{
  padding:var(--s5) clamp(1rem,3vw,2rem);
  border-top:2px solid var(--signal);
  background:var(--substrate);
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xl);letter-spacing:-0.02em;
}
@media (max-width:640px){ .stack__row{grid-template-columns:1fr;gap:var(--s3);} }

/* ==========================================================================
   CONTRAST PANEL (velocity)
   ========================================================================== */
.versus{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule-strong);border:1px solid var(--rule-strong);
  margin-top:var(--s7);
}
.versus > div{background:var(--paper);padding:clamp(1.5rem,3.5vw,2.5rem);}
.versus__k{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;
  color:var(--slate);margin-bottom:var(--s4);
}
.versus__v{
  font-family:var(--f-mono);font-weight:500;
  font-size:var(--t-3xl);line-height:1;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
.versus__t{margin-top:var(--s4);font-size:var(--t-sm);color:var(--slate);line-height:1.55;}
@media (max-width:600px){ .versus{grid-template-columns:1fr;} }

/* ==========================================================================
   STAGE STRIP / METHODOLOGY
   ========================================================================== */
.stages{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:var(--s7);}
.stages a,.stages > div{
  background:var(--paper);padding:var(--s5) var(--s4);
  text-decoration:none;display:block;
  transition:background .15s ease;
}
.stages a:hover{background:var(--substrate);}
.stage__n{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:0.06em;color:var(--slate);
  display:block;padding-top:var(--s2);border-top:2px solid var(--signal);
  margin-bottom:var(--s3);
}
.stage__name{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-sm);letter-spacing:0.05em;text-transform:uppercase;
}
@media (max-width:900px){ .stages{grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .stages{grid-template-columns:repeat(2,1fr);} }

/* ==========================================================================
   QUOTE BAND
   ========================================================================== */
.quote{
  border-left:4px solid var(--signal);
  padding-left:clamp(1.25rem,3vw,2.25rem);
}
.quote p{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-3xl);line-height:1.14;letter-spacing:var(--tr-display);
  max-width:22ch;text-wrap:balance;
}

/* ==========================================================================
   TILES
   ========================================================================== */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:var(--s7);}
.tile{background:var(--paper);padding:clamp(1.5rem,3vw,2.25rem);display:block;text-decoration:none;
  transition:background .15s ease;}
a.tile:hover{background:var(--substrate);}
.tile__k{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);margin-bottom:var(--s4);
}
.tile .h4{margin-bottom:var(--s3);}
.tile p{font-size:var(--t-sm);color:var(--slate);line-height:1.6;}
.tile p + p{margin-top:var(--s3);}
.tile p strong{color:var(--carbon);font-weight:600;}

/* ==========================================================================
   DISCLOSURE ("what's underneath")
   ========================================================================== */
.under{margin-top:var(--s5);border-top:1px solid var(--rule);padding-top:var(--s4);}
.under > summary{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;
  color:var(--slate);cursor:pointer;list-style:none;
}
.under > summary::-webkit-details-marker{display:none;}
.under > summary::before{content:"+ ";color:var(--carbon);}
.under[open] > summary::before{content:"– ";}
/* display:flex here used to apply unconditionally, so Chromium rendered
   this content even while the parent <details> was closed (open=false) —
   but sized the <details> box itself for the closed state, so the visible
   tag list bled out past the tile's computed height and overlapped the next
   tile's heading. Scoping display to [open] makes the two agree again. */
.under__body{
  margin-top:var(--s4);
  display:none;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:var(--t-xs);color:var(--slate);
}
.under[open] > .under__body{display:flex;}
.under__body span{position:relative;padding-right:var(--s4);}
.under__body span::after{
  content:"";position:absolute;right:calc(var(--s4) / 2);top:50%;
  width:3px;height:3px;background:var(--graphite);border-radius:50%;
}
.under__body span:last-child::after{display:none;}

/* ==========================================================================
   NUMBERED DEEP SECTIONS (how it works)
   ========================================================================== */
.step{padding-block:var(--s8);border-top:1px solid var(--rule);}
.step:first-of-type{border-top:0;padding-top:0;}
.step__head{display:flex;align-items:baseline;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s5);}
.step__n{
  font-family:var(--f-mono);font-weight:500;
  font-size:var(--t-2xl);letter-spacing:-0.02em;color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.step__promise{margin-top:var(--s4);max-width:56ch;font-size:var(--t-lg);line-height:1.5;}
.step__what{margin-top:var(--s6);}
.step__what h4{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);font-weight:400;margin-bottom:var(--s4);
}
.step__what ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:var(--s2) var(--s5);}
.step__what li{
  font-size:var(--t-sm);padding:var(--s2) 0 var(--s2) var(--s4);
  position:relative;color:var(--slate);
}
.step__what li::before{
  content:"";position:absolute;left:0;top:1.05em;width:7px;height:1px;background:var(--graphite);
}
.step__pull{
  margin-top:var(--s6);padding:var(--s5) 0 0;border-top:1px solid var(--rule);
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xl);line-height:1.22;letter-spacing:-0.022em;
  max-width:34ch;text-wrap:balance;
}

/* ==========================================================================
   LOOP DIAGRAM
   ========================================================================== */
.loop{margin-top:var(--s7);}
.loop svg{width:100%;height:auto;}
.loop text{font-family:var(--f-mono);letter-spacing:0.08em;}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--s4);max-width:720px;}
.field{display:flex;flex-direction:column;gap:0.45rem;}
.field--wide{grid-column:1 / -1;}
.field label{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--slate);
}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:var(--t-sm);
  background:var(--paper);color:var(--carbon);
  border:1px solid var(--rule-strong);
  padding:0.75rem 0.8rem;border-radius:0;
}
.field textarea{resize:vertical;min-height:120px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--signal);outline-offset:-1px;border-color:var(--signal);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__note{grid-column:1 / -1;font-size:var(--t-xs);color:var(--slate);line-height:1.55;}
.form__submit{grid-column:1 / -1;margin-top:var(--s2);}
@media (max-width:640px){ .form{grid-template-columns:1fr;} }
.gate .form{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}

.formstate{
  grid-column:1 / -1;
  border:1px solid var(--rule-strong);
  border-left:4px solid var(--signal);
  background:var(--substrate);
  padding:var(--s5);
  font-size:var(--t-sm);line-height:1.6;
}
.formstate strong{font-weight:600;}

/* ==========================================================================
   CONTACT LIST
   ========================================================================== */
.contactlist li{
  display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);
  gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--rule);
  align-items:baseline;
}
.contactlist li:first-child{border-top:0;}
.contactlist dt,.contactlist .k{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--slate);
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.finalcta{background:var(--substrate);border-top:1px solid var(--rule-strong);}
.finalcta__in{padding-block:var(--rhythm);}
.finalcta .h2{max-width:18ch;}
.finalcta .lede{margin-top:var(--s5);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{border-top:1px solid var(--rule-strong);background:var(--paper);}
.site-footer__in{
  padding-block:var(--s8) var(--s7);
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(140px,1fr));
  gap:var(--s7) var(--s6);
}
.site-footer .brand{margin-bottom:var(--s4);}
.site-footer__nav{display:contents;}
/* Phase 1: five link columns now, so the brand block takes its own row
   instead of being squeezed into a sliver beside them. */
.site-footer__in{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.site-footer__in > div:first-child{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s7);}
.site-footer__in > div:first-child .brand{margin-bottom:0;}
.site-footer__def{font-size:var(--t-sm);color:var(--slate);max-width:42ch;line-height:1.6;}
.site-footer h3{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;
  color:var(--slate);font-weight:400;margin-bottom:var(--s4);
}
.site-footer nav li,.site-footer ul li{margin-bottom:var(--s3);}
.site-footer a{font-size:var(--t-sm);text-decoration:none;}
.site-footer a:hover{box-shadow:inset 0 -0.08em 0 var(--signal);}
.site-footer__base{
  border-top:1px solid var(--rule);
  padding-block:var(--s5) var(--s7);
  display:flex;gap:var(--s5);flex-wrap:wrap;
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--slate);
}
.site-footer__base .right{margin-left:auto;}

/* Footer grid never got a mobile collapse rule, so under ~700px the
   flexible brand/description column (minmax(0,1.6fr)) gets squeezed to a
   sliver next to the fixed-minimum nav columns (minmax(140px,1fr)) instead
   of stacking — words wrap one per line and the columns visually crowd
   into each other. Same fix pattern as .split / .stack__row / .form above. */
@media (max-width:700px){
  .site-footer__in{grid-template-columns:1fr;gap:var(--s7);}
  .site-footer .brand{margin-bottom:var(--s3);}
}

/* ==========================================================================
   SCROLL REVEAL — opacity + translate, once, disabled on reduced motion
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1);
}
.no-js .reveal,.reveal.is-off{opacity:1;transform:none;}

/* Above the fold renders immediately — never wait on JavaScript for the first
   screen. The reveal system begins below it. Without this the H1, the subhead
   and both hero buttons sit at opacity:0 until a deferred script parses and an
   observer fires, which delays Largest Contentful Paint on every single visit. */
.hero .reveal,
.sec--tight .reveal,
.doorband .reveal{opacity:1;transform:none;transition:none;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-in{opacity:1 !important;transform:none !important;transition:none !important;}
  *{animation:none !important;transition:none !important;}
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.mt-2{margin-top:var(--s2);} .mt-4{margin-top:var(--s4);}
.mt-5{margin-top:var(--s5);} .mt-6{margin-top:var(--s6);}
.mt-7{margin-top:var(--s7);} .mt-8{margin-top:var(--s8);}
.tabular{font-variant-numeric:tabular-nums;}
.scrollx{overflow-x:auto;}

/* ==========================================================================
   ASSESSMENT INSTRUMENT (/assessment/)
   ========================================================================== */
.inst{display:none;}
.inst.is-on{display:block;}

.prog{margin-top:var(--s7);}
.prog__bar{height:2px;background:var(--rule);position:relative;overflow:hidden;}
.prog__bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--signal);
  transition:width .32s cubic-bezier(.22,.61,.36,1);}
.prog__meta{display:flex;gap:var(--s4);align-items:baseline;margin-top:var(--s3);flex-wrap:wrap;}
.prog__dom{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--carbon);}
.prog__n{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--slate);
  margin-left:auto;font-variant-numeric:tabular-nums;}

.q{margin-top:var(--s8);}
.q__text{font-family:var(--f-display);font-weight:700;
  font-size:var(--t-3xl);line-height:1.16;letter-spacing:-0.024em;
  max-width:24ch;text-wrap:balance;margin-bottom:var(--s6);}
.opts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.opt{display:flex;align-items:flex-start;gap:var(--s4);width:100%;text-align:left;
  background:var(--substrate);border:0;padding:var(--s5);cursor:pointer;
  font-size:var(--t-base);line-height:1.45;color:var(--carbon);
  transition:background .12s ease;}
.opt:hover,.opt[aria-pressed="true"]{background:var(--surface-hover);}
.opt:focus-visible{outline:2px solid var(--signal);outline-offset:-2px;}
.opt[aria-pressed="true"] .opt__k{background:var(--signal);border-color:var(--signal);color:var(--carbon);}
.opt__k{font-family:var(--f-mono);font-size:var(--t-mono);width:24px;height:24px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-strong);color:var(--slate);margin-top:1px;}
.q__nav{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s6);flex-wrap:wrap;}
.q__hint{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--slate);
  letter-spacing:0.06em;margin-left:auto;}

.result{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:clamp(2rem,5vw,3.5rem);align-items:start;margin-top:var(--s7);}
@media (max-width:820px){ .result{grid-template-columns:1fr;} }
.radar{background:var(--substrate);border:1px solid var(--rule);padding:var(--s6) var(--s5) var(--s7);
  display:flex;flex-direction:column;align-items:center;}
.radar svg{width:100%;max-width:320px;height:auto;overflow:visible;}
.radar text{font-family:var(--f-mono);font-size:9.5px;letter-spacing:0.1em;
  fill:var(--slate);text-transform:uppercase;}
.radar text.v{fill:var(--carbon);font-size:10px;font-weight:500;}
.index{text-align:center;margin-top:var(--s5);}
.index__n{font-family:var(--f-mono);font-weight:500;font-size:4.25rem;line-height:.9;
  letter-spacing:-0.04em;font-variant-numeric:tabular-nums;}
.index__n sup{font-size:.26em;color:var(--slate);vertical-align:super;letter-spacing:0.06em;}
.index__l{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);margin-top:var(--s3);}
.index__band{font-size:var(--t-sm);color:var(--slate);margin-top:var(--s4);
  max-width:34ch;margin-inline:auto;line-height:1.5;}
.index__band strong{color:var(--carbon);font-weight:600;}

.domrow{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--rule);align-items:baseline;}
.domrow:first-child{border-top:0;padding-top:0;}
.domrow__n{font-size:var(--t-sm);font-weight:600;}
.domrow__v{font-family:var(--f-mono);font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;color:var(--slate);}
.domrow__bar{grid-column:1 / -1;height:5px;background:var(--rule);position:relative;}
.domrow__bar i{position:absolute;inset:0 auto 0 0;background:var(--graphite);
  transition:width .5s cubic-bezier(.22,.61,.36,1);}
.domrow.is-weak .domrow__bar i{background:var(--signal);}
.domrow.is-weak .domrow__v{color:var(--carbon);font-weight:700;}
.domrow__d{grid-column:1 / -1;font-size:var(--t-xs);line-height:1.55;color:var(--slate);margin-top:2px;}

.gate{margin-top:var(--s8);border:1px solid var(--rule-strong);background:var(--substrate);
  padding:clamp(1.5rem,4vw,2.75rem);}
.gate .form{max-width:none;}

/* Anchor targets clear the sticky header */
[id]{scroll-margin-top:96px;}
.site-footer__hours{font-size:var(--t-xs);color:var(--slate);}

/* ==========================================================================
   THE MAP — product-made-visible block (homepage)
   ========================================================================== */
.mapblock{
  display:grid;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  margin-top:var(--s7);
}
@media (max-width:860px){ .mapblock{grid-template-columns:1fr;} }
.mapblock__fig{
  background:var(--paper);
  border:1px solid var(--rule-strong);
  padding:var(--s5) var(--s4) var(--s4);
}
.mapblock__fig svg{width:100%;height:auto;overflow:visible;}
.map-l{font-family:var(--f-mono);font-size:8.5px;letter-spacing:0.09em;
  text-transform:uppercase;fill:var(--slate);}
.map-v{font-family:var(--f-mono);font-size:11px;font-weight:500;fill:var(--carbon);}
.mapblock__cap{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
}
.mapblock__read li{
  padding:var(--s4) 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:baseline;
}
.mapblock__read li:first-child{border-top:0;padding-top:0;}
.mapblock__read .k{font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:0.06em;color:var(--slate);font-variant-numeric:tabular-nums;}
.mapblock__read .t{font-size:var(--t-sm);line-height:1.55;color:var(--slate);}
.mapblock__read .t strong{color:var(--carbon);font-weight:600;display:block;margin-bottom:2px;}

/* ==========================================================================
   BLUEPRINT FIELD — a quiet gridline texture, drawn not photographed
   ========================================================================== */
/* THE DRAFTING FIELD — a status indicator, not a texture.
   RULE: it appears where work is being done or shown, and nowhere else.
     Field:    the assessment (intro, questions, result), the Operational Map,
               the onboarding and response charts, the contact form.
     No field: the hero, the problem and concept sections, the six systems,
               industries, the founder story, and every closing CTA.
   Major/minor divisions at 64px and 16px, the way engineering paper is ruled.
   Anchor the mask to whatever the field is supporting with --field-x/y. */
.sec--field{position:relative;isolation:isolate;}
.sec--field::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,  var(--field-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--field-major) 1px, transparent 1px),
    linear-gradient(to right,  var(--field-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--field-minor) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px, 16px 16px, 16px 16px;
  -webkit-mask-image:radial-gradient(118% 82% at var(--field-x,78%) var(--field-y,12%), #000 0%, transparent 74%);
  mask-image:radial-gradient(118% 82% at var(--field-x,78%) var(--field-y,12%), #000 0%, transparent 74%);
}
.sec--field-l{--field-x:16%;--field-y:16%;}
.sec--field-c{--field-x:50%;--field-y:6%;}

/* ==========================================================================
   COMPARISON TABLE — why not an MSP, why not an automation consultant
   Marks are encoded in FORM (filled / half / open), never in a second hue.
   ========================================================================== */
.compare{overflow-x:auto;margin-top:var(--s7);border:1px solid var(--rule-strong);}
.compare table{border-collapse:collapse;width:100%;min-width:720px;background:var(--paper);}
.compare th,.compare td{padding:var(--s4) var(--s5);border-bottom:1px solid var(--rule);
  text-align:left;vertical-align:middle;}
.compare thead th{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);font-weight:400;
  background:var(--substrate);border-bottom:1px solid var(--rule-strong);
  vertical-align:bottom;
}
.compare thead th.us{color:var(--carbon);border-bottom:2px solid var(--signal);}
.compare tbody tr:last-child td{border-bottom:0;}
.compare td.cap{font-size:var(--t-sm);font-weight:600;max-width:34ch;}
.compare td.m{text-align:center;width:150px;}
.mk{display:inline-block;width:15px;height:15px;border:1.5px solid var(--rule-strong);}
.mk--full{background:var(--carbon);border-color:var(--carbon);}
.mk--half{background:linear-gradient(135deg,var(--carbon) 0 50%,transparent 50% 100%);
  border-color:var(--carbon);}
.mk--us{background:var(--signal);border-color:var(--signal);}
.compare__key{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--slate);}
.compare__key span{display:flex;align-items:center;gap:var(--s2);}

/* ==========================================================================
   FAQ / OBJECTIONS
   ========================================================================== */
.faq{margin-top:var(--s7);border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s5) var(--s6) var(--s5) 0;
  position:relative;
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-xl);line-height:1.25;letter-spacing:-0.018em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:var(--s2);top:50%;
  width:13px;height:2px;background:var(--carbon);
}
.faq summary::before{
  content:"";position:absolute;right:calc(var(--s2) + 5.5px);top:50%;
  width:2px;height:13px;margin-top:-5.5px;background:var(--carbon);
  transition:opacity .15s ease;
}
.faq details[open] summary::before{opacity:0;}
.faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.faq__a{padding:0 0 var(--s6);max-width:var(--measure);}
.faq__a p{font-size:var(--t-sm);line-height:1.65;color:var(--slate);}
.faq__a p + p{margin-top:var(--s3);}
.faq__a strong{color:var(--carbon);font-weight:600;}

/* ==========================================================================
   ENGAGEMENT TIMELINE
   ========================================================================== */
.track{margin-top:var(--s7);border-top:1px solid var(--rule);}
.track__row{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:var(--s5);padding:var(--s6) 0;border-bottom:1px solid var(--rule);
}
.track__when{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--carbon);
  padding-top:var(--s2);border-top:2px solid var(--signal);
  align-self:start;
}
.track__what h3{font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);
  letter-spacing:-0.018em;line-height:1.22;margin-bottom:var(--s3);}
.track__what p{font-size:var(--t-sm);line-height:1.6;color:var(--slate);max-width:60ch;}
.track__what p + p{margin-top:var(--s3);}
.track__what strong{color:var(--carbon);font-weight:600;}
.track__you{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--slate);line-height:1.6;
}
@media (max-width:700px){ .track__row{grid-template-columns:1fr;gap:var(--s3);} }

/* ==========================================================================
   MANAGED IT — Door A. Charts use two series only: Carbon (them) and
   Signal (us). Validated: CVD dE 36.6 protan / 49.6 normal, both >=3:1 on
   Bone. Graphite never carries data — grid and axis only.
   ========================================================================== */
.claimrow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong);
  margin-top:var(--s7);
}
.claimrow > div{background:var(--paper);padding:var(--s5) var(--s5) var(--s6);}
.claim__k{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);margin-bottom:var(--s4);}
.claim__v{font-family:var(--f-mono);font-weight:500;font-size:clamp(1.75rem,3.2vw,2.5rem);
  line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
.claim__v small{font-size:.42em;letter-spacing:0.04em;color:var(--slate);
  display:block;margin-top:var(--s2);}
.claim__t{font-size:var(--t-sm);color:var(--slate);line-height:1.55;margin-top:var(--s4);}

/* --- coverage matrix --- */
.cover{overflow-x:auto;margin-top:var(--s6);border:1px solid var(--rule-strong);}
.cover table{border-collapse:collapse;width:100%;min-width:680px;background:var(--paper);}
.cover th,.cover td{padding:var(--s3) var(--s5);border-bottom:1px solid var(--rule);text-align:left;}
.cover thead th{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);font-weight:400;background:var(--substrate);
  border-bottom:1px solid var(--rule-strong);vertical-align:bottom;}
.cover thead th.hi{color:var(--carbon);border-bottom:2px solid var(--signal);}
.cover tbody tr:last-child td{border-bottom:0;}
.cover td.svc{font-size:var(--t-sm);font-weight:600;}
.cover td.m{text-align:center;width:130px;}
.cover tr.grp td{background:var(--substrate);font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--slate);
  padding-top:var(--s4);padding-bottom:var(--s4);}

/* --- bar charts --- */
.chart{margin-top:var(--s6);}
.chart__t{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);margin-bottom:var(--s5);}
.bars{display:grid;gap:var(--s5);}
.bar{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:var(--s5);align-items:center;}
.bar__l{font-size:var(--t-sm);font-weight:600;}
.bar__l small{display:block;font-weight:400;font-size:var(--t-xs);color:var(--slate);margin-top:2px;}
.bar__track{position:relative;height:26px;background:var(--substrate);}
.bar__fill{position:absolute;inset:0 auto 0 0;background:var(--carbon);
  border-radius:0 4px 4px 0;}
.bar__fill--us{background:var(--signal);}
.bar__v{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--w) + 10px);
  font-family:var(--f-mono);font-size:var(--t-xs);white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--carbon);}
.pair{display:grid;gap:2px;}
.legend{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--slate);}
.legend span{display:flex;align-items:center;gap:var(--s2);}
.legend i{width:14px;height:9px;display:block;background:var(--carbon);}
.legend i.us{background:var(--signal);}
.chart__note{font-size:var(--t-xs);color:var(--slate);margin-top:var(--s5);
  line-height:1.6;max-width:62ch;}
@media (max-width:600px){ .bar{grid-template-columns:1fr;gap:var(--s2);} }

/* --- Door A band: the IT shopper's exit from the ops narrative --- */
.doorband{background:var(--substrate);border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);}
.doorband__in{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding-block:var(--s5);}
.doorband__k{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--carbon);
  padding-top:var(--s2);border-top:2px solid var(--signal);}
.doorband__t{font-size:var(--t-sm);color:var(--slate);margin:0;max-width:52ch;}
.doorband__a{margin-left:auto;white-space:nowrap;}
@media (max-width:760px){ .doorband__a{margin-left:0;} }

/* A data label at the end of a full-width bar overflows the viewport.
   At 70% or more, the label moves inside the fill. */
.bar__v--in{left:auto;right:10px;color:var(--bone);}
.bar__v--in.on-signal{color:var(--carbon);}

/* Narrow viewports: a data label anchored to the bar end has nowhere to go.
   Put it above the track in normal flow — no absolute positioning, no overflow. */
@media (max-width:640px){
  .bar__track{margin-top:21px;}
  .bar__v,.bar__v--in,.bar__v--in.on-signal{
    position:absolute;top:-20px;left:0;right:auto;
    transform:none;               /* base rule centres with translateY(-50%) */
    line-height:1;
    color:var(--carbon);
  }
  /* paired bars: the gap has to clear the label sitting above the lower track,
     or it lands on top of the bar above it */
  .pair{gap:25px;}
  .pair .bar__track{margin-top:0;}
  .pair .bar__track:first-child{margin-top:21px;}
}

/* ==========================================================================
   TOUCH TARGETS
   Inline links inside a sentence are exempt from the 44px minimum (WCAG
   2.5.8). Standalone controls are not — these two were under size.
   ========================================================================== */
.under > summary{padding-block:var(--s3);}
.site-footer a{display:inline-block;padding-block:6px;}
.site-footer__base{padding-block:var(--s5) var(--s7);}

@media (max-width:640px){
  .site-footer nav li,.site-footer ul li{margin-bottom:var(--s2);}
  .site-footer a{padding-block:9px;}
  .faq summary{padding-right:var(--s7);}
}

/* ==========================================================================
   TALKLINE — the persistent invitation.
   One per page, placed where a reader has just been told something true and
   is most likely to want to say "that's us". A rule and a sentence, never a
   button: Signal Orange stays scarce, and a third orange CTA per page would
   stop it being a signal.
   ========================================================================== */
.talkline{
  margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--rule-strong);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);
}
.talkline p{margin:0;font-size:var(--t-sm);color:var(--slate);max-width:60ch;}
.talkline a{
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--carbon);text-decoration:none;
  border-bottom:2px solid var(--signal);padding-bottom:2px;white-space:nowrap;
}
.talkline a:hover{background:var(--substrate);}

/* ==========================================================================
   TOPIC CHIPS — one click instead of a paragraph.
   A visitor who does not yet know what is wrong must still be able to
   reach us. The chip is the low-cost answer to "what is this about".
   ========================================================================== */
.chips{grid-column:1 / -1;}
.chips__set{border:0;padding:0;margin:0;}
.chips__set legend{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);padding:0;margin-bottom:var(--s3);
}
.chips__row{display:flex;flex-wrap:wrap;gap:var(--s2);}
.chip{position:relative;}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip span{
  display:block;cursor:pointer;
  font-size:var(--t-sm);line-height:1.2;
  padding:var(--s3) var(--s4);
  border:1px solid var(--rule-strong);background:var(--paper);
  transition:background .12s ease,border-color .12s ease;
}
.chip span:hover{background:var(--substrate);}
.chip input:checked + span{
  border-color:var(--carbon);background:var(--carbon);color:var(--paper);
}
.chip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px;}

/* ==========================================================================
   BOOKCARD — the twenty-minute review, bookable.
   ========================================================================== */
.bookcard{
  border:1px solid var(--rule-strong);background:var(--substrate);
  padding:clamp(1.5rem,3vw,2.25rem);margin-top:var(--s7);
}
.bookcard__k{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--carbon);
  padding-top:var(--s2);border-top:2px solid var(--signal);display:inline-block;
}
.bookcard h2,.bookcard h3{margin-top:var(--s4);}
.bookcard p{color:var(--slate);font-size:var(--t-sm);margin-top:var(--s3);max-width:64ch;}
.bookcard .btn-row{margin-top:var(--s5);}

/* ==========================================================================
   PRINCIPALS + CREDENTIALS
   Two people, two disciplines. The credential list is proof, so it is set
   plainly and never decorated — a reader is scanning it for a specific
   string, not admiring it.
   ========================================================================== */
.who{margin-top:var(--s7);border-top:1px solid var(--rule-strong);padding-top:var(--s6);}
.who__k{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--carbon);
  padding-top:var(--s2);border-top:2px solid var(--signal);display:inline-block;
}
.who__name{
  font-family:var(--f-display);font-weight:700;letter-spacing:var(--tr-display);
  font-size:var(--t-2xl);line-height:1.1;margin:var(--s4) 0 var(--s2);
}
.who__role{font-size:var(--t-sm);color:var(--slate);margin:0 0 var(--s5);}

.creds{
  list-style:none;margin:var(--s5) 0 0;padding:0;
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
}
.creds li{
  background:var(--paper);padding:var(--s4) var(--s5);
  font-size:var(--t-sm);line-height:1.4;
}
.creds li b{display:block;font-weight:600;}
.creds li span{color:var(--slate);font-size:var(--t-xs);}
.creds__note{font-size:var(--t-xs);color:var(--slate);margin-top:var(--s4);max-width:60ch;}

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
.areas{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  margin-top:var(--s7);
}
.areas > div{background:var(--paper);padding:var(--s5);}
.areas h3{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);font-weight:400;margin:0 0 var(--s3);
}
.areas ul{list-style:none;margin:0;padding:0;}
.areas li{font-size:var(--t-sm);padding:var(--s1) 0;color:var(--carbon);}
.areas li.seat{font-weight:600;}
.areas li.seat::after{content:" \2014 county seat";font-weight:400;color:var(--slate);font-size:var(--t-xs);}

/* ==========================================================================
   IT RISK CHECK — the exposure readout.
   State is encoded in FORM (rule weight and a mark), never in a second hue.
   Signal Orange marks the exposures and never sets the type that names them.
   ========================================================================== */
.tally{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:var(--s6);
}
.tally__c{background:var(--paper);padding:var(--s5);text-align:center;}
.tally__n{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:var(--t-3xl);line-height:1;letter-spacing:var(--tr-display);
  color:var(--carbon);font-variant-numeric:tabular-nums;
}
.tally__l{
  display:block;margin-top:var(--s3);padding-top:var(--s2);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);
  border-top:2px solid var(--rule-strong);
}
.tally__c--exposed .tally__l{border-top-color:var(--signal);}
.tally__c--assumed .tally__l{border-top:2px dashed var(--rule-strong);}

.read__h{
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--carbon);font-weight:500;
  margin:var(--s7) 0 var(--s4);padding-top:var(--s2);
  border-top:2px solid var(--rule-strong);
}
.read__h--exposed{border-top-color:var(--signal);}
.read__h--assumed{border-top-style:dashed;}

.read__row{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:var(--s5);padding:var(--s5) 0 var(--s5) var(--s5);
  border-bottom:1px solid var(--rule);
  border-left:3px solid var(--rule);
}
.read__row--exposed{border-left-color:var(--signal);}
.read__row--assumed{border-left-style:dashed;border-left-color:var(--rule-strong);}
.read__row--covered{border-left-color:var(--rule);}
.read__k{font-weight:600;font-size:var(--t-sm);line-height:1.35;}
.read__b p{margin:0;font-size:var(--t-sm);color:var(--slate);line-height:1.6;}
@media (max-width:720px){
  .read__row{grid-template-columns:1fr;gap:var(--s2);}
}

.cross{
  border:1px solid var(--rule-strong);background:var(--substrate);
  padding:clamp(1.25rem,3vw,2rem);margin-top:var(--s7);
}
.cross p{font-size:var(--t-sm);color:var(--slate);margin:var(--s3) 0 0;max-width:62ch;}

/* ==========================================================================
   INCIDENT TIMELINE — "a Tuesday you never heard about"
   The Managed IT page could describe monitoring but never showed it. A
   coverage table answers "what is included"; this answers "what does that
   actually mean at 2am", which is the question a buyer is really asking.
   Built in HTML rather than SVG so the times and text stay real text —
   selectable, translatable, and read in order by a screen reader.
   ========================================================================== */
.tl{margin-top:var(--s5);}
.tl__row{
  display:grid;grid-template-columns:5.5rem 28px minmax(0,1fr);
  gap:0 var(--s4);align-items:start;
}
.tl__t{
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--slate);
  font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap;
}
.tl__m{position:relative;justify-self:center;width:28px;align-self:stretch;}
.tl__m::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  margin-left:-1px;background:var(--rule);
}
.tl__row:first-child .tl__m::before{top:9px;}
.tl__row:last-child  .tl__m::before{bottom:calc(100% - 9px);}
.tl__m::after{
  content:"";position:absolute;left:50%;top:3px;
  width:11px;height:11px;margin-left:-5.5px;
  background:var(--paper);border:2px solid var(--rule-strong);border-radius:50%;
}
.tl__row--ops .tl__m::after{background:var(--signal);border-color:var(--signal);}
.tl__row--you .tl__m::after{background:var(--paper);border-color:var(--carbon);}
.tl__d{padding-bottom:var(--s5);font-size:var(--t-sm);color:var(--slate);line-height:1.6;}
.tl__d strong{color:var(--carbon);font-weight:600;display:block;margin-bottom:2px;}
/* Who did what is encoded once, in a legend, rather than badged on every
   row — repeating it six times was noise and it wrapped badly on a phone. */
.tl__key{
  display:flex;flex-wrap:wrap;gap:var(--s5);
  margin-top:var(--s6);padding-bottom:var(--s5);
  border-bottom:1px solid var(--rule);
}
.tl__key span{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);
}
.tl__key i{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--paper);border:2px solid var(--rule-strong);
}
.tl__key i.is-ops{background:var(--signal);border-color:var(--signal);}
.tl__key i.is-you{background:var(--paper);border-color:var(--carbon);}
.tl__close{
  margin-top:var(--s4);padding:var(--s5);background:var(--substrate);
  border-left:3px solid var(--carbon);
}
.tl__close p{margin:0;font-size:var(--t-sm);color:var(--slate);}
.tl__close strong{color:var(--carbon);}
@media (max-width:560px){
  .tl__row{grid-template-columns:4.2rem 22px minmax(0,1fr);gap:0 var(--s3);}
  .tl__m{width:22px;}
}

/* the door for work that cannot wait for a contract */
.bookcard--now{border-left:3px solid var(--signal);}

/* ==========================================================================
   HELP BAR + /get-help/
   An emergency band that panics is a bad emergency band. Every competitor
   runs loud and red; a firm that handles emergencies for a living is calm,
   and calm is what reassures a frightened person. It is also the only
   version that survives the accent rule — a full-width Signal bar would
   break the discipline that keeps the orange meaning something.
   Sits ABOVE the sticky header, so it is seen on arrival and then gets out
   of the way. The number is the largest element and is always tappable.
   ========================================================================== */
.helpbar{background:var(--paper);border-bottom:1px solid var(--rule);}
.helpbar__in{display:flex;align-items:center;gap:var(--s4);
  padding-block:0.6rem;flex-wrap:wrap;}
.helpbar__k{display:flex;align-items:center;gap:0.55rem;
  font-size:var(--t-xs);color:var(--slate);}
.helpbar__k::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--signal);flex:none;}
.helpbar__tel{font-family:var(--f-display);font-weight:700;
  font-size:1.0625rem;letter-spacing:-0.01em;color:var(--carbon);
  text-decoration:none;white-space:nowrap;}
.helpbar__tel:hover{text-decoration:underline;text-underline-offset:3px;}
.helpbar__a{margin-left:auto;font-size:var(--t-xs);color:var(--carbon);
  white-space:nowrap;}
@media (max-width:700px){
  .helpbar__in{gap:0.6rem;justify-content:center;padding-block:0.55rem;}
  .helpbar__k{font-size:0.75rem;}
  .helpbar__a{margin-left:0;}
}

/* The number, given the weight it deserves on the page itself. */
.telbig{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4);
  margin-top:var(--s5);}
.telbig__n{font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,5.5vw,3.25rem);line-height:1;letter-spacing:-0.03em;
  color:var(--carbon);text-decoration:none;}
.telbig__n:hover{text-decoration:underline;text-underline-offset:6px;}
.telbig__when{font-size:var(--t-sm);color:var(--slate);}

/* What people actually call about. Naming the specific thing is what makes
   a stranger think "that is me". */
.symptoms{list-style:none;margin:var(--s6) 0 0;padding:0;
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);}
.symptoms li{background:var(--paper);padding:var(--s4) var(--s5);
  font-size:var(--t-sm);color:var(--carbon);}
.symptoms li b{display:block;font-weight:600;margin-bottom:0.2rem;}
.symptoms li span{color:var(--slate);}
@media (min-width:720px){ .symptoms{grid-template-columns:1fr 1fr;} }

/* The breach block. Different instructions, and the highest-stakes call
   that will ever come in. */
.breach{border:1px solid var(--rule-strong);border-left:3px solid var(--signal);
  padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) - 3px);
  margin-top:var(--s6);background:var(--paper);}
.breach h3{font-size:var(--t-lg);font-weight:600;margin:0 0 var(--s3);}
.breach ol{margin:0;padding-left:1.2rem;font-size:var(--t-sm);color:var(--carbon);}
.breach li{margin-bottom:0.45rem;}
.breach li:last-child{margin-bottom:0;}
.breach p{font-size:var(--t-sm);color:var(--slate);margin:var(--s4) 0 0;}

/* Rate card — plain numbers, because a person in a panic is deciding partly
   on whether they are about to be gouged. */
.rates{list-style:none;margin:var(--s5) 0 0;padding:0;
  border-top:1px solid var(--rule);}
.rates li{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  align-items:baseline;justify-content:space-between;
  padding:var(--s4) 0;border-bottom:1px solid var(--rule);}
.rates b{font-weight:600;font-size:var(--t-sm);}
.rates span{color:var(--slate);font-size:var(--t-xs);flex:1 1 22ch;}
.rates i{font-style:normal;font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;font-size:var(--t-sm);
  color:var(--carbon);white-space:nowrap;}

/* ==========================================================================
   PHASE 1 (18 Sep 2026) — overview pages and Start here
   ========================================================================== */
/* Deal timeline: seven stages instead of six. Quiet stages keep the rule but
   drop the Signal mark, so orange stays scarce and means "we carry weight
   here". */
.stages--7{grid-template-columns:repeat(7,1fr);}
.stages .stage{background:var(--paper);padding:var(--s5) var(--s4);display:block;}
.stage--quiet .stage__n{border-top-color:var(--graphite);}
@media (max-width:900px){ .stages--7{grid-template-columns:repeat(4,1fr);} }
@media (max-width:520px){ .stages--7{grid-template-columns:repeat(2,1fr);} }

/* "In your advisors' language" — the nomenclature layer, collapsed so an
   owner never has to open it and an attorney or CPA can. */
.advisors{margin-top:var(--s6);max-width:900px;}
.advisors__intro{display:none;font-size:var(--t-sm);color:var(--slate);margin:var(--s3) 0 0;}
.advisors[open] .advisors__intro{display:block;}

/* Start here: answer cards */
.answers{margin-top:var(--s6);grid-template-columns:1fr;}
@media (min-width:600px){ .answers{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .answers{grid-template-columns:repeat(4,1fr);} }
.answer{display:flex;flex-direction:column;}
.answer .h4{margin-bottom:var(--s3);}
.answer__go{
  margin-top:auto;padding-top:var(--s5);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--carbon);
}
.answer:hover .answer__go{box-shadow:inset 0 -0.09em 0 var(--signal);align-self:flex-start;}

/* Contact: the one line that appears for deal topics */
.chips__note{
  margin:var(--s3) 0 0;font-size:var(--t-sm);color:var(--slate);
  padding-left:var(--s4);border-left:2px solid var(--signal);
}
.chips__note[hidden]{display:none;}

/* Footer on phones: two link columns side by side rather than one long list */
@media (max-width:700px){ .site-footer__in{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5);} }

/* ==========================================================================
   ASSESSMENT — the planned trajectory (19 Sep 2026)
   Orange is the plan; Carbon is today. Graphite is only ever a rule.
   ========================================================================== */
.radar__key{display:flex;gap:var(--s5);justify-content:center;margin-top:var(--s3);
  font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--slate);}
.rk{display:inline-flex;align-items:center;gap:var(--s2);}
.rk::before{content:"";width:16px;height:0;border-top:2px solid var(--signal);}
.rk--plan::before{border-top:1.5px dashed var(--carbon);}

.domrow__to{color:var(--slate);font-weight:400;}
.domrow__plan{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--carbon);}

.plan{margin-top:var(--s8);border-top:1px solid var(--rule-strong);padding-top:var(--s7);}
.plan__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem);
  margin-top:var(--s6);align-items:start;}
@media (max-width:900px){ .plan__grid{grid-template-columns:1fr;} }
.traj{margin:0;background:var(--substrate);border:1px solid var(--rule);padding:var(--s5) var(--s4) var(--s4);}
.traj svg{width:100%;height:auto;overflow:visible;}
.traj text{font-family:var(--f-mono);font-size:10px;letter-spacing:0.06em;fill:var(--slate);}
.traj text.v{fill:var(--carbon);font-size:12px;font-weight:500;}
.traj text.st{fill:var(--carbon);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;}
.traj__cap{font-size:var(--t-xs);color:var(--slate);margin-top:var(--s3);line-height:1.5;}

.first{margin:var(--s4) 0 0;padding:0;list-style:none;counter-reset:first;}
.first li{position:relative;padding:var(--s4) 0 var(--s4) var(--s6);border-top:1px solid var(--rule);}
.first li:first-child{border-top:0;padding-top:var(--s2);}
.first li::before{counter-increment:first;content:"0" counter(first);position:absolute;left:0;top:var(--s4);
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--slate);}
.first li:first-child::before{top:var(--s2);}
.first__w{display:block;font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);
  text-transform:uppercase;color:var(--slate);}
.first b{display:block;font-size:var(--t-sm);font-weight:700;margin-top:var(--s1);}
.first p{font-size:var(--t-sm);color:var(--slate);line-height:1.55;margin-top:var(--s1);}
.first--plain li{padding-left:0;}
.first--plain li::before{content:none;}
.radar__key[hidden],.plan[hidden]{display:none;}

/* About: Education closes the credentials as one wide tile, a school per line.
   Spanning two columns fills the grid with no empty cell. */
.creds li .edu{display:block;margin-top:var(--s2);color:var(--slate);font-size:var(--t-sm);}
.creds li .edu em{font-style:normal;font-weight:500;color:var(--carbon);}
/* Mark's list sets its own columns (4 / 2 / 1) so Education always fills its row */
.creds--mark{grid-template-columns:1fr;}
@media (min-width:560px){ .creds--mark{grid-template-columns:repeat(2,1fr);} .creds--mark .creds__edu{grid-column:span 2;} }
@media (min-width:1040px){ .creds--mark{grid-template-columns:repeat(4,1fr);} }