/* ═══════════════════════════════════════════════════════════════════
   RECONCILER AI — DESIGN SYSTEM v2
   Ledger logic, elevated. Three gears of expression:
     flagship  — full-viewport panels, one idea each
     section   — bands at normal density
     list      — plain rows, deliberately quiet
   Colour appears only where two figures agree or fail to.
   Contrast on --paper: ink 16.63:1 · ink-2 5.75:1 ·
   matched 7.07:1 · exception 6.47:1. All AA.
   --rule is 1.37:1 — HAIRLINES ONLY. Never text.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F5F2EA;
  --paper-2:#E9E7DC;
  --ink:#121816;
  --ink-2:#4C554F;
  --rule:#DFDBCC;
  --rule-2:#EBE7DA;

  /* the brand ground — deep ledger green. Reconciliation's own colour:
     this is what "agrees" looks like. Used for panels and CTA bands. */
  --brand:#12372F;
  --brand-2:#237A63;

  --matched:#237A63;
  --exception:#A5493A;
  --matched-up:#7FC9AC;
  --exception-up:#E3A196;
  --ink-soft:#9AA79F;

  --ff-display:"Fraunces","Georgia",serif;
  --ff-ui:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px;

  --rail:0px;--nav-h:74px;--nav-h2:60px;--surface:#FCFAF4;--ink-3:#5F6963;--brand-ink:#F5F2EA;--bronze:#9A7A45;--deep:#0D2A23;
  --gut:clamp(20px,5vw,72px);
  --max:1280px;

  --t:240ms cubic-bezier(.4,0,.2,1);
  --t-fast:180ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:24px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-ui); font-weight:400; font-size:17px; line-height:1.62;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--brand); color:var(--paper)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; outline-offset:3px}
.skip{position:absolute; left:-9999px; top:8px; z-index:200; background:var(--brand); color:var(--paper); padding:11px 18px}
.skip:focus{left:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ─── layout ─────────────────────────────────────────────────────── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
main{padding-left:0;padding-top:var(--nav-h)}
.sec{padding:var(--s8) 0; position:relative}
.sec-sm{padding:var(--s7) 0; position:relative}
hr.rule,.rule{height:1px; background:var(--rule); border:0; margin:0}

/* ─── type ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0; font-weight:400}
p{margin:0}
.d-panel{font-family:var(--ff-display); font-size:clamp(3rem,7vw,6.75rem); font-weight:600; line-height:.98; letter-spacing:-.03em}
.d-page{font-family:var(--ff-display); font-size:clamp(2.25rem,4.4vw,4rem); font-weight:600; line-height:1.04; letter-spacing:-.025em}
.d-sec{font-family:var(--ff-display); font-size:clamp(1.65rem,2.8vw,2.5rem); font-weight:500; line-height:1.12; letter-spacing:-.02em}
.h-md{font-family:var(--ff-ui); font-size:19px; font-weight:500; line-height:1.35; letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.3vw,1.2rem); line-height:1.58; color:var(--ink-2); max-width:52ch}
.body,.small,.muted{color:var(--ink-2)}
.small{font-size:15px; line-height:1.55}
strong{font-weight:500}
.eyebrow,.mono{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); display:block}
.fig{font-family:var(--ff-mono); letter-spacing:0}

/* ─── tie-out — once per page, never repeated ────────────────────── */
.tieout{display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:var(--s3); padding:var(--s3) 0}
.tieout__l{font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap}
.tieout__r{height:1px; background:var(--rule); transform-origin:left center}
.tieout__m{width:22px; height:22px; display:grid; place-items:center; flex:none; font-family:var(--ff-mono); font-size:13px; line-height:1; border:1px solid currentColor; border-radius:50%}
.tieout__m--ok{color:var(--brand)}
.tieout__m--no{color:var(--exception)}

/* ─── nav rail ───────────────────────────────────────────────────── */
.brand{display:none}
.brand .ai{color:var(--ink-2)}
.rail ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; pointer-events:auto}
.rail__mk{width:16px; height:16px; flex:none; opacity:0; transition:opacity var(--t)}

.bar{display:none; position:fixed; top:0; left:0; right:0; z-index:60; height:56px; background:var(--paper); border-bottom:1px solid var(--rule)}
.bar__in{display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 var(--gut)}
.bar .brand{position:static}
.burger{width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-right:-10px}
.burger span{display:block; width:18px; height:1px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1px; background:var(--ink); transition:transform var(--t-fast)}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu .burger span{background:transparent}
body.menu .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{position:fixed; inset:56px 0 auto 0; z-index:59; background:var(--paper); border-bottom:1px solid var(--rule); padding:var(--s3) var(--gut) var(--s4); display:none; flex-direction:column}
body.menu .sheet{display:flex}
.sheet a{padding:14px 0; border-bottom:1px solid var(--rule-2); font-size:19px}
.sheet a:last-child{border-bottom:0}

/* ─── flagship: full-viewport panels ─────────────────────────────── */
.panel__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); gap:var(--s7); align-items:center; width:100%}
.panel__grid--flip > *:first-child{order:2}
.panel .d-panel{max-width:13ch}
.panel__go{display:inline-flex; align-items:center; gap:10px; margin-top:var(--s5); font-size:17px; font-weight:500; border-bottom:1px solid var(--rule); padding-bottom:3px; transition:border-color var(--t-fast), gap var(--t-fast)}
.panel__go:hover{border-bottom-color:currentColor; gap:16px}
.panel-ink{background:var(--brand); color:var(--paper)}
.panel-ink .lead,.panel-ink .eyebrow,.panel-ink .mono,.panel-ink .small,.panel-ink .body,.panel-ink .muted{color:var(--ink-soft)}
.panel-ink .panel__go{border-bottom-color:rgba(245,242,234,.3)}
.panel-ink ::selection{background:var(--paper); color:var(--ink)}
.panel-ink :focus-visible{outline-color:var(--paper)}

.obj{border-top:1px solid var(--rule); padding-top:var(--s3)}
.panel-ink .obj{border-top-color:rgba(245,242,234,.24)}
.obj__k{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:var(--s3)}
.panel-ink .obj__k{color:var(--ink-soft)}
.pair{display:grid; gap:2px}
.pair__r{display:grid; grid-template-columns:1fr auto; gap:var(--s3); padding:12px 0; border-bottom:1px solid var(--rule-2); align-items:baseline}
.panel-ink .pair__r{border-bottom-color:rgba(245,242,234,.14)}
.pair__k{font-size:15px; color:var(--ink-2)}
.panel-ink .pair__k{color:var(--ink-soft)}
.pair__v{font-family:var(--ff-mono); font-size:15px; text-align:right}
.pair__r--tot{border-bottom:0; border-top:1px solid currentColor; margin-top:6px; padding-top:12px}
.pair__r--ok{color:var(--matched)}
.pair__r--no{color:var(--exception)}
.panel-ink .pair__r--ok{color:var(--matched-up)}
.panel-ink .pair__r--no{color:var(--exception-up)}

.extract{font-family:var(--ff-mono); font-size:clamp(14px,1.35vw,17px); line-height:2.05}
.extract__r{display:grid; grid-template-columns:1fr auto; gap:var(--s4)}
.extract__k{letter-spacing:.09em; text-transform:uppercase; font-size:12px; align-self:center}
.extract__v{text-align:right; white-space:nowrap}
.extract__tot{border-top:1px solid currentColor; margin-top:8px; padding-top:8px}
.extract__ok{color:var(--matched-up)}
.extract__no{color:var(--exception-up)}

.month{display:grid; grid-template-columns:repeat(14,1fr); gap:5px; margin-top:var(--s2)}
.month i{aspect-ratio:1; background:var(--rule-2); display:block}
.month i.on{background:var(--matched)}
.month i.mid{background:var(--rule)}
.key{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s3); font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.key b{display:inline-block; width:8px; height:8px; margin-right:7px; font-weight:400}

/* ─── the product mark ───────────────────────────────────────────── */
.mark{display:block; color:currentColor}
.mark--lg{width:96px; height:96px}
.mark--sm{width:16px; height:16px}
.mark .m-dot{fill:currentColor}
.mark .m-res{fill:var(--matched)}
.panel-ink .mark .m-res{fill:var(--matched-up)}
.mark .m-rule{stroke:currentColor; stroke-width:1.5; fill:none}

/* ─── section gear ───────────────────────────────────────────────── */
.caps{border-top:1px solid var(--rule)}
.cap{padding:var(--s4) 0; border-bottom:1px solid var(--rule)}
.cap .h-md{margin-bottom:6px}
.cap p{color:var(--ink-2); font-size:16px; max-width:52ch}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:var(--s7); align-items:start}
.sticky{position:sticky; top:var(--s7)}
.spec{border-top:1px solid var(--brand); padding-top:var(--s3)}
.spec dl{margin:0; display:grid; gap:12px}
.spec div{display:flex; justify-content:space-between; gap:var(--s2); padding-bottom:12px; border-bottom:1px solid var(--rule-2)}
.spec dt{font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.spec dd{margin:0; font-size:15px; text-align:right; font-weight:500}
.g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)}
.g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.item{border-top:1px solid var(--rule); padding-top:var(--s3)}
.item .h-md{margin-bottom:6px}
.item p{font-size:15px; color:var(--ink-2)}
.proc{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s3); border-top:1px solid var(--rule); padding-top:var(--s3)}
.proc h3{font-size:16px; font-weight:500; margin-bottom:6px}
.proc p{font-size:14px; color:var(--ink-2)}
.seam{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--s7)}
.seam::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:currentColor; opacity:.18}
.claim{padding:var(--s5) var(--s5) var(--s5) 0}
.proof{padding:var(--s5) 0 var(--s5) var(--s5); color:var(--ink-2)}

/* ─── list gear — deliberately quiet ─────────────────────────────── */
.idx{border-top:1px solid var(--rule)}
.idx a{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--rule-2); align-items:baseline; transition:padding-left var(--t-fast)}
.idx a:hover{padding-left:8px}
.idx__n{font-size:16px; font-weight:500}
.idx__d{font-size:15px; color:var(--ink-2)}
.idx__m{font-family:var(--ff-mono); font-size:12px; color:var(--ink-2); white-space:nowrap}

/* ─── controls ───────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border:1px solid var(--ink); border-radius:0; font-size:15px; font-weight:500; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast)}
.btn{color:var(--brand)}
.btn:hover{background:var(--brand); color:var(--paper)}
.btn-pr,.btn.primary{background:var(--brand); color:var(--paper)}
.btn-pr:hover,.btn.primary:hover{background:var(--brand-2); border-color:var(--brand-2); color:var(--paper)}
.btn-line,.btn-ghost{border-color:var(--rule); color:var(--ink-2)}
.btn-line:hover,.btn-ghost:hover{background:transparent; border-color:var(--ink); color:var(--ink)}
.btn-sm{padding:9px 16px; font-size:14px}
.btn[disabled]{opacity:.45; pointer-events:none}
.panel-ink .btn{border-color:var(--paper); color:var(--paper)}
.panel-ink .btn:hover{background:var(--paper); color:var(--ink)}
.panel-ink .btn-pr{background:var(--paper); color:var(--ink)}
.panel-ink .btn-pr:hover{background:transparent; color:var(--paper)}
.link{display:inline-flex; align-items:center; gap:8px; font-size:15px; border-bottom:1px solid var(--rule); padding-bottom:2px; transition:border-color var(--t-fast)}
.link:hover{border-color:currentColor}
.crumb{font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.crumb a:hover{color:var(--ink)}

/* ─── forms ──────────────────────────────────────────────────────── */
.form{display:grid; gap:var(--s3); max-width:600px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
label,.lab{display:block; font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:7px}
input,select,textarea{width:100%; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--rule); border-radius:0; padding:10px 0; font-size:16px; transition:border-color var(--t-fast)}
textarea{min-height:110px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-bottom-color:var(--ink)}
input::placeholder,textarea::placeholder{color:#5F6963}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%); background-position:calc(100% - 11px) 20px,calc(100% - 6px) 20px; background-size:5px 5px; background-repeat:no-repeat}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.msg{font-family:var(--ff-mono); font-size:13px; min-height:1.4em; color:var(--ink-2)}
.msg.ok{color:var(--matched)} .msg.err{color:var(--exception)}
.invalid{border-bottom-color:var(--exception) !important}
.panel-ink label,.panel-ink .lab{color:var(--ink-soft)}
.panel-ink input,.panel-ink select,.panel-ink textarea{color:var(--paper); border-bottom-color:rgba(245,242,234,.28)}
.panel-ink input:focus,.panel-ink select:focus,.panel-ink textarea:focus{border-bottom-color:var(--paper)}
.panel-ink input::placeholder,.panel-ink textarea::placeholder{color:#4C554F}
.panel-ink option{background:var(--brand); color:var(--paper)}
.panel-ink .msg.ok{color:var(--matched-up)} .panel-ink .msg.err{color:var(--exception-up)}
.detail{border-top:1px solid var(--rule); padding:var(--s3) 0}
.detail .mono{margin-bottom:6px}
.detail a,.detail p{font-size:18px}
.detail a{border-bottom:1px solid transparent; transition:border-color var(--t-fast)}
.detail a:hover{border-bottom-color:currentColor}
.panel-ink .detail{border-top-color:rgba(245,242,234,.2)}

/* ─── footer ─────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule); padding:var(--s6) 0 var(--s5); margin-top:var(--s8)}
.foot__grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--s5)}
.foot__b p{color:var(--ink-2); font-size:15px; max-width:32ch; margin-top:var(--s3)}
.foot h5{font-family:var(--ff-mono); font-size:12px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--s3)}
.foot__col{display:flex; flex-direction:column; gap:10px}
.foot__col a{font-size:15px; color:var(--ink-2); transition:color var(--t-fast)}
.foot__col a:hover{color:var(--ink)}
.foot__bot{margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:14px; color:var(--ink-2)}
.foot__bot nav{display:flex; gap:var(--s3); flex-wrap:wrap}
.foot__bot a:hover{color:var(--ink)}

/* ─── consent ────────────────────────────────────────────────────── */
.cookie{position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--brand); color:var(--paper); padding:var(--s3) var(--gut); display:flex; gap:var(--s4); align-items:center; justify-content:space-between; flex-wrap:wrap; transform:translateY(100%); transition:transform 420ms cubic-bezier(.4,0,.2,1)}
.cookie.up{transform:translateY(0)}
.cookie p{font-size:14px; color:var(--ink-soft); max-width:60ch}
.cookie a{color:var(--paper); border-bottom:1px solid rgba(245,242,234,.4)}
.cookie__a{display:flex; gap:var(--s2)}
.cookie .btn{border-color:var(--paper); color:var(--paper)}
.cookie .btn:hover{background:var(--paper); color:var(--ink)}
.cookie .btn-pr{background:var(--paper); color:var(--ink)}

/* ─── prose (legal) ──────────────────────────────────────────────── */
.prose{max-width:68ch}
.prose h2{font-family:var(--ff-display); font-size:clamp(1.35rem,2.2vw,1.8rem); font-weight:500; letter-spacing:-.02em; line-height:1.18; margin:var(--s6) 0 var(--s2); padding-top:var(--s3); border-top:1px solid var(--rule)}
.prose h3{font-size:17px; font-weight:500; margin:var(--s4) 0 var(--s1)}
.prose p,.prose li{color:var(--ink-2); font-size:16px}
.prose p{margin-bottom:var(--s2)}
.prose ul{padding-left:20px; margin:0 0 var(--s2)}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink); font-weight:500}
.prose a{color:var(--ink); border-bottom:1px solid var(--rule)}
.toc{border-top:1px solid var(--brand); padding-top:var(--s3); margin-top:var(--s5)}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:var(--s5)}
.toc li{margin-bottom:8px; font-size:15px; color:var(--ink-2)}

/* ─── motion — one moment, then stillness ────────────────────────── */
.rv{opacity:0; transform:translateY(12px)}
.rv.in{opacity:1; transform:none; transition:opacity 300ms ease-out, transform 300ms cubic-bezier(.4,0,.2,1)}
.hero-line{display:block; overflow:hidden}
.hero-line > span{display:block; transform:translateY(105%)}
body.ready .hero-line > span{transform:none; transition:transform 640ms cubic-bezier(.22,.61,.36,1)}
body.ready .hero-line:nth-child(2) > span{transition-delay:70ms}
body.ready .hero-line:nth-child(3) > span{transition-delay:140ms}
body.ready .hero-line:nth-child(4) > span{transition-delay:210ms}
.draw{transform:scaleX(0)}
body.ready .draw{transform:scaleX(1); transition:transform 700ms cubic-bezier(.22,.61,.36,1) 260ms}
.markin{opacity:0}
body.ready .markin{opacity:1; transition:opacity 260ms ease-out 900ms}

/* ─── responsive ─────────────────────────────────────────────────── */
@media (max-width:1080px){
  :root{--rail:0px; --gut:40px}
    .brand{position:static}
  .bar{display:block}
  main{padding-left:0; padding-top:var(--nav-h)}
      .panel__grid{grid-template-columns:1fr; gap:var(--s5)}
  .panel__grid--flip > *:first-child{order:0}
  .split{grid-template-columns:1fr; gap:var(--s6)}
  .sticky{position:static}
  .seam{grid-template-columns:1fr; gap:0}
  .seam::before{display:none}
  .claim{padding:var(--s4) 0 var(--s2)}
  .proof{padding:0 0 var(--s4) var(--s3); border-left:1px solid var(--rule)}
  .proc{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gut:24px}
  body{font-size:16px}
  .sec{padding:var(--s7) 0} .sec-sm{padding:var(--s6) 0}
  .g2,.g3,.row2,.proc{grid-template-columns:1fr; gap:var(--s4)}
  .idx a{grid-template-columns:1fr; gap:6px; padding:var(--s3) 0}
  .tieout{grid-template-columns:auto 1fr auto; gap:var(--s2)}
  .tieout__l:last-of-type,.tieout__r:nth-of-type(2){display:none}
  .foot__grid{grid-template-columns:1fr; gap:var(--s4)}
  .toc ol{columns:1}
  .cookie{flex-direction:column; align-items:flex-start}
  .mark--lg{width:64px; height:64px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  .hero-line > span{transform:none}
  .draw{transform:scaleX(1)}
  .markin{opacity:1}
  }
@media print{
  .rail,.bar,.cookie,.sheet{display:none}
  main{padding-left:0; padding-top:0}
  body{background:#fff; color:#000}
  }

/* ═══════════════════════════════════════════════════════════════════
   v3 ADDITIONS — depth content, team, and polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── stage list: how an engagement actually moves ─────────────────── */
.stages{border-top:1px solid var(--brand); counter-reset:stage}
.stage{
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--s5); padding:var(--s5) 0; border-bottom:1px solid var(--rule);
  align-items:start;
}
.stage__n{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em;
  color:var(--ink-2); padding-top:6px; white-space:nowrap;
}
.stage__h{font-family:var(--ff-display); font-size:clamp(1.3rem,2vw,1.7rem); font-weight:500; letter-spacing:-.018em; line-height:1.16}
.stage__w{font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-top:10px; display:block}
.stage__b p{color:var(--ink-2); font-size:16px; margin-bottom:var(--s2)}
.stage__b p:last-child{margin-bottom:0}
.stage__b strong{color:var(--ink); font-weight:500}
.stage__out{
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--rule-2);
  font-size:15px; color:var(--ink-2);
}
.stage__out b{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:6px; font-weight:400}

/* ── team ─────────────────────────────────────────────────────────── */
.disciplines{border-top:1px solid var(--brand)}
.disc{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:var(--s5); padding:var(--s4) 0; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.disc__h{font-size:19px; font-weight:500; letter-spacing:-.01em}
.disc__q{font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); display:block; margin-top:8px}
.disc__b{color:var(--ink-2); font-size:16px}

/* ── plain fact list (company page, credentials) ──────────────────── */
.facts{border-top:1px solid var(--brand); margin-top:var(--s4)}
.fact{display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr); gap:var(--s5); padding:var(--s4) 0; border-bottom:1px solid var(--rule); align-items:baseline}
.fact dt{font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.fact dd{margin:0; font-size:17px; color:var(--ink)}
.fact dd small{display:block; margin-top:8px; font-size:15px; color:var(--ink-2); line-height:1.55}

/* a single figure stated plainly */
.figline{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.figline b{font-family:var(--ff-display); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:600; letter-spacing:-.025em; line-height:1; color:var(--brand)}
.figline span{font-size:16px; color:var(--ink-2); max-width:34ch}

/* ── page lead + section head, consistent everywhere ──────────────── */
.pagehead{padding:var(--s8) 0 var(--s6)}
.pagehead .crumb{margin-bottom:var(--s4)}
.pagehead .lead{margin-top:var(--s4)}
.sechead{margin-bottom:var(--s5)}
.sechead .d-sec{margin-top:var(--s3)}
.sechead .lead{margin-top:var(--s3)}

/* ── quiet inline note ────────────────────────────────────────────── */
.note{border-left:2px solid var(--brand); padding-left:var(--s3); color:var(--ink-2); font-size:15px; max-width:64ch}

/* ── card-free link list to other pages ───────────────────────────── */
.more{border-top:1px solid var(--brand); margin-top:var(--s6)}
.more a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--rule); align-items:baseline;
  transition:padding-left var(--t-fast);
}
.more a:hover{padding-left:10px}
.more__t{font-family:var(--ff-display); font-size:clamp(1.25rem,2vw,1.6rem); font-weight:500; letter-spacing:-.018em}
.more__d{display:block; font-size:15px; color:var(--ink-2); margin-top:6px; font-family:var(--ff-ui); font-weight:400; letter-spacing:0}
.more__go{font-family:var(--ff-mono); font-size:12px; color:var(--ink-2); white-space:nowrap}
.more a:hover .more__go{color:var(--brand)}

/* ── polish: consistent interaction states ────────────────────────── */
.idx a:focus-visible,.more a:focus-visible,.stage:focus-within{outline-offset:6px}
.link:hover{border-color:var(--brand); color:var(--brand)}
.panel-ink .link:hover{border-color:var(--paper); color:var(--paper)}
.crumb a{border-bottom:1px solid transparent; transition:border-color var(--t-fast)}
.crumb a:hover{border-bottom-color:currentColor; color:var(--brand)}
.foot__col a:hover,.foot__bot a:hover{color:var(--brand)}
.panel__go:hover{border-bottom-color:var(--paper)}

@media (max-width:1080px){
  .stage{grid-template-columns:auto minmax(0,1fr); gap:var(--s3) var(--s4)}
  .stage__b{grid-column:2}
  .disc,.fact{grid-template-columns:1fr; gap:var(--s2)}
}
@media (max-width:760px){
  .stage{grid-template-columns:1fr; gap:var(--s2)}
  .stage__b{grid-column:1}
  .pagehead{padding:var(--s7) 0 var(--s5)}
}


/* ═══════════ FOREST & BRONZE — shared nav / footer / consent ═══════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);background:rgba(245,242,234,.6);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:height var(--t),background var(--t),border-color var(--t),box-shadow var(--t)}
.nav.stuck{height:var(--nav-h2);background:rgba(245,242,234,.85);border-bottom-color:var(--rule);box-shadow:0 10px 30px -22px rgba(18,24,22,.4)}
.nav__in{max-width:var(--max);margin:0 auto;height:100%;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.lockup{display:inline-flex;align-items:center;gap:10px}
.logo-img{height:34px;width:auto;display:block;transition:height var(--t)}.nav.stuck .logo-img{height:30px}
.logo-img--sm{height:30px}
.wordmark{font-family:var(--ff-ui);font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.wordmark .ai{color:var(--brand-2);font-weight:700}
.nav__mid{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:var(--s4)}
.nav__mid a{position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 14px;border-radius:8px;transition:color var(--t-fast)}
.nav__mid a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav__mid a:hover{color:var(--ink)}.nav__mid a:hover::after{transform:scaleX(1)}
.nav__mid a.on{color:var(--brand)}.nav__mid a.on::after{transform:scaleX(1)}
.nav__cta{display:flex;align-items:center;gap:var(--s2)}
.linkcta{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--brand);padding:8px 6px}
.linkcta svg{transition:transform var(--t-fast)}.linkcta:hover svg{transform:translateX(4px)}
.navbtn{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:11px;font-size:14px;font-weight:600;background:var(--brand);color:var(--brand-ink);border:1px solid transparent;transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.navbtn:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(18,55,47,.55)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-8px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative;border-radius:2px}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform var(--t-fast)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu .burger span{background:transparent}
body.menu .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:79;background:var(--paper);border-bottom:1px solid var(--rule);padding:var(--s2) var(--gut) var(--s4);display:none;flex-direction:column;box-shadow:0 30px 70px -30px rgba(18,24,22,.3)}
body.menu .sheet{display:flex}
.sheet a{padding:15px 0;border-bottom:1px solid var(--rule-2);font-size:18px;font-weight:500;color:var(--ink)}
.sheet a:last-child{border-bottom:0}.sheet .navbtn{margin-top:var(--s3);justify-content:center}

.foot__top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--s5)}
.foot__b .lockup{margin-bottom:var(--s3)}
.foot__b p{color:var(--ink-2);font-size:15px;max-width:30ch}
.foot__col a{transition:color var(--t-fast),transform var(--t-fast)}
.foot__col a:hover{color:var(--brand);transform:translateX(3px)}
.foot__close{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--rule)}
.foot__close h2{font-family:var(--ff-display);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:0;max-width:20ch}

.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:640px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:0 30px 70px -30px rgba(18,24,22,.35);padding:var(--s3);display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap;transform:translateY(140%);transition:transform 460ms cubic-bezier(.22,.61,.36,1)}
.cookie.up{transform:translateY(0)}
.cookie p{font-size:13.5px;color:var(--ink-2);max-width:44ch;margin:0}
.cookie a{color:var(--brand);border-bottom:1px solid var(--rule)}
.cookie__a{display:flex;gap:var(--s2)}
.cookie .navbtn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.cookie .navbtn.ghost:hover{background:var(--paper-2);border-color:var(--ink);transform:none;box-shadow:none}

@media (max-width:1000px){
  .nav__mid{display:none}.burger{display:flex}.nav__cta .linkcta{display:none}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .foot__top{grid-template-columns:1fr}
  .cookie{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.nav,.cookie,.logo-img{transition-duration:1ms !important}}
@media print{.nav,.sheet,.cookie{display:none}main{padding-top:0}}

/* legacy mobile top bar retired — superseded by .nav */
.bar,.bar__in{display:none !important}

/* Services dropdown */
.navitem{position:relative}
.navtop{display:inline-flex;align-items:center;gap:6px}
.navtop svg{transition:transform var(--t)}
.navitem:hover .navtop svg,.navitem:focus-within .navtop svg{transform:rotate(180deg)}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:296px;background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:0 2px 4px rgba(18,24,22,.06),0 30px 60px -28px rgba(18,24,22,.3);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t),transform var(--t),visibility var(--t)}
.navitem:hover .submenu,.navitem:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:11px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink);transition:background var(--t-fast)}
.submenu a span{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.submenu a:hover{background:var(--paper)}
.submenu a::after{display:none}
.sheet .sub{padding-left:14px;font-size:16px;color:var(--ink-2)}
.foot__close{margin-top:var(--s6)}
@media (prefers-reduced-motion:reduce){.submenu,.navtop svg{transition-duration:1ms !important}}

/* ── mobile pass (tools/legal) ── */
@media (max-width:640px){
  .tmeta{margin-top:22px}
  .tres__big{font-size:clamp(26px,8vw,34px)}
  .trel a{width:100%;justify-content:center}
  .foot__close{margin-top:var(--s5);padding-top:var(--s4)}
  .legal{gap:var(--s4)}
  .doc section{padding-bottom:var(--s5);margin-bottom:var(--s5)}
}

.navitem.open .submenu{opacity:1;visibility:visible;transform:none}
.navitem.open .navtop svg{transform:rotate(180deg)}
.nav__mid a.on{color:var(--brand)}
@media (hover:none){.navitem:hover .submenu{opacity:0;visibility:hidden;transform:translateY(-6px)}
 .navitem.open .submenu{opacity:1;visibility:visible;transform:none}}

/* page transition */
.pt{opacity:1;transition:opacity 180ms ease}
body.leaving .pt{opacity:.35}
@media (prefers-reduced-motion:reduce){.pt{transition:none}body.leaving .pt{opacity:1}}