/* ===========================================================================
   Home. Ink fields carry the argument, paper carries the reading.
   Petrol is the live reading, amber the marker, teal the light-on-ink voice.
   =========================================================================== */
:root{
  --ink:#14181C;
  --ink-2:#1C2126;
  --ink-line:#2C333A;
  --ink-soft:#3A4048;
  /* Paper is beige rather than near-white: the old #FBFBFA card read as a lit
     panel and was tiring over a long page. Ink is untouched, so the contrast
     between the two materials is now stronger, not weaker. */
  --paper:#EAE4D9;
  --paper-2:#E0D9CB;
  --card:#F4F0E8;
  --card-hi:#FAF7F1;
  --petrol:#0F6E6A;
  --petrol-deep:#0A4F4C;
  --teal:#5FD2CC;
  --amber:#B4670A;
  --amber-light:#E9A23B;
  /* Amber at 3.4:1 on beige is fine as a mark and a focus ring, short of AA as
     text. --amber-ink is the same hue stepped down for type. */
  --amber-ink:#8A4E07;
  /* Money leaving reads red on a statement, so the ledgers use one. 6.65:1 on
     --card and 5.98:1 on --paper, and OKLab dE 11.4 against --petrol under
     deuteranopia, so the red/green pair survives colour blindness. Column
     position and the minus sign carry the same meaning, so colour is never
     doing the work alone. */
  --red-ink:#A32018;
  --line:#D2CABA;
  --on-ink:#E6E9E6;
  --on-ink-dim:#A7AFAB;
  --shell:1180px;
  --measure:68ch;
  --r:12px;
  --step:clamp(56px,7vw,104px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--petrol);color:#fff}
::-moz-selection{background:var(--petrol);color:#fff}
body{caret-color:var(--petrol)}
.panel .axis,.panel .sum-t,.panel .mark-t,.console-year,.case-when,.go,.expect li::before,.faults .f-t{font-variant-numeric:tabular-nums}
a{text-underline-offset:3px;text-decoration-thickness:1px}
html{scrollbar-color:#49525A var(--ink);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:#B6BCB6;border-radius:99px;border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--petrol)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.04;margin:0;text-wrap:balance}
p{margin:0 0 18px;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}

/* --- buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:600 16px/1 "Inter",sans-serif;text-decoration:none;
  border:1px solid transparent;border-radius:999px;padding:16px 26px;min-height:52px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--petrol);color:#fff}
.btn-solid:hover{background:var(--petrol-deep)}
.btn-amber{background:var(--amber-light);color:#231400}
.btn-amber:hover{background:#F2B052}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--petrol);color:var(--petrol)}
.btn-line-light{border-color:rgba(230,233,230,.4);color:var(--on-ink)}
.btn-line-light:hover{border-color:var(--on-ink)}
.btn-sm{padding:11px 20px;min-height:42px;font-size:15px}

/* --- top bar --------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(20,24,28,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-line)}
.topbar-in{max-width:var(--shell);margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:28px}
.mark{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--on-ink);text-decoration:none}
.mark span{color:var(--teal)}
.mainnav{display:flex;gap:26px;margin-left:auto}
.mainnav a{color:var(--on-ink-dim);text-decoration:none;font-size:15px;font-weight:500}
.mainnav a:hover{color:#fff}
.topbar .btn-solid{background:var(--teal);color:#06312F}
.topbar .btn-solid:hover{background:#7FE0DA}

/* =========================== THE CONSOLE ============================== */
.console-wrap{background:var(--ink);color:var(--on-ink);padding:clamp(40px,6vw,74px) 0 clamp(52px,7vw,86px)}
.console-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,56px);align-items:start}
.console-intro h1{font-size:clamp(34px,4.6vw,58px);color:#fff;max-width:14ch}
.console-intro p{color:var(--on-ink-dim);font-size:19px;margin:22px 0 28px;max-width:34ch}
.console-actions{display:flex;flex-wrap:wrap;gap:12px}
.console-aside{color:var(--on-ink-dim);font-size:15px;margin:22px 0 0;max-width:40ch}

.console{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:18px;padding:22px;overflow:hidden}
.console-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--ink-line)}
.console-sub{display:block;font-size:13.5px;color:var(--on-ink-dim);margin-top:6px}
.console-head b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;letter-spacing:-.02em;color:#fff}
.console-year{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--teal)}

.lenses{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0}
.lens{
  font:500 14.5px/1 "Inter",sans-serif;color:#C6CDC8;
  background:#262D33;border:1px solid #5A646C;border-radius:999px;
  padding:10px 16px;min-height:40px;cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.lens:hover{color:#fff;border-color:#8B959C;background:#2F373E}
.lens.is-on{background:var(--teal);border-color:var(--teal);color:#06312F;font-weight:600}

.panel svg{width:100%;height:auto;display:block;background:transparent}
.panel .reading{color:var(--on-ink);font-size:16.5px;margin:18px 0 0;max-width:62ch}
.panel .reading b{color:#fff;font-weight:600}
.panel .footnote{color:var(--on-ink-dim);font-size:13px;margin:10px 0 0}
.has-js .panel.is-on{animation:panel-in .42s cubic-bezier(.16,1,.3,1) both}
@keyframes panel-in{from{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* svg text inside the console */
.panel text{font-family:"Inter",sans-serif}
.panel .axis{font-family:"JetBrains Mono",monospace;font-size:12px;fill:var(--on-ink-dim)}
.panel .key text,.panel .key2 text{font-size:13px;fill:var(--on-ink-dim)}
.panel .key text{font-size:12.5px}
.panel .lede-t{font-family:"Bricolage Grotesque";font-weight:700;font-size:17px;fill:#fff}
.panel .mark-t{font-family:"JetBrains Mono",monospace;font-size:12px;fill:var(--amber-light)}
.panel .unit-t{font-family:"Inter";font-size:15px;font-weight:600;fill:#fff}
.panel .sum-t{font-family:"JetBrains Mono",monospace;font-size:13px;fill:var(--on-ink-dim)}
.panel .reading-t{font-family:"Inter";font-size:14.5px;fill:var(--on-ink-dim)}
.panel .ser-t{font-family:"Inter";font-size:13px;font-weight:600}
.panel .seg-t{font-family:"Inter";font-size:13.5px;font-weight:600;fill:#fff}

/* legends live in HTML so they reflow and keep real text sizes on a phone */
.chartkey{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 0 0;margin:0;border-top:1px solid var(--ink-line)}
.chartkey li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--on-ink-dim)}
.key-chip{width:13px;height:13px;border-radius:3px;flex:none}
.key-chip-amber{background:#B4670A}
.key-chip-teal{background:#5FD2CC}
.key-chip-petrol{background:#0F6E6A}
.key-chip-slate{background:#4A5158}
.tag{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
     color:#E9A23B;border:1px solid #8A6626;border-radius:5px;padding:2px 6px;margin-right:8px;white-space:nowrap}
.faults .tag{color:#8F5208;border-color:#D8BE93}

/* ============================= BANDS ================================== */
.band{padding:var(--step) 0}
.band h2,.results h2,.guides h2,.intent h2,.book h2{font-size:clamp(28px,3.8vw,44px)}
.lede{font-size:19px;color:var(--ink-soft);max-width:54ch;margin:18px 0 0}

/* problem */
.faults{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.faults li{background:var(--paper);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(20px,4vw,56px);align-items:center;padding:34px 0}
.faults h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:10px;max-width:22ch}
.faults p{color:var(--ink-soft);margin:0;max-width:52ch}
.faults figure{margin:0}
.faults svg{width:100%;height:auto}
.faults .f-t{font-family:"JetBrains Mono",monospace;font-size:11px;fill:var(--ink-soft)}
.faults .f-l{font-family:"Inter";font-size:13px;font-weight:600}

/* intent */
.intent{background:var(--paper-2);padding:var(--step) 0}
.intent-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.portrait{margin:0;border-radius:var(--r);overflow:hidden;background:#DDE0DB}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;aspect-ratio:4/5}
.intent p{color:var(--ink-soft);font-size:17.5px;max-width:var(--measure);margin-top:22px}
.intent p b{color:var(--ink);font-weight:600}
.sig{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;color:var(--ink)!important;letter-spacing:-.02em}

/* method */
.ledger{list-style:none;counter-reset:l;padding:0;margin:44px 0 0}
.ledger li{counter-increment:l;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(20px,4vw,56px);
  align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.ledger li:last-child{border-bottom:1px solid var(--line)}
.ledger h3{font-size:clamp(21px,2.4vw,26px);margin-bottom:10px}
.ledger h3::before{content:counter(l,decimal-leading-zero);font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;
  color:var(--amber);margin-right:14px;vertical-align:4px;font-variant-numeric:tabular-nums}
.ledger .led-text p{color:var(--ink-soft);font-size:16.5px;margin:0 0 12px;max-width:56ch}
.led-fig{margin:0;justify-self:end;width:100%;max-width:300px}
.led-fig svg{width:100%;height:auto}
.led-fig .t-t{font-family:"Inter";font-size:12px;fill:var(--ink-soft)}
.ledger .asks{color:var(--petrol)!important;font-size:16px;margin:0!important;font-weight:500}
.method-note{margin-top:26px;color:var(--ink-soft);font-size:16px}

/* results */
.results{background:var(--ink);color:var(--on-ink);padding:var(--step) 0}
.results h2{color:#fff}
.cases{list-style:none;counter-reset:c;padding:0;margin:44px 0 0;display:grid;gap:1px;background:var(--ink-line);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line)}
.cases li{background:var(--ink);padding:32px 0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:clamp(16px,3vw,40px)}
.case-when{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;color:var(--teal);margin:0}
.cases h3{font-size:clamp(20px,2.3vw,26px);color:#fff;margin-bottom:12px;max-width:26ch}
.cases p{color:var(--on-ink-dim);margin:0;max-width:62ch}
.quote{margin:44px 0 0;max-width:820px}
.quote blockquote{margin:0;border-left:2px solid var(--amber-light);padding-left:26px}
.quote p{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(20px,2.6vw,27px);line-height:1.3;letter-spacing:-.02em;color:#fff;margin:0}
.quote figcaption{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--teal);margin-top:16px;padding-left:28px}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
.slot{border:1px dashed #49525A;border-radius:var(--r);padding:18px 20px;color:var(--on-ink-dim);font-size:14.5px;margin:0}

/* insights */
.reads{list-style:none;padding:0;margin:44px 0 0}
.reads li{border-top:1px solid var(--line)}
.reads li:last-child{border-bottom:1px solid var(--line)}
.reads a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:baseline;padding:26px 0;text-decoration:none}
.reads h3{grid-column:1;font-size:clamp(20px,2.3vw,25px);max-width:30ch}
.reads a:hover h3{color:var(--petrol)}
.reads p{grid-column:1;color:var(--ink-soft);font-size:16.5px;margin:0;max-width:60ch}
.reads .go{grid-row:1;grid-column:2}

/* guides */
.guides{background:var(--paper-2);padding:var(--step) 0}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:46px}
.vol{display:block;text-decoration:none;transition:transform .18s ease}
.vol:hover{transform:translateY(-3px)}
.cover{display:flex;flex-direction:column;justify-content:space-between;gap:26px;aspect-ratio:3/4;padding:24px 22px;
  border-radius:3px 10px 10px 3px;color:#fff;box-shadow:0 14px 30px -18px rgba(20,24,28,.6)}
.cover-1{background:linear-gradient(165deg,#13807A,#0A4F4C)}
.cover-2{background:linear-gradient(165deg,#2A3037,#101316)}
.cover-3{background:linear-gradient(165deg,#C27514,#7E4705)}
.cover-n{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.cover-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;line-height:1.02}
.vol-body{display:block;padding-top:18px}
.vol-line{display:block;color:var(--ink-soft);font-size:16px;margin-bottom:12px}
.go{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--petrol)}

/* Tool gallery — cells in a hairline grid. The 1px gap IS the border, the set
   carries the radius and clips, and the cells brighten on hover. Separate from
   .reads because the classic page still wants that as a list. */
.toolcards{list-style:none;padding:0;margin:44px 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.toolcards li{background:var(--card);min-width:0}
.toolcards a{display:flex;flex-direction:column;gap:12px;height:100%;padding:28px;
  text-decoration:none;color:inherit;transition:background .15s ease}
.toolcards a:hover{background:var(--card-hi)}
.toolcards a:hover h3{color:var(--petrol)}
.toolcards h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(19px,2vw,23px);line-height:1.08;max-width:20ch;margin:0}
.toolcards p{color:var(--ink-soft);font-size:16px;line-height:1.55;margin:0;max-width:38ch;flex:1}
.toolcards .go{margin-top:2px}
.toolcards .pending{opacity:.72}
.toolcards .pending a{cursor:default}
@media (max-width:560px){ .toolcards a{padding:24px 22px} }
.vol:hover .go{color:var(--petrol-deep)}
.guides-note{margin-top:22px;color:var(--ink-soft);font-size:14px}

/* book */
.book{background:var(--petrol-deep);color:#EAF3F2;padding:var(--step) 0}
.book-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:start}
.book h2{color:#fff;max-width:16ch}
.book p{color:#BFD9D6;font-size:18px;max-width:46ch;margin:20px 0 28px}
.book-actions{display:flex;flex-wrap:wrap;gap:12px}
.expect{list-style:none;counter-reset:e;padding:0;margin:0;border-top:1px solid rgba(234,243,242,.22)}
.expect li{counter-increment:e;padding:16px 0 16px 46px;border-bottom:1px solid rgba(234,243,242,.22);position:relative;color:#DCEAE8;font-size:16.5px}
.expect li::before{content:counter(e);position:absolute;left:0;top:14px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(234,243,242,.4);
  font-family:"JetBrains Mono",monospace;font-size:12px;display:flex;align-items:center;justify-content:center;color:#EAF3F2}

/* footer */
.foot{background:var(--ink);color:var(--on-ink-dim);padding:52px 0 44px;font-size:14px;border-top:1px solid var(--ink-line)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding-bottom:30px;border-bottom:1px solid var(--ink-line)}
.foot .mark{font-size:18px}
.foot-line{margin:12px 0 0}
.foot nav{display:flex;flex-direction:column;gap:10px}
.foot nav a{color:var(--on-ink-dim);text-decoration:none}
.foot nav a:hover{color:#fff}
.cea{margin:0;line-height:1.8}
.cea a{color:#fff;text-decoration:none}
.fine{margin:26px 0 0;font-size:12.5px;max-width:92ch;line-height:1.7}

/* =========================== RESPONSIVE =============================== */
@media (max-width:1040px){
  .console-grid{grid-template-columns:1fr}
  .console-intro h1{max-width:20ch}
  .console-intro p{max-width:56ch}
  .intent-grid,.book-grid{grid-template-columns:1fr}
  .portrait img{aspect-ratio:16/10}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .shelf{grid-template-columns:1fr;max-width:330px}
  body{font-size:16.5px}
  /* Nav stays reachable: it scrolls sideways rather than disappearing. */
  .topbar-in{gap:12px;flex-wrap:wrap;padding:10px 18px}
  .mainnav{order:3;width:100%;margin:0;gap:18px;overflow-x:auto;padding:8px 0 2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{white-space:nowrap;font-size:14.5px}
  .topbar .btn-sm{margin-left:auto}
  .slots{grid-template-columns:1fr}
  .ledger li{grid-template-columns:1fr;gap:18px;padding:26px 0}
  .led-fig{max-width:280px;justify-self:start}
  .reads a{grid-template-columns:1fr}
  .reads .go{grid-row:auto;grid-column:1}
  .faults li{grid-template-columns:1fr;gap:22px;padding:28px 0}
  .faults figure{max-width:340px}
  .cases li{grid-template-columns:1fr;gap:8px;padding:26px 0}
  .quote blockquote{padding-left:18px}
  .quote figcaption{padding-left:20px}
  .console{padding:16px;border-radius:14px}
  .lens{font-size:13.5px;padding:9px 13px}
  /* Charts: labels scale up inside the viewBox so they clear ~12px on screen.
     Legends are HTML, so they reflow instead of colliding. */
  .panel .axis{font-size:19px}
  .panel .mark-t{font-size:17px}
  .panel .ser-t{font-size:19px}
  .panel .hide-sm{display:none}
  .panel .seg-t{font-size:19px}
  .panel .sum-t{font-size:19px}
  .panel .unit-t{font-size:21px}
  .panel .lede-t{font-size:23px}
  .panel .reading-t{font-size:19px}
  .led-fig .t-t{font-size:15px}
  .faults .f-t{font-size:13px}
  .faults .f-l{font-size:15px}
}
@media (max-width:420px){
  .shell,.topbar-in{padding-left:18px;padding-right:18px}
  .console-actions .btn,.book-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.vol:hover{transform:none}
}

/* ===========================================================================
   FUNNEL SECTIONS , hook and opt-in, authority, story, old way vs this,
   the stack, the last call. Same two-material system: ink argues, paper reads.
   =========================================================================== */

/* 1. hook + opt-in ------------------------------------------------------ */
.hook-wrap{background:var(--ink);color:var(--on-ink);padding:clamp(38px,5vw,64px) 0 clamp(48px,6vw,76px)}
.hook-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,60px);align-items:start}
.hook-flag{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);margin:0 0 18px;font-variant-numeric:tabular-nums}
.hook h1{font-size:clamp(33px,4.4vw,55px);color:#fff;max-width:17ch}
.hook-sub{color:#C3CAC5;font-size:clamp(17px,1.9vw,19.5px);margin:22px 0 0;max-width:52ch}
.hook-sub b{color:#fff;font-weight:600}
.hook-figures{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line)}
.hook-figures > div{padding:18px 30px 18px 0;margin-right:30px;border-right:1px solid var(--ink-line)}
.hook-figures > div:last-child{border-right:0;margin-right:0;padding-right:0}
.hook-figures dt{font-size:13px;color:var(--on-ink-dim);margin-bottom:6px}
.hook-figures dd{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,28px);
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}

.optin{background:var(--card);color:var(--ink);border-radius:16px;padding:clamp(24px,3vw,32px)}
.optin h2{font-size:clamp(22px,2.4vw,27px);max-width:20ch}
.optin > p{color:var(--ink-soft);font-size:16px;margin:12px 0 22px}
.optin-form{display:grid;gap:15px}
.optin .field{display:grid;gap:6px}
.optin .field span{font-size:14px;font-weight:600}
.optin .field input{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;width:100%;min-height:50px}
.optin .field input:focus{border-color:var(--petrol)}
.optin .consent{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.optin .consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--petrol)}
.optin-alt{margin:18px 0 0;font-size:14.5px;color:var(--ink-soft)}
.optin-alt a{color:var(--petrol);font-weight:600;text-decoration:none;border-bottom:2px solid rgba(15,110,106,.25)}
.optin-alt a:hover{border-bottom-color:var(--petrol)}
.hp{position:absolute;left:-9999px}

/* 2. authority strip ---------------------------------------------------- */
.authority{background:var(--ink-2);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);color:var(--on-ink-dim)}
.authority-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px 0;padding:0}
.auth-item{margin:0;padding:22px 26px 22px 0;font-size:14.5px;line-height:1.5;border-right:1px solid var(--ink-line)}
.auth-item:last-child{border-right:0;padding-right:0}
.auth-item b{display:block;color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;letter-spacing:-.02em;margin-bottom:5px}
.slot-inline{color:#7E8883}
.slot-inline b{color:#98A29C}

/* 3. story -------------------------------------------------------------- */
.story{background:var(--paper-2);padding:var(--step) 0}
.story-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.story-text h2{font-size:clamp(27px,3.4vw,40px);max-width:19ch}
.story-text p{color:var(--ink-soft);font-size:17.5px;max-width:var(--measure);margin:22px 0 0}
.story-text p b{color:var(--ink);font-weight:600}
.story-turn{color:var(--ink)!important;font-weight:500;border-left:2px solid var(--amber);padding-left:20px}

/* 5. old way vs this ---------------------------------------------------- */
.vehicle{background:var(--ink);color:var(--on-ink);padding:var(--step) 0}
.vehicle h2{font-size:clamp(28px,3.8vw,44px);color:#fff;max-width:20ch}
.lede.light{color:var(--on-ink-dim)}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ink-line);margin:42px 0 0;
  border:1px solid var(--ink-line);border-radius:var(--r);overflow:hidden}
.vs-col{background:var(--ink);padding:28px 26px}
.vs-col h3{font-size:20px;margin-bottom:18px}
.vs-col ul{list-style:none;padding:0;margin:0}
.vs-col li{position:relative;padding:0 0 0 26px;margin-bottom:13px;font-size:16px;line-height:1.5}
.vs-old h3{color:#C6CDC8}
.vs-old li{color:#9AA39D}
.vs-old li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:1.5px;background:#6E7872}
.vs-new{background:var(--ink-2)}
.vs-new h3{color:var(--teal)}
.vs-new li{color:#DCE3DE}
.vs-new li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:11px;border-right:2px solid var(--teal);
  border-bottom:2px solid var(--teal);transform:rotate(40deg)}
.vehicle-lead{margin:44px 0 18px;color:var(--on-ink-dim);font-size:17px}
.vehicle .console{background:var(--ink-2)}

/* 7. the stack ---------------------------------------------------------- */
.offer{background:var(--petrol-deep);color:#EAF3F2;padding:var(--step) 0}
.offer-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,64px);align-items:start}
.offer h2{font-size:clamp(28px,3.8vw,44px);color:#fff;max-width:18ch}
.offer-lede{color:#BFD9D6;font-size:18px;max-width:54ch;margin:20px 0 0}
.stack{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid rgba(234,243,242,.22)}
.stack li{padding:20px 0 20px 40px;border-bottom:1px solid rgba(234,243,242,.22);position:relative}
.stack li::before{content:"";position:absolute;left:2px;top:26px;width:9px;height:14px;border-right:2px solid var(--amber-light);
  border-bottom:2px solid var(--amber-light);transform:rotate(40deg)}
.stack-t{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;color:#fff}
.stack-d{display:block;color:#BFD9D6;font-size:16px;margin-top:6px;max-width:58ch}
.promise{margin-top:32px;background:rgba(0,0,0,.18);border-radius:var(--r);padding:24px 26px}
.promise h3{font-size:19px;color:var(--amber-light);margin-bottom:10px}
.promise p{color:#DCEAE8;font-size:16.5px;margin:0;max-width:60ch}
.offer-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* last call ------------------------------------------------------------- */
.last{background:var(--paper-2);padding:clamp(48px,6vw,84px) 0;border-top:1px solid var(--line)}
.last-in{text-align:center}
.last h2{font-size:clamp(26px,3.4vw,38px);max-width:22ch;margin:0 auto}
.last p{color:var(--ink-soft);font-size:18px;max-width:46ch;margin:18px auto 28px}
.last-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media (max-width:1040px){
  .hook-grid,.story-grid,.offer-grid{grid-template-columns:1fr}
  .authority-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth-item:nth-child(2n){border-right:0;padding-right:0}
  .auth-item{border-bottom:1px solid var(--ink-line)}
  .auth-item:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:760px){
  .vs{grid-template-columns:1fr}
  .authority-in{grid-template-columns:1fr}
  .auth-item{border-right:0;padding:18px 0;border-bottom:1px solid var(--ink-line)}
  .auth-item:last-child{border-bottom:0}
  .hook-figures > div{padding:14px 20px 14px 0;margin-right:20px}
  .story-turn{padding-left:16px}
}
@media (max-width:420px){
  .offer-actions .btn,.last-actions .btn,.hook-figures{width:100%}
  .hook-figures{display:grid;grid-template-columns:1fr}
  .hook-figures > div{border-right:0;border-bottom:1px solid var(--ink-line);margin:0;padding:14px 0}
  .hook-figures > div:last-child{border-bottom:0}
}

/* ===========================================================================
   PROBLEM-LED HOME , the waterfall, the opt-in bars, the nine-part series,
   the case sequence, and the process. Same two materials: ink argues, paper reads.
   =========================================================================== */
.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}

/* 1. problem ------------------------------------------------------------ */
.problem-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4vw,56px);align-items:center}
.problem-fig{margin:0;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:16px;padding:22px 20px 18px}
.problem-fig svg{width:100%;height:auto;display:block}
.problem-fig figcaption{color:var(--on-ink-dim);font-size:13.5px;margin-top:16px;line-height:1.55}
.problem-fig .wf-v{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.problem-fig .wf-l{font-family:"Inter";font-size:12.5px;fill:var(--on-ink-dim)}
.problem-fig .axis{font-family:"JetBrains Mono",monospace;font-size:12px;fill:var(--on-ink-dim)}
.hook-sub + .hook-sub{margin-top:16px}

/* opt-in bars ------------------------------------------------------------ */
.optin-bar{background:var(--petrol-deep);color:#EAF3F2;padding:clamp(28px,4vw,42px) 0}
.optin-bar-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3vw,44px);align-items:center}
.optin-bar h2{font-size:clamp(23px,2.6vw,30px);color:#fff;max-width:18ch}
.optin-bar p{color:#BFD9D6;font-size:16px;margin:10px 0 0;max-width:46ch}
.bar-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:start}
.bar-form input[type=text],.bar-form input[name=name],.bar-form input[type=email]{
  font:inherit;font-size:16px;padding:14px 15px;border:1px solid rgba(234,243,242,.35);border-radius:10px;
  background:rgba(0,0,0,.16);color:#fff;min-height:52px;width:100%}
.bar-form input::placeholder{color:#9FBAB7}
.bar-form input:focus{border-color:var(--amber-light);outline:none}
.bar-consent{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:13px;color:#BFD9D6;line-height:1.45}
.bar-consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--amber-light)}

/* 3. the series ---------------------------------------------------------- */
.series{background:var(--paper-2);padding:var(--step) 0}
.series h2{font-size:clamp(28px,3.8vw,44px)}
.series-block{margin-top:clamp(36px,4vw,54px)}
.series-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.series-head h3{font-size:clamp(21px,2.4vw,26px)}
.series-head p{color:var(--ink-soft);font-size:16px;margin:0}
.shelf-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px}
.cover{position:relative}
.cover-f{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:13px;letter-spacing:-.02em;opacity:.8}
.cover-t{font-size:clamp(21px,2vw,26px)}
.cover::after{content:"";position:absolute;left:10px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}

/* 4. the case ------------------------------------------------------------ */
.case-run{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ink-line);
  margin:40px 0 0;border:1px solid var(--ink-line);border-radius:var(--r);overflow:hidden}
.case-step{background:var(--ink);padding:28px 26px}
.case-step h3{font-size:20px;color:#fff;margin-bottom:12px}
.case-step p{color:var(--on-ink-dim);font-size:16.5px;margin:0 0 14px;max-width:54ch}
.case-step p:last-child{margin-bottom:0}
.case-step b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.case-fig{margin:34px 0 0;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r);padding:24px 22px 18px}
.case-fig svg{width:100%;height:auto;display:block}
.case-fig figcaption{color:var(--on-ink-dim);font-size:13px;margin-top:16px;line-height:1.6;max-width:86ch}
.case-fig .lede-t{font-family:"Bricolage Grotesque";font-weight:700;font-size:16px;fill:#fff}
.case-fig .unit-t{font-family:"Inter";font-size:14px;font-weight:600;fill:#fff}
.case-fig .sum-t{font-family:"JetBrains Mono",monospace;font-size:12px;fill:var(--on-ink-dim);font-variant-numeric:tabular-nums}
.case-fig .ser-t{font-family:"Inter";font-size:12.5px;font-weight:600}
.case-fig .mark-t{font-family:"JetBrains Mono",monospace;font-size:12px;fill:var(--amber-light);font-variant-numeric:tabular-nums}
.case-fig .reading-t{font-family:"Inter";font-size:14px;fill:var(--on-ink-dim)}

/* 5. process -------------------------------------------------------------- */
.process{list-style:none;counter-reset:p;padding:0;margin:42px 0 0}
.process li{counter-increment:p;position:relative;padding:26px 0 26px 72px;border-top:1px solid var(--line)}
.process li:last-child{border-bottom:1px solid var(--line)}
.process li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:26px;
  font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;color:var(--amber);
  border:1px solid var(--line);border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--card);font-variant-numeric:tabular-nums}
.process h3{font-size:clamp(20px,2.2vw,24px);margin-bottom:8px}
.process p{color:var(--ink-soft);font-size:16.5px;margin:0;max-width:62ch}
.credo{margin-top:40px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px}
.credo p{color:var(--ink-soft);font-size:17px;margin:0;max-width:66ch}
.credo .sig{margin-top:16px;font-size:14px;color:var(--ink)}

/* 7. offer side ----------------------------------------------------------- */
.offer-side{display:grid;gap:26px}
.side-form{background:var(--card);color:var(--ink);border-radius:16px;padding:26px}
.side-form h3{font-size:21px;margin-bottom:16px;max-width:16ch}
.side-form .field{display:grid;gap:6px;margin-bottom:14px}
.side-form .field span{font-size:14px;font-weight:600}
.side-form .field input{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;min-height:50px;width:100%}
.side-form .field input:focus{border-color:var(--petrol)}
.side-form .consent{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:13px;color:var(--ink-soft);line-height:1.45;margin-bottom:16px}
.side-form .consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--petrol)}

@media (max-width:1040px){
  .problem-grid,.optin-bar-in,.offer-grid{grid-template-columns:1fr}
  .shelf-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-run{grid-template-columns:1fr}
}
@media (max-width:760px){
  .bar-form{grid-template-columns:1fr}
  .shelf-3{grid-template-columns:1fr;max-width:330px}
  .process li{padding:22px 0 22px 58px}
  .process li::before{width:36px;height:36px;font-size:13px;top:22px}
  .problem-fig .wf-l{font-size:16px}
  .problem-fig .wf-v{font-size:16px}
  .problem-fig .axis{font-size:15px}
  .case-fig .lede-t{font-size:20px}
  .case-fig .unit-t{font-size:18px}
  .case-fig .sum-t,.case-fig .ser-t,.case-fig .mark-t{font-size:16px}
  .case-fig .reading-t{font-size:17px}
}
.optin-bar-alt{background:var(--ink);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line)}
.optin-bar-alt h2{color:#fff}
.optin-bar-alt p{color:var(--on-ink-dim)}
.optin-bar-alt .bar-form input{background:rgba(255,255,255,.06);border-color:#5A646C}
.optin-bar-alt .bar-form input::placeholder{color:#9AA39D}
.optin-bar-alt .bar-consent{color:var(--on-ink-dim)}

/* ===========================================================================
   V3: callout hero with the photo, the dark opt in blocks, who we are.
   Dark blocks hold what must not be missed. Paper holds the reading.
   =========================================================================== */

/* hero ------------------------------------------------------------------ */
.stage{background:var(--ink);color:var(--on-ink);padding:clamp(26px,3vw,44px) 0 0;overflow:hidden}
.stage-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.stage-copy{padding-bottom:clamp(28px,4vw,56px);align-self:center}
.callout{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:#06312F;background:var(--teal);border-radius:999px;padding:9px 16px;margin:0 0 22px}
.callout-dark{background:var(--amber-light);color:#231400}
.stage h1{font-size:clamp(36px,5.6vw,68px);color:#fff;max-width:15ch;line-height:.98}
.stage-sub{color:#C3CAC5;font-size:clamp(17px,1.9vw,20px);margin:22px 0 0;max-width:46ch}
.stage-sub.strong{color:#fff;font-weight:500;border-left:3px solid var(--amber-light);padding-left:16px}
.stage-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.stage-fine{color:#8E9892;font-size:14px;margin:16px 0 0}

/* The portrait sits on its own light card, so its white studio background
   reads as a deliberate plate rather than a hole punched in the ink field. */
.stage-photo{position:relative;align-self:end;padding-bottom:clamp(28px,4vw,56px)}
.stage-photo img{width:100%;display:block;border-radius:14px;background:#F4F5F3;
  height:clamp(360px,44vw,540px);object-fit:cover;object-position:50% 14%}
.stage-badge{position:absolute;left:-14px;bottom:clamp(50px,6vw,84px);background:var(--ink-2);
  border:1px solid #39424A;border-radius:12px;padding:15px 17px;max-width:238px;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.7)}
.stage-badge b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:17px;letter-spacing:-.02em;color:#fff;margin-bottom:5px}
.stage-badge span{font-size:13.5px;color:var(--on-ink-dim);line-height:1.45}

.ticker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink-line);
  margin-top:clamp(20px,3vw,34px)}
.ticker p{margin:0;padding:20px 24px;font-size:14.5px;color:var(--on-ink-dim);border-right:1px solid var(--ink-line)}
.ticker p:first-child{padding-left:0}
.ticker p:last-child{border-right:0}
.ticker b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:19px;letter-spacing:-.02em;color:#fff;margin-bottom:4px;
  font-variant-numeric:tabular-nums}

/* problem ---------------------------------------------------------------- */
.waterfall-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3vw,44px);
  align-items:center;margin-top:40px}
.dark-fig{margin:0;background:var(--ink);border-radius:16px;padding:26px 24px 20px}
.dark-fig svg{width:100%;height:auto;display:block}
.dark-fig figcaption{color:var(--on-ink-dim);font-size:13.5px;margin-top:16px;line-height:1.55}
.dark-fig .wf-v{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.dark-fig .wf-l{font-family:"Inter";font-size:12.5px;fill:#A7AFAB}
.dark-fig .axis{font-family:"JetBrains Mono",monospace;font-size:12px;fill:#A7AFAB}
.waterfall-say .big-quote{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(23px,2.8vw,30px);
  letter-spacing:-.03em;line-height:1.12;margin:0 0 18px}
.waterfall-say p{color:var(--ink-soft);font-size:17px;max-width:46ch}
.sub-h{font-size:clamp(21px,2.4vw,27px);margin:clamp(42px,5vw,64px) 0 0}
.punch{margin-top:30px;font-size:clamp(18px,2vw,21px);font-weight:500;color:var(--ink);max-width:60ch;
  border-left:3px solid var(--amber);padding-left:20px}

/* opt in blocks ---------------------------------------------------------- */
.getblock{background:var(--ink);color:var(--on-ink);padding:var(--step) 0}
.getblock-alt{background:var(--petrol-deep)}
.get-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,4vw,60px);align-items:start}
.getblock h2{font-size:clamp(28px,3.6vw,42px);color:#fff;max-width:17ch}
.get-copy > p{color:#C3CAC5;font-size:17.5px;margin:18px 0 0;max-width:48ch}
.getblock-alt .get-copy > p{color:#BFD9D6}
.get-list{list-style:none;padding:0;margin:26px 0 0}
.get-list li{position:relative;padding:0 0 0 30px;margin-bottom:13px;color:#DCE3DE;font-size:16.5px}
.get-list li::before{content:"";position:absolute;left:2px;top:6px;width:8px;height:13px;
  border-right:2px solid var(--amber-light);border-bottom:2px solid var(--amber-light);transform:rotate(40deg)}
.get-form{background:var(--card);color:var(--ink);border-radius:16px;padding:clamp(22px,2.6vw,30px)}
.get-form .field{display:grid;gap:6px;margin-bottom:15px}
.get-form .field span{font-size:14px;font-weight:600}
.get-form .field input{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;min-height:50px;width:100%}
.get-form .field input:focus{border-color:var(--petrol)}
.get-form .consent{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:13.5px;color:var(--ink-soft);
  line-height:1.45;margin-bottom:18px}
.get-form .consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--petrol)}
.form-fine{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft);text-align:center}
.form-fine a{color:var(--petrol);font-weight:600}

/* who we are -------------------------------------------------------------- */
.us{background:var(--paper-2);padding:var(--step) 0}
.us-head h2{font-size:clamp(28px,3.8vw,44px)}
.us-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(26px,4vw,52px);margin-top:42px;align-items:start}
.us-photo{margin:0;border-radius:var(--r);overflow:hidden;background:#DDE0DB}
.us-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;aspect-ratio:4/5}
.us-people{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.person{background:var(--card);padding:28px 26px}
.person h3{font-size:24px}
.person-role{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--petrol);margin:6px 0 14px}
.person p{color:var(--ink-soft);font-size:16.5px;margin:0 0 12px;max-width:54ch}
.cea-line{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-soft);margin:0;font-variant-numeric:tabular-nums}
.us-rules{margin-top:44px;background:var(--ink);color:var(--on-ink);border-radius:18px;padding:clamp(26px,3vw,38px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,3vw,44px);align-items:center}
.us-rules h3{font-size:24px;color:#fff;margin-bottom:20px}
.us-rules ol{list-style:none;counter-reset:r;padding:0;margin:0}
.us-rules li{counter-increment:r;position:relative;padding:0 0 0 44px;margin-bottom:16px;color:#C3CAC5;font-size:16.5px}
.us-rules li:last-child{margin-bottom:0}
.us-rules li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:700;color:var(--amber-light);font-variant-numeric:tabular-nums}
.us-rules b{color:#fff;font-weight:600}
.us-slot{margin:0;border:1px dashed #49525A;border-radius:12px;padding:22px;min-height:190px;display:flex;align-items:center}
.us-slot p{margin:0;color:var(--on-ink-dim);font-size:14.5px}
.us-slot b{color:#C6CDC8}

/* cta strip --------------------------------------------------------------- */
.cta-strip{background:var(--amber);color:#fff;padding:clamp(30px,4vw,46px) 0}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center}
.cta-strip h2{font-size:clamp(24px,2.8vw,32px);color:#fff;max-width:20ch}
.cta-strip p{color:#FBEBD6;font-size:17px;margin:12px 0 0;max-width:46ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-strip .btn-amber{background:#fff;color:#7E4705}
.cta-strip .btn-amber:hover{background:#FFF4E4}
.cta-strip .btn-line-light{border-color:rgba(255,255,255,.55);color:#fff}

@media (max-width:1040px){
  .stage-grid,.waterfall-wrap,.get-grid,.us-grid,.us-rules,.cta-grid{grid-template-columns:1fr}
  .stage-photo{padding-bottom:clamp(24px,4vw,40px)}
  .stage-photo img{max-width:420px;margin:0 auto;height:clamp(300px,62vw,420px);object-position:50% 12%}
  .stage-badge{position:static;max-width:none;margin-top:14px}
  .ticker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticker p{border-bottom:1px solid var(--ink-line)}
  .ticker p:nth-child(2n){border-right:0}
  .ticker p:nth-last-child(-n+2){border-bottom:0}
  .us-slot{min-height:120px}
}
@media (max-width:760px){
  .ticker{grid-template-columns:1fr}
  .ticker p{border-right:0;padding:16px 0}
  .stage h1{max-width:18ch}
  .dark-fig .wf-l,.dark-fig .wf-v,.dark-fig .axis{font-size:16px}
  .cta-actions .btn,.stage-actions .btn{width:100%}
}

/* ===========================================================================
   V4: hero chart card, two by two galleries, guide parts, story case.
   =========================================================================== */
.hero-fig{margin:0;align-self:center;background:var(--ink-2);border:1px solid var(--ink-line);
  border-radius:16px;padding:22px 20px 18px}
.hero-fig svg{width:100%;height:auto;display:block}
.hero-fig-top{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;
  color:#fff;margin-bottom:14px}
.hero-fig figcaption{color:var(--on-ink-dim);font-size:13px;margin-top:14px;line-height:1.55}
.hero-fig .wf-v{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hero-fig .wf-l{font-family:"Inter";font-size:12.5px;fill:#A7AFAB}
.hero-fig .axis{font-family:"JetBrains Mono",monospace;font-size:12px;fill:#A7AFAB}
.stage h1{font-size:clamp(38px,6.2vw,76px)}
.band-tight{padding-top:clamp(44px,5vw,70px)}

/* two by two galleries ---------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);margin-top:42px}
.tile{background:var(--ink);border-radius:16px;padding:0 0 26px;overflow:hidden}
.tile-art{background:var(--ink-2);border-bottom:1px solid var(--ink-line);padding:22px 22px 16px}
.tile-art svg{width:100%;height:auto;display:block}
.tile-art .g-t{font-family:"Inter";font-size:12.5px;fill:#A7AFAB}
.tile h3{color:#fff;font-size:clamp(20px,2.2vw,25px);margin:24px 26px 10px;max-width:22ch}
.tile p{color:var(--on-ink-dim);font-size:16.5px;margin:0 26px;max-width:52ch}
.tile-n{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);margin:22px 26px 0!important;font-variant-numeric:tabular-nums}

.gallery-light .tile-light{background:var(--card);border:1px solid var(--line)}
.tile-light .tile-art-light{background:#F4F5F2;border-bottom:1px solid var(--line)}
.tile-light .tile-art-light .g-t{fill:var(--ink-soft)}
.tile-light h3{color:var(--ink);margin-top:10px}
.tile-light p{color:var(--ink-soft)}

/* guide parts -------------------------------------------------------------- */
.parts{list-style:none;counter-reset:pt;padding:0;margin:14px 0 16px}
.parts li{counter-increment:pt;position:relative;padding:0 0 0 30px;margin-bottom:8px;font-size:15px;color:var(--ink-soft)}
.parts li::before{content:"0" counter(pt);position:absolute;left:0;top:1px;font-family:"JetBrains Mono",monospace;
  font-size:11.5px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.vol-line{margin-bottom:4px}

/* case told as a story ------------------------------------------------------ */
.story-wrap{max-width:860px}
.story-body{margin-top:28px}
.story-body p{color:#C3CAC5;font-size:clamp(17px,1.9vw,19.5px);margin:0 0 18px;max-width:68ch}
.story-body b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.story-note{color:#8E9892!important;font-size:13.5px!important;margin-top:24px!important}
.results .quote{margin-top:34px}

/* who we are, simplified ----------------------------------------------------- */
.us-rules{grid-template-columns:1fr;gap:14px}
.us-rules p{color:#C3CAC5;font-size:17.5px;margin:0;max-width:72ch}

@media (max-width:860px){
  .gallery{grid-template-columns:1fr;gap:16px}
  .tile h3,.tile p,.tile-n{margin-left:20px;margin-right:20px}
  .tile-art{padding:18px 18px 12px}
  .tile-art .g-t{font-size:15px}
  .hero-fig .wf-l,.hero-fig .wf-v,.hero-fig .axis{font-size:16px}
}

/* ===========================================================================
   V5: the masthead carried over from stefanteo.sg, book cover art,
   the case list, the wider story.
   =========================================================================== */
.masthead{position:sticky;top:0;z-index:60;background:rgba(20,24,28,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-line)}
.masthead__inner{max-width:var(--shell);margin-inline:auto;padding:12px 28px;display:flex;align-items:center;gap:28px}
.masthead__brand{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;margin-right:auto}
.masthead__name{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;font-weight:800;letter-spacing:-.03em;color:#fff}
.masthead__role{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.masthead__nav{display:none}
.masthead__nav ul{display:flex;gap:24px;margin:0;padding:0;list-style:none}
.masthead__nav a{position:relative;display:block;padding:6px 0;font-size:15px;font-weight:500;
  color:var(--on-ink-dim);text-decoration:none;transition:color .15s ease}
.masthead__nav a:hover,.masthead__nav a[aria-current=page]{color:#fff}
.masthead__nav a[aria-current=page]::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--teal);border-radius:999px}
.masthead__cta{display:none;background:var(--teal);color:#06312F}
.masthead__cta:hover{background:#7FE0DA}
.masthead__mobile{position:relative}
.masthead__mobile summary{display:grid;place-items:center;width:2.75rem;height:2.75rem;cursor:pointer;
  list-style:none;border-radius:10px}
.masthead__mobile summary::-webkit-details-marker{display:none}
.masthead__mobile summary:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.masthead__bars,.masthead__bars::before,.masthead__bars::after{display:block;width:1.15rem;height:2px;
  background:#fff;border-radius:999px;transition:transform .15s ease}
.masthead__bars{position:relative}
.masthead__bars::before,.masthead__bars::after{content:"";position:absolute}
.masthead__bars::before{top:-6px}
.masthead__bars::after{top:6px}
.masthead__mobile[open] .masthead__bars{background:transparent}
.masthead__mobile[open] .masthead__bars::before{top:0;transform:rotate(45deg)}
.masthead__mobile[open] .masthead__bars::after{top:0;transform:rotate(-45deg)}
.masthead__drawer{position:absolute;top:calc(100% + 10px);right:0;min-width:14rem;padding:16px;
  background:var(--ink-2);border:1px solid var(--ink-line);border-radius:16px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.masthead__drawer ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:2px}
.masthead__drawer a{display:block;padding:10px 12px;font-size:16px;color:var(--on-ink-dim);
  text-decoration:none;border-radius:10px}
.masthead__drawer a:hover{color:#fff;background:rgba(255,255,255,.06)}
.masthead__drawer a[aria-current=page]{color:#06312F;background:var(--teal);font-weight:600}
@media (min-width:860px){
  .masthead__nav,.masthead__cta{display:block}
  .masthead__mobile{display:none}
}

/* book covers with artwork ------------------------------------------------ */
.cover{position:relative;overflow:hidden}
.cover-art{position:absolute;inset:auto 0 0 0;height:58%;display:block;opacity:.95}
.cover-art svg{width:100%;height:100%;display:block}
.cover-n,.cover-t,.cover-f{position:relative;z-index:2}
.cover::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.42) 46%,rgba(0,0,0,.62) 100%)}
.cover-t{text-shadow:0 2px 14px rgba(0,0,0,.35)}

/* case list ---------------------------------------------------------------- */
.case-list{list-style:none;padding:0;margin:42px 0 0}
.case-list li{border-top:1px solid var(--line)}
.case-list li:last-child{border-bottom:1px solid var(--line)}
.case-list a{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:10px 26px;align-items:baseline;
  padding:26px 0;text-decoration:none}
.case-year{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;color:var(--amber);
  font-variant-numeric:tabular-nums}
.case-list h3{font-size:clamp(20px,2.3vw,25px);max-width:30ch}
.case-list a:hover h3{color:var(--petrol)}
.case-list p{grid-column:2;color:var(--ink-soft);font-size:16.5px;margin:0;max-width:62ch}
.case-list .go{grid-row:1;grid-column:3}

/* the story, with room ------------------------------------------------------ */
.story-wide{max-width:1040px}
.story-wide .story-body p{max-width:84ch;font-size:clamp(17.5px,2vw,20.5px);line-height:1.62}
.story-cta{margin-top:34px}

@media (max-width:860px){
  .case-list a{grid-template-columns:1fr;gap:6px}
  .case-list p,.case-list .go{grid-column:1}
  .case-list .go{grid-row:auto}
  .masthead__inner{padding:10px 18px;gap:14px}
}

/* ===========================================================================
   V6: the stefanteo.sg index layouts, rendered in this site's colours.
   Page header, filter directory, article cards, tool rows, guide clusters.
   =========================================================================== */
.section{padding-block:clamp(48px,6vw,88px)}
.section-header{max-width:62ch;margin-bottom:clamp(2rem,1rem + 3vw,3.5rem)}
.eyebrow{display:block;font-family:"Inter",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--petrol);margin-bottom:14px}
.section-header h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:18px}
.section-header .lede{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-soft);max-width:62ch;margin:0}

/* filter directory, CSS only ------------------------------------------------ */
.dir{display:grid;gap:clamp(22px,3vw,34px)}
.dir__radio{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dir__tabs{display:flex;flex-wrap:wrap;gap:10px}
.dir__tab{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;font-size:15px;font-weight:600;
  color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.dir__tab:hover{border-color:var(--petrol);color:var(--ink)}
.dir__count{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
#dir-all:checked ~ .dir__tabs label[for="dir-all"],
#dir-decision:checked ~ .dir__tabs label[for="dir-decision"],
#dir-money:checked ~ .dir__tabs label[for="dir-money"]{background:var(--ink);border-color:var(--ink);color:#fff}
#dir-all:checked ~ .dir__tabs label[for="dir-all"] .dir__count,
#dir-decision:checked ~ .dir__tabs label[for="dir-decision"] .dir__count,
#dir-money:checked ~ .dir__tabs label[for="dir-money"] .dir__count{color:var(--teal)}
#dir-all:focus-visible ~ .dir__tabs label[for="dir-all"],
#dir-decision:focus-visible ~ .dir__tabs label[for="dir-decision"],
#dir-money:focus-visible ~ .dir__tabs label[for="dir-money"]{outline:3px solid var(--amber);outline-offset:2px}
#dir-decision:checked ~ .dir__panel .acard[data-group="money"],
#dir-money:checked ~ .dir__panel .acard[data-group="decision"]{display:none}

/* article cards -------------------------------------------------------------- */
.acard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,26px)}
.acard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.acard:hover{transform:translateY(-2px);border-color:#BFC4BC;box-shadow:0 18px 36px -26px rgba(20,24,28,.55)}
.acard:focus-within{border-color:var(--petrol)}
.acard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
/* A case that is not written up yet is still worth showing, but it must not
   look clickable: there is no page behind it. */
.acard__link--soon{cursor:default}
.acard__link--soon .acard__title,.acard__link--soon .acard__desc{opacity:.78}
.acard__link--soon .acard__go{color:var(--ink-soft);opacity:.75}
.acard__media{display:block;aspect-ratio:16/10;overflow:hidden;background:#EDEFEA}
.acard__media svg{width:100%;height:100%;display:block}
.acard__media .th{font-family:"Inter";font-size:13px;fill:var(--ink-soft)}
.acard__body{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1}
.acard__meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft)}
.acard__category{font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol)}
.acard__category::after{content:"·";margin-left:10px;color:#BFC4BC}
.acard__title{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(20px,2.1vw,23px);
  line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.acard:hover .acard__title{color:var(--petrol)}
.acard__desc{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0}
.acard__go{margin-top:auto;padding-top:14px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;
  color:var(--petrol)}

/* tools list ----------------------------------------------------------------- */
.tools{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tool{display:grid;gap:8px;background:var(--card);padding:26px 28px;text-decoration:none;color:inherit;
  transition:background .15s ease}
.tool:hover{background:var(--card-hi)}
.tool--pending{opacity:.78}
.tool__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tool__cat{font-family:"Inter";font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.tool__status{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:5px 10px;border-radius:999px}
.tool__status--live{background:#DFF1EF;color:#07504C}
.tool__status--members{background:#F6EEDF;color:#7E4705}
.tool__status--soon{background:#E9EBE6;color:#4A5158}
.tool__name{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(21px,2.2vw,25px);letter-spacing:-.02em}
.tool:hover .tool__name{color:var(--petrol)}
.tool__desc{color:var(--ink-soft);font-size:16.5px;max-width:70ch}
.tools__disclaimer{margin-top:28px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);max-width:80ch}

/* guide clusters -------------------------------------------------------------- */
.cluster{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,3vw,46px);
  padding:clamp(30px,4vw,46px) 0;border-top:1px solid var(--line)}
.cluster:last-of-type{border-bottom:1px solid var(--line)}
.cluster__cover .vol{display:block}
.cluster__cover .cover-n{visibility:hidden}
.cluster__heading{font-size:clamp(24px,2.8vw,32px)}
.cluster__lede{color:var(--ink-soft);font-size:17px;margin:10px 0 24px;max-width:56ch}
.cluster__grid{display:grid;gap:14px}
.acard--part .acard__body{padding:20px 22px;gap:7px}
.acard--part .acard__title{font-size:clamp(18px,1.9vw,20px)}
.acard--part .acard__desc{font-size:15.5px}
.acard--part .acard__go{padding-top:10px}

/* callouts and opt in headings, spaced and aligned ----------------------------- */
.callout{line-height:1.45;max-width:46ch;white-space:normal;padding:10px 18px;margin-bottom:24px}
.callout-dark{margin-bottom:20px}
.getblock h2{margin-bottom:4px}
.get-copy > p{margin-top:16px}
.get-list{margin-top:22px}
.get-form .field:first-of-type{margin-top:2px}

@media (max-width:860px){
  .acard-grid{grid-template-columns:1fr}
  .cluster{grid-template-columns:1fr}
  .cluster__cover{max-width:260px}
  .tool{padding:22px 20px}
  .tool__head{flex-wrap:wrap}
}

/* ===========================================================================
   V7: launch directory cards, the project renders carried over, concept books.
   =========================================================================== */
/* the illustration variables the copied renders expect */
.lcard__media,.proj__media{--color-accent:#0F6E6A;--color-emphasis:#B4670A}
.prender{display:block;width:100%;height:100%}
.prender__sky-top{stop-color:color-mix(in srgb,var(--color-accent) 26%,#f3efe6)}
.prender__sky-mid{stop-color:color-mix(in srgb,var(--color-accent) 12%,#f7f3ec)}
.prender__sky-low{stop-color:color-mix(in srgb,var(--color-emphasis) 14%,#fbf7f0)}
.prender__glow{fill:color-mix(in srgb,var(--color-emphasis) 30%,transparent);filter:blur(18px)}
.prender__haze-out{stop-color:color-mix(in srgb,var(--color-accent) 3%,transparent)}
.prender__haze-in{stop-color:color-mix(in srgb,#fbf7f0 78%,transparent)}
.prender__far rect{fill:color-mix(in srgb,var(--color-accent) 34%,#cfd6d2)}
.prender__tower-lit{stop-color:color-mix(in srgb,var(--color-accent) 22%,#ffffff)}
.prender__tower-mid{stop-color:color-mix(in srgb,var(--color-accent) 55%,#e8eae4)}
.prender__tower-shade{stop-color:color-mix(in srgb,var(--color-accent) 78%,#93a09a)}
.prender__win{stroke:color-mix(in srgb,var(--color-emphasis) 55%,#fff6e4);stroke-width:1.6;stroke-linecap:round}
.prender__podium{fill:color-mix(in srgb,var(--color-accent) 62%,#dfe3dd)}
.prender__water-top{stop-color:color-mix(in srgb,var(--color-accent) 46%,#cfd8d4)}
.prender__water-low{stop-color:color-mix(in srgb,var(--color-accent) 70%,#9fb0aa)}
.prender__reflection rect{fill:color-mix(in srgb,var(--color-accent) 40%,#ffffff);opacity:0.22}
.prender__ripple{stroke:color-mix(in srgb,#ffffff 70%,transparent);stroke-width:1.2;stroke-linecap:round;opacity:0.35}
.prender__trees{fill:color-mix(in srgb,var(--color-accent) 82%,#4d5f58)}
/* launch cards --------------------------------------------------------------- */
.lcard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)}
.lcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.lcard:hover{transform:translateY(-2px);border-color:#BFC4BC;box-shadow:0 18px 36px -26px rgba(20,24,28,.55)}
.lcard__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#EDEFEA}
.lcard__media > svg{width:100%;height:100%;display:block}
.lcard__plate{position:absolute;top:12px;left:12px;z-index:2;font-family:"JetBrains Mono",monospace;font-size:12px;
  font-weight:700;color:#fff;background:rgba(20,24,28,.72);border-radius:6px;padding:4px 9px;font-variant-numeric:tabular-nums}
.lcard__scrim{position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(20,24,28,.42))}
.lcard__badge{position:absolute;top:12px;right:12px;z-index:2}
.pickbadge{display:inline-flex;align-items:center;gap:6px;background:rgba(20,24,28,.86);color:#FFE1A8;
  border-radius:999px;padding:5px 11px 5px 8px;font-size:11.5px;font-weight:600}
.pickbadge .pickbadge__seal{width:14px;height:14px;flex:none;fill:none;stroke:#FFE1A8;stroke-width:1.4}
.pickbadge__tick{stroke:#FFE1A8}
.lcard__video{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(20,24,28,.78);color:#fff;border-radius:999px;padding:5px 11px;font-family:"JetBrains Mono",monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lcard__body{display:flex;flex-direction:column;gap:9px;padding:22px 22px 24px;flex:1}
.lcard__date{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-soft);margin:0;font-variant-numeric:tabular-nums}
.lcard__name{font-size:clamp(20px,2.1vw,23px);margin:0}
.lcard__name a{text-decoration:none;color:inherit}
.lcard:hover .lcard__name a{color:var(--petrol)}
.lcard__desc{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.lcard__reason{font-size:14.5px;line-height:1.6;color:#6B4A14;background:#FBF4EC;border-left:2px solid var(--amber);
  border-radius:0 8px 8px 0;padding:12px 14px;margin:4px 0 0}
.lcard__chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:6px 0 0}
.lcard__chips .chip{flex:0 0 auto;white-space:nowrap;list-style:none;font-size:11.5px;font-weight:500;
  letter-spacing:.02em;color:var(--ink-soft);background:#E9EBE6;border-radius:6px;padding:4px 8px}
.lcard__chips .chip--district{font-family:"JetBrains Mono",monospace;font-weight:700;color:#07504C;background:#DFF1EF}
.lcard__chips .chip--units{color:#7E4705;background:#F6EEDF}
.lcard__cta{margin-top:auto;padding-top:14px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--petrol)}

/* filter rows ---------------------------------------------------------------- */
.dir__filters{display:grid;gap:12px}
.dir__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dir__label{font-family:"Inter";font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);min-width:58px}
.dir__pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;font-size:14.5px;font-weight:500;
  color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.dir__pill:hover{border-color:var(--petrol);color:var(--ink)}
#show-all:checked ~ .dir__filters label[for=show-all],
#show-picks:checked ~ .dir__filters label[for=show-picks],
#show-previews:checked ~ .dir__filters label[for=show-previews],
#show-reviews:checked ~ .dir__filters label[for=show-reviews],
#region-all:checked ~ .dir__filters label[for=region-all],
#region-core:checked ~ .dir__filters label[for=region-core],
#region-outside:checked ~ .dir__filters label[for=region-outside]{background:var(--petrol);border-color:var(--petrol);color:#fff}
#show-picks:checked ~ .dir__panel .lcard[data-pickflag=no],
#show-previews:checked ~ .dir__panel .lcard[data-show=review],
#show-reviews:checked ~ .dir__panel .lcard[data-show=preview],
#region-core:checked ~ .dir__panel .lcard[data-region=outside],
#region-outside:checked ~ .dir__panel .lcard[data-region=core]{display:none}
#dir-projects:checked ~ .dir__tabs label[for=dir-projects],
#dir-analysis:checked ~ .dir__tabs label[for=dir-analysis]{background:var(--ink);border-color:var(--ink);color:#fff}
#dir-projects:checked ~ .dir__panel--analysis,
#dir-analysis:checked ~ .dir__panel--projects,
#dir-analysis:checked ~ .dir__filters{display:none}
.dir__empty{display:none;color:var(--ink-soft);font-size:16px;margin:26px 0 0}
.dir__empty--shown{display:block}

/* project page --------------------------------------------------------------- */
.proj{max-width:860px}
.proj__back{margin:0 0 18px;font-size:14.5px}
.proj__back a{color:var(--petrol);font-weight:600;text-decoration:none}
.proj h1{font-size:clamp(32px,4.4vw,48px);margin-bottom:14px}
.proj__chips{margin-bottom:22px}
.proj__media{border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:#EDEFEA}
.proj__media svg{width:100%;height:100%;display:block}
.proj__lede{font-size:clamp(17.5px,2vw,20px);color:var(--ink-soft);margin:26px 0 0;max-width:68ch}
.pick-note{margin-top:26px;background:#FBF4EC;border:1px solid #E7CDAE;border-radius:14px;padding:22px 24px}
.pick-note h2{font-size:19px;margin-bottom:8px;color:#7E4705}
.pick-note p{margin:0;color:#6B4A14;font-size:16.5px;max-width:66ch}
.proj__pending{margin-top:34px;background:var(--ink);color:var(--on-ink);border-radius:16px;padding:28px 30px}
.proj__pending h2{color:#fff;font-size:22px;margin-bottom:10px}
.proj__pending p{color:var(--on-ink-dim);font-size:16.5px;margin:0 0 22px;max-width:62ch}

/* case studies and guides ----------------------------------------------------- */
.group-h{font-size:clamp(22px,2.6vw,28px);margin:clamp(34px,4vw,48px) 0 20px}
.group-h:first-of-type{margin-top:0}
.acard__media--case{display:flex;align-items:flex-end;padding:18px;background:linear-gradient(160deg,#1C2126,#0A4F4C)}
.case-year-badge{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;color:#FFE1A8;
  background:rgba(0,0,0,.3);border-radius:8px;padding:6px 12px;font-variant-numeric:tabular-nums}

/* concept books: heading on top, cover and its parts in one line ---------------- */
.cbook{padding:clamp(30px,4vw,44px) 0;border-top:1px solid var(--line)}
.cbook:last-of-type{border-bottom:1px solid var(--line)}
.cbook__head h2{font-size:clamp(24px,2.8vw,32px)}
.cbook__head p{color:var(--ink-soft);font-size:17px;margin:10px 0 0;max-width:62ch}
.cbook__row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,1.08fr));gap:clamp(14px,1.8vw,20px);
  margin-top:26px;align-items:stretch}
.cbook__cover{display:block}
.cbook__cover .cover{height:100%;min-height:300px}
.cbook__row .acard--part{height:100%}

@media (max-width:1100px){
  .lcard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbook__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbook__cover{grid-column:1/-1;max-width:260px}
}
@media (max-width:760px){
  .lcard-grid,.cbook__row{grid-template-columns:1fr}
  .dir__label{min-width:100%}
}

/* ===========================================================================
   V8: alignment and spacing fixes found by measuring, plus the case strip.
   =========================================================================== */
/* The hero photo sat 40px inside the text column once the grid collapsed. */
@media (max-width:1040px){
  .stage-photo img{margin:0}
  .stage-actions{margin-bottom:4px}
  .stage-photo{padding-top:8px}
}
/* `.callout` is a <p>, so `.get-copy > p` was styling the chip as well as the lede. */
.get-copy > p{margin-top:0}
.get-copy > .callout{margin:0 0 20px}
.get-copy h2 + p{margin-top:18px}
.getblock h2{margin-bottom:0}

/* case study strip ----------------------------------------------------------- */
.steps-strip{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);padding:0;margin:40px 0 0}
.step{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:16px;padding:20px 20px 24px;
  display:flex;flex-direction:column}
.step-art{background:rgba(255,255,255,.03);border-radius:10px;padding:10px;margin-bottom:18px}
.step-art svg{width:100%;height:auto;display:block}
.step-n{font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);margin:0 0 10px;font-variant-numeric:tabular-nums}
.step-fig{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(28px,3.2vw,36px);
  letter-spacing:-.03em;color:#fff;margin:0 0 10px;font-variant-numeric:tabular-nums}
.step-say{color:var(--on-ink-dim);font-size:15.5px;line-height:1.55;margin:0}
.step-note{color:#8E9892;font-size:13.5px;margin:22px 0 0;max-width:80ch}
.results .story-cta{margin-top:30px}

@media (max-width:1040px){
  .steps-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .steps-strip{grid-template-columns:1fr}
}

/* A <figure> carries a 40px UA margin, which is why the hero photo sat inside
   the text column once the grid collapsed. */
.stage-photo{margin:0}
@media (max-width:1040px){
  .stage-grid{gap:18px}
  .stage-copy{padding-bottom:10px}
  .stage-photo{padding-top:0}
}