/* ==========================================================================
   CenterPoint Corporation — design system
   Rhythm borrowed from the capability statement: hairline rules, ledger rows,
   tabular figures, mono for anything that is an identifier.
   ========================================================================== */

:root{
  /* palette — light */
  --ink:#10151C;
  --ink-2:#1B222C;
  --stone:#EDEBE5;
  --paper:#FAF9F6;
  --slate:#5C6672;
  --slate-2:#5C6672;   /* 5.54:1 on paper, 4.90:1 on stone. #8A929C was 2.99:1 and failed axe on 16 pages. */
  /* Sampled from the logo Will supplied 2026-09-04. These are CenterPoint's real
     brand colours, not ones we chose: navy #3B3B6B, gold #CCAF60, red #D24848,
     on an off-white #EDEDEC that is within a hair of the stone already in use. */
  --win:#3B3B6B;        /* his navy. 9.86:1 on paper, 10.38:1 for white on it */
  --win-soft:#E9E9F0;
  /* Two brasses. #A8813C reads correctly on the dark panels (5.12:1) but only
     manages 3.40:1 on paper, which failed axe on every page carrying an eyebrow.
     --brass is the text-safe value for light grounds; --brass-lit stays for the
     dark panels and for rules and borders, where contrast rules do not apply. */
  --brass:#7E5E22;      /* text-safe gold for light grounds, 5.68:1 on paper */
  --brass-lit:#CCAF60;  /* HIS gold, used on the dark panels where it reads 8.61:1 */
  --brass-soft:#F2EBDD;
  --flag:#D24848;       /* his red. 4.19:1, so decorative accent only, never body text */
  --rule:#D3D0C7;
  --rule-soft:#E2DFD7;

  /* semantic */
  --bg:var(--stone);
  --surface:var(--paper);
  --surface-2:#F2F0EA;
  --text:var(--ink);
  --text-2:var(--slate);
  --text-3:var(--slate-2);
  --line:var(--rule);
  --line-soft:var(--rule-soft);
  --accent:var(--win);
  --accent-soft:var(--win-soft);
  --accent-on:#FBFBFD;   /* tinted toward the navy, never pure white */
  --gold:var(--brass);
  --gold-lit:var(--brass-lit);
  --gold-soft:var(--brass-soft);
  --warn:var(--flag);
  --shadow:0 1px 2px rgba(16,21,28,.05),0 8px 24px -12px rgba(16,21,28,.18);

  /* type */
  --display:"Spectral",Georgia,"Times New Roman",serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* scale */
  /* Fluid modular scale. Was fixed rem steps with a single breakpoint override,
     which meant type jumped at 940px and then sat still across every size above it.
     clamp() lets the display sizes breathe on a large screen and settle on a phone
     without a media query, and it removes the jump. */
  --s--2:0.75rem;
  --s--1:0.8125rem;
  --s-0:clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);
  --s-1:clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --s-2:clamp(1.25rem, 1.17rem + 0.38vw, 1.4375rem);
  --s-3:clamp(1.5rem, 1.34rem + 0.75vw, 1.875rem);
  --s-4:clamp(1.875rem, 1.62rem + 1.20vw, 2.5rem);
  --s-5:clamp(2.25rem, 1.79rem + 2.15vw, 3.375rem);
  --s-6:clamp(2.75rem, 1.95rem + 3.75vw, 4.75rem);

  --maxw:1160px;
  --gut:28px;
  --radius:2px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0F14;
    --surface:#131A22;
    --surface-2:#182029;
    --text:#E9E7E1;
    --text-2:#A6AEB8;
    --text-3:#8B95A1;   /* 6.33:1 on bg, 5.77:1 on surface */
    --line:#2A323C;
    --line-soft:#212933;
    --accent:#9A9AD2;
    --accent-soft:#1B1B2E;
    --accent-on:#0A0A16;
    --gold:#CCAF60;
    --gold-lit:#CCAF60;
    --gold-soft:#241E12;
    --warn:#D97256;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0F14;
  --surface:#131A22;
  --surface-2:#182029;
  --text:#E9E7E1;
  --text-2:#A6AEB8;
  --text-3:#8B95A1;
  --line:#2A323C;
  --line-soft:#212933;
  --accent:#9A9AD2;
  --accent-soft:#1B1B2E;
  --accent-on:#0A0A16;
  --gold:#CCAF60;
  --gold-lit:#CCAF60;
  --gold-soft:#241E12;
  --warn:#D97256;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
}

/* ---------- 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}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ui);font-size:var(--s-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:600;line-height:1.14;margin:0;text-wrap:balance;letter-spacing:-.018em}
p{margin:0}
ul,ol{margin:0;padding:0}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}
::selection{background:var(--accent);color:var(--accent-on)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:var(--gut)}
/* Sections breathe with the viewport rather than sitting at one flat value. */
section{padding-block:clamp(48px, 3.2vw + 34px, 84px)}
.stack{display:flex;flex-direction:column}
.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}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-on);padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- type utilities ---------- */
.eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lede{font-size:var(--s-1);color:var(--text-2);line-height:1.6;max-width:60ch}
.small{font-size:var(--s--1);color:var(--text-2)}
.measure{max-width:68ch}

.sec-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:40px}
.sec-head h2{font-size:var(--s-4)}
.sec-head .k{margin-left:auto;font-size:var(--s--1);color:var(--text-3)}

/* ---------- buttons ---------- */
/* header CTA runs one size down so it does not set the bar height */
.site-head .btn{padding:9px 16px;font-size:.8125rem}
.site-head.small .btn{padding:7px 14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--accent-on);
  font-family:var(--ui);font-size:.875rem;font-weight:600;letter-spacing:.005em;
  padding:12px 22px;border:1px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;transition:filter .15s,border-color .15s,color .15s;
}
.btn:hover{filter:brightness(1.09)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.btn.gold{background:var(--gold);color:#12161C}
.btn.sm{padding:8px 15px;font-size:.8125rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.chip{
  display:inline-block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.03em;
  border:1px solid var(--line);color:var(--text-2);padding:3px 9px;border-radius:var(--radius);
}
.chip.on{border-color:var(--accent);color:var(--accent)}
.chip.gold{border-color:var(--gold);color:var(--gold)}

/* ---------- header ---------- */
.site-head{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
/* The header is sticky, so every pixel is permanently stolen from the page.
   It measured 85px desktop / 76px mobile on top of a 33px ribbon: 13-15% of the
   viewport locked before any content. It now starts compact and compresses further
   once the reader has scrolled past the fold. */
.site-head .wrap{display:flex;align-items:center;gap:24px;padding-block:11px;transition:padding .18s ease}
.site-head.small .wrap{padding-block:6px}
.brand{display:flex;align-items:center;gap:11px;line-height:1;text-decoration:none;flex:none}
.brand .mk{width:30px;height:30px;flex:none;transition:width .18s ease,height .18s ease}
.site-head.small .brand .mk{width:24px;height:24px}
.brand .txt{display:flex;flex-direction:column}
.brand .m{font-family:var(--display);font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;transition:font-size .18s ease}
.site-head.small .brand .m{font-size:1.0625rem}
.brand .s{font-size:.4688rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-top:3px;transition:opacity .18s ease}
.site-head.small .brand .s{opacity:0;height:0;margin:0;overflow:hidden}
.nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:.8125rem;font-weight:500;text-decoration:none;color:var(--text-2);padding-bottom:3px;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--text);border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.navtoggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;font-size:.8125rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding-block:72px 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end;position:relative;z-index:2}
.hero h1{font-size:var(--s-6);line-height:1.02;letter-spacing:-.03em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .sub{margin-top:22px;font-size:var(--s-1);color:var(--text-2);max-width:54ch;line-height:1.55}
.acts{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
/* Solid ground, not a scrim. The $1B+ figure is mid-tone green and could not clear
   4.5:1 over the photograph at any gradient strength that still let the image read.
   Making it a card also fits the ledger language the rest of the page uses. */
.hero-fig{border-left:1px solid var(--line);padding-left:30px}
.bignum{font-family:var(--display);font-size:var(--s-6);font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--accent)}
.hero-fig p{font-size:var(--s--1);color:var(--text-2);margin-top:14px;line-height:1.55}
/* The canvas draws with --text-3, and that token was darkened from #8A929C to
   #5C6672 to fix a WCAG failure elsewhere. At .55 the filaments then darkened the
   ground enough to drop the hero copy to 4.00:1 on measured pixels. Decorative
   geometry must never be the reason text fails, so it runs quiet. */
#capturemap{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.20;pointer-events:none}

/* Below the grid breakpoint the copy spans the full width, so a horizontal
   scrim protects nothing. Verified by sampling the rendered pixels: the eyebrow
   fell to 4.31 at 1024px and the sub to 4.19 at 390px. Here the photograph
   becomes a top band and everything below it is solid. */
@media (max-width:1100px){
  .hero-photo img{object-position:center 30%}
  .hero-photo::after{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 30%,transparent) 0%,
      color-mix(in srgb,var(--surface) 72%,transparent) 18%,
      var(--surface) 34%,var(--surface) 100%);
  }
}
@supports not (background:color-mix(in srgb,red,blue)){
  @media (max-width:1100px){
    .hero-photo::after{background:linear-gradient(180deg,rgba(250,249,246,.35) 0%,var(--surface) 34%)}
  }
}

/* ---------- ledger ---------- */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:56px;position:relative;z-index:2}
.ledger>div{padding:20px 18px 24px 0;border-right:1px solid var(--line-soft)}
.ledger>div:last-child{border-right:0}
.ledger dt{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.ledger dd{margin:8px 0 0;font-family:var(--display);font-size:var(--s-2);font-weight:600;letter-spacing:-.015em}

/* ---------- rule grid (services, phases) ---------- */
.rulegrid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-soft)}
.rulegrid>article{padding:28px 32px 30px 0;border-bottom:1px solid var(--line-soft)}
.rulegrid>article:nth-child(odd){border-right:1px solid var(--line-soft)}
.rulegrid>article:nth-child(even){padding-left:32px}
.rulegrid .num{font-family:var(--mono);font-size:.75rem;color:var(--gold);letter-spacing:.06em}
.rulegrid h3{font-size:var(--s-1);margin-top:10px}
.rulegrid h3 a{text-decoration:none}
.rulegrid h3 a:hover{color:var(--accent)}
.rulegrid p{margin-top:10px;color:var(--text-2);font-size:.9375rem;line-height:1.6}
.rulegrid .tags{margin-top:14px;display:flex;gap:7px;flex-wrap:wrap}
.rulegrid>article.feature{background:var(--accent-soft);padding-inline:32px;border-right:0}
.rulegrid>article.feature .num,.rulegrid>article.feature h3{color:var(--accent)}
.rulegrid>article.feature .chip{border-color:var(--accent);color:var(--accent)}

/* ---------- sequence ----------
   Three steps that happen in order, so they are an <ol> and they are NOT three
   identical boxes. The rule grows with each step and the ordinal carries the
   weight, which is the one thing a card grid cannot say. */
.seq{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s}
.seq li{padding:22px 30px 26px 0;border-top:2px solid var(--line);position:relative}
.seq li:nth-child(1){border-top-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.seq li:nth-child(2){border-top-color:color-mix(in srgb,var(--accent) 65%,var(--line))}
.seq li:nth-child(3){border-top-color:var(--accent)}
@supports not (background:color-mix(in srgb,red,blue)){
  .seq li:nth-child(3){border-top-color:var(--accent)}
}
.seq .n{font-size:.75rem;color:var(--gold);letter-spacing:.08em;font-weight:600}
.seq h3{font-size:var(--s-1);margin-top:9px}
.seq li>p:last-child{margin-top:9px;color:var(--text-2);font-size:.9375rem;line-height:1.58}
@media (max-width:940px){
  .seq{grid-template-columns:1fr}
  .seq li{padding-right:0}
}

/* ---------- cards ---------- */
.cards{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards>* {background:var(--surface);padding:26px 24px}

/* ---------- founder ---------- */
.band{background:var(--surface);border-block:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start}
.portrait{aspect-ratio:4/5;border:1px solid var(--line);background:var(--bg);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait .ph{width:58px;height:58px;border-radius:50%;border:1.5px dashed var(--text-3);display:grid;place-items:center;color:var(--text-3);font-family:var(--mono);font-size:.625rem}
.portrait small{font-size:.6875rem;color:var(--text-3);line-height:1.5;max-width:24ch}
blockquote{margin:0;font-family:var(--display);font-size:var(--s-3);line-height:1.35;letter-spacing:-.02em;font-style:italic}
.who{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.who strong{font-size:var(--s-0)}
.who span{display:block;font-size:var(--s--1);color:var(--text-2);margin-top:3px}
.creds{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* ---------- audio ---------- */
.track{display:flex;align-items:center;gap:16px;border:1px solid var(--line);padding:14px 18px;background:var(--surface);border-radius:var(--radius);flex-wrap:wrap}
.track .meta{flex:1;min-width:140px}
.track .meta strong{display:block;font-size:.9375rem}
.track .meta span{font-size:var(--s--2);color:var(--text-3)}
.track audio{width:100%;max-width:340px;height:36px}

/* ---------- dark panel (tools) ---------- */
/* These blocks are dark in BOTH themes, so the light-ground brass is wrong
   inside them. Rebinding the token here fixes every gold thing at once:
   step numbers, inline emphasis, the .btn.gold background, tool labels. */
.panel,.card-dark{--gold:var(--gold-lit)}
.panel{background:var(--ink);color:#E9E7E1}
:root[data-theme="dark"] .panel,:root:not([data-theme="light"]) .panel{background:#070B10}
.panel .sec-head{border-bottom-color:rgba(255,255,255,.16)}
.panel .sec-head h2{color:#F3F1EB}
.panel .sec-head .k,.panel .small{color:#949DA7}
.panel p{color:#A9B1BB}
.tool-grid{display:grid;grid-template-columns:1fr 420px;gap:52px;align-items:start}
.steps{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:22px}
.steps li{display:flex;gap:12px;font-size:.9375rem;color:#C4CBD3}
.steps b{color:var(--gold);font-family:var(--mono);font-size:.75rem;padding-top:3px;flex:none}

.card-dark{background:#171E27;border:1px solid rgba(255,255,255,.13);padding:26px}
:root[data-theme="dark"] .card-dark,:root:not([data-theme="light"]) .card-dark{background:#101820}
.qhead{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#949DA7;font-weight:600}
.bar{height:2px;background:rgba(255,255,255,.13);margin:12px 0 22px}
.bar i{display:block;height:100%;background:var(--gold-lit);width:0;transition:width .3s ease}
.q{font-family:var(--display);font-size:var(--s-1);color:#F3F1EB;line-height:1.35;min-height:2.6em}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.opt{text-align:left;background:transparent;border:1px solid rgba(255,255,255,.18);color:#D8DDE3;font-size:.875rem;padding:12px 15px;border-radius:var(--radius);cursor:pointer;transition:all .14s}
.opt:hover{border-color:var(--gold);color:#fff;background:rgba(168,129,60,.1)}
.band-out{font-family:var(--display);font-size:var(--s-4);color:#F3F1EB;line-height:1.1;letter-spacing:-.02em}
.score{font-family:var(--mono);font-size:.75rem;color:var(--gold);letter-spacing:.08em;margin-top:8px}
.say{color:#A9B1BB;font-size:.9375rem;margin-top:16px;line-height:1.6}
.gate{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13)}
.gate label{display:block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#949DA7;font-weight:600;margin-bottom:9px}
.gate .row{display:flex;gap:8px}
.gate input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#F3F1EB;font-family:var(--ui);font-size:.875rem;padding:11px 13px;border-radius:var(--radius)}
.gate input::placeholder{color:#8F98A3}
.gate input:focus{border-color:var(--gold);outline:none}
.fine{font-size:.6875rem;color:#8F98A3;margin-top:11px;line-height:1.5}
.done{display:none;color:var(--gold);font-size:.875rem;margin-top:14px;line-height:1.55}
.done.on{display:block}
.hidden{display:none}

/* sliders (bid/no-bid) */
.factor{margin-bottom:16px}
.factor .fl{display:flex;justify-content:space-between;font-size:.8125rem;color:#C4CBD3;margin-bottom:6px;gap:12px}
.factor .fl b{font-family:var(--mono);font-size:.75rem;color:var(--gold);font-weight:500}
input[type=range]{width:100%;accent-color:var(--gold-lit);height:22px}
.gauge{text-align:center;padding:18px 0 6px}
.gauge .pw{font-family:var(--display);font-size:var(--s-6);line-height:1;color:#F3F1EB;letter-spacing:-.03em}
.gauge .pw small{font-size:var(--s-2);color:var(--gold)}
.verdict{display:inline-block;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:var(--radius);margin-top:12px}
.v-bid{background:var(--win);color:#fff}
.v-cond{background:var(--gold);color:#12161C}
.v-no{background:var(--flag);color:#fff}

/* checkbox list (set-aside) */
.checks{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.checks label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);cursor:pointer;font-size:.875rem;color:#D8DDE3;transition:border-color .14s,background .14s}
.checks label:hover{border-color:var(--gold);background:rgba(168,129,60,.08)}
.checks input{margin-top:3px;accent-color:var(--gold);flex:none}
.prog{display:grid;gap:10px;margin-top:8px}
.prog .p{border:1px solid rgba(255,255,255,.14);padding:14px 16px;border-radius:var(--radius)}
.prog .p.hit{border-color:var(--win);background:rgba(31,111,74,.14)}
.prog .p h3{font-family:var(--display);font-size:var(--s-0);color:#F3F1EB;margin:0}
.prog .p p{font-size:.8125rem;margin-top:5px;color:#A9B1BB}
.prog .p .st{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--gold)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.875rem;min-width:520px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;white-space:nowrap}
td.mono,th.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

/* ---------- prose ---------- */
.prose p{margin-top:1.1em;color:var(--text-2);line-height:1.72}
.prose h2{font-size:var(--s-3);margin-top:1.8em}
.prose h3{font-size:var(--s-1);margin-top:1.5em}
.prose ul{margin-top:1em;padding-left:1.15em;list-style:disc;color:var(--text-2)}
.prose li{margin-top:.5em;line-height:1.65}
.prose strong{color:var(--text)}
.prose>*:first-child{margin-top:0}

/* ---------- cta band ---------- */
.cta{background:var(--surface);border-top:1px solid var(--line)}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
.cta h2{font-size:var(--s-5)}
.cta p{color:var(--text-2);margin-top:14px;font-size:var(--s-1);max-width:46ch}

/* countdown */
.fy{display:inline-flex;align-items:baseline;gap:9px;border:1px solid var(--gold-lit);color:var(--gold);padding:6px 13px;border-radius:var(--radius);font-size:.8125rem}
.fy b{font-family:var(--mono);font-size:.9375rem;font-weight:600}

/* ---------- footer ---------- */
.site-foot{background:var(--bg);border-top:1px solid var(--line);padding-block:44px 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.foot-grid h2{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:600;font-family:var(--ui)}
.foot-grid ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.foot-grid a{font-size:.8125rem;color:var(--text-2);text-decoration:none}
.foot-grid a:hover{color:var(--accent)}
.foot-base{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:var(--s--1);color:var(--text-3)}
.foot-base .yr{font-family:var(--mono)}

/* ---------- preview ribbon ---------- */
.ribbon{background:var(--ink);color:#C9CFD6;font-size:.6875rem;text-align:center;padding:5px 16px;letter-spacing:.02em;line-height:1.35}
.ribbon b{color:var(--gold-lit)}   /* ribbon sits on --ink, so it takes the bright brass */
:root[data-theme="dark"] .ribbon,:root:not([data-theme="light"]) .ribbon{background:#05080B}


/* ---------- photography ----------
   The hero photograph is a full-bleed BAND beneath the hero copy, not a
   background behind it.

   Why: a scrim strong enough to carry text has to be re-tuned at every
   breakpoint, and three successive gradient fixes each pushed the failure to a
   different viewport (measured on rendered pixels: 2.07 -> 3.43 -> 3.96 -> 4.09,
   never clearing 4.5 everywhere at once). Text over a photograph is a contrast
   problem you re-solve forever. Giving the image its own band means the type
   sits on solid ground at every size and the photograph runs at full strength
   with nothing on top of it. */
.heroband{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink)}
.heroband img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;object-position:center 40%;display:block}
.heroband::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 55%,transparent) 0%,transparent 22%,
             transparent 72%,color-mix(in srgb,var(--bg) 60%,transparent) 100%);
}
@supports not (background:color-mix(in srgb,red,blue)){ .heroband::after{background:none} }

/* page header image: a wide band under the page title */
.pagefig{margin-top:34px;border:1px solid var(--line);overflow:hidden;background:var(--surface-2)}
.pagefig img{width:100%;aspect-ratio:24/9;object-fit:cover;display:block}
.pagefig.tall img{aspect-ratio:16/9}

/* ---------- reveal ----------
   Content is ALWAYS visible at rest. An earlier version parked .rv at
   opacity:0 until an IntersectionObserver fired, which meant the services
   grid, the problem cards, the capture phases and the past-performance table
   rendered blank in a full-page screenshot, and would render blank for any
   crawler or reader whose JS did not run. On a site whose whole job is letting
   someone verify this company is real, that is the worst possible failure.
   The reveal is now additive only: it animates a section that is already there. */
.rv{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .rv{animation:rise .5s ease-out both}
  @keyframes rise{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- responsive ---------- */
@media (max-width:940px){
  :root{--gut:20px}   /* type is fluid now; only the gutter needs a breakpoint */

  .hero-grid,.tool-grid,.f-grid,.cta-grid{grid-template-columns:1fr;gap:34px}
  .hero-fig{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:26px}
  .ledger{grid-template-columns:repeat(2,1fr)}
  .ledger>div{border-right:0}
  .rulegrid{grid-template-columns:1fr}
  .rulegrid>article,.rulegrid>article:nth-child(odd),.rulegrid>article:nth-child(even){padding-inline:0;border-right:0}
  .rulegrid>article.feature{padding-inline:20px}
  .cards.c3,.cards.c2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav{display:none;order:3;width:100%;flex-direction:column;gap:0;margin-left:0;border-top:1px solid var(--line);padding-top:10px}
  .nav.open{display:flex}
  .nav a{padding-block:10px;border-bottom:1px solid var(--line-soft)}
  .navtoggle{display:block}
  .site-head .wrap{flex-wrap:wrap}
  .site-head .btn{display:none}
}
@media (max-width:560px){
  .ledger{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}

@media print{
  .site-head,.site-foot,.ribbon,.acts,.cta{display:none}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   2026-10-08: AI Solutions made the lead service (Will, 10/8 call).
   Spotlight panel on /services/, thumbnails on the discipline grid,
   and the video slot on /services/ai-solutions/.
   ========================================================================== */
.ai-spot{margin-top:40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--win);color:var(--accent-on);border:1px solid var(--win);overflow:hidden}
.ai-spot-fig{display:block;min-height:100%;position:relative;overflow:hidden}
.ai-spot-fig img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.ai-spot:hover .ai-spot-fig img{transform:scale(1.03)}
.ai-spot-body{padding:clamp(28px,4vw,52px);border-left:3px solid var(--brass-lit)}
.ai-spot .num{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--brass-lit)}
.ai-spot h3{font-size:var(--s-4);margin-top:10px;line-height:1.05;letter-spacing:-.02em}
.ai-spot h3 a{color:var(--accent-on);text-decoration:none}
.ai-spot h3 a:hover{color:var(--brass-lit)}
.ai-spot-line{font-family:var(--display);font-style:italic;font-size:var(--s-1);color:var(--brass-lit);margin-top:12px}
.ai-spot p{color:#D9DAE6;line-height:1.6;margin-top:12px;max-width:58ch}
.ai-spot .tags{margin-top:18px;display:flex;gap:7px;flex-wrap:wrap}
.ai-spot .chip{border-color:rgba(204,175,96,.6);color:#EFE3C2}
.ai-spot-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.ai-spot .btn{background:var(--brass-lit);border-color:var(--brass-lit);color:var(--ink)}
.ai-spot .btn:hover{background:#D9BF77;border-color:#D9BF77}
.ai-spot .btn.ghost{background:transparent;color:var(--accent-on);border-color:rgba(251,251,253,.55)}
.ai-spot .btn.ghost:hover{border-color:var(--brass-lit);color:var(--brass-lit)}

.svc-thumb{display:block;margin-bottom:16px;overflow:hidden;border:1px solid var(--line-soft);background:var(--surface-2)}
.svc-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.rulegrid>article:hover .svc-thumb img{transform:scale(1.04)}
.rulegrid>article.ask-wide{grid-column:1/-1;border-right:0;padding-left:0}

.howit{padding-top:8px}
.howit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}
.videoslot{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:var(--ink);overflow:hidden}
.videoslot img{width:100%;height:100%;object-fit:cover;display:block;opacity:.45}
.videoslot iframe,.videoslot video{position:absolute;inset:0;width:100%;height:100%;border:0}
.videoslot-cap{position:absolute;inset:auto 0 0 0;padding:22px 24px;display:grid;gap:4px;color:var(--accent-on);background:linear-gradient(to top,rgba(16,21,28,.85),rgba(16,21,28,0))}
.videoslot-cap .mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--brass-lit)}
.videoslot-cap strong{font-family:var(--display);font-size:var(--s-1);font-weight:600}
.videoslot-cap span:last-child{color:#D9DAE6;font-size:.9375rem}

@media (max-width:940px){
  .ai-spot{grid-template-columns:1fr}
  .ai-spot-fig img{min-height:0;aspect-ratio:16/9}
  .ai-spot-body{border-left:0;border-top:3px solid var(--brass-lit)}
  .howit-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ai-spot-fig img,.svc-thumb img{transition:none}
}

/* ==========================================================================
   2026-10-10: pricing page, thank-you page, AI Solutions scope note and demo
   card (Will, 10/9 list). Same ledger language: hairlines, mono numerals,
   his navy for the recommended option, his gold for the badge.
   ========================================================================== */
.price-head{padding-bottom:0}
.price-sec{padding-top:40px}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:var(--surface);margin-top:18px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;padding:34px 30px 32px;border-right:1px solid var(--line-soft)}
.tier:last-child{border-right:0}
.tier .num{font-family:var(--mono);font-size:.75rem;color:var(--gold);letter-spacing:.06em}
.tier .tname{font-size:var(--s-2);margin-top:10px}
.tier .price{margin-top:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tier .amt{font-family:var(--display);font-size:var(--s-5);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tier .amt-word{font-size:var(--s-4);letter-spacing:-.02em}
.tier .unit{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--text-2);text-transform:uppercase}
.tier .per{margin-top:8px;font-size:.9375rem;color:var(--text-2)}
.tier .desc{margin-top:18px;color:var(--text-2);line-height:1.6;padding-top:18px;border-top:1px solid var(--line-soft)}
.tier .inc{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid rgba(251,251,253,.18);display:flex;flex-direction:column;gap:11px}
.tier .inc li{position:relative;padding-left:22px;font-size:.9375rem;line-height:1.5}
.tier .inc li::before{content:"";position:absolute;left:2px;top:.42em;width:9px;height:5px;border-left:2px solid var(--brass-lit);border-bottom:2px solid var(--brass-lit);transform:rotate(-45deg)}
.tier .tacts{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:10px}
.tier .tacts .btn{width:100%}
.tier.pop{background:var(--win);color:#FBFBFD;border-right:0;border-top:3px solid var(--brass-lit);margin:-16px 0;padding-top:46px;padding-bottom:46px;box-shadow:var(--shadow);z-index:1}
.tier.pop .num,.tier.pop .unit{color:var(--brass-lit)}
.tier.pop .tname{color:#FBFBFD}
.tier.pop .per{color:#D9DAE6}
.tier.pop .inc li{color:#E4E5EE}
.tier.pop .btn{background:var(--brass-lit);border-color:var(--brass-lit);color:var(--ink)}
.tier.pop .btn:hover{background:#D9BF77;border-color:#D9BF77;filter:none}
.tier.pop .btn.ghost{background:transparent;color:#FBFBFD;border-color:rgba(251,251,253,.55)}
.tier.pop .btn.ghost:hover{border-color:var(--brass-lit);color:var(--brass-lit)}
.tier .badge{position:absolute;top:0;left:30px;transform:translateY(-50%);background:var(--brass-lit);color:var(--ink);font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius)}
.quote-row{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:1px solid var(--line);border-left:3px solid var(--brass-lit);background:var(--surface);padding:22px 26px}
.quote-row p{font-family:var(--display);font-size:var(--s-2);letter-spacing:-.01em}
.fineprint{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:6px;max-width:80ch}
.fineprint p{font-size:var(--s--1);color:var(--text-2);line-height:1.6}
.qform-wrap{border:1px solid var(--line);background:var(--bg);padding:28px}
.qform{display:flex;flex-direction:column;gap:14px}
.qform label{display:block;margin-bottom:6px;font-size:var(--s--1);font-weight:600;color:var(--text-2)}
.qform input,.qform textarea{width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--ui);font-size:.9375rem;border-radius:var(--radius)}
.qform textarea{resize:vertical}
.qform input:focus,.qform textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
#quote{scroll-margin-top:70px}
.scope-note{margin-top:26px;border:1px solid var(--line);border-left:3px solid var(--brass-lit);background:var(--surface);padding:20px 24px;display:grid;grid-template-columns:1fr auto;gap:8px 28px;align-items:center}
.scope-note .scope-h{grid-column:1/-1;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.scope-note dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.scope-note dt{font-family:var(--display);font-weight:600;font-size:var(--s-1)}
.scope-note dd{margin:4px 0 0;color:var(--text-2);font-size:.9375rem;line-height:1.55}
.sec-head .k a{color:var(--accent)}
.demo-card{border:1px solid var(--win);background:var(--win);color:#FBFBFD;padding:clamp(26px,3.4vw,44px);border-left:3px solid var(--brass-lit)}
.demo-card .mono{font-size:.75rem;letter-spacing:.06em;color:var(--brass-lit)}
.demo-card .demo-h{font-family:var(--display);font-size:var(--s-3);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:10px}
.demo-card p:not(.mono):not(.demo-h){color:#D9DAE6;margin-top:12px;line-height:1.6}
.demo-card .btn{background:var(--brass-lit);border-color:var(--brass-lit);color:var(--ink)}
.demo-card .btn:hover{background:#D9BF77;filter:none}
.ty{padding-block:clamp(64px,6vw,110px)}
@media (max-width:940px){
  .tiers{grid-template-columns:1fr;border:0;background:transparent;gap:26px}
  .tier{border:1px solid var(--line);background:var(--surface)}
  .tier:last-child{border-right:1px solid var(--line)}
  .tier.pop{margin:0;border:1px solid var(--win);border-top:3px solid var(--brass-lit);padding-block:42px 34px}
  .tier .badge{left:24px}
  .tier{padding:30px 24px 28px}
  .scope-note{grid-template-columns:1fr}
  .scope-note dl{grid-template-columns:1fr}
  .quote-row .btn{width:100%}
}