:root{
  --paper:#F7F6F1;
  --ink:#14201D;
  --ink-soft:#3D4B47;
  --signal:#157A5B;
  --signal-deep:#0E5942;
  --signal-bright:#67C2A3;
  --signal-pale:#8FD6BC;
  --noise:#A8AFA9;        /* graphics only — too pale for text (2.1:1) */
  --quiet:#666E69;        /* de-emphasised TEXT — passes WCAG AA (4.5:1+) */
  --hairline:#DDDCD2;
  --brass:#A97E2F;        /* accents, rules, bars */
  --brass-text:#7A5C22;   /* same accent, darkened for TEXT — brass measures 3.5:1 */
  --card:#EFEEE6;
  --display:'Newsreader', Georgia, serif;
  --body:'Instrument Sans', -apple-system, sans-serif;
  --mono:'Spline Sans Mono', 'SF Mono', monospace;
  --max:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep)}
.rule{border:0;border-top:1px solid var(--hairline)}

/* ---------- nav / logo ---------- */
nav{position:sticky;top:0;background:rgba(247,246,241,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);z-index:10}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{width:34px;height:34px;flex:0 0 auto}
.logo-words{line-height:1.05}
.logo-name{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.005em;display:block}
.logo-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--brass);text-transform:uppercase;display:block;margin-top:3px}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none}
.nav-links a{text-decoration:none;font-size:15px;color:var(--ink-soft)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a.btn{color:var(--paper)}
.nav-links a.btn:hover{color:var(--paper)}
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-burger{display:none;cursor:pointer;padding:8px 2px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .18s,opacity .18s}
.nav-toggle:checked~.nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked~.nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked~.nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle:focus-visible~.nav-burger{outline:2px solid var(--signal);outline-offset:3px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:15px;padding:12px 22px;border-radius:4px;border:1px solid var(--ink);cursor:pointer;font-family:var(--body);transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.wide{width:100%;text-align:center;padding:16px}

/* ---------- type ---------- */
h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,6vw,72px);line-height:1.08;letter-spacing:-.015em}
h1 em,h2 em{font-style:italic;color:var(--signal-deep)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,4.2vw,48px);line-height:1.15;letter-spacing:-.01em}
.lede{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:33em}

/* ---------- shared layout ---------- */
section{padding:120px 0}
.page-hero{padding:104px 0 76px;border-bottom:1px solid var(--hairline)}
.page-hero .eyebrow{display:block;margin-bottom:14px}
.page-hero .lede{margin-top:20px}
.sect-head{margin-bottom:52px}
.sect-head .eyebrow{display:block;margin-bottom:14px}
.sect-head p{margin-top:18px;color:var(--ink-soft);max-width:34em;font-size:18px}

/* home hero */
.hero{padding:88px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero p.lede{margin:24px 0 32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-alt{font-size:15px}
.hero-alt a{color:var(--signal-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--signal)}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--quiet)}
.signal-fig{position:relative}
.signal-fig svg{width:100%;height:auto;display:block}
.fig-caption{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--quiet);letter-spacing:.08em;text-transform:uppercase;margin-top:10px}
.fig-caption .sig{color:var(--signal-deep)}
@keyframes draw{to{stroke-dashoffset:0}}
.line-noise{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.6s ease-out .2s forwards}
.line-signal{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.4s ease-out 1s forwards}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.dot,.dot-label{opacity:0;animation:pop .4s ease-out 2.3s forwards;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .line-noise,.line-signal{animation:none;stroke-dashoffset:0}
  .dot,.dot-label{animation:none;opacity:1}
  html{scroll-behavior:auto}
}
.ledger-strip{margin-top:72px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.ledger-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.ledger-cell{padding:20px 24px 22px;border-right:1px solid var(--hairline)}
.ledger-cell:first-child{padding-left:0}
.ledger-cell:last-child{border-right:0}
.ledger-cell .q{font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink-soft)}
.ledger-cell .a{font-family:var(--mono);font-size:13px;color:var(--signal-deep);margin-top:6px}

/* noise vs signal */
.nvs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hairline);border-radius:6px;overflow:hidden}
.nvs-col{padding:36px 34px}
.nvs-col.noise-col{background:var(--card);color:var(--ink-soft)}
.nvs-col.signal-col{background:var(--ink);color:var(--paper)}
.nvs-col h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.noise-col h3{color:var(--quiet)}
.signal-col h3{color:var(--signal-bright)}
.nvs-col ul{list-style:none}
.nvs-col li{padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07);font-size:16px}
.signal-col li{border-bottom:1px solid rgba(255,255,255,.12)}
.noise-col li{font-family:var(--mono);font-size:14px}
.signal-col li strong{color:var(--signal-pale);font-weight:600}

/* tiers */
.tiers{display:flex;flex-direction:column}
.tier{display:grid;grid-template-columns:56px 1.1fr 1.6fr auto;gap:28px;align-items:baseline;padding:34px 0;border-top:1px solid var(--hairline)}
.tier:last-child{border-bottom:1px solid var(--hairline)}
.tier .idx{font-family:var(--mono);font-size:13px;color:var(--brass)}
.tier h3{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.2}
.tier .for{font-family:var(--mono);font-size:12.5px;color:var(--quiet);margin-top:8px;letter-spacing:.04em}
.tier p{color:var(--ink-soft);font-size:16px}
.tier a{font-size:14.5px;font-weight:600;color:var(--signal-deep);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--signal)}

/* service detail blocks */
.svc{border:1px solid var(--hairline);border-radius:6px;padding:40px 38px;margin-bottom:28px;background:#FBFAF6}
.svc-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.svc h3{font-family:var(--display);font-weight:500;font-size:27px}
.svc .idx{font-family:var(--mono);font-size:13px;color:var(--brass)}
.svc .for{font-family:var(--mono);font-size:12.5px;color:var(--quiet);letter-spacing:.04em;margin-bottom:18px}
.svc p{color:var(--ink-soft);max-width:44em}
.svc ul{list-style:none;margin:22px 0 6px;columns:2;column-gap:40px}
.svc li{padding:8px 0;border-bottom:1px solid var(--hairline);font-size:15.5px;break-inside:avoid}
.svc li::before{content:"→ ";color:var(--signal);font-weight:600}
.svc .invest{font-family:var(--mono);font-size:13px;color:var(--signal-deep);margin-top:20px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{border-top:2px solid var(--ink);padding-top:22px}
.step .n{font-family:var(--mono);font-size:13px;color:var(--brass);letter-spacing:.1em}
.step h3{font-family:var(--display);font-weight:500;font-size:22px;margin:10px 0}
.step p{color:var(--ink-soft);font-size:15.5px}

/* sample report */
.report{background:var(--ink);color:var(--paper);border-radius:6px;padding:44px 42px;max-width:720px}
.report .rp-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-bright);border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:14px;margin-bottom:22px}
.report h3{font-family:var(--display);font-weight:400;font-size:26px;margin-bottom:18px}
.report h3 em{color:var(--signal-pale);font-style:italic}
.report p{color:#B9C4C0;font-size:16px;margin-bottom:14px}
.report .rp-action{border-left:3px solid var(--signal-bright);padding:10px 0 10px 18px;color:var(--paper);font-size:16px}
.report .rp-note{font-family:var(--mono);font-size:11px;color:#879492;margin-top:22px;letter-spacing:.06em}

/* thesis band */
.thesis{background:var(--ink);color:var(--paper);padding:96px 0}
.thesis .eyebrow{color:var(--signal-bright)}
.thesis h2{color:var(--paper);max-width:24em}
.thesis h2 em{color:var(--signal-pale)}
.thesis p{color:#B9C4C0;max-width:40em;margin-top:20px}
.thesis .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);margin-top:34px}
.thesis .btn:hover{background:#E8E7E0;border-color:#E8E7E0;color:var(--signal-deep)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.about-photo{margin:30px 0 0}
.about-photo img{display:block;width:100%;max-width:340px;height:auto;border-radius:6px}
.about-grid .eyebrow{display:block;margin-bottom:14px}
.about-grid p{color:var(--ink-soft);margin-bottom:16px}
.sig-line{font-family:var(--display);font-style:italic;font-size:19px;color:var(--ink);margin-top:8px}
.placeholder{background:#F1EFE4;border:1px dashed var(--brass);border-radius:4px;padding:14px 16px;font-family:var(--mono);font-size:13px;color:var(--brass);margin:14px 0}

/* FAQ */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--hairline);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
/* The label is wrapped in a span so inline markup (an <em>, say) stays one flex
   item — otherwise space-between pulls the individual words apart. */
.faq summary{font-family:var(--display);font-size:20px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary > span{flex:1 1 auto}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--brass);font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--ink-soft);max-width:42em}

/* quiz */
.quiz{max-width:760px;margin:0 auto}
.q-card{border:1px solid var(--hairline);border-radius:6px;background:#FBFAF6;padding:38px 36px}
.q-progress{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--brass);text-transform:uppercase;margin-bottom:16px}
.q-text{font-family:var(--display);font-size:25px;font-weight:500;line-height:1.25;margin-bottom:26px}
.q-opts{display:flex;flex-direction:column;gap:12px}
.q-opt{text-align:left;font-family:var(--body);font-size:16px;padding:15px 18px;border:1px solid var(--hairline);border-radius:5px;background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s}
.q-opt:hover{border-color:var(--signal);background:#F0F5F0}
.q-result{display:none}
.q-band{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.q-result h3{font-family:var(--display);font-size:30px;font-weight:400;margin:12px 0 16px}
.q-result p{color:var(--ink-soft);margin-bottom:14px}
.q-score{font-family:var(--mono);font-size:14px;color:var(--signal-deep);margin-bottom:18px}
.q-disclaimer{font-family:var(--mono);font-size:11.5px;color:var(--quiet);margin-top:26px;line-height:1.7}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.field input,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--hairline);border-radius:4px;background:#FBFAF6;font-family:var(--body);font-size:16px;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
.contact-line{font-family:var(--mono);font-size:14px;color:var(--signal-deep);margin-bottom:10px}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{font-family:var(--mono);font-size:13px;margin-top:14px;min-height:1.2em}
.form-status.ok{color:var(--signal-deep)}
.form-status.err{color:var(--brass)}
.btn[disabled]{opacity:.65;cursor:default}

/* final cta */
.final{border-top:1px solid var(--hairline)}
.final .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.final p{color:var(--ink-soft);margin-top:16px;max-width:36em}
.final .fine{font-family:var(--mono);font-size:12.5px;color:var(--quiet);margin-top:16px}

/* footer */
footer{border-top:1px solid var(--hairline);padding:40px 0;font-size:14px;color:var(--ink-soft)}
footer .f-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
footer .f-name{font-family:var(--display);font-size:16px;color:var(--ink)}
footer a{text-decoration:none;color:var(--ink-soft)}
footer a:hover{color:var(--ink)}

/* responsive */
@media (max-width:900px){
  .hero-grid,.about-grid,.final .wrap,.contact-grid{grid-template-columns:1fr}
  /* The headline is the most important thing on the page, so on small screens it
     leads and the figure follows the call to action rather than pushing it below
     the fold. (Previously the figure was pulled first with order:-1.) */
  .signal-fig{order:2;margin-top:8px}
  .nvs{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .svc ul{columns:1}
  .tier{grid-template-columns:40px 1fr}
  .tier p,.tier a{grid-column:2}
  .ledger-strip .wrap{grid-template-columns:1fr}
  .ledger-cell{border-right:0;border-bottom:1px solid var(--hairline);padding-left:0}
  .ledger-cell:last-child{border-bottom:0}
  .nav-in{flex-wrap:wrap;height:auto;padding:12px 0}
  .nav-burger{display:block}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 16px}
  .nav-toggle:checked~.nav-links{display:flex}
  .nav-links li{border-bottom:1px solid var(--hairline)}
  .nav-links li:last-child{border-bottom:0;padding-top:16px}
  .nav-links li a{display:block;padding:14px 2px;font-size:16px}
  .nav-links li a.btn{display:block;text-align:center}
  .logo-name{font-size:15px}
}

/* ==========================================================================
   ADVISORY REPOSITIONING — components added for the owner's-journey structure.
   Everything above this line is unchanged from the original stylesheet.
   ========================================================================== */

/* ---------- the owner's journey (homepage spine) ----------
   A single vertical line the visitor reads downward. The first half is drawn
   in dashed "noise" gray; after the turn it becomes the solid "signal" green.
   The line itself carries the argument, so it reads on any screen size. */
.journey{max-width:720px;margin:0 auto}
.jr-list{list-style:none}
.jr-item{position:relative;padding:0 0 30px 46px}
.jr-item::before{content:"";position:absolute;left:6px;top:9px;bottom:-9px;width:0;border-left:2px dashed var(--noise)}
.jr-item::after{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--noise);box-sizing:border-box}
.jr-item h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.25;color:var(--ink-soft)}
.jr-item p{color:var(--quiet);font-size:15.5px;margin-top:5px;max-width:34em}
/* the turn — where the story stops describing the problem and starts resolving it */
.jr-turn{position:relative;padding:6px 0 30px 46px;list-style:none}
.jr-turn::before{content:"";position:absolute;left:6px;top:0;bottom:-9px;width:0;border-left:2px solid var(--signal)}
.jr-turn::after{content:"";position:absolute;left:-1px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--signal);border:2px solid var(--signal);box-sizing:border-box}
.jr-turn .jr-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);display:block;padding-top:8px}
.jr-turn .jr-say{font-family:var(--display);font-style:italic;font-size:26px;line-height:1.25;color:var(--ink);margin-top:8px}
/* after the turn — full ink, solid green rail */
.jr-item.on::before{border-left:2px solid var(--signal)}
.jr-item.on::after{border-color:var(--signal);background:var(--signal)}
.jr-item.on h3{color:var(--ink)}
.jr-item.on p{color:var(--ink-soft)}
.jr-end{position:relative;padding:2px 0 0 46px;list-style:none}
.jr-end::after{content:"";position:absolute;left:-3px;top:5px;width:20px;height:20px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 5px rgba(21,122,91,.16)}
.jr-end .jr-say{font-family:var(--display);font-size:27px;line-height:1.25;color:var(--ink);max-width:20em}
.jr-end .jr-say em{font-style:italic;color:var(--signal-deep)}

/* ---------- four-step method grid ---------- */
.steps.four{grid-template-columns:repeat(4,1fr);gap:24px}
.steps.four .step h3{font-size:20px}
.steps.four .step p{font-size:15px}

/* ---------- the difference band (compliance vs organization vs consulting) ---------- */
.diff{max-width:820px}
.diff-row{display:grid;grid-template-columns:minmax(0,15em) 1fr;gap:8px 20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--hairline)}
.diff-row .who{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.diff-row .what{font-family:var(--display);font-size:20px;color:var(--ink-soft)}
.diff-row.lead{border-top:1px solid var(--ink);padding:22px 0 6px}
.diff-row.lead .who{color:var(--signal-deep);font-weight:500}
.diff-row.lead .what{font-size:26px;color:var(--ink)}
.diff-row.lead .what em{font-style:italic;color:var(--signal-deep)}
.diff-note{margin-top:26px;color:var(--ink-soft);max-width:40em}

/* ---------- who this is for ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.fit-kinds{list-style:none}
.fit-kinds li{font-family:var(--display);font-size:19px;padding:11px 0;border-bottom:1px solid var(--hairline);color:var(--ink)}
.fit-kinds li:last-child{border-bottom:0}
.fit-kinds li span{display:block;font-family:var(--body);font-size:14.5px;color:var(--quiet);margin-top:2px}
.fit-mirror{background:var(--card);border-radius:6px;padding:32px 30px}
.fit-mirror h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:18px}
.fit-mirror ul{list-style:none}
.fit-mirror li{padding:10px 0 10px 24px;position:relative;font-size:16px;color:var(--ink-soft);border-bottom:1px solid rgba(0,0,0,.06)}
.fit-mirror li:last-child{border-bottom:0}
.fit-mirror li::before{content:"—";position:absolute;left:0;color:var(--signal);font-weight:600}

/* ---------- method page: deep step blocks ---------- */
.mstep{display:grid;grid-template-columns:auto 1fr;gap:0 34px;padding:44px 0;border-top:1px solid var(--hairline)}
.mstep:last-of-type{border-bottom:1px solid var(--hairline)}
.mstep .m-num{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--brass);padding-top:9px;white-space:nowrap}
.mstep .m-when{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);margin-top:7px}
.mstep h2{margin-bottom:4px}
.mstep .m-sub{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--quiet);text-transform:uppercase;margin-bottom:18px}
.mstep p{color:var(--ink-soft);max-width:42em;margin-bottom:14px}
.mstep .m-gain{border-left:3px solid var(--signal);padding:12px 0 12px 20px;margin:22px 0 0;font-family:var(--display);font-size:19px;line-height:1.4;color:var(--ink);max-width:40em}
.mstep .m-gain span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:7px}
.mstep .m-tools{margin-top:24px;padding-top:20px;border-top:1px dotted var(--hairline)}
.mstep .m-tools .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);display:block;margin-bottom:12px}
.mstep .m-tools ul{list-style:none;columns:2;column-gap:36px}
.mstep .m-tools li{padding:7px 0;font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--hairline);break-inside:avoid}
.mstep .m-tools li::before{content:"→ ";color:var(--signal)}

/* ---------- engagement depths (formerly "tiers") ---------- */
.depth{border:1px solid var(--hairline);border-radius:6px;padding:34px 32px;margin-bottom:22px;background:#FBFAF6}
.depth-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
.depth h3{font-family:var(--display);font-weight:500;font-size:25px}
.depth .idx{font-family:var(--mono);font-size:12.5px;color:var(--brass);letter-spacing:.06em}
.depth .for{font-family:var(--mono);font-size:12.5px;color:var(--quiet);letter-spacing:.04em;margin:8px 0 16px;text-transform:uppercase}
.depth p{color:var(--ink-soft);max-width:44em}
.depth .d-you{margin-top:18px;font-family:var(--display);font-size:18px;color:var(--ink);border-left:3px solid var(--signal-pale);padding-left:18px;max-width:38em}
.depth .invest{font-family:var(--mono);font-size:12.5px;color:var(--signal-deep);margin-top:20px}

/* ---------- the monthly rhythm ---------- */
.rhythm{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hairline);border-radius:6px;overflow:hidden}
.rhythm div{padding:26px 24px;border-right:1px solid var(--hairline)}
.rhythm div:last-child{border-right:0}
.rhythm .when{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.rhythm h3{font-family:var(--display);font-weight:500;font-size:19px;margin:9px 0 7px}
.rhythm p{font-size:15px;color:var(--ink-soft)}
.rhythm .you{background:var(--ink);color:var(--paper)}
.rhythm .you .when{color:var(--signal-bright)}
.rhythm .you p{color:#B9C4C0}

/* ---------- pull quote ---------- */
.pullquote{max-width:780px;margin:0 auto;text-align:center;padding:8px 0}
.pullquote p{font-family:var(--display);font-size:clamp(24px,3vw,31px);line-height:1.35;color:var(--ink)}
.pullquote p em{font-style:italic;color:var(--signal-deep)}
.pullquote .attrib{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-top:20px}

/* ---------- responsive for the new components ---------- */
@media (max-width:900px){
  .steps.four{grid-template-columns:1fr 1fr}
  .fit-grid{grid-template-columns:1fr}
  .rhythm{grid-template-columns:1fr 1fr}
  .rhythm div:nth-child(2){border-right:0}
  .rhythm div:nth-child(1),.rhythm div:nth-child(2){border-bottom:1px solid var(--hairline)}
  .mstep{grid-template-columns:1fr;gap:0}
  .mstep .m-num{padding:0 0 10px}
  .mstep .m-tools ul{columns:1}
  .diff-row{grid-template-columns:1fr;padding:14px 0}
  .diff-row.lead .what{font-size:23px}
}
@media (max-width:560px){
  .steps.four{grid-template-columns:1fr}
  .rhythm{grid-template-columns:1fr}
  .rhythm div{border-right:0;border-bottom:1px solid var(--hairline)}
  .rhythm div:last-child{border-bottom:0}
  .jr-turn .jr-say{font-size:22px}
  .jr-end .jr-say{font-size:23px}
}

/* ==========================================================================
   ROUND 2 — components added after the external review
   (proof, founder intro, at-a-glance, quiz next steps, step emphasis)
   ========================================================================== */

/* ---------- proof / evidence band ---------- */
.proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:36px}
.proof-stats div{padding:26px 26px 28px;border-right:1px solid var(--hairline)}
.proof-stats div:first-child{padding-left:0}
.proof-stats div:last-child{border-right:0}
.proof-stats .fig{font-family:var(--display);font-size:31px;line-height:1.1;color:var(--ink)}
.proof-stats .cap{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--quiet);margin-top:9px;line-height:1.5}
.case{border:1px solid var(--hairline);border-radius:6px;background:#FBFAF6;padding:34px 32px}
.case .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);display:block;margin-bottom:16px}
.case h3{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.3;margin-bottom:14px}
.case p{color:var(--ink-soft);margin-bottom:12px;max-width:44em}
.case .out{border-left:3px solid var(--signal);padding:10px 0 10px 18px;margin-top:18px;font-family:var(--display);font-size:19px;color:var(--ink);max-width:40em}
.case .dis{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--quiet);margin-top:20px;line-height:1.6}

/* ---------- founder trust block ---------- */
.founder{display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:center;border:1px solid var(--hairline);border-radius:6px;padding:32px;background:var(--card)}
.founder img{width:100%;height:auto;border-radius:6px;display:block}
.founder .nm{font-family:var(--display);font-size:23px;color:var(--ink)}
.founder .rl{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-deep);margin:6px 0 14px}
.founder p{color:var(--ink-soft);max-width:44em}
.founder a{color:var(--signal-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--signal)}

/* ---------- at a glance ---------- */
.glance{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--hairline);border-radius:6px;overflow:hidden}
.glance div{padding:20px 24px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.glance div:nth-child(2n){border-right:0}
.glance div:nth-last-child(-n+2){border-bottom:0}
.glance dt,.glance .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.glance .v{font-family:var(--display);font-size:19px;color:var(--ink);margin-top:7px;line-height:1.35}

/* ---------- quiz: personalised next steps ---------- */
.qnext{margin:26px 0 24px;border-top:1px solid var(--hairline);padding-top:22px}
.qnext h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:14px}
.qnext ol{list-style:none;counter-reset:qn}
.qnext li{counter-increment:qn;position:relative;padding:12px 0 12px 38px;border-bottom:1px solid var(--hairline);font-size:16px;color:var(--ink-soft)}
.qnext li:last-child{border-bottom:0}
.qnext li::before{content:counter(qn);position:absolute;left:0;top:12px;width:24px;height:24px;border-radius:50%;background:var(--signal);color:var(--paper);font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
.qnext li strong{color:var(--ink);font-weight:600}

/* ---------- method: mark the differentiating step ---------- */
.mstep.key{background:#FBFAF6;border-radius:6px;padding-left:28px;padding-right:28px;margin:0 -28px}
.mstep.key .m-num{color:var(--signal-deep)}
.mstep .m-flag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--signal-deep);padding:4px 10px;border-radius:3px;margin-bottom:12px}

/* ---------- "needs your input" markers (preview only) ---------- */
.todo{background:#F1EFE4;border:1px dashed var(--brass);border-radius:4px;padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#7a5c22;margin:16px 0}
.todo b{color:#5f4718}

/* ---------- about: secondary credentials ---------- */
.bio-facts{list-style:none;margin-top:8px}
.bio-facts li{padding:11px 0;border-bottom:1px solid var(--hairline);font-size:15.5px;color:var(--ink-soft)}
.bio-facts li:last-child{border-bottom:0}
.bio-facts li b{color:var(--ink);font-weight:600}

@media (max-width:900px){
  .proof-stats{grid-template-columns:1fr}
  .proof-stats div{border-right:0;border-bottom:1px solid var(--hairline);padding-left:0}
  .proof-stats div:last-child{border-bottom:0}
  .founder{grid-template-columns:1fr;gap:22px}
  .founder img{max-width:170px}
  .glance{grid-template-columns:1fr}
  .glance div{border-right:0}
  .glance div:nth-last-child(2){border-bottom:1px solid var(--hairline)}
  .mstep.key{margin:0;padding-left:20px;padding-right:20px}
}

/* ==========================================================================
   ROUND 3 — visual relief. Four components, each explaining a relationship
   rather than decorating. Same palette, same restraint, no new colours.
   ========================================================================== */

/* ---------- editorial photo band ---------- */
.editorial{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.editorial figure{margin:0}
.editorial img{width:100%;height:auto;display:block;border-radius:6px}
.editorial figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--quiet);margin-top:12px;line-height:1.6}
.editorial h2{margin-bottom:18px}
.editorial p{color:var(--ink-soft);margin-bottom:14px;max-width:36em}
.editorial .pull{font-family:var(--display);font-size:21px;line-height:1.4;color:var(--ink);border-left:3px solid var(--signal);padding-left:20px;margin-top:22px}

/* ---------- representative Signal Report preview ----------
   Deliberately a DOCUMENT, not a product UI: paper, hairlines, serif headline,
   no chips or status badges. The real report is still being designed. */
.sr{max-width:760px}
.sr-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-text);border:1px dashed var(--brass);border-radius:4px;padding:10px 14px;margin-bottom:18px;line-height:1.6}
.sr-paper{background:#FFFDF8;border:1px solid var(--hairline);border-radius:4px;padding:38px 36px;box-shadow:0 1px 2px rgba(20,32,29,.04)}
.sr-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);border-bottom:2px solid var(--signal);padding-bottom:12px}
.sr-paper h3{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.2;margin:22px 0 6px}
.sr-paper h3 em{font-style:italic;color:var(--signal-deep)}
.sr-sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--quiet);margin-bottom:24px}
.sr-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:26px}
.sr-metrics div{padding:16px 18px;border-right:1px solid var(--hairline)}
.sr-metrics div:first-child{padding-left:0}
.sr-metrics div:last-child{border-right:0}
.sr-metrics .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.sr-metrics .v{display:block;font-family:var(--display);font-size:22px;color:var(--ink);margin-top:6px;line-height:1.1}
.sr-metrics .v.down{color:var(--brass-text)}
.sr-block{margin-bottom:20px}
.sr-block .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:6px}
.sr-block p{color:var(--ink-soft);font-size:16px;max-width:44em}
.sr-move{border-left:3px solid var(--signal);padding:12px 0 12px 18px;margin:26px 0 0}
.sr-move .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:6px}
.sr-move p{font-family:var(--display);font-size:19px;line-height:1.4;color:var(--ink)}
.sr-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--hairline);margin-top:28px;padding-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--quiet);line-height:1.6}

/* ---------- decision story (revenue up / margin down) ---------- */
.dstory{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start;margin:28px 0 0}
.chart{border:1px solid var(--hairline);border-radius:6px;background:#FBFAF6;padding:24px 24px 18px}
.chart svg{width:100%;height:auto;display:block}
.chart .cap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--quiet);margin-top:12px;line-height:1.6}
.jobs .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-deep);margin-bottom:14px}
.jobrow{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hairline)}
.jobrow:last-child{border-bottom:0}
.jobrow .nm{font-size:15px;color:var(--quiet)}
.jobrow .dl{font-family:var(--mono);font-size:13px;color:var(--quiet)}
.jobrow.flag .nm{color:var(--ink);font-weight:600}
.jobrow.flag .dl{color:var(--brass-text)}
.jobrow .bar{grid-column:1/-1;height:4px;background:var(--hairline);border-radius:2px;overflow:hidden}
.jobrow .bar i{display:block;height:100%;background:var(--noise)}
.jobrow.flag .bar i{background:var(--brass)}

/* ---------- four-step flow with the noise-to-signal rail ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;list-style:none}
.flow-step{position:relative;padding-top:46px}
.flow-step::before{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--noise);box-sizing:border-box;z-index:1}
.flow-step::after{content:"";position:absolute;top:7px;left:8px;right:-28px;border-top:2px dashed var(--noise)}
.flow-step:last-child::after{display:none}
.flow-step.turns::after,.flow-step.on::after{border-top:2px solid var(--signal)}
.flow-step.on::before{background:var(--signal);border-color:var(--signal)}
.flow-step .fs-n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brass)}
.flow-step .fs-when{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);margin-top:5px}
.flow-step h3{font-family:var(--display);font-weight:500;font-size:20px;margin:8px 0 8px;line-height:1.25}
.flow-step p{color:var(--ink-soft);font-size:15px}
.flow-step .fs-n.on{color:var(--signal-deep)}
/* Equal top padding on every card so all four headings sit on one baseline;
   step 3 gets the tint via a negative side margin rather than extra height. */
.flow-step .fs-body{padding:18px 0 20px}
.flow-step.is-key .fs-body{background:var(--card);border-radius:6px;padding:18px;margin:0 -18px}
.flow-cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.flow-cap .sig{color:var(--signal-deep)}

/* ---------- next-page connector ---------- */
.nextup{border-top:1px solid var(--hairline);padding-top:32px;display:flex;justify-content:space-between;align-items:baseline;gap:18px 28px;flex-wrap:wrap}
.nextup .k{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:8px}
.nextup .t{font-family:var(--display);font-size:24px;line-height:1.3;color:var(--ink);max-width:22em}
.nextup a{font-weight:600;font-size:16px;color:var(--signal-deep);text-decoration:none;border-bottom:1px solid var(--signal);white-space:nowrap}

/* ---------- asset vs job framework (sits on the dark band) ---------- */
.avj{border-top:1px solid rgba(255,255,255,.18);margin-top:36px}
.avj-row{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid rgba(255,255,255,.12)}
.avj-row > div{padding:15px 26px 15px 0}
.avj-row > div + div{padding:15px 0 15px 26px;border-left:1px solid rgba(255,255,255,.12)}
.avj-row.avj-head > div{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-top:18px;padding-bottom:12px}
.avj-head .j{color:#B9C4C0}
.avj-head .a{color:var(--signal-bright)}
.avj-row .j{color:#B9C4C0;font-size:15.5px}
.avj-row .a{color:var(--paper);font-size:15.5px}

@media (max-width:900px){
  .editorial{grid-template-columns:1fr;gap:28px}
  .dstory{grid-template-columns:1fr;gap:28px}
  .sr-metrics{grid-template-columns:1fr}
  .sr-metrics div{border-right:0;border-bottom:1px solid var(--hairline);padding-left:0}
  .sr-metrics div:last-child{border-bottom:0}
  .sr-paper{padding:28px 22px}
  /* rail turns vertical so the sequence still reads on a phone */
  .flow{grid-template-columns:1fr;gap:0}
  .flow-step{padding:0 0 28px 40px}
  .flow-step::before{top:4px}
  .flow-step::after{top:20px;bottom:-4px;left:7px;right:auto;border-top:0;border-left:2px dashed var(--noise)}
  .flow-step.turns::after,.flow-step.on::after{border-top:0;border-left:2px solid var(--signal)}
  .flow-step .fs-body{padding:0}
  .flow-step.is-key .fs-body{margin:0;padding:16px}
  .avj-row{grid-template-columns:1fr}
  .avj-row > div{padding:14px 0 4px}
  .avj-row > div + div{padding:0 0 14px;border-left:0}
  .avj-head{display:none}
  .avj-row .j::before{content:"A job you own \2014 ";font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8A9793;display:block;margin-bottom:4px}
  .avj-row .a::before{content:"A business asset \2014 ";font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-bright);display:block;margin-bottom:4px}
}

/* ==========================================================================
   ROUND 4 — communication redesign. New rhythm components: full-height hero,
   question cards, pillars, the three-role comparison, oversized statements,
   quote band, minimal timeline. No new colours, no new typefaces.
   ========================================================================== */

/* ---------- hero: give it the whole screen ---------- */
.hero.tall{padding:0;display:flex;align-items:center;min-height:calc(100vh - 72px)}
.hero.tall .hero-grid{width:100%;padding-top:64px;padding-bottom:64px;align-items:center;gap:64px}
.hero-sub{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:30em;margin:26px 0 0}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero.tall .hero-ctas{margin-top:36px;gap:12px}
.hero-checks{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;list-style:none}
.hero-checks li{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:9px}
.hero-checks li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:0 0 auto}
.fig-story{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--quiet);margin-top:14px;line-height:1.7;max-width:34em}
.fig-story b{color:var(--signal-deep);font-weight:500}

/* ---------- oversized statement: one idea, one screen ---------- */
.statement{padding:150px 0}
.statement .wrap{max-width:900px}
.statement p{font-family:var(--display);font-weight:400;font-size:clamp(34px,5.4vw,62px);line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.statement p em{font-style:italic;color:var(--signal-deep)}
.statement .after{font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:34em;margin-top:34px;letter-spacing:0}
.statement.dark{background:var(--ink)}
.statement.dark p{color:var(--paper)}
.statement.dark p em{color:var(--signal-pale)}
.statement.dark .after{color:#B9C4C0}

/* ---------- question cards ---------- */
.qcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:6px;overflow:hidden}
.qcard{background:var(--paper);padding:38px 32px 40px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.qcard .q{font-family:var(--display);font-size:23px;line-height:1.25;color:var(--ink)}
.qcard .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--brass-text)}
.qcards-after{font-family:var(--display);font-size:24px;line-height:1.4;color:var(--ink);margin-top:44px;max-width:26em}

/* ---------- the three roles ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--hairline)}
.roles > div{padding:40px 34px 44px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.roles > div:first-child{padding-left:0}
.roles > div:last-child{border-right:0}
.roles .who{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);display:block;margin-bottom:16px}
.roles .what{font-family:var(--display);font-size:22px;line-height:1.3;color:var(--ink-soft)}
.roles .us{background:var(--ink)}
.roles .us .who{color:var(--signal-bright)}
.roles .us .what{color:var(--paper)}
.roles .us .what em{font-style:italic;color:var(--signal-pale)}

/* ---------- the framework: three pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.pillar{border-top:2px solid var(--ink);padding-top:26px}
.pillar .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--brass-text)}
.pillar h3{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;margin:12px 0 14px;letter-spacing:-.01em}
.pillar p{color:var(--ink-soft);font-size:16.5px;max-width:22em}
.pillar.on{border-top-color:var(--signal)}
.pillar.on h3{color:var(--signal-deep)}

/* ---------- quote band (real client words only) ---------- */
.quoteband{background:var(--card);padding:96px 0}
.quoteband .wrap{max-width:860px;text-align:center}
.quoteband blockquote{font-family:var(--display);font-size:clamp(24px,3.2vw,34px);line-height:1.35;color:var(--ink);letter-spacing:-.005em}
.quoteband .cite{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin-top:26px;display:block}

/* ---------- minimal timeline ---------- */
.tline{max-width:560px}
.tline-step{position:relative;padding:0 0 40px 40px}
.tline-step::before{content:"";position:absolute;left:5px;top:12px;bottom:-12px;border-left:1px solid var(--hairline)}
.tline-step:last-child::before{display:none}
.tline-step::after{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--noise);box-sizing:border-box}
.tline-step.on::after{background:var(--signal);border-color:var(--signal)}
.tline-step h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.01em}
.tline-step p{color:var(--ink-soft);font-size:16.5px;margin-top:8px;max-width:26em}

/* ---------- outcome list (features rewritten as gains) ---------- */
.gains{list-style:none;margin-top:8px}
.gains li{padding:16px 0 16px 30px;border-bottom:1px solid var(--hairline);position:relative;font-size:17px;color:var(--ink)}
.gains li:last-child{border-bottom:0}
.gains li::before{content:"";position:absolute;left:0;top:24px;width:7px;height:7px;border-radius:50%;background:var(--signal)}
.gains li span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);margin-top:5px}

/* ---------- closing CTA, given room to land ---------- */
.close{background:var(--ink);color:var(--paper);padding:150px 0}
.close .wrap{max-width:820px}
.close h2{color:var(--paper);font-size:clamp(34px,5vw,58px);line-height:1.08}
.close h2 em{color:var(--signal-pale)}
.close p{color:#B9C4C0;font-size:19px;line-height:1.6;max-width:34em;margin-top:26px}
.close .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);margin-top:40px;padding:16px 30px;font-size:16px}
.close .btn:hover{background:#E8E7E0;border-color:#E8E7E0;color:var(--signal-deep)}
.close .fine{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:#8A9793;margin-top:26px;line-height:1.9}

/* ---------- responsive: pacing matters more than density on a phone ---------- */
@media (max-width:900px){
  .qcards{grid-template-columns:1fr 1fr}
  .roles{grid-template-columns:1fr}
  .roles > div{padding:28px 0;border-right:0}
  .roles > div:last-child{border-bottom:0}
  .roles .us{padding:32px 26px;border-radius:6px;margin-top:8px}
  .pillars{grid-template-columns:1fr;gap:34px}
  .hero.tall{min-height:0;display:block}
  .hero.tall .hero-grid{padding-top:56px;padding-bottom:8px;gap:40px}
}
@media (max-width:700px){
  section{padding:80px 0}
  .statement{padding:96px 0}
  .close{padding:100px 0}
  .quoteband{padding:72px 0}
  .qcards{grid-template-columns:1fr}
  .qcard{min-height:0;padding:28px 24px 30px}
  .qcard .q{font-size:21px}
  .sect-head{margin-bottom:38px}
  .tline-step{padding-left:34px;padding-bottom:34px}
  .tline-step h3{font-size:26px}
  .hero-checks{gap:10px 20px}
}

/* ==========================================================================
   ROUND 5 — clarity pass. Two card components only; no new visual language.
   ========================================================================== */

/* ---------- what working together includes ---------- */
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scard{border:1px solid var(--hairline);border-radius:6px;background:#FBFAF6;padding:30px 26px 32px}
.scard h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.2;margin-bottom:10px}
.scard p{color:var(--ink-soft);font-size:16px;line-height:1.55}

/* ---------- example conversations, on the dark band ---------- */
.convos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.convo{border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:26px 26px 28px;font-family:var(--display);font-size:20px;line-height:1.4;color:var(--paper)}
.convo span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-bright);margin-bottom:12px}
.band{background:var(--ink);color:var(--paper);padding:120px 0}
.band .eyebrow{color:var(--signal-bright)}
.band h2{color:var(--paper)}
.band h2 em{color:var(--signal-pale)}
.band .sect-head p{color:#B9C4C0}

/* the worldview line, used sparingly */
.thread{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.4;color:var(--signal-deep);border-left:3px solid var(--signal);padding-left:22px;margin-top:34px;max-width:30em}
.band .thread{color:var(--signal-pale);border-left-color:var(--signal-bright)}

@media (max-width:900px){
  .scards{grid-template-columns:1fr 1fr}
  .convos{grid-template-columns:1fr}
}
@media (max-width:700px){
  .scards{grid-template-columns:1fr;gap:14px}
  .scard{padding:24px 22px 26px}
  .band{padding:80px 0}
  .convo{font-size:18px;padding:22px}
  .thread{font-size:19px;padding-left:18px}
}

/* ---------- round 6: spec fixes ---------- */
.scards.four{grid-template-columns:repeat(2,1fr)}
.statement .after + .after{margin-top:18px}
.subhead{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin:56px 0 24px}
@media (max-width:700px){.scards.four{grid-template-columns:1fr}}

/* ---------- scroll-driven hero line ----------
   JS adds .scrolldraw once it takes over, which parks the timed keyframes.
   Without JS (or with reduced motion) the original animation still plays,
   so the graphic is never left half-drawn. */
.signal-fig.scrolldraw .line-noise,
.signal-fig.scrolldraw .line-signal,
.signal-fig.scrolldraw .dot,
.signal-fig.scrolldraw .dot-label{animation:none}

/* each process step names the problem it answers */
.flow-step .fs-because{display:block;margin-top:12px;font-family:var(--display);font-style:italic;font-size:15.5px;line-height:1.45;color:var(--signal-deep)}