/* ==========================================================================
   DUCK IS A DUCK - Strategic Advisors
   Chalkboard × enterprise. Reference: 03_ASSETS/01_HERO/homepage_reference.png
   Serif: Lora. Sans: Inter. Gold used sparingly.
   ========================================================================== */

:root{
  --board:#11110F;
  --charcoal:#1B1A17;
  --chalk:#F4F0E7;
  --cream:#F0EBDD;
  --warm:#E7DFD0;
  --graphite:#5B5850;
  --rule:#B9B1A3;
  --rule-dark:rgba(244,240,231,.14);
  --gold:#C89A46;
  --gold-dim:#9C7D3E;
  --serif:"Lora","EB Garamond",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --max:1360px;
  --gutter:clamp(24px,5vw,72px);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--board);color:var(--chalk);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
::selection{background:var(--gold);color:var(--board)}

main{overflow-x:clip}

/* ---------- shells ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(56px,7vw,104px)}
/* content-visibility:auto was trialled here and removed: measured across four
   pages it changed FCP by less than run-to-run noise, because the real costs
   were the 2.4MB of imagery and the third-party font round trip, both of which
   are now gone. It also collapsed offscreen section heights, which hid genuine
   text-overlap bugs from the layout QA. Not worth the risk for no gain. */
.sec-tight{padding-block:clamp(44px,5vw,72px)}

/* environments */
.env-board{
  background:
    linear-gradient(rgba(17,17,15,.84),rgba(17,17,15,.9)),
    url("../assets/tex/chalk_dust.webp"),
    url("../assets/tex/board_texture.webp");
  background-size:auto,460px,900px;color:var(--chalk);
}
.env-charcoal{background:var(--charcoal);color:var(--chalk)}
.env-cream{
  background:
    linear-gradient(rgba(240,235,221,.92),rgba(240,235,221,.9)),
    url("../assets/tex/paper_texture.webp");
  background-size:auto,760px;color:var(--board);
}
.env-warm{background:var(--warm);color:var(--board)}

/* ---------- type ---------- */
.display{font-size:clamp(52px,7.6vw,112px);line-height:1.04;letter-spacing:-.02em}
.h1{font-size:clamp(40px,5.4vw,76px);line-height:1.07}
.h2{font-size:clamp(32px,3.8vw,54px);line-height:1.12}
.h3{font-size:clamp(23px,2.4vw,34px);line-height:1.2}
.lede{font-size:clamp(16.5px,1.3vw,19px);line-height:1.7;max-width:56ch;opacity:.82}
.serif-italic{font-family:var(--serif);font-style:italic}

.kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 clamp(16px,2vw,26px);
}
.env-cream .kicker,.env-warm .kicker{color:#8A6A2E}
.env-cream .tlink.gold-link,.env-warm .tlink.gold-link{color:#8A6A2E}
.env-cream .serif-italic[style*="--gold"],.env-warm .serif-italic[style*="--gold"]{color:#8A6A2E}
.gold{color:var(--gold)}

/* short chalk rule under hero headlines */
.chalk-rule{width:74px;height:2px;background:var(--chalk);opacity:.65;border:0;margin:clamp(20px,2.4vw,30px) 0}
.env-cream .chalk-rule,.env-warm .chalk-rule{background:var(--board);opacity:.5}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:13px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  padding:18px 30px;border:1px solid rgba(244,240,231,.55);color:var(--chalk);
  background:transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s;
}
.btn::after{content:"→";font-size:14px;transition:transform .35s var(--ease)}
.btn:hover{background:var(--chalk);color:var(--board);border-color:var(--chalk)}
.btn:hover::after{transform:translateX(5px)}
.env-cream .btn,.env-warm .btn{border-color:rgba(17,17,15,.5);color:var(--board)}
.env-cream .btn:hover,.env-warm .btn:hover{background:var(--board);color:var(--chalk);border-color:var(--board)}
.btn.solid{background:var(--gold);border-color:var(--gold);color:var(--board)}
.btn.solid:hover{background:var(--chalk);border-color:var(--chalk);color:var(--board)}

.tlink{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:8px;
  transition:opacity .3s;
}
.tlink::after{content:"→";font-size:13px;transition:transform .3s var(--ease)}
.tlink:hover{opacity:.7}
.tlink:hover::after{transform:translateX(4px)}
.tlink.gold-link{color:var(--gold)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:clamp(28px,3.2vw,40px)}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset-inline:0;top:0;z-index:120;
  transition:background .4s,box-shadow .4s;
}
.site-head.scrolled{background:rgba(17,17,15,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule-dark)}
.head-in{
  max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);
  height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{color:var(--chalk)}
.logo-name{font-family:var(--serif);font-size:19px;letter-spacing:.24em;line-height:1;white-space:nowrap}
.logo-name small{
  display:block;font-family:var(--sans);font-size:8.5px;font-weight:600;
  letter-spacing:.44em;color:var(--gold);margin-top:6px;
}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.nav a{
  position:relative;font-size:11.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(244,240,231,.72);padding:6px 0;
  transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .35s var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--chalk)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.head-cta{
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid rgba(244,240,231,.55);color:var(--chalk);padding:13px 22px;white-space:nowrap;
  transition:background .3s,color .3s,border-color .3s;
}
.head-cta:hover{background:var(--chalk);color:var(--board);border-color:var(--chalk)}
.burger{
  display:none;width:46px;height:46px;border:1px solid var(--rule-dark);
  background:none;cursor:pointer;position:relative;z-index:120;
}
.burger span{
  position:absolute;left:12px;right:12px;height:1.5px;background:var(--chalk);
  transition:transform .35s var(--ease),opacity .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* light-hero header variant */
.site-head.head-light:not(.scrolled) .logo-name{color:var(--board)}
.site-head.head-light:not(.scrolled) .nav a{color:rgba(17,17,15,.62)}
.site-head.head-light:not(.scrolled) .nav a:hover,
.site-head.head-light:not(.scrolled) .nav a[aria-current]{color:var(--board)}
.site-head.head-light:not(.scrolled) .head-cta{border-color:rgba(17,17,15,.5);color:var(--board)}
.site-head.head-light:not(.scrolled) .head-cta:hover{background:var(--board);color:var(--chalk)}
.site-head.head-light:not(.scrolled) .burger{border-color:rgba(17,17,15,.3)}
.site-head.head-light:not(.scrolled) .burger span{background:var(--board)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:110;background:var(--board);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gutter) 60px;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{
  display:flex;align-items:baseline;gap:18px;
  font-family:var(--serif);font-size:clamp(30px,8vw,42px);color:var(--chalk);
  padding:15px 0;border-bottom:1px solid var(--rule-dark);
  transform:translateY(18px);opacity:0;transition:transform .5s var(--ease),opacity .5s;
}
.mobile-menu.open a{transform:none;opacity:1}
.mobile-menu a i{font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--gold)}
.mobile-menu.open a:nth-child(1){transition-delay:.05s}
.mobile-menu.open a:nth-child(2){transition-delay:.1s}
.mobile-menu.open a:nth-child(3){transition-delay:.15s}
.mobile-menu.open a:nth-child(4){transition-delay:.2s}
.mobile-menu.open a:nth-child(5){transition-delay:.25s}
.mobile-menu.open a:nth-child(6){transition-delay:.3s}

/* ---------- chalk imagery: drawn straight on the surface ---------- */
/* artwork carries baked alpha, so it needs no blend mode to hide a black backdrop */
.chalk-img{}
.paper-img{mix-blend-mode:multiply}
/* fade artwork edges into the board so nothing reads as a boxed image */
.mask-fade{
  -webkit-mask-image:radial-gradient(ellipse 74% 72% at 50% 46%,#000 50%,transparent 78%);
  mask-image:radial-gradient(ellipse 74% 72% at 50% 46%,#000 50%,transparent 78%);
}
.cover-card{border:1px solid var(--rule);background:#fff}
.env-board .cover-card,.env-charcoal .cover-card{border-color:var(--rule-dark);background:transparent}

/* ---------- HERO: home board ---------- */
.hero-board{
  min-height:94svh;display:flex;align-items:center;
  padding-top:110px;padding-bottom:20px;overflow:hidden;position:relative;
}
.hero-grid{
  display:grid;grid-template-columns:1fr .95fr;gap:clamp(32px,4vw,64px);
  align-items:center;width:100%;
}
.hero-sub{
  font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(244,240,231,.8);line-height:1.9;margin:0 0 22px;
}
.hero-body{font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.9;opacity:.8;max-width:46ch}
.hero-line{display:block;overflow:hidden}
.hero-line span{display:block;transform:translateY(110%);animation:heroline 1s var(--ease) forwards}
.hero-line:nth-child(2) span{animation-delay:.12s}
.hero-line:nth-child(3) span{animation-delay:.24s}
@keyframes heroline{to{transform:none}}
.hero-duck{position:relative}
.hero-duck img{width:100%;height:auto;animation:heroart 1.8s var(--ease) both .2s}
@keyframes heroart{from{opacity:0}to{opacity:1}}

/* principles row (part of the board, per reference) */
.principles-label{
  display:flex;align-items:center;gap:26px;
  font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(244,240,231,.75);
  margin-bottom:clamp(30px,3.6vw,48px);
}
.principles-label::before,.principles-label::after{content:"";height:1px;background:var(--rule-dark);flex:1}
.principles-row{display:grid;grid-template-columns:repeat(4,1fr)}
.principle{
  padding:clamp(6px,1.6vw,20px) clamp(18px,2.4vw,38px);
  border-left:1px solid var(--rule-dark);text-align:center;
}
.principle:first-child{border-left:0}
.principle svg{width:52px;height:52px;margin:0 auto 20px;display:block}
.principle svg *{stroke:var(--chalk)}
.principle h3,.principle h2{
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.6;margin-bottom:12px;
}
.principle p{font-size:13.5px;line-height:1.7;opacity:.6;margin:0}

/* ---------- marquee ledger ---------- */
.ledger{
  border-block:1px solid var(--rule-dark);
  padding-block:17px;overflow:hidden;background:var(--charcoal);
}
.ledger-track{display:flex;width:max-content;animation:ledger 46s linear infinite}
.ledger:hover .ledger-track{animation-play-state:paused}
@keyframes ledger{to{transform:translateX(-50%)}}
.ledger span{
  font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(244,240,231,.6);
  padding-inline:32px;white-space:nowrap;position:relative;
}
.ledger span::after{
  content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;
  border:1px solid var(--gold);transform:translateY(-50%) rotate(45deg);
}

/* ---------- premise editorial ---------- */
.premise-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
.premise-grid .sticky{position:sticky;top:120px}
.dropcap::first-letter{
  font-family:var(--serif);font-size:4.1em;line-height:.8;float:left;
  padding:7px 13px 0 0;color:var(--gold-dim);
}
.pull{
  margin:clamp(24px,2.6vw,36px) 0;
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,26px);line-height:1.5;
  color:var(--board);
}
.pull .underline-svg{display:block;margin-top:10px}

/* ---------- chalk draw helpers ---------- */
.draw-path{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.in-view .draw-path{animation:draw 1.3s var(--ease) forwards}
.in-view .draw-path.d2{animation-delay:.3s}
.in-view .draw-path.d3{animation-delay:.6s}
.in-view .draw-path.d4{animation-delay:.9s}
.in-view .draw-path.d5{animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.fade-label{opacity:0;transition:opacity .8s ease .9s}
.in-view .fade-label{opacity:1}
.underline-svg{width:min(230px,58%);height:12px}
.underline-svg path{stroke:var(--gold);stroke-width:2.4;fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.env-board .underline-svg path,.env-charcoal .underline-svg path{stroke:var(--chalk)}

/* hero chalk doodles */
.doodle{position:absolute;pointer-events:none}
.doodle path,.doodle circle{stroke:rgba(244,240,231,.6);stroke-width:2.4;fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.env-cream .doodle path,.env-cream .doodle circle,
.env-warm .doodle path,.env-warm .doodle circle{stroke:rgba(17,17,15,.42)}
.doodle.gold path,.doodle.gold circle{stroke:var(--gold-dim)}

/* ---------- board diagram (home: cost of misreading) ---------- */
.board-diagram{margin-top:clamp(32px,4vw,52px)}
.board-diagram svg{width:100%;height:auto;display:block}
.board-diagram text{font-family:var(--serif)}
.board-diagram .bd-name{font-size:25px;fill:var(--chalk)}
.board-diagram .bd-sub{font-style:italic;font-size:13.5px;fill:rgba(244,240,231,.55)}
.board-diagram .bd-note{font-style:italic;font-size:14px;fill:var(--gold)}
.board-diagram .bd-stroke{stroke:var(--chalk);filter:url(#chalkfx)}
.board-diagram .bd-gold{stroke:var(--gold);filter:url(#chalkfx)}

/* cream variant (advisory) */
.board-diagram.on-paper .bd-name{fill:var(--board)}
.board-diagram.on-paper .bd-sub{fill:var(--graphite)}
.board-diagram.on-paper .bd-note{fill:var(--gold-dim)}
.board-diagram.on-paper .bd-stroke{stroke:var(--board)}
.board-diagram.on-paper .bd-gold{stroke:var(--gold-dim)}

/* ---------- feature split ---------- */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,90px);align-items:center}

/* ---------- full-bleed band with parallax image layer ---------- */
.bleed{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;color:var(--chalk);background:var(--board)}
.bleed-img{
  position:absolute;top:-12%;bottom:-12%;right:-14%;width:88%;
  object-fit:cover;object-position:center;opacity:.5;
}
.bleed .shade{position:absolute;inset:0;background:linear-gradient(95deg,var(--board) 30%,rgba(17,17,15,.55) 68%,rgba(17,17,15,.35))}
.bleed .wrap{position:relative;z-index:1;width:100%}
.bleed.tall{min-height:100svh}

/* ---------- centered section head ---------- */
.sec-head{max-width:780px;margin:0 auto clamp(32px,4vw,56px);text-align:center}
.sec-head .lede{margin-inline:auto}

/* ---------- premise: broadsheet columns, no dead space ---------- */
.premise-cols{columns:2;column-gap:clamp(44px,5vw,84px);max-width:1020px;margin:0 auto}
.premise-cols p{break-inside:avoid;font-size:17px}
.premise-pull{
  max-width:720px;margin:0 auto clamp(28px,3.4vw,44px);text-align:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.2vw,30px);line-height:1.45;
}
.premise-pull .underline-svg{margin:12px auto 0;display:block}

/* ---------- practice grid (what we do) ---------- */
.practice-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--rule);border-top:1px solid var(--rule);
  max-width:1100px;margin:0 auto;
}
.practice-cell{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(26px,3vw,44px);transition:background .35s;position:relative;
}
.practice-cell::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--gold-dim);transition:width .45s var(--ease);
}
.practice-cell:hover{background:rgba(17,17,15,.035)}
.practice-cell:hover::after{width:100%}
.practice-cell i{font-style:italic;font-family:var(--serif);color:var(--gold-dim);font-size:14.5px;display:block;margin-bottom:12px}
.practice-cell h3{font-size:clamp(20px,1.9vw,27px);margin-bottom:8px}
.practice-cell p{font-size:14px;color:var(--graphite);margin:0}

/* ---------- triage (what we hear vs what's true) ---------- */
.triage{display:flex;flex-direction:column;gap:clamp(38px,4.8vw,66px);margin-top:clamp(40px,5vw,64px)}
.triage-item{max-width:760px}
.triage-item:nth-child(even){align-self:flex-end;text-align:right}
.strike{
  position:relative;display:inline-block;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(24px,3vw,44px);line-height:1.25;color:rgba(244,240,231,.5);
}
.strike svg{position:absolute;left:-2%;top:54%;width:104%;height:14px;transform:translateY(-50%);overflow:visible}
.strike svg path{stroke:rgba(244,240,231,.85);stroke-width:3;fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.truth-line{
  display:block;margin-top:16px;
  font-family:var(--serif);font-size:clamp(19px,1.9vw,27px);color:var(--gold);
}
.truth-line::before{content:"\2192\00a0\00a0"}
.triage-item .why{font-size:14px;color:rgba(244,240,231,.5);margin:10px 0 0}

/* ---------- engagement arc (first 30 days) ---------- */
.arc{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(16px,2.4vw,40px);align-items:start;margin-top:clamp(36px,4.4vw,60px)}
.arc-step .days{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold);display:block;margin-bottom:12px}
.arc-step h3{font-size:clamp(22px,2.2vw,32px);margin-bottom:10px}
.arc-step p{font-size:14.5px;color:rgba(244,240,231,.6);margin:0;max-width:34ch}
.env-cream .arc-step p,.env-warm .arc-step p{color:var(--graphite)}
.env-cream .arc-step .days,.env-warm .arc-step .days{color:var(--gold-dim)}
.arc-arrow{width:clamp(44px,5vw,84px);margin-top:14px;flex:none}
.arc-arrow path{stroke:var(--gold-dim);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkfx)}

/* ---------- big quote band ---------- */
.quote-band{text-align:center}
.quote-band .q{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(28px,3.8vw,54px);line-height:1.3;
  max-width:24ch;margin:0 auto;
}
.quote-band .q em{font-style:italic;color:var(--gold-dim)}
.quote-band .attr{
  margin-top:clamp(22px,2.6vw,34px);font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--graphite);
}

/* ---------- story marks (About): full-width alternating timeline ---------- */
.marks{position:relative;display:flex;flex-direction:column;gap:clamp(36px,4.4vw,60px);margin-top:clamp(36px,4.4vw,60px)}
.marks::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:var(--rule);transform:translateX(-50%)}
.mark{position:relative;width:calc(50% - clamp(34px,4.4vw,64px))}
.mark::before{
  content:"";position:absolute;top:10px;width:12px;height:12px;
  border:1.6px solid var(--gold-dim);border-radius:50%;background:var(--cream);
}
.mark:nth-child(odd){align-self:flex-start;text-align:right}
.mark:nth-child(odd)::before{right:calc(-1*clamp(34px,4.4vw,64px) - 6px)}
.mark:nth-child(even){align-self:flex-end;text-align:left}
.mark:nth-child(even)::before{left:calc(-1*clamp(34px,4.4vw,64px) - 6px)}
.mark h3{font-size:clamp(23px,2.4vw,34px);margin-bottom:8px}
.mark p{font-size:15px;color:var(--graphite);margin:0}

/* ---------- the standard (dense three-column band) ---------- */
.standard-list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,56px);margin-top:clamp(26px,3.2vw,40px);
}
.standard-item{border-top:1px solid var(--rule);padding-top:clamp(16px,2vw,24px)}
.standard-item .line{font-family:var(--serif);font-size:clamp(27px,2.6vw,40px);line-height:1.15}
.standard-item .line b{font-weight:500;color:var(--gold-dim)}
.standard-item p{font-size:14.5px;color:var(--graphite);margin:12px 0 0}
@media (max-width:860px){.standard-list{grid-template-columns:1fr}}

/* ---------- field notes (home intelligence - no covers, no carousel) ---------- */
.notes{display:flex;flex-direction:column;gap:clamp(36px,4.6vw,64px);margin-top:clamp(36px,4.4vw,60px)}
.note{max-width:680px;position:relative;padding-left:clamp(24px,3vw,44px)}
.note::before{
  content:"";position:absolute;left:0;top:.4em;bottom:.3em;width:2px;
  background:linear-gradient(var(--gold),transparent);opacity:.8;
}
.note:nth-child(2){align-self:center}
.note:nth-child(3){align-self:flex-end}
.note .series{
  font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:12px;
}
.note h3{font-size:clamp(24px,2.9vw,40px);line-height:1.2;font-style:italic;font-weight:400}
.note .note-line{font-size:14.5px;color:rgba(244,240,231,.55);margin:12px 0 0;max-width:52ch}
.note a{display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.note a::after{content:"→";transition:transform .3s var(--ease)}
.note a:hover::after{transform:translateX(4px)}

/* ---------- when-to-call checklist ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px) clamp(36px,4.6vw,72px);margin-top:clamp(32px,4vw,52px)}
.check{display:flex;gap:20px;align-items:flex-start}
.check svg{width:34px;height:34px;flex:none;margin-top:3px}
.check svg path{stroke:var(--gold-dim);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkfx)}
.check h3{font-size:clamp(19px,1.8vw,25px);margin-bottom:6px}
.check p{font-size:14.5px;color:var(--graphite);margin:0;max-width:40ch}

/* ---------- archive grid (Intelligence - static, no carousel) ---------- */
.arch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.6vw,56px)}
.arch-item{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(18px,2.2vw,32px);align-items:center}
.arch-item img{width:100%;transition:transform .45s var(--ease)}
.arch-item:hover img{transform:translateY(-6px)}
.arch-item h3{font-size:clamp(19px,1.8vw,26px);line-height:1.25;margin-bottom:8px}
.arch-item .meta{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}

/* ---------- shelf ---------- */
.shelf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:clamp(26px,3.4vw,44px)}
.shelf{
  display:flex;gap:clamp(20px,2.6vw,38px);overflow-x:auto;
  padding-bottom:20px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
}
.shelf::-webkit-scrollbar{height:3px}
.shelf::-webkit-scrollbar-thumb{background:var(--gold)}
.shelf-item{flex:0 0 clamp(250px,25vw,350px);scroll-snap-align:start}
.shelf-item img{width:100%;transition:transform .5s var(--ease)}
.shelf-item:hover img{transform:translateY(-8px)}
.shelf-item h3{font-size:clamp(18px,1.6vw,23px);margin:16px 0 6px;line-height:1.3}
.shelf-item .meta{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
.env-board .shelf-item .meta,.env-charcoal .shelf-item .meta{color:rgba(244,240,231,.5)}

/* ---------- closing ---------- */
.closing{text-align:center}
.closing .crosshair{width:70px;height:70px;margin:0 auto clamp(22px,2.6vw,34px)}
.crosshair circle,.crosshair line{stroke:var(--gold);stroke-width:1.6;fill:none;filter:url(#chalkfx)}
.closing .actions{justify-content:center}
.closing .lede{margin-inline:auto}

/* ---------- method rail (Advisory) ---------- */
.method-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(40px,5vw,100px)}
.method-rail{position:sticky;top:120px;align-self:start}
.rail-count{font-family:var(--serif);font-size:clamp(56px,6vw,92px);line-height:1;color:var(--gold)}
.rail-count small{font-size:.36em;color:rgba(244,240,231,.4)}
.rail-line{position:relative;width:1px;height:150px;background:var(--rule-dark);margin-top:24px}
.rail-line i{position:absolute;top:0;left:0;width:1px;height:0;background:var(--gold);transition:height .4s ease}
.step{
  padding:clamp(48px,6vw,92px) 0;border-bottom:1px solid var(--rule-dark);
  display:grid;grid-template-columns:76px 1fr;gap:clamp(18px,2.6vw,38px);align-items:start;
}
.step:first-child{padding-top:0}
.step:last-child{border-bottom:0}
.step-num{position:relative;width:58px;height:58px}
.step-num svg{position:absolute;inset:0;width:100%;height:100%}
.step-num svg circle{fill:none;stroke:var(--chalk);stroke-width:1.4;filter:url(#chalkfx)}
.step-num b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-weight:500;font-size:18px;color:var(--chalk);
}
.step h3{font-size:clamp(22px,2.2vw,31px);margin-bottom:9px}
.step p{max-width:52ch;color:rgba(244,240,231,.62);margin:0}
.step .aside-note{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:15px;margin-top:9px;display:block}

/* ---------- directory ---------- */
.directory{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,90px)}
.dir-item{padding:22px 0;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;gap:18px;transition:padding-left .35s var(--ease)}
.dir-item:hover{padding-left:10px}
.dir-item b{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.8vw,24px);flex:0 1 auto;min-width:0}
.dir-item span{font-size:13.5px;color:var(--graphite)}

/* ---------- sector explorer ---------- */
.explorer{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,90px);align-items:start}
.sector-list{display:flex;flex-direction:column}
.sector-tab{
  display:flex;align-items:baseline;gap:18px;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--serif);font-size:clamp(20px,1.9vw,28px);color:rgba(244,240,231,.38);
  padding:15px 0;border-bottom:1px solid var(--rule-dark);
  transition:color .35s,padding-left .35s var(--ease);
}
.sector-tab i{font-style:italic;font-family:var(--serif);font-size:14px;color:var(--gold);opacity:0;transition:opacity .3s}
.sector-tab:hover{color:rgba(244,240,231,.75)}
.sector-tab[aria-selected="true"]{color:var(--chalk);padding-left:12px}
.sector-tab[aria-selected="true"] i{opacity:1}
.sector-panel{border-left:1px solid var(--rule-dark);padding:clamp(6px,1vw,10px) 0 clamp(6px,1vw,10px) clamp(28px,3.4vw,52px);min-height:300px}
.sector-panel h3{font-size:clamp(25px,2.6vw,37px);margin-bottom:14px}
.sector-panel .claim{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:clamp(16.5px,1.4vw,20px);margin-bottom:16px}
.sector-panel p{color:rgba(244,240,231,.65);max-width:52ch}
.panel-fade{animation:panelfade .5s var(--ease)}
@keyframes panelfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- question board (Industries): notes placed on a worked board ---------- */
.qboard{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,5.6vw,76px) clamp(44px,6vw,96px);
  margin-top:clamp(44px,5.4vw,72px);
}
.qb{transform:rotate(var(--rot,0deg))}
.qb .q-no{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold-dim);display:block;margin-bottom:10px}
.qb h3{
  font-family:var(--serif);font-style:italic;font-weight:400;
  line-height:1.28;font-size:var(--qs,clamp(24px,2.6vw,38px));
}
.qb:nth-child(2){margin-top:clamp(28px,4.6vw,72px)}
.qb:nth-child(3){margin-left:clamp(0px,4vw,64px)}
.qb:nth-child(4){margin-top:clamp(-8px,-1vw,-16px);margin-right:clamp(0px,3vw,48px)}
.qb:nth-child(5){grid-column:1/-1;justify-self:center;text-align:center;max-width:720px;margin-top:clamp(4px,1vw,16px)}
.qb .underline-svg{margin-top:14px}
.qb:nth-child(5) .underline-svg{margin-inline:auto}
.ring{position:relative;display:inline-block;padding:0 .1em}
.ring svg{position:absolute;inset:-.3em -.42em;width:calc(100% + .84em);height:calc(100% + .6em);overflow:visible}
.ring svg path{stroke:var(--gold-dim);stroke-width:2.6;fill:none;stroke-linecap:round;filter:url(#chalkfx)}

/* ---------- masthead (Intelligence): newspaper nameplate, full height ---------- */
.masthead{
  min-height:100svh;display:flex;align-items:center;position:relative;
  padding-top:110px;padding-bottom:clamp(36px,4.4vw,64px);text-align:center;
}
.masthead .wrap{width:100%}
.masthead .scroll-cue{color:rgba(17,17,15,.45)}
.masthead .scroll-cue::after{background:linear-gradient(var(--gold-dim),transparent)}
.masthead .display{font-size:clamp(58px,9.6vw,150px)}
.masthead .lede{margin-inline:auto}
.nameplate-rules{max-width:960px;margin:clamp(28px,3.4vw,44px) auto 0}
.nameplate-rules .thin{height:1px;background:var(--board);opacity:.55}
.nameplate-rules .thick{height:3px;background:var(--board);opacity:.85}
.masthead-meta{
  display:flex;gap:clamp(16px,2.6vw,36px);align-items:center;justify-content:center;flex-wrap:wrap;
  padding:14px 0;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--graphite);
}

/* ---------- series index (compact two-column) ---------- */
.series-index{
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(48px,6vw,96px);
  max-width:1020px;margin:clamp(30px,3.8vw,48px) auto 0;
}
.si-item{
  display:grid;grid-template-columns:44px 1fr;gap:2px 16px;align-items:baseline;
  padding:clamp(17px,2.1vw,25px) 0;border-top:1px solid var(--rule-dark);
  transition:padding-left .3s var(--ease);
}
.si-item:hover{padding-left:8px}
a.si-item{grid-template-columns:44px 1fr auto}
a.si-item::after{content:"\2192";grid-row:1/3;align-self:center;color:var(--gold);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s var(--ease)}
a.si-item:hover::after{opacity:1;transform:none}
.si-item i{grid-row:1/3;font-style:italic;font-family:var(--serif);color:var(--gold);font-size:14.5px}
.si-item h3{font-size:clamp(20px,1.8vw,26px);transition:color .3s}
.si-item:hover h3{color:var(--gold)}
.si-item p{grid-column:2;font-size:13.5px;color:rgba(244,240,231,.5);margin:0}

/* series index */
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--rule-dark)}
.series-cell{
  border-right:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);
  padding:clamp(24px,2.6vw,38px);transition:background .35s;
}
.series-cell:nth-child(-n+3){border-top:1px solid var(--rule-dark)}
.series-cell:hover{background:rgba(244,240,231,.04)}
.series-cell i{font-style:italic;font-family:var(--serif);color:var(--gold);font-size:14px;display:block;margin-bottom:12px}
.series-cell h3{font-size:clamp(19px,1.7vw,24px);margin-bottom:7px}
.series-cell p{font-size:13.5px;color:rgba(244,240,231,.55);margin:0}

/* ---------- manifesto ---------- */
.manifesto-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,80px);align-items:center}
.manifesto p{
  font-family:var(--serif);font-size:clamp(19px,2vw,27px);line-height:1.55;
  margin-bottom:1.3em;
}
.manifesto p b{font-weight:500;color:var(--gold-dim)}
.manifesto .sig{
  display:flex;align-items:center;gap:16px;margin-top:clamp(28px,3vw,42px);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--graphite);
}
.manifesto .sig::before{content:"";width:52px;height:1px;background:var(--gold)}

/* beliefs */
.beliefs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px) clamp(40px,5vw,90px)}
.belief:nth-child(even){transform:translateY(clamp(20px,3vw,48px))}
.belief h3{font-size:clamp(24px,2.6vw,36px);margin-bottom:12px}
.belief .underline-svg{margin-bottom:14px}
.belief p{color:rgba(244,240,231,.62);max-width:40ch;margin:0}

/* stats */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr)}
.stat-cell{padding:clamp(22px,2.8vw,42px);text-align:center;position:relative}
.stat-cell+.stat-cell::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--rule)}
.stat-cell .n{font-family:var(--serif);font-size:clamp(50px,5.8vw,92px);line-height:1;color:var(--board)}
.stat-cell .n em{font-style:normal;color:var(--gold)}
.stat-cell p{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);margin:14px 0 0}

/* ---------- conversation ---------- */
.convo-hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:86svh;padding-top:84px}
.convo-hero .copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,5vw,80px) var(--gutter)}
.convo-hero .art{position:relative;overflow:hidden}
.convo-hero .art img{width:100%;height:100%;object-fit:cover;object-position:100% center}
.convo-hero .art::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--board),transparent 45%);z-index:1}
.qloop{width:58px;height:76px;margin-bottom:22px}
.qloop path,.qloop circle{stroke:var(--gold);stroke-width:2.2;fill:none;stroke-linecap:round;filter:url(#chalkfx)}

.form-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,100px);align-items:start}
.field{margin-bottom:32px}
.field label{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--graphite);margin-bottom:10px;
}
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--rule);background:transparent;
  font-family:var(--serif);font-size:22px;color:var(--board);
  padding:5px 0 12px;outline:none;border-radius:0;transition:border-color .3s;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.45}
.field input:focus,.field textarea:focus{border-bottom-color:var(--gold)}
.assure{border-top:1px solid var(--rule);padding-top:22px;margin-top:6px}
.assure ul{margin:0;padding:0}
.assure li{
  list-style:none;font-size:14.5px;color:var(--graphite);
  padding:9px 0 9px 24px;position:relative;
}
.assure li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:1px;background:var(--gold)}
.sent-banner{
  display:none;background:var(--gold);color:var(--board);
  padding:15px var(--gutter);font-size:14px;font-weight:500;text-align:center;
  position:relative;z-index:5;
}
.sent-banner.show{display:block}

/* ---------- subscribe ---------- */
.sub-form{
  display:flex;justify-content:center;align-items:stretch;
  max-width:500px;margin:clamp(24px,3vw,38px) auto 0;
}
.sub-form input[type="email"]{
  flex:1;min-width:0;background:transparent;border:1px solid var(--rule-dark);border-right:0;
  color:var(--chalk);font-family:var(--serif);font-size:17px;padding:0 20px;outline:none;
  transition:border-color .3s;border-radius:0;
}
.sub-form input[type="email"]:focus{border-color:var(--gold)}
.sub-form input::placeholder{color:rgba(244,240,231,.35);font-style:italic}

/* ---------- footer ---------- */
.site-foot{background:var(--charcoal);color:var(--chalk);border-top:1px solid var(--rule-dark)}
.foot-main{
  max-width:var(--max);margin:0 auto;padding:clamp(52px,6vw,84px) var(--gutter) clamp(36px,4vw,52px);
  display:grid;grid-template-columns:1.5fr .65fr .65fr .8fr;gap:clamp(32px,4vw,60px);
}
.foot-main h3{font-size:clamp(26px,2.8vw,38px);line-height:1.16;max-width:380px;margin:16px 0 24px}
.foot-title{font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:12px}
.site-foot li a{color:rgba(244,240,231,.66);font-size:14.5px;transition:color .3s}
.site-foot li a:hover{color:var(--gold)}
.foot-line{color:rgba(244,240,231,.55);font-size:14.5px;line-height:1.8}
.foot-base{
  max-width:var(--max);margin:0 auto;padding:22px var(--gutter) 32px;
  border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,231,.4);
}

/* ---------- word run (signals written on the board) ---------- */
.word-run{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,2.2vw,32px);line-height:1.9;
  margin-top:clamp(20px,2.6vw,32px);max-width:24ch;
}
.word-run em{font-style:normal;color:var(--gold);padding:0 .35em;font-size:.75em;vertical-align:.12em}

/* ---------- focus run (includes, written inline) ---------- */
.focus-run{
  font-size:14px;line-height:2.1;letter-spacing:.04em;
  color:var(--graphite);margin-top:clamp(16px,2vw,26px);
}
.focus-run em{font-style:normal;color:var(--rule);padding:0 9px}
.env-board .focus-run,.env-charcoal .focus-run{color:rgba(244,240,231,.55)}
.env-board .focus-run em,.env-charcoal .focus-run em{color:rgba(244,240,231,.3)}

/* ---------- checked grid (assessment scope) ---------- */
.check-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px) clamp(28px,3.6vw,56px);
  margin-top:clamp(22px,2.8vw,36px);
}
.check-min{display:flex;gap:13px;align-items:baseline}
.check-min svg{width:19px;height:19px;flex:none;transform:translateY(3px)}
.check-min svg path{stroke:var(--gold-dim);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkfx)}
.check-min span{font-size:15px;color:#3f3d37}
.env-board .check-min span,.env-charcoal .check-min span{color:rgba(244,240,231,.7)}

/* ---------- practice grid: dark variant ---------- */
.practice-grid.two-up{max-width:none;grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.practice-grid.two-up{grid-template-columns:1fr}}
.practice-grid.dark{border-color:var(--rule-dark)}
.practice-grid.dark .practice-cell{border-color:var(--rule-dark)}
.practice-grid.dark .practice-cell:hover{background:rgba(244,240,231,.04)}
.practice-grid.dark .practice-cell i{color:var(--gold)}
.practice-grid.dark .practice-cell p{color:rgba(244,240,231,.55)}
.practice-grid.dark .practice-cell::after{background:var(--gold)}

/* ---------- flow grid (ghost numerals) ---------- */
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3.6vw,56px);margin-top:clamp(36px,4.4vw,60px)}
.flow-step{position:relative;padding-top:clamp(36px,4vw,54px)}
.flow-step .gn{
  position:absolute;top:0;left:-6px;
  font-family:var(--serif);font-size:clamp(64px,6.4vw,104px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(17,17,15,.22);
  pointer-events:none;
}
.flow-step:hover .gn{-webkit-text-stroke-color:var(--gold-dim)}
.flow-step h3{font-size:clamp(21px,2vw,28px);margin-bottom:9px;position:relative}
.flow-step p{font-size:14.5px;color:var(--graphite);margin:0;position:relative}

/* ---------- link strip ---------- */
.linkstrip{
  display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,20px) clamp(28px,4vw,60px);
  margin-top:clamp(20px,2.6vw,32px);
}
.linkstrip a{
  display:inline-flex;align-items:baseline;gap:12px;
  font-family:var(--serif);font-size:clamp(18px,1.7vw,24px);
  color:rgba(244,240,231,.8);padding:6px 0;
  border-bottom:1px solid var(--rule-dark);
  transition:color .3s,border-color .3s;
}
.linkstrip a:hover{color:var(--gold);border-color:var(--gold)}
.linkstrip a i{font-style:italic;font-size:13.5px;color:var(--gold)}

/* ---------- swap lines (misdiagnosis: A is actually B) ---------- */
.swaps{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,32px);margin-top:clamp(28px,3.4vw,44px)}
.swap{display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.swap .from{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,32px);color:var(--graphite)}
.swap .swap-arrow{width:clamp(40px,4.6vw,72px);flex:none;align-self:center}
.swap .swap-arrow path{stroke:var(--gold-dim);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkfx)}
.swap .to{font-family:var(--serif);font-size:clamp(21px,2.3vw,34px);color:var(--board)}
.env-board .swap .from,.env-charcoal .swap .from{color:rgba(244,240,231,.5)}
.env-board .swap .to,.env-charcoal .swap .to{color:var(--gold)}
.swap:nth-child(even){margin-left:clamp(0px,6vw,90px)}

/* ---------- arc: four-step variant ---------- */
.arc.four{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}
.arc-step ul{list-style:none;margin:12px 0 0;padding:0}
.arc-step li{font-size:13.5px;color:rgba(244,240,231,.55);padding:4px 0 4px 18px;position:relative}
.arc-step li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:1px;background:var(--gold-dim)}
.env-cream .arc-step li,.env-warm .arc-step li{color:var(--graphite)}

/* ---------- the brief: a document on the board ---------- */
.brief-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5.6vw,90px);align-items:center}
.brief-doc{
  background:var(--cream);color:var(--board);
  padding:clamp(28px,3.4vw,48px) clamp(26px,3.2vw,44px);
  transform:rotate(.6deg);box-shadow:0 30px 70px rgba(0,0,0,.5);
  max-width:560px;justify-self:center;width:100%;
}
.brief-doc .brief-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-bottom:2px solid var(--board);padding-bottom:14px;margin-bottom:22px;
}
.brief-doc .brief-head b{font-family:var(--serif);letter-spacing:.2em;font-weight:500;font-size:13px}
.brief-doc .brief-head span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--graphite)}
.brief-doc h4{
  font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-dim);margin:20px 0 8px;
}
.brief-doc h4:first-of-type{margin-top:0}
.brief-doc .brief-title{font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);line-height:1.25;margin-bottom:6px}
.brief-doc p{font-size:13.5px;line-height:1.65;color:#3f3d37;margin:0 0 6px}
.brief-doc ul{list-style:none;margin:6px 0 0;padding:0}
.brief-doc li{font-size:13px;color:#3f3d37;padding:3.5px 0 3.5px 18px;position:relative}
.brief-doc li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:1px;background:var(--gold-dim)}
.brief-doc .implication{font-family:var(--serif);font-style:italic;font-size:15.5px;color:var(--board)}

/* ---------- tab panels v2 (Industries) ---------- */
.sector-panel[hidden]{display:none}
.panel-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:22px}
.panel-cols h4{
  font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;
}
.panel-cols ul{list-style:none;margin:0;padding:0}
.panel-cols li{font-size:13.5px;color:rgba(244,240,231,.62);padding:5px 0 5px 18px;position:relative}
.panel-cols li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:1px;background:var(--gold-dim)}

/* ---------- membership tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(28px,3.4vw,44px)}
.tier{border-top:1px solid var(--rule);padding-top:clamp(16px,2vw,24px)}
.tier i{font-style:italic;font-family:var(--serif);color:var(--gold-dim);font-size:14.5px;display:block;margin-bottom:10px}
.tier h3{font-size:clamp(21px,2vw,28px);margin-bottom:8px}
.tier p{font-size:14.5px;color:var(--graphite);margin:0}

/* ---------- sprint rows ---------- */
.sprints{margin-top:clamp(32px,4vw,52px)}
.sprint{
  display:grid;grid-template-columns:auto 1fr;gap:6px clamp(24px,3.4vw,52px);
  padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--rule-dark);
  align-items:baseline;transition:padding-left .35s var(--ease);
}
.sprint:hover{padding-left:10px}
.sprint .s-name{font-family:var(--serif);font-size:clamp(23px,2.4vw,34px)}
.sprint .s-name i{font-style:italic;font-size:15px;color:var(--gold);margin-right:14px}
.sprint .s-days{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--gold-dim);white-space:nowrap;justify-self:end}
.sprint .s-focus{grid-column:2;font-size:13.5px;line-height:1.9;color:rgba(244,240,231,.55);letter-spacing:.04em}
.sprint .s-focus em{font-style:normal;color:rgba(244,240,231,.3);padding:0 7px}

/* ---------- dark index (leadership model / engagement links) ---------- */
.si-item h3 small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0;color:rgba(244,240,231,.5);margin-top:6px;line-height:1.6}

/* ---------- chalk seam: hand-drawn wave across section boundaries ---------- */
.seam{position:absolute;left:0;right:0;top:-13px;height:26px;z-index:3;pointer-events:none}
.seam svg{width:100%;height:100%;display:block;overflow:visible}
.seam path{stroke:var(--gold-dim);stroke-width:2;fill:none;stroke-linecap:round;filter:url(#chalkfx);opacity:.75}

/* ---------- problem split ---------- */
.problem-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,100px);align-items:center}
.problem-grid .strike-stack{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,30px);align-items:flex-start}
.problem-grid .strike-stack .strike{transform:rotate(var(--rot,0deg))}
.problem-grid .conclusion{
  font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(18px,1.8vw,25px);line-height:1.5;max-width:38ch;
  margin-top:clamp(24px,3vw,40px);
}

/* ---------- who-we-are network ---------- */
.who-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.who-grid .board-diagram{margin-top:0}

/* ---------- cascading engagement steps ---------- */
.arc.stagger .arc-step:nth-child(3){margin-top:clamp(20px,2.6vw,44px)}
.arc.stagger .arc-step:nth-child(5){margin-top:clamp(40px,5.2vw,88px)}
.arc.stagger .arc-arrow:nth-child(2){margin-top:clamp(28px,3.4vw,54px);transform:rotate(9deg)}
.arc.stagger .arc-arrow:nth-child(4){margin-top:clamp(48px,6vw,100px);transform:rotate(9deg)}

/* ---------- notes container doodles ---------- */
.notes{position:relative}
.notes .doodle{opacity:.85}

/* ---------- note rows: quote paired with its cover ---------- */
.note-row{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,5vw,80px);align-items:center;
}
.note-row.flip .note{order:2}
.note-row.flip .note-sketch{order:1}
.note-sketch{justify-self:center;width:clamp(280px,28vw,400px)}
.note-sketch svg{width:100%;height:auto;display:block}
.note-row .note{max-width:none;align-self:center}
@media (max-width:860px){
  .note-row{grid-template-columns:1fr;gap:26px}
  .note-row.flip .note{order:1}
  .note-row.flip .note-sketch{order:2}
  .note-sketch{width:260px;justify-self:start}
}

/* ---------- closing chalk mark ---------- */
.closing-mark{text-align:center}
.hand-note{
  font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(16px,1.5vw,21px);line-height:1.55;
  text-align:center;transform:rotate(-1.2deg);margin-top:10px;
}

/* ---------- section backdrop art (chalk, faint) ---------- */
.sec-art{
  position:absolute;right:-3%;top:6%;bottom:6%;width:46%;
  object-fit:contain;opacity:.2;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 45%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 45%,transparent 75%);
}
@media (max-width:860px){.sec-art{display:none}}

/* ---------- network pulse ---------- */
@keyframes netpulse{0%{opacity:.5}60%{opacity:0}100%{opacity:0}}
.net-pulse{animation:netpulse 3.2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.net-pulse{animation:none;opacity:0}}

/* ---------- closing art (sketch banner crop) ---------- */
.closing-art{position:relative}
.closing-art img{
  width:100%;height:clamp(300px,30vw,430px);object-fit:cover;object-position:100% center;
  mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 55% 48%,#000 48%,transparent 78%);
  mask-image:radial-gradient(ellipse 72% 72% at 55% 48%,#000 48%,transparent 78%);
}
.closing-art .hand-note{
  font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(16px,1.5vw,21px);line-height:1.55;
  text-align:center;margin-top:2px;transform:rotate(-1.4deg);
}
.notes .note:nth-of-type(1){align-self:flex-start}
.notes .note:nth-of-type(2){align-self:center}
.notes .note:nth-of-type(3){align-self:flex-end}

/* ---------- chalk-ruled area rows (no boxes) ---------- */
.area-rows{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(36px,4.6vw,64px) clamp(40px,5.6vw,90px);
  margin-top:clamp(36px,4.4vw,60px);
}
.area-cell i{font-style:italic;font-family:var(--serif);color:var(--gold-dim);font-size:15px;display:block;margin-bottom:10px}
.area-cell h3{font-size:clamp(21px,2vw,29px);display:inline-block}
.area-cell .underline-svg{display:block;width:min(150px,70%);margin:8px 0 12px}
.area-cell p{font-size:14.5px;color:var(--graphite);margin:0}
.chalk-hr{grid-column:1/-1;height:14px;margin:clamp(-6px,-0.5vw,0px) 0}
.chalk-hr svg{width:100%;height:100%;display:block;overflow:visible}
.chalk-hr path{stroke:rgba(17,17,15,.35);stroke-width:1.8;fill:none;stroke-linecap:round;filter:url(#chalkfx)}

/* ---------- board names (industries, written on the board) ---------- */
.board-names{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px)}
.board-names a{
  display:inline-flex;align-items:baseline;gap:16px;
  font-family:var(--serif);font-size:clamp(22px,2.3vw,34px);
  color:rgba(244,240,231,.88);width:fit-content;
  transition:color .3s,transform .3s var(--ease);
}
.board-names a i{font-style:italic;font-size:14px;color:var(--gold)}
.board-names a:hover{color:var(--gold);transform:translateX(8px)}
.board-names a:nth-child(2){margin-left:clamp(16px,2.4vw,40px)}
.board-names a:nth-child(3){margin-left:clamp(4px,.8vw,14px)}
.board-names a:nth-child(4){margin-left:clamp(24px,3.4vw,56px)}
.board-names a:nth-child(5){margin-left:clamp(10px,1.6vw,28px)}

/* ---------- headline chalk underline (inline word) ---------- */
.hl{display:inline-block;position:relative;white-space:nowrap}
.hl svg{position:absolute;left:-1%;right:-1%;bottom:-.12em;width:102%;height:.28em;overflow:visible}
.hl svg path{stroke:var(--gold);stroke-width:4;fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.env-cream .hl svg path,.env-warm .hl svg path{stroke:var(--gold-dim)}
@media (max-width:860px){
  .area-rows{grid-template-columns:1fr}
  .chalk-hr{display:none}
  .board-names a:nth-child(n){margin-left:0}
}

/* ---------- closing split ---------- */
.closing-grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(40px,6vw,96px);align-items:center;text-align:left;
}
.closing-grid .actions{justify-content:flex-start}
.closing-grid .crosshair{margin:0 0 clamp(20px,2.4vw,30px)}
.closing-duck{position:relative}
.closing-duck img{width:100%;max-width:430px;margin-inline:auto}
.closing-duck .hand-note{
  font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(16px,1.5vw,21px);line-height:1.55;
  text-align:center;margin-top:6px;transform:rotate(-1.4deg);
}
@media (max-width:860px){
  .problem-grid,.who-grid,.closing-grid{grid-template-columns:1fr}
  .closing-grid{text-align:left}
  .arc.stagger .arc-step:nth-child(n){margin-top:0}
  .notes .doodle{display:none}
}

/* ---------- struck cluster (the wrong answers, together) ---------- */
.strike-cluster{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:clamp(14px,2vw,26px) clamp(32px,4.6vw,72px);
  max-width:1060px;margin:clamp(32px,4vw,52px) auto 0;
}
.strike-cluster .strike{
  font-size:clamp(26px,3.2vw,46px);
  transform:rotate(var(--rot,0deg));
}
@media (max-width:860px){.strike-cluster{gap:14px 32px}.strike-cluster .strike{transform:none}}

/* ---------- advisory hero map (drawn live) ---------- */
@keyframes mappulse{0%{r:52;opacity:.5}70%{r:88;opacity:0}100%{r:88;opacity:0}}
.map-pulse{animation:mappulse 5.5s ease-out infinite;opacity:0}
@keyframes mapflow{0%{stroke-dashoffset:420;opacity:0}12%{opacity:.85}60%{opacity:.5}100%{stroke-dashoffset:0;opacity:0}}
.map-flow{stroke-dasharray:16 404;animation:mapflow 6s linear infinite;opacity:0}
@keyframes mapdust{0%,100%{opacity:.08}50%{opacity:.55}}
.map-dust{animation:mapdust 4.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .map-pulse,.map-flow,.map-dust{animation:none;opacity:.18}
}

.hero-map{
  position:absolute;right:3%;top:50%;transform:translateY(-52%);
  width:min(46%,620px);pointer-events:none;z-index:0;
}
.hero-map svg{width:100%;height:auto;display:block;overflow:visible;animation:mapdrift 9s ease-in-out infinite}
@keyframes mapdrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.hero-map svg{animation:none}}
@media (max-width:1280px){.hero-map .fade-label{display:none}}
@media (max-width:1080px){.hero-map{opacity:.32}}
@media (max-width:860px){.hero-map{display:none}}

/* ---------- sprint blocks (2x2, bracketed) ---------- */
.sprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:clamp(22px,2.6vw,34px)}
.sprint-block{position:relative;padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,28px)}
.sprint-block::before,.sprint-block::after,
.sprint-block .br::before,.sprint-block .br::after{
  content:"";position:absolute;width:26px;height:26px;border-color:var(--gold-dim);border-style:solid;opacity:.75;
  transition:width .4s var(--ease),height .4s var(--ease);
}
.sprint-block::before{top:0;left:0;border-width:1.5px 0 0 1.5px}
.sprint-block::after{top:0;right:0;border-width:1.5px 1.5px 0 0}
.sprint-block .br::before{bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.sprint-block .br::after{bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.sprint-block:hover::before,.sprint-block:hover::after,
.sprint-block:hover .br::before,.sprint-block:hover .br::after{width:40px;height:40px}
.sprint-block .sp-num{
  position:absolute;top:clamp(14px,1.6vw,20px);right:clamp(22px,2.4vw,32px);
  font-family:var(--serif);font-size:clamp(42px,4.4vw,68px);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px rgba(200,154,70,.42);
}
.sprint-block .sp-ico{width:56px;height:56px;display:block;margin-bottom:12px}
.sprint-block h3{font-size:clamp(22px,2.1vw,30px);margin-bottom:4px}
.sprint-block .sp-days{
  font-family:var(--serif);font-style:italic;color:var(--gold);font-size:14.5px;display:block;margin-bottom:10px;
}
.sprint-block .sp-focus{font-size:13.5px;line-height:1.85;color:rgba(244,240,231,.58);margin:0}
.sprint-block .sp-focus em{font-style:normal;color:rgba(244,240,231,.28);padding:0 7px}

/* ---------- capital: vertical descent ---------- */
.cap-journey{position:relative;margin-top:clamp(30px,3.6vw,50px);padding-left:clamp(34px,4vw,62px)}
.cap-journey::before{
  content:"";position:absolute;left:clamp(10px,1.2vw,20px);top:14px;bottom:36px;width:1px;
  background:linear-gradient(var(--gold-dim),rgba(200,154,70,.25));opacity:.6;
}
.cap-step{position:relative;padding:clamp(24px,3vw,40px) 0;display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,52px);align-items:start}
.cap-step + .cap-step{border-top:1px solid var(--rule-dark)}
.cap-step:nth-child(2){margin-left:clamp(0px,3vw,52px)}
.cap-step:nth-child(3){margin-left:clamp(0px,6vw,104px)}
.cap-marker{
  position:absolute;left:calc(-1 * clamp(34px,4vw,62px) + clamp(10px,1.2vw,20px) - 11px);
  top:clamp(30px,3.4vw,46px);width:23px;height:23px;
}
.cap-step:nth-child(2) .cap-marker{left:calc(-1 * clamp(34px,4vw,62px) - clamp(0px,3vw,52px) + clamp(10px,1.2vw,20px) - 11px)}
.cap-step:nth-child(3) .cap-marker{left:calc(-1 * clamp(34px,4vw,62px) - clamp(0px,6vw,104px) + clamp(10px,1.2vw,20px) - 11px)}
.cap-marker svg{width:100%;height:100%}
.cap-marker svg circle{fill:var(--board);stroke:var(--gold);stroke-width:1.6}
.cap-when{
  font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:9px;
}
.cap-step h3{font-size:clamp(23px,2.3vw,34px);margin-bottom:8px}
.cap-step .cap-lead{font-size:15.5px;color:rgba(244,240,231,.62);margin:0;max-width:44ch}
.cap-step .cap-focus{
  font-size:13.5px;line-height:1.95;color:rgba(244,240,231,.5);margin:0;
  max-width:34ch;justify-self:end;text-align:right;
}
.cap-step .cap-focus em{font-style:normal;color:rgba(244,240,231,.26);padding:0 6px}
@media (max-width:860px){
  .cap-step{grid-template-columns:1fr;gap:12px}
  .cap-step:nth-child(2),.cap-step:nth-child(3){margin-left:0}
  .cap-step:nth-child(2) .cap-marker,.cap-step:nth-child(3) .cap-marker{left:calc(-1 * clamp(34px,4vw,62px) + clamp(10px,1.2vw,20px) - 11px)}
  .cap-step .cap-focus{text-align:left;justify-self:start;max-width:none}
}

/* ---------- capital timeline (legacy) ---------- */
.cap-line{margin-top:clamp(30px,3.6vw,48px)}
.cap-line svg{width:100%;height:auto;display:block}
.cap-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.6vw,60px);margin-top:clamp(6px,1vw,14px)}
.cap-phase .ph-when{
  font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:10px;
}
.cap-phase h3{font-size:clamp(21px,2vw,28px);margin-bottom:8px}
.cap-phase p{font-size:14.5px;color:rgba(244,240,231,.6);margin:0 0 12px}
.cap-phase .ph-focus{font-size:13.5px;line-height:1.95;color:rgba(244,240,231,.5);margin:0}
.cap-phase .ph-focus em{font-style:normal;color:rgba(244,240,231,.26);padding:0 6px}

/* ---------- fit bubbles ---------- */
.fit-bubbles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.2vw,50px);margin-top:clamp(30px,3.6vw,50px)}
.fit-bubble{position:relative;display:block;margin-bottom:clamp(6px,0.8vw,12px)}
.fit-bubble .bub{
  display:block;position:relative;border:1.5px solid var(--rule);background:rgba(255,255,255,.3);
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);
  border-radius:26px 26px 26px 4px;
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,22px);line-height:1.4;
  color:var(--board);transition:border-color .3s,transform .35s var(--ease);
}
.fit-bubble:hover .bub{border-color:var(--gold-dim);transform:translateY(-4px)}
.fit-bubble .ans{
  display:flex;align-items:center;gap:12px;margin:16px 0 0 clamp(20px,3vw,44px);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);
}
.fit-bubble .ans svg{width:34px;height:14px;flex:none}
.fit-bubble .ans svg path{stroke:var(--gold-dim);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkfx)}
@media (max-width:860px){
  .sprint-grid,.cap-phases,.fit-bubbles{grid-template-columns:1fr}
}

/* ---------- you receive: 3 x 2 ---------- */
.rec-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(30px,3.6vw,60px);margin-top:clamp(14px,1.8vw,22px);
}
.rec-cell{
  display:grid;grid-template-columns:26px 1fr;gap:2px 8px;align-items:baseline;
  padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--rule);
  transition:padding-left .3s var(--ease);
}
.rec-cell:hover{padding-left:8px}
.rec-cell i{grid-row:1/3;font-style:italic;font-family:var(--serif);color:var(--gold-dim);font-size:13.5px}
.rec-cell b{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.7vw,23px);line-height:1.2}
.rec-cell span{grid-column:2;font-size:13.5px;color:var(--graphite);line-height:1.55}
@media (max-width:860px){.rec-grid{grid-template-columns:1fr}}

/* ---------- wide graph ---------- */
.wide-graph{margin-top:clamp(4px,0.6vw,10px);margin-bottom:clamp(-14px,-1.4vw,-6px)}
.wide-graph svg{width:100%;height:auto;display:block}

/* ---------- report artifact ---------- */
.report-doc{
  position:relative;border:1px solid var(--rule);background:rgba(255,255,255,.34);
  padding:clamp(26px,3vw,40px) clamp(24px,2.8vw,36px) clamp(22px,2.6vw,32px);
  margin-top:clamp(14px,1.8vw,22px);
}
.report-doc::after{
  content:"";position:absolute;top:0;right:0;width:34px;height:34px;
  background:linear-gradient(225deg,var(--warm) 0 50%,transparent 50%);
  border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.report-tab{
  position:absolute;top:-1px;left:clamp(24px,2.8vw,36px);transform:translateY(-100%);
  background:var(--gold-dim);color:var(--cream);
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  padding:8px 16px;
}
.report-contents{list-style:none;margin:0;padding:0;counter-reset:rc}
.report-contents li{
  display:flex;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px dotted var(--rule);
  font-family:var(--serif);font-size:clamp(16px,1.5vw,20px);
}
.report-contents li:last-child{border-bottom:0}
.report-contents i{font-style:italic;font-size:13px;color:var(--gold-dim);flex:none}

/* ---------- fit guide (situation -> service) ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,80px);margin-top:clamp(28px,3.6vw,48px)}
.fit-row{
  display:grid;grid-template-columns:1fr auto;gap:6px clamp(18px,2.4vw,34px);align-items:center;
  padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--rule);
  transition:padding-left .3s var(--ease);
}
.fit-row:hover{padding-left:8px}
.fit-row .sit{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,22px);
  line-height:1.35;color:var(--board);
}
.fit-row .arrow{width:46px;height:16px;flex:none}
.fit-row .arrow path{stroke:var(--gold-dim);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkfx)}
.fit-row .svc{
  grid-column:1/-1;display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);transition:gap .3s var(--ease);
}
.fit-row:hover .svc{gap:16px}
@media (max-width:860px){.fit-grid{grid-template-columns:1fr}}

/* ---------- tier badge ---------- */
.tier{position:relative;padding-top:clamp(50px,3.4vw,50px)}
.tier .badge{position:absolute;top:0;left:0;width:38px;height:38px}
.tier .badge svg{width:100%;height:100%}
.tier .badge svg *{stroke:var(--gold-dim);stroke-width:2;fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.tier .seats{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:10px;
}

/* ---------- deliverables grid ---------- */
.deliver-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(28px,3.6vw,60px);margin-top:clamp(18px,2.2vw,26px);
}
.deliver-cell{
  display:flex;align-items:baseline;gap:14px;
  padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--rule);
  transition:padding-left .3s var(--ease);
}
.deliver-cell:hover{padding-left:8px}
.deliver-cell i{font-style:italic;font-family:var(--serif);color:var(--gold-dim);font-size:14px;flex:none}
.deliver-cell b{font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.25}
@media (max-width:860px){.deliver-grid{grid-template-columns:1fr}}

/* ---------- service constellation (no list) ---------- */
.svc-connect{position:absolute;inset:-4% -2%;width:104%;height:108%;pointer-events:none}
.svc-connect path{stroke:var(--gold-dim);stroke-width:1.4;fill:none;stroke-linecap:round;opacity:.28}
.svc-grid{position:relative;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(40px,5vw,72px) clamp(20px,2.6vw,40px);
  margin-top:clamp(40px,5vw,68px);
}
.svc-node{grid-column:1/6;position:relative;padding:clamp(8px,1vw,14px) 0 0 clamp(66px,6.6vw,116px)}
.svc-node:nth-child(2){grid-column:1/6}
.svc-node:nth-child(3){grid-column:7/13}
.svc-node:nth-child(4){grid-column:2/7}
.svc-node:nth-child(5){grid-column:8/13}
.svc-node:nth-child(6){grid-column:4/10}
.svc-node .gn{
  position:absolute;top:-4px;left:0;
  font-family:var(--serif);font-size:clamp(58px,6vw,96px);line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(200,154,70,.6);
  transition:-webkit-text-stroke-color .35s;
}
.svc-node:hover .gn{-webkit-text-stroke-color:var(--gold)}
.svc-node b{
  font-family:var(--serif);font-weight:500;font-size:clamp(23px,2.2vw,33px);
  display:block;position:relative;line-height:1.2;color:var(--chalk);transition:color .3s;
}
.svc-node:hover b{color:var(--gold)}
.svc-node .n-meta{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:15px;color:var(--gold);margin-top:9px;position:relative;max-width:30ch;
}
.svc-node .n-go{
  display:inline-block;color:var(--gold);margin-top:12px;position:relative;
  opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s var(--ease);
}
.svc-node:hover .n-go{opacity:1;transform:none}
@media (max-width:860px){
  .svc-grid{grid-template-columns:1fr;gap:30px}
  .svc-node{padding-left:78px}
  .svc-node .gn{font-size:52px}
  .svc-node,.svc-node:nth-child(2),.svc-node:nth-child(3),.svc-node:nth-child(4),.svc-node:nth-child(5),.svc-node:nth-child(6){grid-column:1/-1}
  .svc-node .n-go{opacity:1;transform:none}
}

/* ---------- service menu board (Advisory) ---------- */
.menu-board{max-width:1000px;margin:clamp(30px,3.8vw,48px) auto 0}
.menu-row{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,26px);
  padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--rule-dark);
  transition:padding-left .35s var(--ease);
}
.menu-row:hover{padding-left:12px}
.menu-row i{font-style:italic;font-family:var(--serif);color:var(--gold);font-size:15px;flex:none;min-width:34px}
.menu-row b{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.1vw,30px);white-space:nowrap;transition:color .3s}
.menu-row:hover b{color:var(--gold)}
.menu-row .leader{flex:1;border-bottom:2px dotted rgba(244,240,231,.2);transform:translateY(-6px);min-width:30px}
.menu-row .m-meta{
  font-family:var(--serif);font-style:italic;font-size:clamp(13px,1.2vw,15.5px);
  color:rgba(244,240,231,.55);white-space:nowrap;
}
.menu-row .m-arrow{color:var(--gold);flex:none;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease)}
.menu-row:hover .m-arrow{opacity:1;transform:none}
@media (max-width:860px){
  .menu-row{flex-wrap:wrap;gap:6px 14px}
  .menu-row .leader{display:none}
  .menu-row .m-meta{white-space:normal;width:100%;margin-left:48px}
  .menu-row .m-arrow{display:none}
}

/* ---------- productized service header ---------- */
.svc-head{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.6vw,40px);align-items:start;
  margin-bottom:clamp(30px,3.8vw,50px);
}
.svc-head .gn{
  font-family:var(--serif);font-size:clamp(72px,8vw,128px);line-height:.9;
  color:transparent;-webkit-text-stroke:1px rgba(17,17,15,.3);
}
.env-board .svc-head .gn,.env-charcoal .svc-head .gn{-webkit-text-stroke:1px rgba(244,240,231,.3)}
.svc-head h2{font-size:clamp(30px,3.4vw,48px);line-height:1.1}
.svc-head .svc-tag{
  font-family:var(--serif);font-style:italic;color:var(--gold-dim);
  font-size:clamp(16.5px,1.5vw,21px);margin:10px 0 0;
}
.env-board .svc-head .svc-tag,.env-charcoal .svc-head .svc-tag{color:var(--gold)}
.svc-meta{
  display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline;
  margin-top:14px;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--graphite);
}
.env-board .svc-meta,.env-charcoal .svc-meta{color:rgba(244,240,231,.5)}
.svc-meta em{font-style:normal;color:var(--gold-dim);letter-spacing:0}
.svc-cta{margin-top:clamp(28px,3.4vw,44px);text-align:center}
@media (max-width:640px){
  .svc-head{grid-template-columns:1fr;gap:8px}
  .svc-head .gn{font-size:56px}
}

/* ---------- dash lists ---------- */
.dashlist{list-style:none;margin:14px 0 0;padding:0}
.dashlist li{font-size:14px;line-height:1.6;color:var(--graphite);padding:5.5px 0 5.5px 20px;position:relative}
.dashlist li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:1px;background:var(--gold-dim)}
.env-board .dashlist li,.env-charcoal .dashlist li{color:rgba(244,240,231,.6)}
.deliver{margin-top:14px}
.deliver .dir-item i{font-style:italic;font-family:var(--serif);color:var(--gold-dim);font-size:13.5px;flex:none;min-width:26px}
.deliver .dir-item b{font-size:clamp(17px,1.5vw,21px)}

/* ---------- mantra sequence ---------- */
.mantra{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,20px);
  color:var(--gold);margin-top:clamp(20px,2.6vw,32px);
}
.mantra em{font-style:normal;color:rgba(244,240,231,.35);font-size:.85em}
.env-cream .mantra,.env-warm .mantra{color:var(--gold-dim)}
.env-cream .mantra em,.env-warm .mantra em{color:var(--rule)}

/* ---------- cascade lines ---------- */
.cascade{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);margin-top:clamp(24px,3vw,40px)}
.cascade .c-line{font-family:var(--serif);font-size:clamp(21px,2.3vw,34px);line-height:1.3}
.cascade .c-line:nth-child(2){margin-left:clamp(20px,4vw,64px)}
.cascade .c-line:nth-child(3){margin-left:clamp(40px,8vw,128px)}
.cascade .c-line:nth-child(4){margin-left:clamp(60px,12vw,192px)}
.cascade .c-line b{font-weight:500;color:var(--gold-dim)}
.env-board .cascade .c-line b,.env-charcoal .cascade .c-line b{color:var(--gold)}
@media (max-width:860px){
  .check-grid{grid-template-columns:1fr 1fr}
  .flow-grid{grid-template-columns:1fr 1fr;gap:32px}
  .flow-step{padding-top:64px}
  .flow-step .gn{font-size:56px}
  .cascade .c-line:nth-child(n){margin-left:0}
  .swap:nth-child(even){margin-left:0}
  .brief-wrap{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr}
  .panel-cols{grid-template-columns:1fr}
  .arc.four{grid-template-columns:1fr}
  .sprint{grid-template-columns:1fr}
  .sprint .s-days{justify-self:start}
  .sprint .s-focus{grid-column:1}
}

/* ---------- cursor glow on dark surfaces ---------- */
.cursor-glow{
  position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;
  pointer-events:none;z-index:90;
  background:radial-gradient(circle,rgba(200,154,70,.16),transparent 64%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;
  /* no mix-blend-mode. A fixed, GPU-promoted blend layer paints its own bounds
     solid black on machines that will not composite it, which shows up as a
     black square following the cursor. Over a dark board the plain gradient is
     indistinguishable from screen anyway. */
}
.cursor-glow.on{opacity:1}
@media (pointer:coarse){.cursor-glow{display:none}}

/* ---------- rings split (Advisory framework, no dead space) ---------- */
.rings-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center;margin-top:clamp(28px,3.6vw,48px)}
.rings-grid svg{width:100%;max-width:560px;height:auto;display:block;margin-inline:auto}
.ring-legend{display:flex;flex-direction:column}
.legend-item{display:flex;gap:18px;align-items:baseline;padding:clamp(15px,1.9vw,23px) 0;border-bottom:1px solid var(--rule)}
.legend-item:last-child{border-bottom:0}
.legend-item i{font-style:italic;font-family:var(--serif);color:var(--gold-dim);font-size:14.5px;min-width:30px;flex:none}
.legend-item b{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.7vw,24px);min-width:8.5ch}
.env-warm .legend-item{flex-wrap:wrap}
.env-warm .legend-item span{flex:1 1 100%;margin-left:48px}
.legend-item span{font-size:14px;color:var(--graphite)}

/* ---------- industries band content ---------- */
.band-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center;width:100%}
.band-list{
  border:1px solid var(--rule-dark);background:rgba(17,17,15,.58);
  backdrop-filter:blur(4px);padding:clamp(18px,2.4vw,32px) clamp(20px,2.8vw,38px);
}
.band-list a{
  display:flex;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--rule-dark);
  font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);color:rgba(244,240,231,.85);
  transition:color .3s,padding-left .3s var(--ease);
}
.band-list a:last-child{border-bottom:0}
.band-list a:hover{color:var(--gold);padding-left:8px}
.band-list a i{font-style:italic;font-family:var(--serif);font-size:13px;color:var(--gold-dim);min-width:24px}

/* ---------- reveals & parallax ---------- */
html.js .reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .reveal.in-view{opacity:1;transform:none}
html.js .reveal.dl1{transition-delay:.12s}
html.js .reveal.dl2{transition-delay:.24s}
html.js .reveal.dl3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .hero-line span,.hero-duck img{animation:none;transform:none;opacity:1}
  .draw-path{stroke-dashoffset:0;animation:none!important}
  .fade-label{opacity:1;transition:none}
  .ledger-track{animation:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav{display:none}
  .head-cta{display:none}
  .burger{display:block}
  .premise-grid,.method-grid,.explorer,.masthead-grid,.manifesto-grid{grid-template-columns:1fr}
  .premise-grid .sticky,.method-rail{position:static}
  .method-rail{display:flex;align-items:baseline;gap:20px;margin-bottom:6px}
  .rail-line{display:none}
  .series-grid{grid-template-columns:1fr 1fr}
  .series-cell:nth-child(-n+3){border-top:0}
  .series-cell:nth-child(-n+2){border-top:1px solid var(--rule-dark)}
  .principles-row{grid-template-columns:1fr 1fr}
  .principle{border-left:0;border-top:1px solid var(--rule-dark);padding-block:26px}
  .principle:nth-child(-n+2){border-top:0}
  .masthead-art{max-width:420px}
}
@media (max-width:1080px){
  .practice-grid{grid-template-columns:1fr 1fr}
}
.swipe-hint{display:none}
/* visibility is set by js/main.js from real scrollWidth, not by a breakpoint */
.swipe-hint.show{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:13px;color:var(--gold-dim);text-align:right;margin-top:8px;
}
@media (max-width:860px){
  .board-diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .board-diagram svg{min-width:720px}
  .rings-grid .board-diagram{overflow:visible}
  .rings-grid .board-diagram svg{min-width:0}
  .who-grid > *,.premise-grid > *,.rings-grid > *{min-width:0}
  .who-grid .board-diagram{overflow:visible}
  .who-grid .board-diagram svg{min-width:0}
  .diagram-sm{overflow:visible!important}
  .diagram-sm svg{min-width:0!important}
  .series-index{grid-template-columns:1fr}
  .premise-cols{columns:1}
  .practice-grid{grid-template-columns:1fr}
  .arc{grid-template-columns:1fr}
  .arc-arrow{display:none}
  .triage-item:nth-child(even){align-self:flex-start;text-align:left}
  .mark:nth-child(even){margin-left:0}
  .standard-lines .line:nth-child(2),.standard-lines .line:nth-child(3){margin-left:0}
  .hero-board{min-height:0;padding-top:120px}
  .hero-grid,.feature-grid,.form-grid{grid-template-columns:1fr}
  .hero-duck{max-width:440px;margin-inline:auto}
  .directory{grid-template-columns:1fr}
  .beliefs{grid-template-columns:1fr}
  .belief:nth-child(even){transform:none}
  .rings-grid,.band-grid{grid-template-columns:1fr}
  .qboard{grid-template-columns:1fr}
  .qb,.qb:nth-child(2),.qb:nth-child(3),.qb:nth-child(4),.qb:nth-child(5){margin:0;transform:none;text-align:left;justify-self:start}
  .qb:nth-child(5) .underline-svg{margin-inline:0}
  .marks::before{left:6px;transform:none}
  .mark{width:100%;padding-left:clamp(36px,10vw,52px)}
  .mark:nth-child(odd){text-align:left}
  .mark:nth-child(odd)::before{right:auto;left:0}
  .mark:nth-child(even)::before{left:0}
  .stats-row{grid-template-columns:1fr}
  .stat-cell+.stat-cell::before{left:22%;right:22%;top:0;bottom:auto;width:auto;height:1px}
  .convo-hero{grid-template-columns:1fr;min-height:0}
  .convo-hero .art{order:-1;height:300px}
  .convo-hero .art::before{background:linear-gradient(rgba(17,17,15,.1),var(--board))}
  .foot-main{grid-template-columns:1fr 1fr}
  .bleed{min-height:64vh}
  .bleed-img{width:130%;right:-30%;opacity:.35}
  .sector-panel{min-height:0;border-left:0;padding-left:0;border-top:1px solid var(--rule-dark);padding-top:24px}
  .step{grid-template-columns:52px 1fr}
  .step-num{width:44px;height:44px}
  .series-grid{grid-template-columns:1fr}
  .series-cell:nth-child(-n+2){border-top:0}
  .series-cell:first-child{border-top:1px solid var(--rule-dark)}
  .checks{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr}
  .note{padding-left:20px}
  .note:nth-child(2),.note:nth-child(3){align-self:flex-start}
  .principles-row{grid-template-columns:1fr}
  .principle{border-top:1px solid var(--rule-dark)!important;text-align:left;display:grid;grid-template-columns:52px 1fr;gap:0 20px;padding-block:20px}
  .principle:first-child{border-top:0!important}
  .principle svg{margin:0;grid-row:1/3}
  .principle h3,.principle h2{margin-bottom:6px}
}
@media (max-width:640px){
  .masthead .doodle{display:none}
  .hero-board .doodle{display:none}
}
@media (max-width:560px){
  .foot-main{grid-template-columns:1fr}
  .display{font-size:clamp(44px,12vw,64px)}
  .masthead .display{font-size:clamp(50px,14vw,84px)}
  .sub-form{flex-direction:column;gap:14px}
  .sub-form input[type="email"]{border-right:1px solid var(--rule-dark);padding:15px 20px}
}

/* ==========================================================================
   INTELLIGENCE PAGE - dense, wide, annotated. No plain grids or tables.
   ========================================================================== */

/* A. hero radar */
.sig-hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:110px}
/* As a flex item .wrap shrink-wrapped to its 784px content and then centred,
   parking the headline ~30% in: neither left-aligned nor centred. Every other
   flex hero (.bleed) already sets this. */
.sig-hero .wrap{width:100%}
.sig-field{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(50%,660px);pointer-events:none;z-index:1}

/* The radar sat alone in one corner with the rest of the board blank. Its
   rings now continue outward across the whole hero, anchored to the same
   centre, so the circle being cut off reads as the near edge of a wider field. */
.sig-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.sig-ring{fill:none;stroke:rgba(244,240,231,.14);stroke-width:1.1;stroke-dasharray:3 11}
.sig-grad{fill:none;stroke:rgba(244,240,231,.11);stroke-width:1}
.sig-grad.long{stroke:rgba(244,240,231,.18);stroke-width:1.2}
.sig-spoke{fill:none;stroke:rgba(244,240,231,.07);stroke-width:1;stroke-dasharray:2 14}
@keyframes sigcontact{0%,100%{opacity:.1}45%{opacity:.65}}
.sig-contact{fill:none;stroke:rgba(244,240,231,.5);stroke-width:1.3;animation:sigcontact 4.2s ease-in-out infinite}
.sig-contact.big{stroke:var(--gold);stroke-width:1.7}
@keyframes sigring{0%{opacity:.5;transform:scale(.5)}70%{opacity:0}100%{opacity:0;transform:scale(1.5)}}
.sig-contact-ring{
  fill:none;stroke:var(--gold-dim);stroke-width:1.1;transform-origin:center;
  transform-box:fill-box;animation:sigring 4.6s ease-out infinite;
}
@keyframes sigmote{0%{transform:translate3d(0,0,0);opacity:0}18%{opacity:.4}82%{opacity:.3}100%{transform:translate3d(22px,-58px,0);opacity:0}}
.sig-mote{fill:rgba(244,240,231,.42);animation:sigmote 13s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .sig-contact,.sig-contact-ring,.sig-mote{animation:none}
  .sig-contact-ring,.sig-mote{opacity:.18}
}
/* the field is atmosphere: never let it compete with the headline */
@media (max-width:900px){.sig-bg{opacity:.5}}
@media (max-width:600px){.sig-bg{opacity:.32}}
.sig-field svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes sweep{0%{opacity:0;transform:scale(.55)}18%{opacity:.55}100%{opacity:0;transform:scale(1.25)}}
.sig-sweep{transform-origin:center;animation:sweep 6s ease-out infinite}
@keyframes blip{0%,100%{opacity:.12}45%{opacity:.9}}
.sig-blip{animation:blip 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sig-sweep,.sig-blip{animation:none;opacity:.3}}
@media (max-width:1080px){.sig-field{opacity:.4}}
@media (max-width:860px){.sig-field{display:none}}

@media (max-width:900px){
  /* 30px tall taps are under the comfortable minimum; grow the hit area only,
     the underline and text position are unchanged. */
  .tlink{padding-block:7px}
  .note a{display:inline-block;padding-block:8px}
}

/* A2. wide split section head - headline left, lede right. Kills the dead
   space a centred 780px head leaves on a 1360px page. */
.ihead{
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,4vw,72px);
  align-items:end;margin-bottom:clamp(24px,3vw,42px);
}
.ihead .lede{max-width:46ch;margin:0}
.ihead.tight{margin-bottom:clamp(16px,2vw,26px)}
/* keep the side note beside the headline instead of wrapping under it, which
   leaves a dead band across the full width */
.shelf-head.wide > div:first-child{flex:1 1 560px;max-width:800px}
.shelf-head.wide > span{flex:0 1 360px}
@media (max-width:900px){.ihead{grid-template-columns:1fr;align-items:start;gap:16px}}

/* A3. capability index - sixteen stems rising into one bus line.
   The first attempt was a running paragraph of sixteen names: a word wall.
   This one is drawn and animated, and sits on paper to break the dark run. */
.lay-wrap{margin-top:clamp(20px,2.6vw,34px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.lay-wrap svg{width:100%;min-width:980px;height:auto;display:block}
.lay-wrap text{font-family:var(--serif)}
.lay-bus{stroke:var(--board);fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.lay-stem{stroke:rgba(27,26,23,.34);fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.lay-stem.on{stroke:var(--gold-dim)}
.lay-node{stroke:rgba(27,26,23,.4);fill:none;filter:url(#chalkfx)}
.lay-node.on{stroke:var(--gold-dim)}
.lay-title{font-style:italic;font-size:21px;fill:var(--gold-dim)}
.lay-sub{font-style:italic;font-size:17px;fill:var(--graphite)}
.lay-num{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;fill:rgba(27,26,23,.42)}
.lay-num.on{fill:var(--gold-dim)}
.lay-name{font-size:18px;fill:var(--graphite)}
.lay-brace{stroke:var(--gold-dim);fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.lay-side{font-style:italic;font-size:16px;fill:rgba(27,26,23,.42)}
.lay-carry{font-style:italic;font-size:19px;fill:var(--gold-dim)}
.lay-name.on{fill:var(--board)}

/* pulses: capabilities feeding the layer, then the layer carrying it */
@keyframes laystem{0%{stroke-dashoffset:100;opacity:0}18%{opacity:.95}72%{opacity:.95}100%{stroke-dashoffset:0;opacity:0}}
.lay-stem-run{
  stroke:var(--gold-dim);fill:none;stroke-linecap:round;
  stroke-dasharray:16 84;opacity:0;animation:laystem 4.2s ease-in infinite;
}
.lay-stem-run.on{stroke:var(--gold)}
@keyframes laybus{0%{stroke-dashoffset:1000;opacity:0}6%{opacity:.9}94%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.lay-bus-run{
  stroke:var(--gold);fill:none;stroke-linecap:round;
  stroke-dasharray:44 956;opacity:0;animation:laybus 5.6s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .lay-stem-run,.lay-bus-run{animation:none;opacity:0}
}
.lay-note{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,19px);
  line-height:1.6;color:var(--gold-dim);max-width:46ch;margin:clamp(16px,2vw,26px) 0 0;
}

/* B. corrections - claims struck out across a worked-over board.
   Two balanced columns still read as a table, so each correction now sets its
   own indent, width, scale and tilt: no column edge can form. */
.corr-board{margin-top:clamp(26px,3.2vw,42px);position:relative}
.corr{
  margin-left:var(--ind,0);width:var(--w,52%);
  margin-top:var(--gap,clamp(26px,3.4vw,46px));
  transform:rotate(var(--rot,0deg));
}
.corr:first-child{margin-top:0}
@media (max-width:900px){
  .corr{margin-left:0;width:100%;transform:none;margin-top:clamp(24px,4vw,32px)}
}
.corr .said{
  position:relative;display:inline-block;
  font-family:var(--serif);font-size:var(--cs,clamp(21px,2.3vw,32px));line-height:1.16;
  color:rgba(244,240,231,.32);
}
.corr .said svg{position:absolute;left:-2%;top:54%;width:104%;height:12px;transform:translateY(-50%);overflow:visible}
.corr .said svg path{stroke:rgba(244,240,231,.5);stroke-width:2.4;fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.corr .truth{
  display:block;margin-top:9px;padding-left:22px;position:relative;
  font-family:var(--serif);font-style:italic;font-size:clamp(14.5px,1.35vw,17.5px);line-height:1.5;
  color:var(--gold);
}
.corr .truth::before{content:"";position:absolute;left:0;top:.68em;width:13px;height:1px;background:var(--gold-dim)}

/* THREAD - a single curved arrow carrying the sixteen into the nine.
   An identical down-arrow at every boundary read as repetition, so there is
   exactly one, at the only hand-off that needs explaining. */
.thread{
  position:absolute;top:-104px;left:50%;transform:translateX(-50%);
  width:clamp(104px,13vw,186px);height:auto;z-index:4;pointer-events:none;overflow:visible;
}
.thread path{fill:none;stroke-width:2.2;stroke-linecap:round;filter:url(#chalkfx)}
.thread .thr-line{stroke-width:2.2}
.thread .thr-head{stroke-width:2.4}
@keyframes thrrun{0%{stroke-dashoffset:100;opacity:0}18%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.thr-run{stroke-dasharray:20 80;opacity:0;animation:thrrun 3.8s ease-in infinite;stroke-width:2.8}
@media (prefers-reduced-motion:reduce){.thr-run{animation:none;opacity:0}}
@media (max-width:860px){.thread{top:-74px;width:78px}}

/* AUTONOMOUS - a closed hand-drawn circuit.
   Every earlier attempt had an axis: a circle with flanking columns, then a
   horizontal chain of nodes (the Leading Indicators device), then a stepped
   cascade of words. All of them read left-to-right or top-to-bottom. A closed
   irregular loop has no start, no end and no axis, which is the actual claim
   the section is making, and a marker travels it continuously. */
.circuit{margin-top:clamp(18px,2.4vw,32px)}
.circuit svg{width:100%;height:auto;display:block;overflow:visible}
/* Two orientations of the same circuit. On a phone the landscape loop showed
   about three of seven stations through a sideways scroll, which reads as a
   stray curve rather than a circuit, so the portrait build carries the same
   loop upright with the worked detail moved into the paragraph below. */
.circuit .cir-sm{display:none}
@media (max-width:820px){
  .circuit .cir-lg{display:none}
  .circuit .cir-sm{display:block}
}
.circuit text{font-family:var(--serif)}
/* These closed loops run to ~2,000 user units and pathLength normalisation was
   not being applied to their dasharray, so the shared .draw-path rule rendered
   them as a dashed ring rather than drawing them in. Each path carries its own
   measured length in --len instead. */
.cir-loopdraw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
@keyframes cirdraw{to{stroke-dashoffset:0}}
.in-view .cir-loopdraw{animation:cirdraw 1.8s var(--ease) forwards}
.in-view .cir-loopdraw.d2{animation-delay:.25s}
.in-view .cir-loopdraw.d3{animation-delay:.45s}
.in-view .cir-loopdraw.d4{animation-delay:.65s}
@media (prefers-reduced-motion:reduce){.cir-loopdraw{stroke-dashoffset:0;animation:none}}
.cir-track{fill:none;stroke:rgba(27,26,23,.72);stroke-width:2.8;stroke-linecap:round;filter:url(#chalkfx)}
.cir-echo{fill:none;stroke:rgba(27,26,23,.55);stroke-width:1.5;stroke-linecap:round}
.cir-tick{fill:none;stroke:rgba(27,26,23,.24);stroke-width:1.1;stroke-linecap:round}
.cir-tick.long{stroke:rgba(27,26,23,.34);stroke-width:1.4}
.cir-chev{fill:none;stroke:var(--gold-dim);stroke-width:1.8;stroke-linecap:round;opacity:.8}
.cir-spoke{fill:none;stroke:rgba(27,26,23,.1);stroke-width:1;stroke-dasharray:2 10}
.cir-rule{fill:none;stroke:rgba(27,26,23,.22);stroke-width:1.2}
.cir-log{font-style:italic;font-size:17px;fill:rgba(27,26,23,.42)}
.cir-log.on{fill:var(--gold-dim)}
.cir-lead{fill:none;stroke:var(--gold-dim);stroke-width:1.3;opacity:.7}
.cir-node{fill:none;stroke:rgba(27,26,23,.5);stroke-width:1.8}
.cir-node.on{stroke:var(--gold-dim);stroke-width:2.6;filter:url(#chalkfx)}
.cir-rom{font-style:italic;font-size:15px;fill:var(--graphite)}
.cir-rom.on{fill:var(--gold-dim)}
.cir-name{font-size:23px;fill:var(--board)}
.cir-name.on{fill:var(--gold-dim)}
.cir-work{font-style:italic;font-size:16px;fill:var(--graphite)}
.cir-mid{font-size:26px;fill:rgba(27,26,23,.32)}
.cir-note{font-style:italic;font-size:17px;fill:var(--gold-dim)}

/* the pass itself: a highlight sweeping the loop, and a marker riding it */
@keyframes cirrun{0%{stroke-dashoffset:1000;opacity:0}8%{opacity:.9}92%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.cir-run{
  fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:70 930;opacity:0;animation:cirrun 9s linear infinite;
}
@keyframes cirmove{to{offset-distance:100%}}
.cir-marker{
  fill:var(--gold);offset-distance:0%;offset-rotate:0deg;
  animation:cirmove 9s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .cir-run{animation:none;opacity:.35}
  .cir-marker{animation:none;opacity:.5}
}
.cir-side .lede{margin:0 0 clamp(12px,1.5vw,18px)}
.cir-side .lede:last-child{margin-bottom:0}
.cir-legend p{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,19px);
  line-height:1.65;color:var(--graphite);margin:0;
}

/* carry mark: the nine handed down from the layer diagram above */
.carry{display:block;width:clamp(150px,15vw,230px);margin:0 auto clamp(12px,1.6vw,20px);height:auto;overflow:visible}
.carry path{fill:none;stroke:var(--gold);stroke-linecap:round;filter:url(#chalkfx)}
.carry text{font-family:var(--serif);font-style:italic;font-size:15px;fill:var(--gold-dim)}
@keyframes carrydrop{0%{stroke-dashoffset:60;opacity:0}20%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.carry-run{stroke-dasharray:14 46;animation:carrydrop 3.2s ease-in infinite;opacity:0}

/* chalk dust drifting over the dark boards */
@keyframes dustdrift{
  0%{transform:translate3d(0,0,0);opacity:0}
  15%{opacity:.3}
  85%{opacity:.22}
  100%{transform:translate3d(16px,-46px,0);opacity:0}
}
section{position:relative}
.dust-field{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dust-field svg{width:100%;height:100%;display:block}
.dust-field circle{fill:rgba(244,240,231,.34);animation:dustdrift 11s ease-in-out infinite}
.env-cream .dust-field circle,.env-warm .dust-field circle{fill:rgba(27,26,23,.2)}
section > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .dust-field circle{animation:none;opacity:.18}
  .carry-run{animation:none;opacity:.4}
}
@media (max-width:860px){.dust-field{display:none}}

/* C. domains - a nine-lane instrument readout.
   Columns of notes still resolved as a grid, so the findings are now written
   ON the traces at varying offsets: no column structure can form. */
.readout{margin-top:clamp(22px,2.8vw,38px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.readout svg{width:100%;min-width:1180px;height:auto;display:block}
.readout text{font-family:var(--serif)}
.readout .rd-trace{stroke:rgba(244,240,231,.28);fill:none;stroke-linecap:round;filter:url(#chalkfx)}
.readout .rd-gold{stroke:var(--gold);fill:none;filter:url(#chalkfx)}
.readout .rd-num{font-style:italic;font-size:15px;fill:var(--gold-dim)}
.readout .rd-name{font-size:22px;fill:var(--chalk)}
.readout .rd-kind{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.2em;fill:var(--gold-dim)}
.readout .rd-find{font-style:italic;font-size:18px;fill:var(--gold)}
.readout .rd-note{font-style:italic;font-size:17px;fill:rgba(244,240,231,.42)}

/* I2. scenarios - menu on the left, the modelled return on the right */
.scn-split{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,4vw,72px);
  align-items:start;margin-top:clamp(24px,3vw,40px);
}
@media (max-width:900px){.scn-split{grid-template-columns:1fr;gap:30px}}
.scn-h4{
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);margin:0 0 10px;
}
.scn-item{
  display:flex;align-items:baseline;gap:13px;padding:clamp(8px,1vw,12px) 0;
  border-top:1px solid var(--rule-dark);font-size:clamp(15px,1.4vw,18px);
  font-family:var(--serif);color:rgba(244,240,231,.6);
}
.scn-item i{font-style:normal;font-size:11px;color:rgba(244,240,231,.25);min-width:16px}
.scn-item.on{color:var(--gold)}
.scn-item.on i{color:var(--gold)}
.scn-panel .scn-q{font-family:var(--serif);font-size:clamp(22px,2.4vw,34px);line-height:1.2;margin:0}
.scn-panel .scn-sub{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,18px);
  color:var(--gold);margin:10px 0 0;
}
.scn-panel svg{width:100%;height:auto;display:block;margin-top:clamp(10px,1.4vw,18px)}
.scn-panel svg text{font-family:var(--serif)}
.scn-ax{stroke:rgba(244,240,231,.5);fill:none;filter:url(#chalkfx)}
.scn-pos{stroke:var(--gold);fill:none;opacity:.85;filter:url(#chalkfx)}
.scn-neg{stroke:rgba(244,240,231,.42);fill:none;filter:url(#chalkfx)}
.scn-lab{font-style:italic;font-size:17px;fill:rgba(244,240,231,.5)}
.scn-val{font-size:20px}
.scn-pos-t{fill:var(--gold)}
.scn-neg-t{fill:rgba(244,240,231,.6)}
.scn-verdict{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,18.5px);
  line-height:1.55;color:rgba(244,240,231,.62);margin:clamp(14px,1.8vw,22px) 0 0;
}

.corr-note{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,18px);
  color:var(--gold);margin:clamp(18px,2.2vw,28px) 0 0;text-align:right;
}

/* D. crossing - full-width annotated matrix */
.cross-wrap{margin-top:clamp(20px,2.6vw,34px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.cross-wrap svg{width:100%;min-width:1200px;height:auto;display:block}
.cross-wrap .cx-stroke{stroke:var(--board);fill:none;filter:url(#chalkfx)}
.cross-wrap .cx-gold{stroke:var(--gold-dim);fill:none;filter:url(#chalkfx)}
.cross-wrap text{font-family:var(--serif)}
.cross-wrap .cx-dom{font-style:italic;font-size:16px;fill:var(--graphite)}
.cross-wrap .cx-pair{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.1em;fill:var(--gold-dim)}
.cross-wrap .cx-q{font-style:italic;font-size:17px;fill:var(--board)}
.cross-wrap .cx-note{font-style:italic;font-size:19px;fill:var(--gold-dim)}

/* E. three lenses (replaces the matrix table) */
.lens svg path,.lens svg circle{fill:none;stroke:var(--chalk);stroke-width:2.1;stroke-linecap:round;filter:url(#chalkfx)}
.lens svg .lg{stroke:var(--gold)}
.lens-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,70px);margin-top:clamp(28px,3.4vw,46px)}
.lens{text-align:center}
.lens svg{width:clamp(96px,10vw,140px);height:auto;margin:0 auto clamp(14px,1.8vw,22px);display:block}
.lens h3{font-size:clamp(23px,2.3vw,32px);margin-bottom:10px}
.lens .lq{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,18px);color:var(--gold);margin:0 0 14px}
.lens .lrun{font-size:13.5px;line-height:1.95;color:rgba(244,240,231,.55);margin:0}
.lens .lrun em{font-style:normal;color:rgba(244,240,231,.28);padding:0 6px}
@media (max-width:860px){.lens-row{grid-template-columns:1fr;gap:34px}}

/* F. leading indicators */
.lead-line{margin-top:clamp(16px,2vw,26px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.lead-line svg{width:100%;height:auto;display:block}
/* A 1400-unit viewBox squeezed into a 340px screen renders 14px labels at 3px.
   Give the wide charts a scroll floor instead. */
@media (max-width:900px){
  .lead-line svg{min-width:1100px}
  .exec-chart svg{min-width:1180px}
}
@keyframes leadflow{0%{stroke-dashoffset:640;opacity:0}10%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
.lead-run{stroke-dasharray:22 618;animation:leadflow 5s linear infinite;opacity:0}
@media (prefers-reduced-motion:reduce){.lead-run{animation:none;opacity:.4}}

/* G. autonomous - loop flanked by dense columns */
.loop-3{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(24px,3vw,52px);align-items:center;margin-top:clamp(24px,3vw,40px)}
.loop-3 .lc h4,.loop-3 .lc .lc-h{
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);margin:0 0 12px;
}
.loop-item{padding:clamp(11px,1.4vw,15px) 0;border-top:1px solid var(--rule)}
.loop-item b{font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.5vw,20px);display:block;margin-bottom:3px}
.loop-item span{font-size:13.5px;color:var(--graphite);line-height:1.5}
.loop-3 svg{width:100%;height:auto;display:block;overflow:visible}
.loop-3 .mid svg path,.loop-3 .mid svg circle{fill:none;filter:url(#chalkfx)}
@keyframes orbit{to{transform:rotate(360deg)}}
.loop-orbit{transform-origin:280px 280px;animation:orbit 16s linear infinite}
@media (prefers-reduced-motion:reduce){.loop-orbit{animation:none}}
@media (max-width:1080px){.loop-3{grid-template-columns:1fr}.loop-3 .mid{order:-1;max-width:480px;margin-inline:auto}}
/* The loop is square and legible at any width, so it must opt out of the
   720px min-width `.board-diagram` gives wide charts, or it scrolls for nothing. */
@media (max-width:860px){
  .loop-3 .mid{overflow:visible}
  .loop-3 .mid svg{min-width:0}
}

/* H. decision - drawn tickets on the board */
.tickets{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(16px,2vw,26px);margin-top:clamp(24px,3vw,40px)}
.ticket{position:relative;padding:clamp(20px,2.4vw,28px) clamp(18px,2.2vw,26px)}
.ticket::before,.ticket::after,.ticket i::before,.ticket i::after{
  content:"";position:absolute;width:20px;height:20px;border-color:var(--gold-dim);border-style:solid;opacity:.7;
  transition:width .35s var(--ease),height .35s var(--ease);
}
.ticket::before{top:0;left:0;border-width:1.4px 0 0 1.4px}
.ticket::after{top:0;right:0;border-width:1.4px 1.4px 0 0}
.ticket i::before{bottom:0;left:0;border-width:0 0 1.4px 1.4px}
.ticket i::after{bottom:0;right:0;border-width:0 1.4px 1.4px 0}
.ticket:hover::before,.ticket:hover::after,.ticket:hover i::before,.ticket:hover i::after{width:32px;height:32px}
.ticket b{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;
}
.ticket span{font-size:14px;color:rgba(244,240,231,.62);line-height:1.6}
.ticket.verdict{grid-column:1/-1}
.ticket.verdict span{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,21px);color:var(--gold)}
@media (max-width:860px){.tickets{grid-template-columns:1fr}}
.dec-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,3.6vw,64px);align-items:start;margin-top:clamp(22px,2.8vw,38px)}
@media (max-width:860px){.dec-split{grid-template-columns:1fr}}
.dec-q{font-family:var(--serif);font-size:clamp(26px,3vw,44px);line-height:1.15}
.dec-weigh{font-size:14px;line-height:2;color:rgba(244,240,231,.55);margin:clamp(16px,2vw,24px) 0 0}
.dec-weigh em{font-style:normal;color:rgba(244,240,231,.28);padding:0 7px}
.dec-h4{
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);margin:0 0 6px;
}
.dec-note{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,18px);
  color:var(--gold);margin:clamp(14px,1.8vw,22px) 0 0;
}
.dec-sketch{margin-top:clamp(20px,2.6vw,34px)}
.dec-sketch svg{width:100%;height:auto;display:block;overflow:visible}
.dec-sketch svg path,.dec-sketch svg circle{fill:none;filter:url(#chalkfx)}
/* Squeezed into a phone this 1400-unit flow becomes an illegible smudge, and
   scrolling it defeats the point (the whole value is seeing converge + diverge
   at once). Its content is already stated in the run above and the tickets
   below, so drop it rather than ship a smear. */
@media (max-width:900px){.dec-sketch{display:none}}

/* I. scenarios - one dense written run */
.scen-run{
  font-family:var(--serif);font-size:clamp(20px,2.3vw,34px);line-height:1.55;
  max-width:none;margin-top:clamp(22px,2.8vw,38px);color:rgba(244,240,231,.45);
}
.scen-run b{font-weight:400;color:var(--chalk)}
.scen-run em{font-style:normal;color:var(--gold);padding:0 4px}

/* J. exec chart */
.exec-chart{margin-top:clamp(20px,2.6vw,34px)}
.exec-chart svg{width:100%;height:auto;display:block;overflow:visible}

/* K. surfaces - auto-scrolling carousel */
.surf{overflow:hidden;margin-top:clamp(26px,3.2vw,44px);position:relative}
.surf::before,.surf::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.surf::before{left:0;background:linear-gradient(90deg,var(--warm),transparent)}
.surf::after{right:0;background:linear-gradient(270deg,var(--warm),transparent)}
.surf-track{display:flex;gap:clamp(20px,2.4vw,34px);width:max-content;animation:surfscroll 64s linear infinite}
.surf:hover .surf-track{animation-play-state:paused}
@keyframes surfscroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.surf-track{animation:none}.surf{overflow-x:auto}}
.surf-card{flex:0 0 clamp(280px,26vw,380px);border-top:1.5px solid var(--rule);padding-top:clamp(14px,1.8vw,20px)}
.surf-card .sn{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--gold-dim);display:block;margin-bottom:7px}
.surf-card h3{font-size:clamp(18px,1.7vw,23px);margin-bottom:9px;line-height:1.2}
.surf-card p{font-size:13.5px;color:var(--graphite);line-height:1.6;margin:0 0 10px}
.surf-card .read{display:block;font-family:var(--serif);font-size:clamp(14.5px,1.35vw,17px);line-height:1.5;color:var(--board)}
.surf-card .read::before{
  content:"The read";display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:5px;
}

/* L. close - a signal trace that develops a deviation, not a crosshair */
.close-mark{
  width:min(100%,clamp(300px,42vw,620px));height:auto;
  margin:0 auto clamp(20px,2.6vw,34px);display:block;overflow:visible;
}
.close-mark path,.close-mark circle{fill:none;filter:url(#chalkfx)}
.close-mark .cm-line{stroke:rgba(244,240,231,.5);stroke-width:2;stroke-linecap:round}
.close-mark .cm-gold{stroke:var(--gold);stroke-width:2.2;stroke-linecap:round}
.close-mark text{font-family:var(--serif);font-style:italic;font-size:19px;fill:var(--gold)}
@keyframes cmscan{0%{stroke-dashoffset:900;opacity:0}12%{opacity:.85}100%{stroke-dashoffset:0;opacity:0}}
.cm-scan{stroke-dasharray:26 874;animation:cmscan 5.5s linear infinite;opacity:0}
@media (prefers-reduced-motion:reduce){.cm-scan{animation:none;opacity:.35}}


/* ==========================================================================
   CHALK MARKS - shared marginalia vocabulary used on every page.
   Each mark is absolutely positioned against a zero-size host so adding or
   moving one can never reflow the copy it annotates.
   ========================================================================== */
.mk-host{position:relative;display:block;width:0;height:0;z-index:var(--z,3)}
.mk{
  position:absolute;top:var(--top,0);left:var(--left,auto);right:var(--right,auto);
  transform:rotate(var(--rot,0deg));pointer-events:none;overflow:visible;
}
.mk-circle{width:var(--w,210px);height:auto}
.mk-scribble{width:var(--w,120px);height:auto}
.mk-arrow{width:var(--w,130px);height:auto}
.mk-star{width:var(--w,44px);height:auto}
.mk-tick{width:var(--w,52px);height:auto}
.mk-bracket{height:var(--h,140px);width:auto}
.mk path{
  fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;filter:url(#chalkfx);
}
.mk-circle path,.mk-bracket path{stroke-width:2}
.mk-star path,.mk-tick path{stroke-width:2.4}
.env-cream .mk path,.env-warm .mk path{stroke:var(--gold-dim)}
.mk-note{
  position:absolute;top:var(--top,0);left:var(--left,auto);right:var(--right,auto);
  width:var(--w,190px);transform:rotate(var(--rot,0deg));
  font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.3;
  color:var(--gold);pointer-events:none;
}
.env-cream .mk-note,.env-warm .mk-note{color:var(--gold-dim)}
/* marks are decoration: never let them cost layout or legibility on a phone */
@media (max-width:820px){.mk-host{display:none}}


/* drawn ticks replace bullet glyphs on the assurance list */
.assure ul{list-style:none;margin:0;padding:0}
.assure li{display:grid;grid-template-columns:30px 1fr;gap:0 14px;align-items:start;padding:11px 0}
.assure .li-tick{width:26px;height:auto;margin-top:2px;overflow:visible}
.assure .li-tick path{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;filter:url(#chalkfx)}
.env-cream .assure .li-tick path,.env-warm .assure .li-tick path{stroke:var(--gold-dim)}

/* Linking arcs were trialled across the question board and removed: stretched
   over a tall container with preserveAspectRatio:none, the dash pattern broke
   into scattered specks that read as dirt rather than as connections. */
.qboard{position:relative}
.qboard > .qb{position:relative;z-index:1}


/* ==========================================================================
   MOBILE TYPE FLOOR
   Letterspaced micro-labels sit at 10.5px, which is legible on a desktop at
   arm's length and marginal on a phone. Raise the floor and relax the
   tracking below 600px, where the label has less room to breathe anyway.
   ========================================================================== */
@media (max-width:1024px),(pointer:coarse){
  .kicker{font-size:11.5px;letter-spacing:.18em}
  .dec-h4,.scn-h4,.lay-h4{font-size:11.5px;letter-spacing:.18em}
  .surf-card .read::before{font-size:11.5px;letter-spacing:.16em}
  .loop-3 .lc h4,.loop-3 .lc .lc-h{font-size:11.5px;letter-spacing:.18em}
  .ticket b{font-size:11.5px;letter-spacing:.16em}
  .field label,.form label{font-size:11.5px;letter-spacing:.14em}
  h4{font-size:11.5px}
  .q-no,.sn,.dn{font-size:13px}
  .principles-label{font-size:11.5px;letter-spacing:.18em}
  .note .series{font-size:11.5px;letter-spacing:.14em}
  .note a{font-size:12px}
  .svc-meta em,.svc-meta span{font-size:11.5px}
  .tier .seats,.seats,.cap-when{font-size:11.5px;letter-spacing:.14em}
  .sector-panel h4,.panel-block h4{font-size:11.5px;letter-spacing:.16em}
  .scn-item i{font-size:12px}
@media (max-width:600px){
  /* stacked sections need a little more air once everything is single column */
  .sec{padding-block:clamp(48px,11vw,72px)}
  .sec-tight{padding-block:clamp(38px,9vw,56px)}
}
@media (max-width:1024px),(pointer:coarse){
  /* comfortable taps on anything touched, not just narrow screens */
  .tlink{padding-block:7px}
  .note a{display:inline-block;padding-block:8px}
  /* the logo descender is a wide-tracked 8.5px mark: too fine on a handset */
  .logo-name small{font-size:10px;letter-spacing:.36em}
  .foot-title{font-size:11.5px;letter-spacing:.24em}
  .foot-base span{font-size:12px}
  .mobile-menu a i{font-size:12px}
}
  /* give stacked sections a little more air so the rhythm survives the squeeze */
  .sec{padding-block:clamp(48px,11vw,72px)}
  .sec-tight{padding-block:clamp(38px,9vw,56px)}
}


/* drawn diagrams lift a touch on hover: chalk catching the light */
@media (hover:hover) and (pointer:fine){
  .board-diagram svg,.readout svg,.cross-wrap svg,.lay-wrap svg,.exec-chart svg,.lead-line svg{
    transition:filter .5s var(--ease);
  }
  .board-diagram:hover svg,.readout:hover svg,.cross-wrap:hover svg,
  .lay-wrap:hover svg,.exec-chart:hover svg,.lead-line:hover svg{
    filter:brightness(1.09) saturate(1.04);
  }
  .au-step{transition:transform .45s var(--ease)}
  .au-step:hover{transform:translateX(6px)}
  .corr{transition:transform .5s var(--ease)}
  .corr:hover{transform:rotate(var(--rot,0deg)) translateY(-3px)}
}


/* ==========================================================================
   HERO CHALK FIELD - a worked-on board behind every hero.
   Radar rings stay unique to Intelligence; this is the quieter cousin.
   ========================================================================== */
.hero-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.hf-arc{fill:none;stroke:rgba(244,240,231,.07);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:5 16}
.hf-mark{fill:none;stroke:rgba(244,240,231,.13);stroke-width:1.2;stroke-linecap:round}
.hf-mark.g{stroke:rgba(200,154,70,.3)}
@keyframes hfdot{0%,100%{opacity:.12}45%{opacity:.6}}
.hf-dot{fill:none;stroke:var(--gold-dim);stroke-width:1.3;animation:hfdot 5s ease-in-out infinite}
@keyframes hfmote{0%{transform:translate3d(0,0,0);opacity:0}20%{opacity:.34}80%{opacity:.26}100%{transform:translate3d(-18px,-52px,0);opacity:0}}
.hf-mote{fill:rgba(244,240,231,.36);animation:hfmote 14s ease-in-out infinite}
/* the bleed heroes sit over photography; keep the field off their imagery */
.bleed .hero-field{opacity:.5}
.hero-board .wrap,.convo-hero .copy,.bleed .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.hf-dot,.hf-mote{animation:none;opacity:.2}}
@media (max-width:900px){.hero-field{opacity:.45}}
@media (max-width:600px){.hero-field{opacity:.3}}