/* ============================================================
   Three Month Rule
   Type: Geist / Geist Mono
   Palette: paper ground, black rules, orange / purple / sage panels
   ============================================================ */
html{scroll-padding-top:var(--nav-h)}
:root{
  --white:#ffffff;
  --paper:#f7f6f4;
  --black:#000000;
  --orange:#fe7141;
  --purple:#cdabfe;
  --sage:#d1ddd3;
  --ink-60:rgba(0,0,0,.6);
  --rule:1px solid var(--black);
  --pad:24px;
  --gap:16px;
  --nav-h:56px;
  --ease:cubic-bezier(.44,0,.56,1);
  --sans:'Instrument Sans','Geist',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* per-panel text colour, so each scheme can decide what sits on its panels */
  --c1-text:#111110;--c2-text:var(--black);--c3-text:var(--black);
  --header-bg:var(--sage);
}
/* ---------- schemes ----------
   Paper is the default and the logo returns to it.
   Albers is Homage to the Square: cadmium yellow, orange, vermilion, maroon. Only tokens change. */
html[data-theme="warhol"]{
  --paper:#0e0e0e;--black:#ffffff;--white:#0e0e0e;
  --orange:#ff3ea5;--purple:#ffe100;--sage:#22c3c9;
  --ink-60:rgba(255,255,255,.6);--rule:1px solid #ffffff;
  --c1-text:#0e0e0e;--c2-text:#0e0e0e;--c3-text:#0e0e0e;
  --header-bg:#ffe100;
}
html[data-theme="warhol"] .header{color:#0e0e0e}
html[data-theme="warhol"] .footer{background:#ff3ea5;color:#0e0e0e}
html[data-theme="warhol"] .footer-bot{border-top-color:rgba(0,0,0,.35)}
html[data-theme="warhol"] .menu{background:#22c3c9;color:#0e0e0e}
html[data-theme="warhol"] .menu-label,html[data-theme="warhol"] .menu-foot{color:rgba(0,0,0,.6)}
html[data-theme="warhol"] .menu-list li a{border-top-color:rgba(0,0,0,.35)}
html[data-theme="warhol"] .menu-list li:last-child a{border-bottom-color:rgba(0,0,0,.35)}
html[data-theme="warhol"] .cta{background:#22c3c9;color:#0e0e0e}
html[data-theme="warhol"] .cta .lede{color:rgba(0,0,0,.7)!important}
html[data-theme="warhol"] .cta-form{border-bottom-color:#0e0e0e}
html[data-theme="warhol"] .cta-form input,html[data-theme="warhol"] .cta-form button{color:#0e0e0e}
html[data-theme="warhol"] .cta-form input::placeholder{color:rgba(0,0,0,.5)}
html[data-theme="warhol"] .cta-fine{color:rgba(0,0,0,.6)}
html[data-theme="warhol"] .cta-fine a{border-bottom-color:rgba(0,0,0,.4)}
html[data-theme="albers"]{
  --paper:#f2d26a;--black:#2a1a0f;--white:#fbe9a6;
  --orange:#e2892b;--purple:#c4391d;--sage:#7d1f14;
  --ink-60:rgba(42,26,15,.62);--rule:1px solid #2a1a0f;
  --c1-text:#2a1a0f;--c2-text:#fbe9a6;--c3-text:#fbe9a6;
  --header-bg:#e8b53c;
}
html[data-theme="albers"] .footer{background:#7d1f14;color:#fbe9a6}
html[data-theme="albers"] .footer-bot{border-top-color:rgba(251,233,166,.3)}
html[data-theme="albers"] .menu{background:#2a1a0f;color:#fbe9a6}
html[data-theme="albers"] .cta{background:#e2892b;color:#2a1a0f}
html[data-theme="albers"] .cta .lede{color:rgba(42,26,15,.7)!important}
html{transition:background .4s var(--ease)}
body,.header,.chapter,.cta,.footer,.band,.band .fill{transition:background-color .4s var(--ease),color .4s var(--ease)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.4;
  letter-spacing:-.01em;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,p,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input{font:inherit;color:inherit}

/* ---------- layout primitives ---------- */
.px-global{width:100%;padding-inline:var(--pad)}
.container{width:100%;max-width:1920px;margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-left{grid-column:span 3}
.col-right{grid-column:span 9}

/* ---------- type scale ---------- */
.mono{font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.25;letter-spacing:0;text-transform:none}
.num{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}
.h1{font-weight:500;letter-spacing:-.02em;line-height:1.02;font-size:clamp(40px,5.9vw,85px)}
.h2{font-weight:500;letter-spacing:-.02em;line-height:1.08;font-size:clamp(32px,3.5vw,50px)}
.h3{font-weight:500;letter-spacing:-.03em;line-height:1.2;font-size:clamp(24px,3.5vw,50px)}
.h5{font-weight:500;letter-spacing:-.03em;line-height:1.2;font-size:24px}
.lede{font-weight:500;font-size:clamp(18px,1.55vw,22px);line-height:1.45;letter-spacing:-.015em}
.body{font-weight:400;font-size:16px;line-height:1.4;letter-spacing:-.01em}

/* ---------- header ---------- */
/* opaque sage band. Because it is solid it never needs to invert
   over dark sections, so the theme-swap logic is gone. */
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);background:var(--header-bg);color:var(--black);border-bottom:var(--rule)}
.header-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .brace{height:15px;width:auto;color:var(--orange);align-self:center;margin-left:-4px}
.footer-logo .brace{height:.72em;width:auto;color:var(--orange);margin-left:.14em;vertical-align:-.02em}
.brand .mark{font-weight:500;letter-spacing:-.03em;font-size:15px}
.nav{display:flex;align-items:center;gap:28px}
.nav a{position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;align-items:center;gap:8px}
.nav-cta .arrow{transition:transform .3s var(--ease)}
.nav-cta:hover .arrow{transform:translateX(3px)}
.menu-btn{display:none;background:none;border:0;padding:4px 0;cursor:pointer}

/* ---------- scheme toggles ----------
   Two switches under "Start a project". Both off is Paper; one on is that
   scheme; turning one on turns the other off. */
.footer-schemes{display:inline-flex;gap:22px;align-items:center;flex-wrap:wrap}
.footer-schemes .yours{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;border-radius:999px;padding:5px 10px}
.footer-schemes .yours b{font-weight:500}
.footer-schemes .yours button{background:none;border:0;color:inherit;cursor:pointer;padding:0;opacity:.7;font:inherit}
.footer-schemes .yours button:hover{opacity:1}
.brand-form{margin-top:clamp(40px,6vw,72px);max-width:560px}
.brand-form label{display:block;opacity:.7;padding-bottom:10px}
.brand-row{display:flex;border-bottom:1px solid currentColor;align-items:center}
.brand-row input{flex:1;background:none;border:0;outline:none;padding:12px 0;font-size:17px;letter-spacing:-.02em;color:inherit;min-width:0}
.brand-row input::placeholder{color:inherit;opacity:.45}
.brand-row button{background:none;border:0;color:inherit;cursor:pointer;padding:12px 0 12px 18px}
.brand-note{padding-top:10px;opacity:.7;min-height:1.2em}
.switch{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.switch .label{opacity:.7;transition:opacity .25s var(--ease)}
.switch[aria-checked="true"] .label,.switch:hover .label{opacity:1}
.switch .track{position:relative;width:30px;height:16px;border:1px solid currentColor;border-radius:8px;transition:background-color .25s var(--ease)}
.switch .knob{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:currentColor;transition:transform .25s var(--ease),background-color .25s var(--ease)}
.switch[aria-checked="true"] .track{background:currentColor}
.switch[aria-checked="true"] .knob{transform:translateX(14px);background:var(--black)}


/* ---------- hero ---------- */
/* the hero is exactly one screen: the cards take whatever height is
   left after the headline and caption, rather than being sized by a
   fixed aspect ratio that pushes them past the fold on wide screens */
.hero{
  min-height:100svh;display:flex;flex-direction:column;
  padding-top:calc(var(--nav-h) + clamp(24px,3.4vh,64px));
  padding-bottom:clamp(18px,2.2vh,36px);
}
.hero > .container{flex:1;display:flex;flex-direction:column;min-height:0}
.hero-eyebrow{opacity:.55;padding-bottom:clamp(12px,1.6vh,22px)}
.hero-title{font-size:clamp(38px,min(5.9vw,10.5vh),85px);max-width:14ch}
.hero-title .rise{display:block;opacity:0;transform:translateY(14px);animation:rise 1s cubic-bezier(.19,1,.22,1) .05s forwards}
@keyframes rise{to{opacity:1;transform:none}}
/* ---------- glitch ----------
   Phase names tear for about a second and a word in Syne shows through
   (BIG / DIGITAL / ENERGY). Two colour ghosts give the chromatic split. */
.glitch{position:relative;display:block}
.glitch .txt{position:relative;display:block}
.glitch .ghost{position:absolute;inset:0;display:none;pointer-events:none;user-select:none}
.glitch .ghost.a{color:var(--orange)}
.glitch .ghost.b{color:var(--purple)}
.glitch .alt{
  position:absolute;inset:0;display:none;pointer-events:none;user-select:none;
  font-family:'Syne','Geist',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;font-size:.92em;color:var(--black);
}
.glitch.on .txt{animation:g-main 1.1s steps(1,end) both}
.glitch.on .ghost{display:block}
.glitch.on .ghost.a{animation:g-ghost-a 1.1s steps(1,end) both}
.glitch.on .ghost.b{animation:g-ghost-b 1.1s steps(1,end) both}
.glitch.on .alt{display:block;animation:g-alt 1.1s steps(1,end) both}
@keyframes g-main{
  0%{clip-path:inset(0 0 0 0);transform:none}
  8%{clip-path:inset(12% 0 62% 0);transform:translateX(-6px)}
  16%{clip-path:inset(55% 0 20% 0);transform:translateX(5px)}
  24%{clip-path:inset(0 0 75% 0);transform:translateX(-3px)}
  32%{clip-path:inset(80% 0 0 0);transform:translateX(4px)}
  40%{clip-path:inset(30% 0 30% 0);transform:none;opacity:0}
  62%{clip-path:inset(30% 0 30% 0);opacity:0}
  70%{clip-path:inset(0 0 60% 0);opacity:1;transform:translateX(3px)}
  80%{clip-path:inset(45% 0 0 0);transform:translateX(-4px)}
  90%{clip-path:inset(20% 0 40% 0);transform:translateX(2px)}
  100%{clip-path:inset(0 0 0 0);transform:none;opacity:1}
}
@keyframes g-ghost-a{
  0%{clip-path:inset(0 0 100% 0);transform:translateX(0)}
  8%{clip-path:inset(40% 0 30% 0);transform:translateX(9px)}
  20%{clip-path:inset(10% 0 70% 0);transform:translateX(-7px)}
  32%{clip-path:inset(65% 0 5% 0);transform:translateX(6px)}
  40%{clip-path:inset(0 0 100% 0)}
  70%{clip-path:inset(25% 0 50% 0);transform:translateX(-8px)}
  85%{clip-path:inset(60% 0 10% 0);transform:translateX(5px)}
  100%{clip-path:inset(0 0 100% 0);transform:none}
}
@keyframes g-ghost-b{
  0%{clip-path:inset(0 0 100% 0)}
  12%{clip-path:inset(20% 0 55% 0);transform:translateX(-9px)}
  24%{clip-path:inset(70% 0 0 0);transform:translateX(7px)}
  36%{clip-path:inset(5% 0 80% 0);transform:translateX(-5px)}
  40%{clip-path:inset(0 0 100% 0)}
  75%{clip-path:inset(50% 0 20% 0);transform:translateX(8px)}
  92%{clip-path:inset(15% 0 60% 0);transform:translateX(-4px)}
  100%{clip-path:inset(0 0 100% 0);transform:none}
}
@keyframes g-alt{
  0%{clip-path:inset(0 0 100% 0)}
  16%{clip-path:inset(55% 0 20% 0);transform:translateX(4px)}
  24%{clip-path:inset(0 0 100% 0)}
  40%{clip-path:inset(0 0 0 0);transform:none}
  48%{clip-path:inset(0 0 0 0);transform:translateX(-3px)}
  56%{clip-path:inset(0 0 0 0);transform:translateX(2px)}
  62%{clip-path:inset(0 0 0 0);transform:none}
  70%{clip-path:inset(60% 0 0 0);transform:translateX(-5px)}
  82%{clip-path:inset(0 0 100% 0)}
  100%{clip-path:inset(0 0 100% 0)}
}
@media (max-width:899px){.glitch .alt{font-size:.8em}}
.chapter .glitch .ghost.a,.band .glitch .ghost.a{color:var(--paper)}
.chapter .glitch .ghost.b,.band .glitch .ghost.b{color:currentColor;opacity:.45}
.chapter .glitch .alt,.band .glitch .alt{color:currentColor;font-size:1em}
.band-phase.glitch .alt{font-size:1.05em;letter-spacing:0}
/* ---------- the ninety days : scrub the engagement ----------
   Ninety tiles, one per day, in the three phase colours. Dragging or hovering
   sets the day; the three cards below fill with it, the end date is real
   (today plus ninety), and at day 90 the brace closes. Left alone it plays
   itself slowly. */
.hero-top{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,56px);align-items:end;padding-bottom:clamp(20px,2.8vh,44px)}
.hero-lead{display:flex;flex-direction:column;gap:18px;min-width:0}
.hero-title{padding-bottom:0}
.hero-eyebrow .hint{margin-left:14px;opacity:.6}
.days-read{display:flex;gap:10px;flex-wrap:wrap;opacity:.7}
.days-read b{font-weight:500;color:var(--orange);opacity:1}
.days{position:relative;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;outline:none}
.days:focus-visible{outline:2px solid var(--black);outline-offset:6px}
.days-grid{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:4px}
.days-grid i{display:block;aspect-ratio:1;border:1px solid var(--black);background:var(--paper);transition:background-color .18s var(--ease),transform .25s var(--ease),border-color .18s var(--ease)}
.days-grid i[data-p="1"].on{background:var(--orange)}
.days-grid i[data-p="2"].on{background:var(--purple)}
.days-grid i[data-p="3"].on{background:var(--sage)}
.days-grid i.near{transform:translateY(-3px)}
.days-grid i.cur{transform:translateY(-5px);border-color:var(--orange)}
.days.done .days-grid i{transform:none}
.days-tip{position:absolute;pointer-events:none;background:var(--black);color:var(--paper);padding:6px 9px;white-space:nowrap;transform:translate(-50%,-140%);opacity:0;transition:opacity .15s var(--ease);z-index:2}
.days.show .days-tip{opacity:1}
.band .fill{transition:height .25s var(--ease)}
.days-brace{display:inline-block;width:.6em;height:.9em;vertical-align:-.1em;margin-left:.15em;color:var(--orange);transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease)}
.days.done ~ * .days-brace,.hero.done .days-brace{transform:scaleY(1)}
@media (max-width:899px){.hero-top{grid-template-columns:1fr;align-items:start}.days-grid{gap:3px}.hero-eyebrow .hint{display:block;margin:6px 0 0}}
@media (prefers-reduced-motion:reduce){.days-grid i{transition:none}}

/* ---------- the reel : three phase cards ----------
   Three cards, static, each a link into its own phase section.
   Each fills higher than the last, so the row reads as accumulation
   across the three phases. */
.reel{display:flex;flex-direction:column;flex:1;min-height:150px}
.reel-art{display:block;position:relative;flex:1;min-height:0;border:var(--rule);overflow:hidden;background:var(--paper)}
.reel-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.2s var(--ease)}
.reel-art:hover img{transform:scale(1.015)}
.band{
  position:relative;display:block;overflow:hidden;border:var(--rule);
  background:var(--paper);
}
.band .fill{position:absolute;left:0;right:0;bottom:0;transition:height .45s var(--ease)}
.band[data-b="1"] .fill{height:34%;background:var(--orange)}
.band[data-b="2"] .fill{height:67%;background:var(--purple)}
.band[data-b="3"] .fill{height:100%;background:var(--sage)}
.band:hover[data-b="1"] .fill{height:40%}
.band:hover[data-b="2"] .fill{height:73%}
.band-label{position:absolute;z-index:2;top:14px;left:14px;color:var(--black)}
.band-foot{
  position:absolute;z-index:2;left:14px;right:14px;bottom:14px;
  display:flex;flex-direction:column;gap:6px;
}
.band-name{
  display:flex;align-items:center;gap:9px;
  font-weight:500;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(18px,1.8vw,28px);max-width:14ch;
}
.band-name .arrow{transition:transform .35s var(--ease)}
.band:hover .band-name .arrow{transform:translateX(5px)}
/* text sits on paper until the fill reaches it, then takes the panel's text colour */
.band .band-foot,.band .band-label{color:var(--black);transition:color .25s var(--ease)}
.band.lit[data-b="1"] .band-foot{color:var(--c1-text)}
.band.lit[data-b="2"] .band-foot{color:var(--c2-text)}
.band.lit[data-b="3"] .band-foot{color:var(--c3-text)}
.band.full[data-b="1"] .band-label{color:var(--c1-text)}
.band.full[data-b="2"] .band-label{color:var(--c2-text)}
.band.full[data-b="3"] .band-label{color:var(--c3-text)}
.reel-cap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:14px;color:var(--ink-60)}

/* ---------- clients strip ---------- */
.clients{background:var(--paper);padding-block:clamp(36px,4.5vw,72px);border-top:var(--rule);border-bottom:var(--rule)}
.clients-row{display:flex;align-items:center;gap:clamp(24px,3.6vw,60px);flex-wrap:wrap}
.client{font-weight:500;letter-spacing:-.03em;font-size:clamp(17px,1.55vw,24px)}

.section{padding-block:clamp(44px,6vw,88px)}

/* ---------- the rule : one statement, one number ---------- */
.statement{max-width:1100px}
.statement-line{padding-top:clamp(20px,2.6vw,36px);max-width:44ch}

/* ---------- approach ---------- */
.prose p + p{margin-top:1.1em}
.prose{max-width:900px}
.inline-link{border-bottom:1px solid currentColor;padding-bottom:1px}

/* ---------- results : the depth ---------- */
.results{background:var(--black);color:var(--white);padding-block:clamp(80px,11vw,170px)}
.results-head{padding-bottom:clamp(48px,6vw,90px)}
.result{border-top:1px solid rgba(255,255,255,.25);padding-block:clamp(28px,3.4vw,52px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.result:last-of-type{border-bottom:1px solid rgba(255,255,255,.25)}
.result .fig{grid-column:span 4;font-weight:500;letter-spacing:-.05em;line-height:.9;font-size:clamp(44px,6.4vw,96px)}
.result .fig.words{font-size:clamp(26px,3vw,44px);letter-spacing:-.04em;line-height:1.05;color:rgba(255,255,255,.92)}
.result .who{grid-column:span 3}
.result .what{grid-column:span 5;color:rgba(255,255,255,.65);max-width:46ch}
.results-note{padding-top:clamp(32px,4vw,56px);color:rgba(255,255,255,.4);max-width:60ch}

/* ---------- the three months (sticky stack) ---------- */
.chapters{position:relative}
/* normal flow, not sticky. A sticky bottom:0 panel cannot be linked to:
   the anchor lands at a scroll position where the panel is not painted. */
.chapter{
  min-height:0;display:flex;align-items:stretch;
  padding-top:clamp(64px,9vw,140px);padding-bottom:clamp(64px,9vw,140px);
  scroll-margin-top:0;
}
.chapter[data-c="01"]{background:var(--orange);color:var(--c1-text)}
.chapter[data-c="02"]{background:var(--purple);color:var(--c2-text)}
.chapter[data-c="03"]{background:var(--sage);color:var(--c3-text)}
.chapter-grid{width:100%;align-content:space-between}
.chapter-meta{display:flex;flex-direction:column;gap:10px}
.chapter-name{font-weight:500;letter-spacing:-.02em;font-size:clamp(28px,3vw,48px);line-height:1}
.chapter-intro{max-width:22ch;font-size:clamp(24px,2.8vw,40px);line-height:1.15;font-weight:500;letter-spacing:-.03em}
.chapter-body{display:flex;flex-direction:column;gap:clamp(28px,3.6vw,64px)}

.toc li{border-top:1px solid currentColor;padding-block:14px;font-size:clamp(16px,1.35vw,20px);letter-spacing:-.02em}
.toc li:last-child{border-bottom:1px solid currentColor}
.chapter-link{display:inline-flex;align-items:center;gap:10px;font-weight:500;letter-spacing:-.02em;font-size:18px;border-top:1px solid currentColor;padding-top:16px;width:fit-content}
.chapter-link .arrow{transition:transform .35s var(--ease)}
.chapter-link:hover .arrow{transform:translateX(5px)}

/* ---------- clients : black and white logos, drifting left to right ---------- */
.logos{padding-block:clamp(40px,5vw,64px);border-top:var(--rule);overflow:hidden}
.logos-track{display:flex;width:max-content;animation:logos-drift 48s linear infinite}
.logos-set{display:flex;align-items:center;gap:clamp(48px,6vw,96px);padding-right:clamp(48px,6vw,96px)}
.logos img{height:28px;width:auto;display:block;filter:invert(var(--logo-invert,0))}
.logos:hover .logos-track{animation-play-state:paused}
@keyframes logos-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:899px){.logos img{height:22px}}
@media (prefers-reduced-motion:reduce){.logos-track{animation:none}}
html[data-theme="warhol"]{--logo-invert:1}

/* ---------- work : typographic index ---------- */
.work{background:var(--paper);position:relative;z-index:2;padding-block:clamp(64px,9vw,120px)}
.work-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-bottom:clamp(40px,5vw,72px)}
.idx-row{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);
  align-items:baseline;border-top:var(--rule);padding-block:clamp(20px,2.4vw,34px);
  transition:padding-left .4s var(--ease);
}
.idx-row:last-of-type{border-bottom:var(--rule)}
.idx-row:hover{padding-left:14px}
.idx-row{cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;color:inherit;text-align:left;font:inherit;text-decoration:none}
.idx-row .res .arrow{margin-left:6px;transition:transform .3s var(--ease)}
.idx-row:hover .res .arrow{transform:translateX(4px)}
.idx-row .n{transition:color .2s var(--ease)}
.idx-row[aria-expanded="true"]{padding-left:14px}
.idx-row[aria-expanded="true"] .n{color:var(--orange)}
.case{overflow:hidden;height:0;transition:height .5s var(--ease)}
.case-in{padding:clamp(20px,3vw,40px) 0 clamp(28px,4vw,56px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.case-media{grid-column:span 5}
.case-media img{width:100%;height:auto;border:var(--rule);display:block}
.case-body{grid-column:span 7;display:flex;flex-direction:column;gap:22px}
.case-tag{font-weight:500;letter-spacing:-.03em;line-height:1.15;font-size:clamp(20px,2vw,28px);max-width:26ch}
.case-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-60)}
.case-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.case-cols p{font-size:15px;line-height:1.45}
.case-cols .k{display:block;padding-bottom:8px}
.case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);border-top:var(--rule);border-bottom:var(--rule)}
.case-stats div{padding:14px 0}
.case-stats .v{font-weight:500;letter-spacing:-.04em;line-height:1;font-size:clamp(26px,2.8vw,40px)}
.case-stats .l{padding-top:6px;color:var(--ink-60);font-size:14px}
.case-quote{font-weight:500;letter-spacing:-.03em;line-height:1.25;font-size:clamp(18px,1.7vw,24px);max-width:40ch}
.case-quote .who{display:block;padding-top:10px;font-weight:400;font-size:14px;color:var(--ink-60);letter-spacing:-.01em}
.case-services{display:flex;flex-wrap:wrap;gap:8px}
.case-services span{border:1px solid currentColor;border-radius:999px;padding:6px 11px;font-size:13px}
.case-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;letter-spacing:-.02em;border-bottom:1px solid currentColor;padding-bottom:2px;width:fit-content}
.case-link .arrow{transition:transform .35s var(--ease)}
.case-link:hover .arrow{transform:translateX(4px)}
@media (max-width:899px){.case-in{grid-template-columns:1fr}.case-media,.case-body{grid-column:span 1}.case-cols,.case-stats{grid-template-columns:1fr}}
.idx-row .n{grid-column:span 1;color:var(--ink-60);font-family:var(--mono);font-size:13px}
.idx-row .co{grid-column:span 4;font-weight:500;letter-spacing:-.02em;line-height:1.05;font-size:clamp(22px,2.4vw,36px)}
.idx-row .desc{grid-column:span 4;color:var(--ink-60);max-width:40ch}
.idx-row .res{grid-column:span 3;font-weight:500;letter-spacing:-.03em;line-height:1.1;font-size:clamp(18px,1.6vw,24px)}
.idx-row .sector{display:none}
.idx-row .res.soft{font-weight:400;color:var(--ink-60);font-size:15px;letter-spacing:-.01em}
.brief-send{margin-top:28px;max-width:640px}
.brief-send .q-input{gap:14px}
.brief-send .q-btn{flex:none}
.brief-send[data-state="sent"] .q-input{display:none}

/* ---------- in practice / questions ---------- */
.commit,.qa{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);
  border-top:var(--rule);padding-block:clamp(20px,2.4vw,30px);align-items:baseline;
}
.commit:last-of-type,.qa:last-of-type{border-bottom:var(--rule)}
.commit .n,.qa .n{grid-column:span 1;color:var(--ink-60)}
.commit .t,.qa .q{grid-column:span 5;font-weight:500;letter-spacing:-.03em;line-height:1.15;font-size:clamp(18px,1.6vw,24px)}
.commit .d,.qa .a{grid-column:span 6;color:var(--ink-60);max-width:50ch}

/* ---------- CTA : the ninety-day brief ----------
   Five questions, one at a time, then a brief written as a contract page
   with the end date already on it. */
.cta{background:var(--sage);color:var(--black);padding-block:clamp(56px,8vw,110px);border-top:var(--rule)}
.quiz{max-width:760px}
.q-step{display:none}
.q-step.on{display:block;animation:rise .6s cubic-bezier(.19,1,.22,1) both}
.q-progress{display:flex;gap:6px;padding-bottom:28px}
.q-progress span{height:2px;flex:1;background:currentColor;opacity:.18;transition:opacity .3s var(--ease)}
.q-progress span.done{opacity:1}
.q-label{opacity:.55;padding-bottom:14px}
.q-q{font-weight:500;letter-spacing:-.03em;line-height:1.1;font-size:clamp(26px,3vw,42px);max-width:18ch}
.q-input{display:flex;border-bottom:1px solid currentColor;max-width:640px;align-items:center;margin-top:28px}
.q-input input{flex:1;background:none;border:0;outline:none;padding:14px 0;font-size:18px;letter-spacing:-.02em;color:inherit}
.q-input input::placeholder{color:var(--ink-60)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;max-width:680px}
.chip{background:none;border:1px solid currentColor;border-radius:999px;padding:10px 16px;cursor:pointer;font-size:15px;letter-spacing:-.02em;transition:background-color .2s var(--ease),color .2s var(--ease)}
.chip:hover,.chip[aria-pressed="true"]{background:var(--black);color:var(--paper)}
.q-nav{display:flex;align-items:center;gap:24px;margin-top:36px}
.q-btn{background:var(--black);color:var(--paper);border:0;border-radius:999px;padding:13px 22px;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.q-btn:disabled{opacity:.35;cursor:default}
.q-back{background:none;border:0;padding:0;cursor:pointer;opacity:.55}
.q-back:hover{opacity:1}
.q-note{opacity:.55;padding-top:18px;max-width:52ch}
/* thinking */
.q-think{font-family:var(--sans);font-size:14px;line-height:2}
.q-think div{opacity:0;animation:rise .5s var(--ease) forwards}
.q-think div:nth-child(2){animation-delay:.9s}.q-think div:nth-child(3){animation-delay:1.8s}.q-think div:nth-child(4){animation-delay:2.7s}
/* the brief */
.brief{border:var(--rule);background:var(--paper);color:var(--black);padding:clamp(24px,3.4vw,44px);max-width:860px;position:relative}
.brief-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:var(--rule);margin-bottom:24px;opacity:.6}
.brief-number{font-weight:500;letter-spacing:-.04em;line-height:1;font-size:clamp(32px,4.2vw,58px)}
.brief-why{padding-top:16px;max-width:52ch}
.brief-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:32px;padding-top:24px;border-top:var(--rule)}
.brief-ph .n{display:block;font-family:var(--mono);font-size:13px;opacity:.55;padding-bottom:8px}
.brief-ph .t{font-weight:500;letter-spacing:-.03em;font-size:20px;padding-bottom:10px}
.brief-ph li{font-size:15px;line-height:1.35;padding:6px 0;border-top:1px solid rgba(0,0,0,.12)}
.brief-ignore{margin-top:28px;padding-top:22px;border-top:var(--rule)}
.brief-ignore li{display:inline-block;margin:6px 8px 0 0;padding:7px 12px;border:1px solid currentColor;border-radius:999px;font-size:14px;text-decoration:line-through;opacity:.7}
.brief-verdict{margin-top:28px;padding-top:22px;border-top:var(--rule);font-weight:500;letter-spacing:-.03em;font-size:clamp(20px,2vw,26px);max-width:30ch}
.brief-stamp{margin-top:28px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:var(--rule)}
.brief-stamp .date{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;color:var(--orange)}
.brief-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.brief-actions .q-btn.alt{background:none;color:inherit;border:1px solid currentColor}
.brief-src{opacity:.45;padding-top:16px}
@media (max-width:899px){.brief-grid{grid-template-columns:1fr;gap:20px}}

/* ---------- footer ---------- */
.footer{background:var(--paper);color:var(--black);padding-block:22px 26px}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.footer-logo{font-weight:500;letter-spacing:-.04em;font-size:clamp(40px,8vw,120px);line-height:.9}
.footer-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;opacity:.75}
.footer :where(a,button):focus-visible{outline-color:var(--black)}

/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:98;background:var(--black);color:var(--white);padding-top:var(--nav-h);display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);pointer-events:none}
.menu[data-open="true"]{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu-body{flex:1;overflow-y:auto;padding-block:clamp(32px,5vw,72px)}
.menu-group + .menu-group{padding-top:clamp(40px,5vw,72px)}
.menu-label{color:rgba(255,255,255,.5);padding-bottom:16px}
.menu-list li a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.25);padding-block:14px;font-weight:500;letter-spacing:-.02em;font-size:clamp(28px,3.5vw,50px);line-height:1;transition:padding-left .35s var(--ease)}
.menu-list li:last-child a{border-bottom:1px solid rgba(255,255,255,.25)}
.menu-list li a:hover{padding-left:12px}
.menu-list .idx{font-family:var(--mono);font-size:13px;letter-spacing:0;opacity:.5}
.menu-sm li a{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.03em}
.menu-foot{border-top:1px solid rgba(255,255,255,.25);padding-block:20px;color:rgba(255,255,255,.5)}
body[data-lock="true"]{overflow:hidden}

/* ---------- focus ----------
   Nothing had a focus state. Everything interactive gets one,
   inverted on the dark and orange grounds so it stays visible. */
:where(a,button,input):focus-visible{outline:2px solid var(--black);outline-offset:3px}
.cta :where(a,button,input):focus-visible,
.menu :where(a,button,input):focus-visible,
.chapter :where(a,button):focus-visible{outline-color:currentColor}
.idx-row:focus-visible{outline-offset:-2px}

/* ---------- reveal ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .col-left{grid-column:span 4}
  .col-right{grid-column:span 8}
  .result .fig{grid-column:span 5}
  .result .who{grid-column:span 7}
  .result .what{grid-column:span 12;padding-top:10px}
  .idx-row .co{grid-column:span 4}
  .idx-row .desc{grid-column:span 4}
  .idx-row .res{grid-column:span 3}
}
@media (max-width:899px){
  :root{--pad:16px;--gap:12px}
  .commit,.qa{grid-template-columns:1fr;gap:8px}
  .commit .n,.commit .t,.commit .d,.qa .n,.qa .q,.qa .a{grid-column:span 1}
  .col-left,.col-right{grid-column:span 12}
  .work-head{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
  .footer-bot{flex-direction:column;gap:8px}
  .chapter{min-height:0;padding-block:64px}
  .result{grid-template-columns:1fr;gap:8px}
  .result .fig,.result .who,.result .what{grid-column:span 1}
  .idx-row{grid-template-columns:1fr;gap:6px}
  .idx-row .n,.idx-row .co,.idx-row .desc,.idx-row .res{grid-column:span 1;justify-self:start;text-align:left}
}
@media (max-height:560px){
  .hero{min-height:0}
  .reel{min-height:0;flex:0 0 auto}
  .reel-art{aspect-ratio:2400/1029;flex:none}
}
@media (max-width:809px){
  .band-name{display:none}
  .band-phase{font-family:var(--sans);text-transform:none;font-size:18px;letter-spacing:-.03em;opacity:1}
  .nav{display:none}
  .menu-btn{display:block}
  .clients-row{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  }
@media (max-width:899px){
  .hero{min-height:0}
  .reel{min-height:0;flex:0 0 auto}
  .reel-art{aspect-ratio:2400/1029;flex:none}
}

/* work row hover preview */
.idx-peek{position:fixed;left:0;top:0;width:clamp(260px,26vw,420px);aspect-ratio:16/9;pointer-events:none;z-index:40;border:var(--rule);background:var(--paper);overflow:hidden;opacity:0;scale:.96;transition:opacity .28s var(--ease),scale .28s var(--ease);will-change:transform}
.idx-peek.on{opacity:1;scale:1}
.idx-peek img{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.idx-peek{transition:none}}

/* footer painting, full bleed */
.footer-art{background:var(--paper);border-top:var(--rule);border-bottom:var(--rule);line-height:0}
.footer-art img{display:block;width:100%;height:auto}

/* display: Instrument Sans 600 */
.h1,.h2,.h3,.chapter-name,.chapter-intro,.idx-row .co,.q-q,.brief-number,.menu-list li a,.case-tag{font-family:var(--sans);font-weight:600;letter-spacing:-.025em}
.h1{line-height:1;letter-spacing:-.03em}
.brand .mark{font-family:'Geist',var(--sans);font-weight:500}