/* ── v2.css ── */
/* study.css — nexocore.ca, direction 1 "paper & clay, sharpened". Derived from ../../../nexocore-io/site/earth.css:
   same tokens, type and controls; the page ground is the painting's own sky. Hero study only: beats 1–3. */
:root{
  --paper:#F5EFE6; --card:#FBF8F2; --paper-2:#E9E2D7; --ink:#2A2420; --graphite:#5C5249; --stone:#8C8377; --line:#DDD6CA;
  --clay:#C87A5E; --clay-deep:#B0664C; --mark:#A74B31;
  --dark:#181510; --bone:#EFE8DD; --ash:#9B9186; --cactus:#6B9A86;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shell{max-width:1180px;margin:0 auto;padding:0 40px}

/* ── type ── */
h1{font-family:var(--serif);font-weight:340;font-size:clamp(40px,4.7vw,66px);line-height:1.02;letter-spacing:-.025em;margin:16px 0 18px;text-wrap:balance}
h2{font-family:var(--serif);font-weight:340;font-size:clamp(32px,3.4vw,44px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 12px;text-wrap:balance}
h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
h1 em,h2 em,.answer em{font-style:italic;font-weight:340;color:var(--clay);font-variation-settings:"SOFT" 60,"WONK" 1}
p{margin:0}
.lede{font-size:17px;color:var(--graphite);max-width:54ch;margin:0}
.sub{font-size:18px;color:var(--graphite);max-width:54ch;margin:0 0 28px}
.sub strong,.lede strong{font-weight:500;color:var(--ink)}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);display:flex;align-items:flex-start;gap:10px;margin:0;line-height:1.5}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--clay);flex:none;margin-top:5px}
.note{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin:24px 0 0;line-height:1.7}

/* ── controls ── */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:14px 22px;font-family:var(--sans);font-weight:500;font-size:15px;text-decoration:none;line-height:1;border:0;cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease)}
.btn-clay{background:var(--clay);color:var(--ink)}
.btn-clay:hover{background:var(--clay-deep);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--card)}
.cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ── nav ── */
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .mark{height:22px;width:auto;display:block;color:var(--mark)}
.wordmark{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.01em}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--graphite);text-decoration:none;font-size:15px}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:11px 18px;font-size:14px}

/* ── hero: the copy sits in the painting's sky ── */
.hero{position:relative;overflow:hidden;min-height:clamp(640px,100vh,940px);display:flex;flex-direction:column}
.hero-art{position:absolute;inset:0;z-index:0}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;display:block}
.hero-art::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--paper) 0%,var(--paper) 12%,rgba(245,239,230,0) 50%)}
.hero .shell{position:relative;z-index:1;width:100%}
.hero-copy{text-align:center;max-width:760px;margin:0 auto;padding:clamp(28px,6vh,64px) 0 0}
.hero-copy .mono{color:var(--graphite);letter-spacing:.1em;font-size:12px}
.hero-copy h1{max-width:16ch;margin-left:auto;margin-right:auto}
.hero-copy .sub{margin-left:auto;margin-right:auto}
.hero-copy .cta{justify-content:center}

/* ── the fourteen ── */
.clients{padding:30px 0 6px;text-align:center}
.clients .mono{display:block}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 40px;margin:20px auto 0;max-width:1040px}
.logos img{height:22px;width:auto;filter:grayscale(1);opacity:.7;mix-blend-mode:multiply}
.logos img.tall{height:30px}

/* ── the questions ── */
.questions{padding:112px 0 80px}
.questions .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 72px;align-items:start}
.questions .copy{display:grid;gap:18px;align-content:start}
.questions .copy h2{margin:12px 0 0}
.qs{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.qs li{font-family:var(--serif);font-weight:340;font-size:clamp(22px,2.1vw,30px);line-height:1.2;letter-spacing:-.015em;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.answer{margin:24px 0 0;display:flex;gap:14px;align-items:baseline;font-family:var(--serif);font-weight:340;font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.015em}
.answer .mono{color:var(--clay);flex:none;font-size:12px;letter-spacing:.1em}

/* ── results ── */
.results{padding:64px 0 96px;border-top:1px solid var(--line)}
.results .head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
.results .head .lede{max-width:40ch}
.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:44px 0 60px}
.feat{margin:0;display:grid;gap:14px;align-content:start}
.frame{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--paper-2);position:relative}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame.ph{display:grid;place-items:center;text-align:center;padding:24px;border:1px dashed var(--line)}
.frame.ph .mono{color:var(--stone);line-height:1.8;max-width:22ch}
.feat figcaption{display:grid;gap:6px}
.feat .brand-name{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.feat b{display:block;font-family:var(--serif);font-weight:340;font-size:clamp(40px,3.6vw,50px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;margin-top:2px}
.feat b i{font-style:normal;color:var(--cactus)}
.feat .what{font-size:15px;color:var(--graphite);max-width:34ch}
.feat .what strong{font-weight:500;color:var(--ink)}
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:132px minmax(0,1fr) auto 220px;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.ledger img{height:18px;width:auto;max-width:120px;filter:grayscale(1);opacity:.7;mix-blend-mode:multiply;justify-self:start}
.ledger .who b{display:block;font-weight:500;font-size:15px}
.ledger .who span{font-size:14px;color:var(--graphite)}
.ledger .fig{font-family:var(--serif);font-weight:340;font-size:30px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger .fig i{font-style:normal;color:var(--cactus)}
.ledger .cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);line-height:1.6}

/* ── where the study stops ── */
.next{padding:40px 0 100px;border-top:1px solid var(--line)}
.next .mono{line-height:2}
.next .mono b{color:var(--ink);font-weight:500}

@media (max-width:900px){
  .shell{padding:0 20px}
  .nav{height:64px}
  .nav-links a:not(.btn){display:none}
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero .shell{order:0}
  .hero-art{order:1;position:static;height:64vw;margin-top:28px}
  .hero-art::before{display:none}
  .hero-art img{object-position:50% 100%}
  .hero-copy{padding-top:28px}
  h1{font-size:clamp(38px,10.5vw,46px)}
  .sub{font-size:17px}
  .logos{gap:16px 26px}
  .logos img{height:18px}
  .questions{padding:72px 0 56px}
  .questions .shell{grid-template-columns:1fr}
  .results{padding:48px 0 72px}
  .results .head{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr;gap:36px}
  .frame{aspect-ratio:16/10}
  .ledger li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo logo" "who fig" "cap cap";gap:8px 16px;padding:18px 0}
  .ledger img{grid-area:logo}
  .ledger .who{grid-area:who}
  .ledger .fig{grid-area:fig;font-size:28px}
  .ledger .cap{grid-area:cap}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ── shared section head ── */
.head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 48px;align-items:end}
.head .lede{max-width:44ch}

/* ── how we work ── */
.approach{padding:88px 0 80px;border-top:1px solid var(--line)}
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line)}
.steps li{padding-top:20px;display:grid;gap:8px;align-content:start}
.steps .mono{color:var(--clay);font-size:12px;letter-spacing:.1em}
.steps h3{margin:2px 0 0}
.steps p{font-size:15px;color:var(--graphite);max-width:30ch}

/* ── what we run ── */
.work{padding:88px 0 80px;border-top:1px solid var(--line)}
.work-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px 72px;align-items:center;margin-top:44px}
.mark-stage{position:relative;aspect-ratio:1;overflow:hidden}
.mark-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.mark-stage .particles-still{display:none}
.services details{border-top:1px solid var(--line);padding:16px 0 14px}
.services details:last-child{border-bottom:1px solid var(--line)}
.services summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center}
.services summary::-webkit-details-marker{display:none}
.services summary::after{content:"+";grid-column:2;grid-row:1/3;font-family:var(--serif);font-weight:300;font-size:26px;line-height:1;color:var(--clay)}
.services details[open] summary::after{content:"−"}
.services summary h3{margin:0;grid-column:1}
.services summary .mono{grid-column:1;display:block}
.services details p{margin:12px 0 4px;font-size:15px;color:var(--graphite);max-width:52ch}
.services details p a{color:var(--ink)}
.strip-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:64px 0 14px;padding-top:16px;border-top:1px solid var(--line)}
.work-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.work-strip img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:4px;display:block;background:var(--paper-2)}

/* ── who we work with: the one dark band ── */
.people{background:var(--dark);color:var(--bone);padding:96px 0 100px}
.people .kicker{color:var(--ash)}
.people h2{color:var(--bone)}
.people .head{grid-template-columns:minmax(0,1fr) auto}
.people .stat{text-align:right}
.people .stat b{display:block;font-family:var(--serif);font-weight:340;font-size:50px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.people .stat .mono{color:var(--ash);display:block;margin-top:8px}
.quotes{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;margin-top:56px}
.quotes blockquote{margin:0;padding:24px 0 0;border-top:1px solid rgba(239,232,221,.18);display:grid;gap:20px;align-content:start}
.quotes p{font-family:var(--serif);font-weight:340;font-size:22px;line-height:1.35;letter-spacing:-.01em;color:var(--bone);max-width:none}
.quotes blockquote:first-child p{font-size:30px;line-height:1.25}
.quotes footer b{display:block;font-weight:500;font-size:14px;color:var(--bone)}
.quotes footer span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}

/* ── questions people ask ── */
.faq{padding:88px 0 72px}
.qa{margin-top:36px;border-top:1px solid var(--line);max-width:820px}
.qa details{border-bottom:1px solid var(--line);padding:18px 0}
.qa summary{list-style:none;cursor:pointer;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--clay);font-weight:300;font-size:26px;line-height:1;flex:none}
.qa details[open] summary::after{content:"−"}
.qa details p{margin:12px 0 2px;font-size:15px;color:var(--graphite);max-width:60ch}

/* ── closing: the painting again ── */
.closing{position:relative;overflow:hidden;min-height:clamp(560px,78vh,760px);display:flex;flex-direction:column;border-top:1px solid var(--line)}
.closing-art{position:absolute;inset:0;z-index:0}
.closing-art img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.closing-art::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--paper) 0%,var(--paper) 10%,rgba(245,239,230,0) 48%)}
.closing .shell{position:relative;z-index:1;width:100%}
.closing-copy{text-align:center;max-width:640px;margin:0 auto;padding:clamp(40px,8vh,84px) 0 0;display:grid;gap:14px;justify-items:center}
.closing-copy .kicker{justify-content:center}
.closing-copy h2{margin:0}
.book{padding:72px 0 88px}
.book .shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px 64px;align-items:start}
.book-copy{display:grid;gap:14px}
.book-copy .lede a{color:var(--ink)}
.calendar{min-height:560px;background:var(--card);border:1px solid var(--line);border-radius:4px;display:grid;place-items:center}
.calendar.live{display:block;border:0}

/* ── footer ── */
.foot{border-top:1px solid var(--line);padding:32px 0 48px}
.foot-row{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;align-items:center;padding:10px 0}
.foot .mono a{color:var(--graphite);text-decoration:none}
.foot .mono a:hover{color:var(--ink)}

@media (max-width:900px){
  .head{grid-template-columns:1fr}
  .approach,.work,.faq{padding:64px 0 56px}
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{border-top:1px solid var(--line);padding:18px 0}
  .steps li:first-child{border-top:0}
  .work-grid{grid-template-columns:1fr;gap:24px}
  .mark-stage{max-width:320px;margin:0 auto}
  .work-strip{grid-template-columns:repeat(2,1fr)}
  .people{padding:64px 0 72px}
  .people .head{grid-template-columns:1fr}
  .people .stat{text-align:left}
  .quotes{grid-template-columns:1fr;gap:20px;margin-top:36px}
  .quotes blockquote:first-child p{font-size:22px}
  .qa summary{font-size:19px}
  .closing{min-height:0}
  .closing-art{position:static;order:1;height:64vw}
  .closing-art::before{display:none}
  .closing-art img{object-position:50% 100%}
  .closing .shell{order:0}
  .closing-copy{padding:56px 0 36px}
  .book{padding:56px 0 64px}
  .book .shell{grid-template-columns:1fr}
  .calendar{min-height:0;padding:40px 20px}
  .calendar.live{min-height:660px;padding:0}
}
@media (prefers-reduced-motion:reduce){
}

/* ── drawn things: reveal, hero load, questions, loop, nodes, ring, mist ── */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js .hero-copy > *{animation:rise .9s var(--ease) both}
.js .hero-copy > :nth-child(2){animation-delay:.1s}
.js .hero-copy > :nth-child(3){animation-delay:.2s}
.js .hero-copy > :nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.js .hero-art img{animation:settle 11s var(--ease) both}
@keyframes settle{from{transform:scale(1.045)}to{transform:none}}
.hero-art::after,.closing-art::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(55% 46% at 28% 58%,rgba(245,239,230,.96),rgba(245,239,230,0) 70%),radial-gradient(46% 40% at 74% 52%,rgba(245,239,230,.92),rgba(245,239,230,0) 70%),radial-gradient(70% 30% at 50% 70%,rgba(245,239,230,.7),rgba(245,239,230,0) 70%)}
.js .hero-art::after{animation:mist 7.5s var(--ease) both}
.js .closing.in .closing-art::after{animation:mist 6s var(--ease) both}
@keyframes mist{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(3%)}}

.q-wrap{position:relative;padding-left:64px}
.q-lines{position:absolute;left:0;top:0;width:60px;height:100%;overflow:visible}
.q-wire{fill:none;stroke:color-mix(in srgb,var(--cactus) 60%,var(--line));stroke-width:1.25}
.q-node{fill:var(--paper);stroke:var(--cactus);stroke-width:1.5}
.q-end{fill:var(--paper);stroke:var(--cactus);stroke-width:1.5}
.q-dot{fill:var(--clay);opacity:0;offset-rotate:0deg}
.js .q-wrap.in .q-dot{animation:travel 1.5s var(--ease) forwards}
.js .q-wrap.in .q-end{animation:light .5s var(--ease) 1.7s forwards}
@keyframes travel{0%{opacity:0;offset-distance:0}12%{opacity:1}92%{opacity:1}100%{opacity:0;offset-distance:100%}}
@keyframes light{to{fill:var(--clay);stroke:var(--clay)}}
.q-wrap .answer .mono{display:none}

.loop{margin:44px 0 4px;overflow-x:auto}
.loop-svg{display:block;width:100%;min-width:760px;height:auto}
.loop-svg text{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--graphite)}
.loop-svg text.sub{fill:var(--stone);text-transform:none;letter-spacing:.02em}
.loop-svg text.serif{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.01em;text-transform:none;fill:var(--ink)}
.loop-svg text.clay{fill:var(--clay)}
.loop-svg text.green{fill:var(--cactus)}
.loop-svg .wire{fill:none;stroke:color-mix(in srgb,var(--cactus) 60%,var(--line));stroke-width:1.25}
.loop-svg .ret{stroke:color-mix(in srgb,var(--cactus) 80%,var(--line))}
.loop-svg .arrow{fill:color-mix(in srgb,var(--cactus) 80%,var(--line))}
.loop-svg .tile{fill:var(--card);stroke:var(--line);filter:drop-shadow(0 8px 14px rgba(42,36,32,.06))}
.loop-svg .node{fill:var(--paper);stroke:var(--cactus);stroke-width:1.5}
.loop-svg .signal{fill:var(--clay);opacity:0}
.loop-svg .signal.back{fill:var(--cactus)}
.still .loop-svg .signal{display:none}

.services{position:relative;padding-left:28px}
.services::before{content:"";position:absolute;left:5px;top:22px;bottom:22px;width:1px;background:color-mix(in srgb,var(--cactus) 60%,var(--line))}
.services details{position:relative}
.services details::before{content:"";position:absolute;left:-28px;top:24px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid var(--cactus);transition:background .3s var(--ease),border-color .3s var(--ease)}
.services details[open]::before{background:var(--clay);border-color:var(--clay)}

.people .stat{display:grid;justify-items:center;gap:0}
.people .stat .ring{grid-area:1/1;width:136px;height:136px}
.people .stat b{grid-area:1/1;align-self:center;font-size:44px;margin-top:2px}
.people .stat .mono{grid-area:2/1;margin-top:10px}
.ring-track{fill:none;stroke:rgba(239,232,221,.14);stroke-width:2}
.ring-arc{fill:none;stroke:var(--clay);stroke-width:2;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.8s var(--ease) .25s}
.still .ring-arc,.stat.in .ring-arc{stroke-dashoffset:49}
.frame video{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
  .q-wrap{padding-left:0}
  .q-lines{display:none}
  .q-wrap .answer .mono{display:inline}
  .loop{margin:32px -20px 0;padding:0 20px}
  .people .stat{justify-items:start}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-copy > *,.hero-art img,.hero-art::after,.closing-art::after,.q-dot,.q-end{animation:none !important}
  .hero-art::after,.closing-art::after{display:none}
  .q-dot{display:none}
  .ring-arc{transition:none}
}

/* ── the particle mark: motes, gathering, formed ── */
.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply}
.q-stage{display:grid;gap:14px;justify-items:center;align-content:start;text-align:center}
.stage-box{position:relative;width:100%;max-width:540px;aspect-ratio:1}
.stage-box canvas,.stage-box img,.mark-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-box img,.mark-stage img{object-fit:cover;mix-blend-mode:multiply}
.js .particles-still,.still .particles-still{display:none}
.q-stage .answer{margin:6px 0 0;justify-content:center}
.questions .copy .qs{margin:26px 0 22px}
.questions .copy .lede{max-width:48ch}
@media (max-width:900px){
  .stage-box{max-width:380px}
}

/* ── v2-layout.css ── */
/* v2-layout.css — the skimmable shapes: stat row and marquee, rails of cards, the pinned loop,
   service cards, quote cards. Loads after v2.css and only adds or overrides. */

/* ── stat row under the painting ── */
.stats{padding:36px 0 0}
.stat-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-row li{padding:22px 0 20px;display:grid;gap:6px;border-left:1px solid var(--line);padding-left:22px}
.stat-row li:first-child{border-left:0;padding-left:0}
.stat-row b{font-family:var(--serif);font-weight:340;font-size:44px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.marquee{overflow:hidden;padding:26px 0 8px;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;align-items:center;width:max-content;animation:marquee 60s linear infinite}
.marquee-track img{height:20px;width:auto;filter:grayscale(1);opacity:.65;mix-blend-mode:multiply}
.marquee-track img.tall{height:28px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── rails: horizontal, snapping, swipeable ── */
.rail{position:relative}
.track{list-style:none;margin:0;padding:0 max(20px,calc((100% - 1100px)/2));display:grid;grid-auto-flow:column;grid-auto-columns:calc((min(1100px,100% - 40px) - 48px)/3);gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,calc((100% - 1100px)/2));scrollbar-width:none;align-items:start;padding-bottom:6px}
.track::-webkit-scrollbar{display:none}
.track > li{scroll-snap-align:start}
.rail-head{display:grid;gap:14px;justify-items:end;text-align:right}
.rail-head .lede{max-width:34ch}
.arrows{display:flex;gap:8px}
.arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font:400 17px/1 var(--sans);display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.arrow:hover{background:var(--ink);color:var(--bone)}
.arrow.light{border-color:rgba(239,232,221,.45);color:var(--bone)}
.arrow.light:hover{background:var(--bone);color:var(--dark)}
.rail-foot{display:flex;justify-content:flex-end;padding-top:24px}

/* ── case cards ── */
.cases{padding:96px 0 72px;border-top:1px solid var(--line)}
.cases .head{margin-bottom:36px}
.case{display:grid;gap:10px;align-content:start}
.case .frame{aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--paper-2);position:relative}
.case .frame video,.case .frame img{width:100%;height:100%;object-fit:cover;display:block}
.case .frame.tile{display:grid;place-items:center}
.case .frame.tile img{width:46%;height:auto;object-fit:contain;filter:grayscale(1);opacity:.7;mix-blend-mode:multiply}
.case .frame.ph{display:grid;place-items:center;text-align:center;padding:24px;border:1px dashed var(--line)}
.case .frame.ph .mono{line-height:1.8;max-width:22ch}
.case .brand-name{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-top:4px}
.case > b{display:block;font-family:var(--serif);font-weight:340;font-size:44px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.case > b i{font-style:normal;color:var(--cactus)}
.one{font-size:15px;line-height:1.45;color:var(--ink);max-width:none;min-height:2.9em}
.one .grey{color:var(--graphite)}
.more{border-top:1px solid var(--line);margin-top:6px}
.more summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-family:var(--serif);font-weight:300;font-size:22px;line-height:1;color:var(--clay)}
.more[open] summary::after{content:"−"}
.more > div,.more > p{padding:2px 0 14px;font-size:15px;color:var(--graphite);display:grid;gap:10px;margin:0}
.metrics{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px;color:var(--graphite)}
.metrics b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cases .note{margin-top:28px}

/* ── how we work, pinned ── */
.approach{padding:96px 0 40px}
.sticky-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:48px 64px;align-items:start;margin-top:32px}
.steps-tall{list-style:none;margin:0;padding:0}
.steps-tall li{min-height:38vh;display:grid;align-content:center;gap:8px;opacity:.32;transition:opacity .45s var(--ease)}
.steps-tall li.on{opacity:1}
.steps-tall li:first-child{min-height:30vh;align-content:start;padding-top:20px}
.steps-tall li:last-child{min-height:30vh;align-content:start}
.steps-tall .mono{color:var(--clay);font-size:12px;letter-spacing:.1em}
.steps-tall h3{margin:2px 0 0;font-size:30px}
.steps-tall p{font-size:17px;color:var(--graphite);max-width:32ch}
.pin{position:sticky;top:88px}
.loop{margin:0;overflow:visible}
.loop-svg{min-width:0;width:100%;max-width:600px;height:auto;margin:0 auto}
.loop-svg .g-in,.loop-svg .g-plan,.loop-svg .g-act{transition:opacity .45s var(--ease)}
.loop-svg.s1 .g-plan,.loop-svg.s1 .g-act,.loop-svg.s2 .g-in,.loop-svg.s2 .g-act,.loop-svg.s3 .g-in,.loop-svg.s3 .g-plan{opacity:.38}
.loop-svg.s1 .g-in .node{stroke:var(--clay)}
.loop-svg.s1 .g-in .wire{stroke:var(--clay)}
.loop-svg.s2 .g-plan .tile{stroke:var(--clay)}
.loop-svg.s3 .g-act .tile{stroke:var(--clay)}
.loop-svg.s3 .g-act .ret{stroke:var(--clay)}

/* ── service cards ── */
.work{padding:72px 0 96px;border-top:1px solid var(--line)}
.with-mark{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.mark-small{position:relative;width:104px;aspect-ratio:1}
.mark-small canvas,.mark-small img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mark-small img{object-fit:cover;mix-blend-mode:multiply}
.svc-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.svc{display:grid;gap:10px;align-content:start}
.svc .frame{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--paper-2);position:relative}
.svc .frame img{width:100%;height:100%;object-fit:cover;display:block}
.svc .frame.ph{display:grid;place-items:center;text-align:center;padding:20px;border:1px dashed var(--line)}
.svc .frame.ph .mono{line-height:1.8;max-width:22ch}
.chip{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--clay);border:1px solid color-mix(in srgb,var(--clay) 40%,var(--line));padding:6px 9px;border-radius:999px;width:max-content;margin-top:4px}
.svc h3{margin:0}
.svc .more > p a{color:var(--ink)}

/* ── who we work with: dark band with a quote rail ── */
.people{padding:88px 0 80px}
.people .head{margin-bottom:36px}
.dark-rail .track{grid-auto-columns:calc((min(1100px,100% - 40px) - 24px)/2)}
.quote{display:grid;gap:18px;align-content:start;border-top:1px solid rgba(239,232,221,.18);padding-top:22px}
.quote .say{font-family:var(--serif);font-weight:340;font-size:30px;line-height:1.25;letter-spacing:-.01em;color:var(--bone);max-width:none}
.quote footer b{display:block;font-weight:500;font-size:14px;color:var(--bone)}
.quote footer span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.quote .more{border-top-color:rgba(239,232,221,.18)}
.quote .more summary{color:var(--ash)}
.quote .more > p{color:var(--ash);font-size:15px}

/* ── trims ── */
.faq{padding:88px 0 72px;border-top:1px solid var(--line)}
.book{padding:56px 0 88px}
.book .shell{display:grid;grid-template-columns:1fr;gap:14px}
.book-note{margin:0}
.book-note a{color:var(--graphite)}

.q-stage .answer{display:block;text-align:center}

@media (max-width:900px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:0}
  .loop-svg .g-in,.loop-svg .g-plan,.loop-svg .g-act{opacity:1 !important}
  .stat-row li{border-left:0;padding-left:0;padding:16px 0}
  .stat-row li:nth-child(even){border-left:1px solid var(--line);padding-left:18px}
  .stat-row b{font-size:36px}
  .track{grid-auto-columns:82%;padding:0 20px 6px;scroll-padding-inline:20px}
  .dark-rail .track{grid-auto-columns:86%}
  .rail-head{justify-items:start;text-align:left}
  .cases{padding:64px 0 48px}
  .sticky-grid{grid-template-columns:1fr;gap:24px}
  .pin{position:static;order:-1}
  .steps-tall li,.steps-tall li:first-child,.steps-tall li:last-child{min-height:0;padding:16px 0;opacity:1;border-top:1px solid var(--line)}
  .steps-tall h3{font-size:24px}
  .svc-grid{grid-template-columns:1fr;gap:28px}
  .with-mark{grid-template-columns:1fr}
  .mark-small{width:84px}
  .quote .say{font-size:22px}
  .people{padding:64px 0 64px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:18px 28px}
  .steps-tall li{opacity:1}
}

/* ── v2-tones.css ── */
/* v2-tones.css — the io colour system on the .ca page. One colour per lever, and it means the same
   thing everywhere: Reach (cactus) for ads, creative and affiliates; Convert (sky) for the website and
   offers; Keep (kraft) for email, SMS and retention; Wholesale (heather); AI in ink. Clay stays the voice. */
:root{--cactus:#6B9A86;--sky:#7FA3C7;--sky-mix:#3A73AD;--kraft:#D4A27F;--heather:#C9B3D6;--heather-mix:#6E5AB0}
.tone-reach{--tone:var(--cactus);--tone-mix:var(--cactus)}
.tone-convert{--tone:var(--sky);--tone-mix:var(--sky-mix)}
.tone-keep{--tone:var(--kraft);--tone-mix:var(--kraft)}
.tone-wholesale{--tone:var(--heather);--tone-mix:var(--heather-mix)}
.tone-ai{--tone:var(--ink);--tone-mix:var(--ink)}

/* the coloured text block: a pill that names the lever */
.pill-t{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tone,var(--stone)) 34%,var(--line));background:color-mix(in srgb,var(--tone-mix,var(--stone)) 12%,var(--paper));color:var(--graphite);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none}
.pill-t::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tone,var(--stone))}
.levers{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.levers .k{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-right:6px}

/* the questions carry their lever */
.qs li{display:flex;justify-content:space-between;align-items:center;gap:14px}

/* case cards: the lever named, and a before/after drawn in its colour */
.case .brand-name{display:flex;align-items:center;gap:8px}
.tone-dot{width:8px;height:8px;border-radius:50%;background:var(--tone,var(--stone));display:inline-block;flex:none}
.mini{width:132px;height:54px;display:block;margin:4px 0 2px}
.mini rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.03);transition:transform 1s var(--ease)}
.mini .m-before{fill:var(--paper-2)}
.mini .m-after{fill:var(--tone,var(--clay))}
.rail.in .mini .m-before{transform:scaleY(var(--h,.5))}
.rail.in .mini .m-after{transform:scaleY(1);transition-delay:.25s}
.mini .m-base{stroke:var(--line);stroke-width:1}
.mini .m-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;fill:var(--stone);text-transform:uppercase}

/* service cards: tinted like the io station cards, with a drawn set piece */
.svc{background:color-mix(in srgb,var(--tone-mix,var(--stone)) 9%,var(--paper));border-radius:12px;padding:14px 14px 10px}
.svc .frame{aspect-ratio:4/3;background:var(--card);border:1px solid var(--line);border-radius:8px}
.svc .chip{display:inline-flex;align-items:center;gap:7px;color:var(--graphite);border-color:color-mix(in srgb,var(--tone,var(--stone)) 40%,var(--line));background:color-mix(in srgb,var(--tone-mix,var(--stone)) 14%,var(--paper))}
.svc .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tone,var(--stone))}
.svc .more{border-top-color:color-mix(in srgb,var(--tone,var(--stone)) 30%,var(--line))}
.piece{width:100%;height:100%;display:block}
.piece .t-tile{fill:var(--card);stroke:var(--line);stroke-width:1}
.piece .t-tint{fill:color-mix(in srgb,var(--tone-mix,var(--clay)) 16%,var(--card));stroke:color-mix(in srgb,var(--tone,var(--clay)) 30%,var(--line));stroke-width:1}
.tone-ai .piece .t-tint{fill:color-mix(in srgb,var(--ink) 8%,var(--card));stroke:color-mix(in srgb,var(--ink) 24%,var(--line))}
.piece .t-line{fill:var(--line)}
.piece .t-wire{fill:none;stroke:color-mix(in srgb,var(--cactus) 60%,var(--line));stroke-width:1.25}
.piece .t-ghost{fill:none;stroke:none}
.piece .t-dot{fill:var(--tone,var(--clay))}
.piece .t-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--stone)}
.piece .t-say{font-family:var(--sans);font-size:12.5px;fill:var(--ink)}
.piece .t-btn{fill:var(--tone,var(--clay))}
.piece .t-btn-label{font-family:var(--sans);font-size:12px;font-weight:500;fill:var(--paper)}
.tone-ai .piece .t-btn{fill:var(--ink)}
.piece .t-dash{stroke-dasharray:4 4}
.piece .t-check{fill:none;stroke:var(--cactus);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the plan tile shows the levers it can hold */
.loop-svg .lchip rect{fill:color-mix(in srgb,var(--tone-mix,var(--stone)) 14%,var(--card));stroke:color-mix(in srgb,var(--tone,var(--stone)) 40%,var(--line));stroke-width:1}
.loop-svg .lchip circle{fill:var(--tone,var(--stone))}
.loop-svg .lchip text{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--graphite)}

@media (max-width:900px){
  .qs li{flex-wrap:wrap;gap:8px}
  .levers{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .spark .s-line{stroke-dashoffset:0}.spark .s-area{opacity:.12}.spark .s-end{opacity:1}
  .mini rect{transition:none}
  .rail.in .mini .m-before,.mini .m-before{transform:scaleY(var(--h,.5))}
  .rail.in .mini .m-after,.mini .m-after{transform:scaleY(1)}
}

/* ── v2-skeleton.css ── */
/* v2-skeleton.css — one skeleton for every working section, loaded last.
   Head: kicker, heading and one line on the left axis. The marker stands on the rule at the right
   end of the head, the way a signpost stands at a turn of the path. Content sits under the rule,
   full width, left-aligned. The only centred rows are the two paintings and the particle moment. */

/* ── section head ── */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:0 48px;align-items:end;border-bottom:1px solid var(--line);margin:0 0 40px}
.sec-head .copy{display:grid;gap:14px;align-content:end;padding:0 0 30px}
.sec-head h2{margin:0;max-width:20ch}
.sec-head .lede{max-width:58ch}
.sec-head .arrows{margin-top:6px}
.slot{position:relative;width:200px;height:200px;margin:0;justify-self:end;display:grid;align-items:end;justify-items:center;overflow:visible}
.slot > img{display:block;width:100%;height:auto;transform:translateY(7px)}
.mark-slot canvas,.mark-slot .particles-still{position:absolute;inset:0;width:100%;height:100%;display:block;transform:none}
.mark-slot .particles-still{object-fit:cover;mix-blend-mode:multiply}
.js .mark-slot .particles-still{display:none}
.still .mark-slot canvas{display:none}

/* ── the one number under the painting ── */
.stats{padding:0;border-bottom:1px solid var(--line)}
.stats .shell{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 40px;align-items:center}
.stat-one{margin:0;max-width:none;display:flex;align-items:baseline;gap:14px;padding:24px 40px 24px 0;border-right:1px solid var(--line)}
.stat-one b{font-family:var(--serif);font-weight:340;font-size:44px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats .marquee{padding:0;min-width:0}

/* ── results ── */
.cases .note{margin-top:24px}

/* ── how we work ── */
.sticky-grid{margin-top:0}
.pin .gather-stage{max-width:560px;margin:0 auto}
.js .gather-stage .particles-still{display:none}
.still .gather-stage canvas{display:none}
.steps-tall li:first-child{padding-top:0}

/* ── what we run ── */
.levers{margin-top:0}

/* ── who we work with, dark ── */
.quote{border-top:0;padding-top:0}
.people .sec-head{grid-template-columns:minmax(0,1fr);border-bottom-color:rgba(239,232,221,.18)}
.people .sec-head .copy{padding-bottom:26px}
.people .lede{color:var(--ash)}

/* ── before we talk ── */
.qa{border-top:0;margin-top:0}

/* ── book: the calendar, then the fallback ── */
.book .shell{display:grid;grid-template-columns:1fr;gap:14px}

/* ── hero, as the founder liked it in the Codex study: all ink, one dark button ── */
.hero .hero-copy{max-width:1040px}
.hero-copy h1{font-weight:380;font-size:clamp(46px,5.2vw,84px);line-height:1.02;letter-spacing:-.03em;max-width:none;text-wrap:wrap;margin:22px 0 22px;color:var(--ink)}
.hero-copy h1 em{font-style:normal;color:inherit}
.hero-copy .sub{font-size:18px;line-height:1.55;max-width:720px;margin:0 auto 30px;color:var(--graphite)}
.btn-ink,.btn-clay{background:var(--ink);color:var(--bone)}
.btn-ink:hover,.btn-clay:hover{background:var(--dark);transform:translateY(-1px)}
.nav-links a{color:var(--ink)}

/* ── recognition: the owner's situation, and the questions as their inner voice ── */
.recognition{padding:88px 0 80px}
.recognition .lede{max-width:52ch}
.rec-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px 72px;align-items:start}
.rec-copy{display:grid;gap:16px;font-size:17px;line-height:1.55;color:var(--graphite);max-width:40ch;padding-top:6px}
.rec-copy strong{font-weight:500;color:var(--ink)}
.rec-copy a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.rec-copy a:hover{border-color:var(--ink)}
.q-col{display:grid;gap:22px}
.q-stack{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-family:var(--serif);font-weight:340;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--graphite)}
.q-stack li:nth-child(2),.q-stack li:nth-child(4){padding-left:12%}
.resolve{margin:0;padding-left:12%;font-family:var(--serif);font-weight:340;font-size:30px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.resolve em{font-style:italic;color:var(--clay);font-variation-settings:"SOFT" 60,"WONK" 1}

@media (max-width:900px){
  .sec-head{grid-template-columns:1fr;gap:6px 0;margin-bottom:28px}
  .sec-head .copy{padding-bottom:18px}
  .slot{width:140px;height:140px;justify-self:start}
  .stats .shell{grid-template-columns:1fr;gap:0}
  .stat-one{border-right:0;padding:18px 0 10px}
  .stats .marquee{padding:0 0 12px}
  .hero-copy h1 br{display:none}
  .recognition{padding:56px 0 56px}
  .rec-grid{grid-template-columns:1fr;gap:28px}
  .pin .gather-stage{max-width:420px}
  .q-stack li:nth-child(2),.q-stack li:nth-child(4),.resolve{padding-left:0}
}

/* ── v2-codex.css ── */
/* v2-codex.css — the parts of the Codex study the founder asked for, rebuilt on our tokens. Loads last.
   The H1 in Baskervville (everything else stays Fraunces); the hero copy on the paper with the painting
   bottom-anchored beneath it; the bigger button; the Codex client strip with its logo treatments; the
   recognition section as the study built it; the whole-picture section with its tabbed diagram and the
   three steps in a row; and the results as a fan of cards. */

/* ── gold: the colour for a number we are proud of. Deeper than the study's sand (#e2c8a7), which only
   read as light type on its green; this one holds on the paper and sits between the clay and the ink. ── */
:root{--gold:#B8862B;--gold-deep:#8F6218}

/* ── H1 ── */
.hero-copy h1{font-family:Baskervville,Georgia,serif;font-weight:400;font-size:clamp(46px,5.3vw,84px);line-height:1.01;letter-spacing:-.03em}

/* ── hero: one screen tall; the painting behind the copy, its sky blending up into the paper ── */
.hero{min-height:0;height:clamp(640px,100vh,900px)}   /* one screen, capped: the founder found the uncapped version too big */
.hero-art{top:76px}   /* the painting moves down with the copy, so the text keeps its place on it */
.hero-art img{object-position:50% 62%}
.hero-copy{padding:clamp(56px,8vh,92px) 0 0}
.hero-copy .sub{margin-bottom:30px}
.hero .btn-ink{min-height:54px;padding:16px 36px;font-size:17px}

/* ── client strip: the Codex sizes and treatments, so every mark reads ── */
.stats .shell{gap:0 32px}
.stats .marquee{padding:4px 0}
.marquee-track{gap:64px}
.marquee-track img,.marquee-track img.tall{height:auto;max-height:54px;max-width:148px;width:auto;filter:grayscale(1);opacity:1;mix-blend-mode:multiply}
.marquee-track img.logo-light-mark{filter:brightness(0);opacity:.72;mix-blend-mode:normal}
.marquee-track img.logo-white-matte{filter:url(#client-logo-white-matte);mix-blend-mode:normal}
.logo-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.stat-one{padding:28px 40px 28px 0}

/* ── recognition, as the study built it ── */
.recognition{padding:64px 0 72px}
.rec-codex{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.recognition-copy h2{max-width:560px;line-height:1.15;margin:0 0 25px}
.recognition-copy>p{font-size:17px;line-height:1.55;max-width:510px;color:var(--graphite);margin:0}
.recognition-copy>p+p{margin-top:16px}
.recognition-copy>p strong{font-weight:500;color:var(--ink)}
.recognition-copy .recognition-last{color:var(--ink)}
.questions{position:relative;align-self:center;width:100%;max-width:510px;margin:0;padding:15px 0}
.question{font-family:var(--serif);font-weight:340;font-size:22px;line-height:1.3;margin:0 0 14px;color:color-mix(in srgb,var(--cactus) 30%,var(--graphite))}
.q-one{transform:rotate(-2deg)}
.q-two{margin-left:9%;transform:rotate(2deg)}
.q-three{transform:rotate(-1deg);color:var(--clay)}
.q-four{margin-left:13%;transform:rotate(2deg)}
.question-resolution{margin:0 0 0 17%;display:flex;gap:10px;align-items:center}
.question-resolution svg{width:42px;height:60px;color:var(--clay);align-self:flex-start;fill:none;flex:none}
.question-resolution p{padding-top:12px;margin:0;max-width:none;font-family:var(--serif);font-weight:340;font-size:30px;line-height:1.1;letter-spacing:-.015em}
.question-resolution em{color:var(--clay);font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1}

/* ── how we work: heading beside the gathering, then the tabbed diagram, then the steps ── */
.approach{padding:88px 0 72px}
.approach-opening{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:45px;margin-bottom:40px}
.approach-heading{display:grid;gap:14px}
.approach-heading h2{max-width:650px;margin:0}
.approach-heading>p{font-size:17px;line-height:1.55;color:var(--graphite);max-width:510px;margin:8px 0 0}
.approach-heading>p strong{font-weight:500;color:var(--ink)}
.approach-stage{position:relative;aspect-ratio:1;width:100%;max-width:460px;margin-left:auto}
.approach-stage canvas,.approach-stage img{position:absolute;inset:0;width:100%;height:100%;display:block}
.approach-stage img{object-fit:cover;mix-blend-mode:multiply}
.js .approach-stage .particles-still{display:none}
.still .approach-stage canvas{display:none}

.map-service-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px;margin-bottom:30px}
.map-service-picker[hidden]{display:none}
.map-service-picker button{position:relative;min-height:52px;padding:12px 8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--graphite);font:400 15px/1.4 var(--sans);cursor:pointer;transition:color .16s ease,border-color .16s ease}
.map-service-picker button:hover{color:var(--ink);border-color:var(--ink)}
.map-service-picker button[aria-pressed="true"]{color:var(--clay);border-bottom:2px solid var(--clay);font-weight:500}
.map-service-picker button:focus-visible{outline:2px solid var(--clay);outline-offset:-5px}

.business-map{position:relative;display:grid;grid-template-columns:minmax(180px,.95fr) minmax(50px,.4fr) minmax(225px,1.2fr) minmax(40px,.3fr) minmax(170px,.9fr);align-items:center;padding:0 0 92px;margin:0;text-align:center;overflow:visible}
.business-map .map-mobile{display:none}
.business-map .map-desktop{display:block}
.map-inputs{display:grid;grid-template-columns:1fr;gap:0}
.map-inputs>div{display:grid;grid-template-columns:50px 1fr;grid-template-rows:1fr 1fr;column-gap:16px;min-height:92px;min-width:0;text-align:left}
.map-inputs svg{grid-column:1;grid-row:1/3;align-self:center;display:block;width:50px;height:50px;padding:11px;margin:0;stroke:var(--cactus);stroke-width:1.4;stroke-linejoin:round;fill:none;border:1px solid var(--line);border-radius:50%;background:var(--paper);box-shadow:0 6px 12px -8px rgba(63,74,56,.22);transition:border-color .2s ease,stroke .2s ease}
.map-inputs strong{grid-column:2;align-self:end;display:block;font-size:15px;font-weight:500;line-height:1.3;transition:color .2s ease}
.map-inputs span{grid-column:2;align-self:start;display:block;margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--graphite);max-width:145px}
.map-connections{display:block;width:100%;height:276px;margin:0;overflow:visible}
.map-wire{fill:none;stroke:color-mix(in srgb,var(--cactus) 60%,var(--line));stroke-width:1;vector-effect:non-scaling-stroke}
.map-wire path{transition:stroke .2s ease}
.map-signal{display:none}
.map-plan{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:240px;padding:30px 16px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 22px -17px rgba(63,74,56,.32);transition:border-color .2s ease}
.map-plan>span{display:block;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.map-plan strong{display:block;font:340 30px/1.15 var(--serif);letter-spacing:-.02em;margin-top:9px;text-wrap:balance}
.map-plan p{font-size:14px;color:var(--graphite);margin:10px 0 0;text-wrap:balance;max-width:none}
.map-delivery-wire{width:100%;height:20px;fill:none;stroke:var(--clay);stroke-width:1}
.map-execution{position:static;padding:0}
.map-down{display:none}
.map-delivery strong{display:block;font:340 22px/1.2 var(--serif);max-width:240px;margin:auto;text-wrap:balance}
.map-delivery p{font-size:14px;color:var(--graphite);margin:13px 0 0;text-wrap:balance;max-width:none}
.map-feedback{position:absolute;bottom:0;left:0;width:100%;height:90px;margin:0}
.map-feedback svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.map-feedback>span{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);margin:0;padding:0 18px;background:var(--paper);font-size:14px;color:var(--graphite);white-space:nowrap}
.business-map[data-service] .map-inputs>div[data-highlight="true"] svg{border-color:var(--clay);stroke:var(--clay)}
.business-map[data-service] .map-inputs>div[data-highlight="true"] strong{color:var(--clay)}
.business-map[data-service]:not([data-service="all"]) .map-wire path[data-highlight="true"]{stroke:var(--clay);stroke-width:1.5}
.business-map[data-service]:not([data-service="all"]) .map-plan{border-color:var(--clay)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.process{list-style:none;padding:0;margin:37px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.process li{display:grid;grid-template-columns:24px 1fr;gap:20px;padding:23px 0 0;border-top:1px solid var(--line)}
.step-number{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--clay);font-variant-numeric:tabular-nums;padding-top:9px}
.process h3{font-size:30px;letter-spacing:-.018em;line-height:1.12;margin:0 0 10px}
.process p{font-size:15px;line-height:1.55;color:var(--graphite);max-width:none;margin:0}
.process p strong{font-weight:500;color:var(--ink)}
.engineers{margin:34px 0 0;font-size:15px;color:var(--graphite);max-width:none}
.engineers strong{color:var(--ink);font-weight:500;margin-right:9px}

/* ── results: the fan. The centred card in front, the others receding in a curve ── */
.cases{padding:72px 0 56px}
.cases-head{text-align:center;margin:0 0 40px}   /* the heading gets its own air above the fan */
.cases-head h2{margin:0}
.cases-head .kicker{justify-content:center;margin:0 0 14px}
.rail.coverflow{position:relative;overflow:hidden;padding:16px 0 8px;--cf-w:400px}
.coverflow .track{display:block;position:relative;height:820px;padding:0;margin:0;overflow:visible;perspective:1800px;perspective-origin:50% 40%;scroll-snap-type:none;user-select:none}
.coverflow .case .frame{aspect-ratio:4/5}
.coverflow .case .brand-name{margin-top:30px;font-size:12px}
.coverflow .case .one{font-size:17px;line-height:1.45;min-height:0}
.coverflow .case{grid-template-columns:minmax(0,1fr) 150px;grid-template-areas:"frame frame" "brand brand" "num spark" "one spark" "more more";column-gap:16px;row-gap:8px}
.coverflow .case .frame{grid-area:frame}
.coverflow .case .brand-name{grid-area:brand}
.coverflow .case > b{grid-area:num}
.coverflow .case .one{grid-area:one}
.coverflow .case .spark{grid-area:spark;align-self:center;justify-self:end;display:block;width:150px;height:60px;overflow:visible}
.coverflow .case .more{grid-area:more}
.spark .s-line{fill:none;stroke:var(--tone,var(--clay));stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .2s}
.spark .s-area{fill:var(--tone,var(--clay));opacity:0;transition:opacity .8s var(--ease) .6s}
.spark .s-start{fill:var(--stone)}
.spark .s-end{fill:var(--tone,var(--clay));opacity:0;transition:opacity .4s var(--ease) 1.1s}
.spark .s-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;fill:var(--stone);text-transform:uppercase}
.rail.in .spark .s-line{stroke-dashoffset:0}
.rail.in .spark .s-area{opacity:.12}
.rail.in .spark .s-end{opacity:1}
.coverflow .case:not(.is-active) .spark{opacity:0}
.fan-nav{position:absolute;left:0;right:0;top:calc(16px + var(--cf-w) * 0.625);height:0;z-index:30;pointer-events:none}
.fan-nav .arrow{position:absolute;top:0;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:0 10px 24px -14px rgba(42,36,32,.45);pointer-events:auto;display:grid;place-items:center;cursor:pointer}
.fan-nav .arrow:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.fan-nav .fan-prev{left:calc(50% - var(--cf-w) / 2 - 26px)}
.fan-nav .fan-next{right:calc(50% - var(--cf-w) / 2 - 26px)}
.coverflow .case{position:absolute;left:50%;top:0;width:var(--cf-w);margin-left:calc(var(--cf-w) / -2);transform-style:preserve-3d;backface-visibility:hidden;transition:transform .55s var(--ease),opacity .45s var(--ease),filter .45s var(--ease);cursor:pointer}
.coverflow .case.is-active{cursor:default}
.coverflow .case:not(.is-active){filter:blur(1.6px) saturate(.7)}   /* the script refines this by distance */
.coverflow .case:not(.is-active) .more{pointer-events:none}
.coverflow .case .frame{border-radius:16px;box-shadow:0 18px 32px -24px rgba(42,36,32,.4)}
.coverflow .case.is-active .frame{box-shadow:0 26px 44px -28px rgba(42,36,32,.5)}
.coverflow .case .brand-name,.coverflow .case > b,.coverflow .case .one,.coverflow .case .mini,.coverflow .case .more{transition:opacity .35s var(--ease)}
.coverflow .case:not(.is-active) .brand-name,.coverflow .case:not(.is-active) > b,.coverflow .case:not(.is-active) .one,.coverflow .case:not(.is-active) .mini,.coverflow .case:not(.is-active) .more{opacity:0}
.cases .note{margin-top:8px}

/* ── the strip: retention on the left, the logos sliding into it and fading; nearly full width ── */
.stats .shell{max-width:min(1640px,95vw)}
.stats .marquee{mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}

/* ── less orange: the turn in a heading is ink italic; clay stays for dots, lines and the one question ── */
h1 em,h2 em,.answer em,.question-resolution em,.closing-copy h2 em{color:inherit}
.step-number{color:var(--graphite)}
.map-plan>span{color:var(--graphite)}
.map-service-picker button[aria-pressed="true"]{color:var(--ink)}
.more summary::after,.qa summary::after{color:var(--ink)}
.chip{color:var(--graphite);border-color:var(--line)}

/* ── rhythm: the results and the clients' quotes are the two dark bands, in the same dark (the founder found
   dark straight after the painting too harsh); how we work steps onto the deeper paper ── */
.cases{background:var(--dark);color:var(--bone);border-top:0}
.cases .kicker{color:var(--ash)}
.cases-head h2{color:var(--bone)}
.coverflow .case .brand-name{color:var(--ash)}
.coverflow .case > b{color:var(--bone)}
.coverflow .case .one{color:var(--bone)}
.coverflow .case .one .grey{color:var(--ash)}
.spark .s-l{fill:var(--ash)}
.spark .s-start{fill:var(--ash)}
.rail.in .spark .s-area{opacity:.18}
.coverflow .case .more{border-top-color:rgba(239,232,221,.18)}
.coverflow .case .more summary{color:var(--ash)}
.coverflow .case .more summary::after{color:var(--bone)}
.coverflow .case .more > div,.coverflow .case .more > p,.coverflow .case .metrics{color:var(--ash)}
.coverflow .case .metrics b{color:var(--bone)}
.coverflow .case .frame{box-shadow:0 24px 44px -26px rgba(0,0,0,.7)}

/* ── breathing room at the top of the page, and one hard edge fewer: the strip loses its rule ── */
.stats{border-bottom:0}
.stat-one{padding-top:34px;padding-bottom:34px}
.recognition{padding:104px 0 112px}
.cases{padding:104px 0 88px}

/* ── the dark bands carry a faint dot field: the particles' texture at rest, fading toward the edges ── */
.cases,.people{position:relative;isolation:isolate}
.cases::before,.people::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(239,232,221,.24) 1.1px,transparent 1.7px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 45%,#000 20%,transparent 86%);mask-image:radial-gradient(ellipse 78% 68% at 50% 45%,#000 20%,transparent 86%)}

/* ── how we work, the Codex "right mix" arrangement: the logo under the heading with its ground shadow,
   the three steps as dropdowns beside it ── */
.approach{padding:104px 0 96px}
.work-like{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(35px,5vw,76px);align-items:center}   /* the steps sit centred against the heading and logo */
.work-like .steps-list{order:1}
.work-like .approach-intro{order:2}   /* flipped: the steps on the left, the heading and logo on the right */
.approach-intro{display:grid;gap:14px;align-content:start}
.approach-intro h2{margin:0;max-width:560px}
.approach-intro>p{font-size:17px;line-height:1.55;color:var(--graphite);max-width:460px;margin:8px 0 0}
.approach-intro>p strong{font-weight:500;color:var(--ink)}
.approach-intro .approach-stage{position:relative;aspect-ratio:1;width:100%;max-width:420px;margin:18px 0 0;isolation:isolate}
.approach-intro .approach-stage::after{content:"";position:absolute;left:16%;right:16%;bottom:12%;height:9%;background:radial-gradient(ellipse,rgba(63,74,56,.2),transparent 72%);pointer-events:none;z-index:-1}
.steps-list{margin-top:0}
.step{border-bottom:1px solid var(--line)}
.step summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;grid-template-areas:"no title plus" "no scope plus";gap:8px 14px;align-items:center;min-height:106px;padding:24px 0}
.step summary::-webkit-details-marker{display:none}
.step .step-no{grid-area:no;align-self:start;padding-top:12px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--graphite)}
.step .step-title{grid-area:title;font-family:var(--serif);font-weight:340;font-size:30px;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.step .step-scope{grid-area:scope;font-size:14px;line-height:1.45;color:var(--graphite)}
.step summary::after{content:"+";grid-area:plus;justify-self:end;font-family:var(--serif);font-weight:300;font-size:26px;line-height:1;color:var(--ink);transition:transform .3s var(--ease)}
.step[open] summary::after{content:"−"}
.step summary:hover .step-title{color:var(--graphite)}
.step-detail{padding:0 38px 28px 58px}
.step-detail p{margin:0;max-width:520px;font-size:17px;line-height:1.55;color:var(--graphite)}
.step-detail strong{font-weight:500;color:var(--ink)}

/* ── the Codex particle logo: the thicker copper loop, whitened by the paper filter and multiplied onto the
   ground, edges faded, a soft shadow on the ground beneath it ── */
.particle-defs{position:absolute;width:0;height:0;overflow:hidden}
.approach-intro .particle-work{position:relative;min-width:0;margin:10px -25px 0;width:calc(100% + 50px);text-align:center}
.particle-stage{position:relative;isolation:isolate;background:var(--paper)}   /* the loop multiplies onto this, so it must be the section's own ground */
.particle-stage::before{content:"";position:absolute;left:23%;right:23%;bottom:4%;height:7%;background:radial-gradient(ellipse,rgba(63,74,56,.14),transparent 72%);pointer-events:none;z-index:-1}
.particle-work video,.particle-work .particle-still{position:relative;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:transparent;filter:url(#particle-paper);mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.particle-work [hidden]{display:none}
/* ── trial: the results on the Codex green, its profit section's moss with its paper type and its sand for
   the italic turn; the small graphs lightened so they read on it ── */
.cases{background:#3F4A38;--band-type:#F4EFE6;--band-soft:#DCE0D0;--band-muted:#B3BDA6}
.cases .kicker{color:var(--band-muted)}
.cases-head h2{color:var(--band-type)}
.cases-head h2 em{color:#E2C8A7}
.coverflow .case .brand-name{color:var(--band-muted)}
.coverflow .case > b,.coverflow .case .one{color:var(--band-type)}
.coverflow .case .one .grey{color:var(--band-muted)}
.cases .spark .s-l,.cases .spark .s-start{fill:var(--band-muted)}
.cases .spark .s-line{stroke:color-mix(in srgb,var(--tone,#6B9A86) 45%,#fff)}
.cases .spark .s-area,.cases .spark .s-end{fill:color-mix(in srgb,var(--tone,#6B9A86) 45%,#fff)}
.coverflow .case .more{border-top-color:rgba(244,239,230,.2)}
.coverflow .case .more summary{color:var(--band-muted)}
.coverflow .case .more summary::after,.coverflow .case .metrics b{color:var(--band-type)}
.coverflow .case .more > div,.coverflow .case .more > p,.coverflow .case .metrics{color:var(--band-soft)}
.coverflow .case .frame{box-shadow:0 24px 44px -26px rgba(20,26,18,.6)}
/* How we work with no heading of its own: the label sits over the steps, the logo stands alone beside them */
.steps-list .kicker{margin:0 0 16px}
.approach-intro .particle-work{margin:0 -25px}


@media (prefers-reduced-motion:reduce){
  .coverflow .case,.map-wire path,.map-plan,.map-inputs svg,.map-inputs strong{transition:none}
}
@media (max-width:900px){
  .hero{aspect-ratio:auto}
  .hero-art img{object-position:50% 72%}
  .marquee-track{gap:36px}
  .marquee-track img,.marquee-track img.tall{max-height:40px;max-width:110px}
  .rec-codex{grid-template-columns:1fr;gap:36px}
  .questions{padding:0}
  .work-like{grid-template-columns:1fr;gap:28px}
  .work-like .approach-intro{order:0}
  .work-like .steps-list{order:1}
  .approach-intro{position:static}
  .approach-intro .particle-work{margin:6px auto 0;width:100%;max-width:440px}
  .step .step-title{font-size:24px}
  .step summary{grid-template-columns:34px minmax(0,1fr) 22px;min-height:90px}
  .step-detail{padding:0 24px 22px 48px}
  .approach{padding:64px 0 56px}
  .recognition{padding:64px 0 72px}
  .cases{padding:64px 0 56px}
  .stat-one{padding-top:20px;padding-bottom:8px}
  .q-two,.q-four{margin-left:0}
  .question-resolution{margin-left:0}
  .approach-opening{grid-template-columns:1fr;gap:28px}
  .approach-stage{max-width:360px;margin:0}
  .map-service-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px;max-width:580px;margin-inline:auto}
  .map-service-picker button{min-height:48px;padding-inline:4px;font-size:14px}
  .business-map{display:block;max-width:580px;margin:0 auto;padding:0 0 12px;text-align:center}
  .business-map .map-mobile{display:block}
  .business-map .map-desktop{display:none}
  .map-inputs{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .map-inputs>div{display:block;min-height:0;text-align:center}
  .map-inputs svg{margin:0 auto 12px}
  .map-inputs strong{font-size:14px}
  .map-inputs span{margin:6px auto 0;font-size:13px;max-width:100px;min-height:62px}
  .map-connections{height:72px;margin-top:16px}
  .map-plan{min-height:185px;padding:22px 12px 24px;margin-top:6px}
  .map-plan strong{max-width:265px;margin-inline:auto}
  .map-down{display:block;height:30px;width:1px;background:var(--clay);margin:16px auto 17px;position:relative}
  .map-down::after{content:"";position:absolute;width:6px;height:6px;bottom:0;left:-3px;border-bottom:1px solid var(--clay);border-right:1px solid var(--clay);transform:rotate(45deg)}
  .map-execution{position:relative;padding-bottom:16px}
  .map-delivery{min-height:105px;padding-inline:35px}
  .map-delivery strong{font-size:18px}
  .map-feedback{position:relative;height:auto;min-height:50px;margin-top:21px}
  .map-feedback svg{position:absolute;inset:0}
  .map-feedback>span{position:relative;bottom:auto;left:auto;transform:none;display:block;max-width:calc(100% - 68px);margin:18px auto 0;padding:0 8px;white-space:normal;line-height:1.5}
  .process{display:block;margin-top:22px}
  .process li{padding:20px 0}
  .process h3{font-size:24px}
  .hero{height:auto}
  .rail.coverflow{--cf-w:270px;padding:8px 0}
  .coverflow .track{height:640px;perspective:1100px}
  .coverflow .case .brand-name{margin-top:22px}
  .coverflow .case{grid-template-columns:minmax(0,1fr) 118px}
  .coverflow .case .spark{width:118px;height:48px}
  .cases{padding:56px 0 40px}
  .cases-head{margin-bottom:24px}
  .fan-nav{top:calc(8px + var(--cf-w) * 0.625)}
  .fan-nav .arrow{width:46px;height:46px}
  .fan-nav .fan-prev{left:10px}
  .fan-nav .fan-next{right:10px}
  .questions{text-align:center}
  .question{font-size:18px;margin-bottom:10px}
  .question-resolution{gap:8px;margin-top:4px;justify-content:center}
  .question-resolution svg{width:32px;height:46px}
  .question-resolution p{font-size:22px;padding-top:8px}
}

/* ── v2-b.css ── */
/* v2-b.css — version B only, loaded after v2-codex.css. How we work: the Codex business map, stacked, its
   lines tracing (map-flow.js), beside the steps in place of the logo. What we run: the Codex "right mix",
   the service titles as dropdowns with the particle logo beside them, in place of the six cards. */

/* ── How we work: the map in the right column, always in its stacked form ── */
.work-like .approach-map{order:2;min-width:0}
.approach-map .business-map{display:block;max-width:520px;margin:0 auto;padding:0 0 12px;text-align:center}
.approach-map .map-mobile{display:block}
.approach-map .map-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.approach-map .map-inputs>div{display:block;min-height:0;text-align:center}
.approach-map .map-inputs svg{margin:0 auto 12px}
.approach-map .map-inputs strong{font-size:15px}
.approach-map .map-inputs span{margin:6px auto 0;font-size:14px;max-width:130px;min-height:0}
.approach-map .map-connections{display:block;width:100%;height:72px;margin-top:16px}
.approach-map .map-plan{min-height:0;padding:24px 16px 26px;margin-top:6px}
.approach-map .map-plan strong{max-width:320px;margin-inline:auto}
.approach-map .map-down{display:block;height:30px;width:1px;background:var(--clay);margin:16px auto 17px;position:relative}
.approach-map .map-down::after{content:"";position:absolute;width:6px;height:6px;bottom:0;left:-3px;border-bottom:1px solid var(--clay);border-right:1px solid var(--clay);transform:rotate(45deg)}
.approach-map .map-execution{position:relative;padding-bottom:16px}
.approach-map .map-delivery{min-height:0;padding-inline:35px}
.approach-map .map-delivery strong{font-size:22px;max-width:none}
.approach-map .map-feedback{position:static;height:auto;min-height:0;margin-top:21px}
.approach-map .map-feedback svg{position:absolute;inset:0;width:100%;height:100%}   /* the loop spans the whole execution block: down the right, along the bottom, up the left to the plan */
.approach-map .map-feedback>span{position:relative;bottom:auto;left:auto;transform:none;display:inline-block;max-width:calc(100% - 68px);margin:18px auto 0;padding:0 12px;white-space:normal;line-height:1.5;background:var(--paper)}   /* the label sits on the loop's bottom line, masking only its own words */
.approach-map .map-signal{display:inline;fill:none;stroke:var(--clay);stroke-width:3;vector-effect:non-scaling-stroke}
.approach-map .map-signal path,.approach-map .map-feedback path.map-signal{stroke-dasharray:.035 .965;stroke-dashoffset:0;stroke-linecap:round}
.approach-map .map-feedback path.map-signal{stroke:var(--cactus)}

/* ── What we run: the right mix ── */
.mix{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(35px,5vw,76px);align-items:start}
.mix-intro{display:grid;gap:14px;align-content:start;position:sticky;top:88px}
.mix-intro h2{margin:0}
.mix-intro .lede{max-width:44ch}
.mix-intro .lede strong{font-weight:500;color:var(--ink)}
.mix-intro .particle-work{position:relative;margin:18px -25px 0;width:calc(100% + 50px)}
.mix-list{border-top:1px solid var(--ink)}
.mix-item{border-bottom:1px solid var(--line)}
.mix-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:"title plus" "scope plus";gap:8px 16px;align-items:center;min-height:106px;padding:22px 0}
.mix-item summary::-webkit-details-marker{display:none}
.mix-title{grid-area:title;font-family:var(--serif);font-weight:340;font-size:30px;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.mix-scope{grid-area:scope;font-size:14px;line-height:1.45;color:var(--graphite)}
.mix-item summary::after{content:"+";grid-area:plus;justify-self:end;font-family:var(--serif);font-weight:300;font-size:26px;line-height:1;color:var(--ink)}
.mix-item[open] summary::after{content:"−"}
.mix-item summary:hover .mix-title{color:var(--graphite)}
.mix-detail{padding:0 38px 26px 0}
.mix-detail p{margin:0;max-width:520px;font-size:17px;line-height:1.55;color:var(--graphite)}
.mix-detail strong{font-weight:500;color:var(--ink)}
.mix-detail a,.mix-foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mix-detail a:hover,.mix-foot a:hover{border-color:var(--ink)}
.mix-detail a{display:inline-block;margin-top:12px;font-size:15px}
.mix-foot{margin:26px 0 0;font-size:15px}

/* ── who we work with: the three quotes side by side (there are only three, so no slider). A subgrid keeps
   the quotes, the names and the "Full quote" rows on shared lines whatever each quote's length. ── */
.people{padding:120px 0 112px}
.people .sec-head{margin-bottom:48px}
.quotes-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:48px}
.quotes-row .quote{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:22px;align-content:start;padding-top:0}
.quotes-row .quote .say{font-size:clamp(22px,1.9vw,27px);line-height:1.3;text-wrap:pretty}
.quotes-row .quote .more{margin-top:0}
.people .more summary::after{color:var(--bone)}   /* the plus was ink on the dark band */

/* ── the case stories under "See more": the starting point, what we did, what changed ── */
.coverflow .case .more > div p{margin:0}
.coverflow .case .more b{font-weight:500;color:var(--band-type,var(--ink))}
.coverflow .case .more .changed{margin-top:4px}
.coverflow .case .metrics li{position:relative;padding-left:14px}
.coverflow .case .metrics li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#E2C8A7}

/* ── let's talk: the calendar over the closing painting. The painting keeps its own proportions at the foot of
   the section with the sky fading into the paper; Calendly's card sits on it (calendar.js), and the painting's
   foreground shows below. Without the frame, a paper card with the Calendly link takes its place. ── */
.closing{min-height:0;display:block;padding-bottom:clamp(140px,15vw,230px)}
.closing-art{inset:auto 0 0 0;height:min(100%,calc(100vw * 992 / 1585))}   /* its own proportions, never taller than the section; a height cap with aspect-ratio would narrow it */
.closing-art img{object-position:50% 100%}
.closing-copy{padding-top:clamp(64px,10vh,104px)}
.calendar{position:relative;display:block;max-width:1040px;min-height:0;margin:26px auto 0;padding:0;background:none;border:0;border-radius:0}   /* clears the old booking box; Calendly lays out in two columns only when its frame is at least 1000px wide */
.calendar iframe{display:block;width:100%;height:800px;border:0;border-radius:14px;background:transparent;color-scheme:light;opacity:0;transition:opacity .6s var(--ease)}
.calendar[data-state="live"] iframe{opacity:1;filter:drop-shadow(0 26px 30px rgba(42,36,32,.22))}   /* the frame is see-through, so the shadow follows Calendly's card */
.calendar[data-state="fallback"] iframe{display:none}
.calendar[data-state="loading"]::after{content:"Loading the calendar";position:absolute;top:120px;left:50%;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:var(--card);font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.calendar-fallback{display:grid;justify-items:center;gap:20px;max-width:520px;margin:40px auto 0;padding:40px 36px;border-radius:14px;background:var(--card);box-shadow:0 26px 50px -30px rgba(42,36,32,.5);text-align:center}
.calendar-fallback p{margin:0;max-width:34ch;font-size:17px;line-height:1.55;color:var(--graphite)}
.calendar[data-state="loading"] .calendar-fallback,.calendar[data-state="live"] .calendar-fallback{display:none}

/* ── the header follows the page: fixed at the top on the paper, a hairline and soft shadow once the page
   has moved (topbar.js); the hero keeps the header's height as padding, and in-page links land below it ── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .3s var(--ease)}
.topbar.scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(42,36,32,.45)}   /* the hairline is a shadow, so the bar stays exactly the nav height */
.topbar .brand .mark{height:24px;width:auto}
.hero{padding-top:76px}
html{scroll-padding-top:76px}   /* a section starts right under the bar; its own padding gives the heading room */

@media (max-width:900px){
  .hero{padding-top:64px}
  html{scroll-padding-top:64px}
  .topbar .nav-links a[href="#book"]{display:inline;color:var(--ink);font-weight:500}   /* on a phone the pinned bar keeps one way to act */
  .people{padding:80px 0 72px}
  .people .sec-head{margin-bottom:32px}
  .quotes-row{grid-template-columns:1fr;grid-template-rows:none;row-gap:44px}
  .quotes-row .quote{grid-row:auto;grid-template-rows:none;row-gap:16px}
  .quotes-row .quote .say{font-size:22px}
  .closing{padding-bottom:clamp(150px,44vw,220px)}
  .closing-art{position:absolute;order:0;inset:auto 0 0 0;height:clamp(320px,112vw,520px)}
  .closing-art::before{display:block}
  .closing-copy{padding:56px 0 0}
  .calendar{margin-top:22px;padding:0;min-height:0}
  .calendar iframe{height:950px}
  .calendar-fallback{margin-top:24px;padding:32px 24px}
  .work-like .approach-map{order:2}
  .approach-map .map-delivery strong{font-size:18px}
  .mix{grid-template-columns:1fr;gap:28px}
  .mix-intro{position:static}
  .mix-intro .particle-work{margin:10px auto 0;width:100%;max-width:440px}
  .mix-title{font-size:24px}
  .mix-item summary{min-height:90px}
  .mix-detail{padding:0 24px 22px 0}
}

/* ── design loop, 29 Sep: the bar's lines applied to the whole page ── */
:root{--stone:#746B60}                                   /* captions 4.6:1 on paper, 4.9:1 on card; was 3.26:1 */
body{font-size:17px}                                     /* one body size */
h2{font-size:clamp(36px,3.9vw,56px);line-height:1.08}    /* 56px at 1440: 3.3x the body */
.hero-copy .sub{font-size:17px}
.recognition-copy h2{max-width:620px}
.cases-head h2 em{color:inherit}                         /* the italic keeps the heading's colour */
.coverflow .case .metrics li::before{background:var(--band-soft)}
/* the row of recent work under the client strip: five real client stills in 4:5 frames */
@media (max-width:900px){
}

/* piece 2, round 2: wider reading column, more room under the heading, every reading line at 14px or larger */
.recognition-copy{max-width:600px}
.recognition-copy h2{margin-bottom:40px}
.recognition-copy p{max-width:600px}
.map-inputs span,.map-plan p,.map-delivery p,.step .step-scope{font-size:15px}
.map-feedback>span{font-size:14px}
/* piece 3, round 2: the "See more" row names the three parts behind it */
.coverflow .case .more summary{letter-spacing:.06em}

/* piece 1, round 2: air under the headline; the work row reads as its own section; captions at 14px */
.hero-copy h1{margin-bottom:40px}
.stat-one .mono{font-size:14px}
/* piece 3, round 2: the proof block under the centred card grows to 520px and nothing that must be read sits under 14px */
.coverflow .case .brand-name{font-size:14px;margin-left:-60px}
.coverflow .case > b{margin-left:-60px}
.coverflow .case .one{margin-left:-60px}
.coverflow .case .spark{margin-right:-60px}
.coverflow .case .more{margin-left:-60px;margin-right:-60px}
.coverflow .case .more summary{font-size:14px}
.spark .s-l{font-size:12px}
@media (max-width:900px){
  .coverflow .case .brand-name,.coverflow .case > b,.coverflow .case .one,.coverflow .case .more{margin-left:0}
  .coverflow .case .spark,.coverflow .case .more{margin-right:0}
}
/* piece 4: the quote footers name a client, so 14px */
.quote footer span{font-size:14px}

/* round 3 */
/* piece 2: the reading column reaches 600px; the step lines and the map's captions read at body size */
.rec-codex{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}
.recognition-copy>p{max-width:600px}
.step .step-scope{font-size:17px}
.map-plan p,.map-delivery p,.map-feedback>span{font-size:17px}
.approach-map .map-inputs span{font-size:17px;max-width:160px}
/* piece 3: the story row reads as a control with the plus beside its words; the proof block is 560px with the one-liner on its own row */
.coverflow .case{grid-template-areas:"frame frame" "brand brand" "num spark" "one one" "more more"}
.coverflow .case .brand-name,.coverflow .case > b,.coverflow .case .one{margin-left:-80px}
.coverflow .case .one,.coverflow .case .spark{margin-right:-80px}
.coverflow .case .more{margin-left:-80px;margin-right:-80px}
.coverflow .case .more summary{justify-content:flex-start;gap:12px;letter-spacing:.04em}
.spark .s-l{font-size:14px}
@media (max-width:900px){
  .rec-codex{grid-template-columns:1fr;gap:36px}
  .step .step-scope,.map-plan p,.map-delivery p,.map-feedback>span{font-size:15px}
  .approach-map .map-inputs span{font-size:13px}
  .coverflow .case .brand-name,.coverflow .case > b,.coverflow .case .one,.coverflow .case .more{margin-left:0}
  .coverflow .case .one,.coverflow .case .spark,.coverflow .case .more{margin-right:0}
}
.spark .s-l{letter-spacing:.04em}
.coverflow .case .one{text-wrap:pretty}

/* piece 2: the heading balances its lines instead of leaving one word on the last */
.recognition-copy h2{text-wrap:balance}
/* piece 4: ground above the "right mix" heading; the question titles share the service titles' size; reading columns reach the accordion's width; each quote's source sits under its own words */
.work{padding-top:104px}
.qa summary{font-size:30px;font-weight:340;line-height:1.2}
.mix{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,4vw,48px)}
.mix-intro .lede{max-width:none}
.services details p{max-width:none}
.quotes-row{grid-template-rows:none}
.quotes-row .quote{grid-row:auto;grid-template-rows:auto auto auto;align-content:start}
@media (max-width:900px){
  .work{padding-top:64px}
  .qa summary{font-size:22px}
  .mix{grid-template-columns:1fr;gap:28px}
  .quotes-row .quote{grid-template-rows:none}
}

/* piece 3, round 4: the proof text carries the band's type colour, not the muted one; the lever names the service; the plus reads as a control */
.coverflow .case .brand-name{color:var(--band-type)}
.coverflow .case .more summary{color:var(--band-type)}
.coverflow .case .more summary::after{font-size:26px}

/* round 4: kickers at 14px (the 12px kicker was the last text under the 14px floor), same tracking as the other 14px captions */
.kicker{font-size:14px;letter-spacing:.08em}

/* round 4, piece 4: 40px between each heading and its lede; the map's tile label at 14px */
.sec-head .copy h2,.mix-intro h2,.closing-copy h2{margin-bottom:26px}
.approach-map .map-plan>span,.map-plan>span{font-size:14px;letter-spacing:.08em}
@media (max-width:900px){
  .sec-head .copy h2,.mix-intro h2,.closing-copy h2{margin-bottom:10px}
}

/* round 4, piece 4: the closed service lines carry the offer, so they read at body size */
.mix-scope{font-size:17px}
@media (max-width:900px){
  .mix-scope{font-size:15px}
}

/* 29 Sep, founder's picks after the loop: how we work is a heading over the business map alone (option 2); all four questions in the muted tone; the map keeps its natural size on phones */
.q-three{color:color-mix(in srgb,var(--cactus) 30%,var(--graphite))}
@media (max-width:900px){
}

/* the map names its three stages with the founder's step titles */

/* 29 Sep, later: the founder found the enlarged map cumbersome, so how we work is the heading over the three steps in a row (option 1); the map is off the page */
.steps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;align-items:start}
.steps-row .step{border-top:1px solid var(--line)}
.steps-row .step:last-child{border-bottom:0}
@media (max-width:900px){
  .steps-row{grid-template-columns:1fr;gap:0}
}

/* the steps arrive in sequence (the drawn loop was tried on 29 Sep and the founder dropped it: "just a line with a dot that goes") */
.js .steps-row[data-reveal]{opacity:1;transform:none}
.js .steps-row .step{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .steps-row.in .step{opacity:1;transform:none}
.js .steps-row.in details:nth-of-type(2){transition-delay:.12s}
.js .steps-row.in details:nth-of-type(3){transition-delay:.24s}
.js .steps-row .step summary::after{opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease) .55s}
.js .steps-row.in .step summary::after{opacity:1}

/* 29 Sep, later: the founder wants a graphic in the band; the business map is back beside the steps at its original size (the pre-loop B layout), under the new head; the steps arrive in sequence */
.approach .sec-head{margin-bottom:8px}
.js .steps-list[data-reveal]{opacity:1;transform:none}
.js .steps-list .step{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .steps-list.in .step{opacity:1;transform:none}
.js .steps-list.in details:nth-of-type(2){transition-delay:.12s}
.js .steps-list.in details:nth-of-type(3){transition-delay:.24s}
@media (max-width:900px){
  .work-like .approach-map{margin-top:8px}
}

/* ── legal pages and the 404: one reading column under the pinned header ── */
.legal{padding:clamp(128px,16vh,168px) 0 clamp(88px,12vh,128px)}
.legal .shell{max-width:840px}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
.legal .effective{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin:0 0 44px}
.legal h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;letter-spacing:-.01em;margin:52px 0 14px;color:var(--ink)}
.legal h3{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.4;margin:30px 0 8px;color:var(--ink)}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--graphite);max-width:68ch}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 18px;padding-left:22px}
.legal li{margin:0 0 6px}
.legal strong{font-weight:500;color:var(--ink)}
.legal a{color:var(--ink);text-decoration-color:var(--line);text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--ink)}
.legal .btn{margin-top:18px;text-decoration:none}