/* ==========================================================================
   YOSO Media · Riso Party
   Built on YOSO Media Design System 4 tokens. Light only by design:
   the brand is newsprint, so every surface sets its own background.
   ========================================================================== */

/* Big Shoulders for display, Inter for everything you read (both variable, Latin subset,
   WOFF2). Inter's optical size axis follows the font size on its own. */
@font-face{font-family:"Big Shoulders";src:url("../fonts/BigShoulders.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Italic-var.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  color-scheme:light;
  --ink:#17161b; --ink-700:#3a3942; --ink-500:#54535c; --grey:#6e6e76;
  --pink:#ff4fa3; --pink-600:#e83f92; --pink-700:#b8296a; --pink-300:#ffb0d3; --pink-100:#ffe0ee;
  --blue:#2e45f5; --blue-700:#2233c9; --blue-300:#b7bdfb; --blue-100:#e2e4fe;
  --yellow:#ffc93c; --yellow-300:#ffe19a; --yellow-100:#fff3d4;
  --gold:#ffcb45;
  --paper:#f6f4ef; --paper-100:#fbfaf7; --paper-400:#e9e6de; --paper-600:#d8d2c5;

  --f-display:"Big Shoulders","Arial Narrow",sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;

  --mis:5px;
  --wrap:1320px;
  --gut:clamp(20px,4.6vw,64px);
  /* rhythm: one gap between sections (--G), one between a heading block and its content (--in) */
  --G:clamp(52px,5.4vw,84px); --in:clamp(28px,3vw,44px);
  --r-card:20px; --r-lg:28px; --r-field:6px; --r-pill:999px;
  --sh:4px 4px 0 var(--ink); --sh-lg:8px 8px 0 var(--ink);
  --sh-pink:6px 6px 0 var(--pink); --sh-blue:6px 6px 0 var(--blue);
  --ease:cubic-bezier(.22,.61,.36,1); --pop:cubic-bezier(.34,1.4,.5,1);

  --star:polygon(50% 0%,58.9% 11%,71.7% 5%,74.9% 18.7%,89.1% 18.8%,86% 32.6%,98.7% 38.9%,90% 50%,98.7% 61.1%,86% 67.4%,89.1% 81.2%,74.9% 81.3%,71.7% 95%,58.9% 89%,50% 100%,41.1% 89%,28.3% 95%,25.1% 81.3%,10.9% 81.2%,14% 67.4%,1.3% 61.1%,10% 50%,1.3% 38.9%,14% 32.6%,10.9% 18.8%,25.1% 18.7%,28.3% 5%,41.1% 11%);
}
@media (max-width:760px){:root{--mis:3px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
/* No scrollbar gutter: with a mouse plugged in, browsers reserve a pale strip on the right that cuts
   every full-bleed band (the reel, the ticker, ink sections) short of the edge. The pink progress bar
   at the top shows position instead. Reduced-motion visitors keep the native bar (the progress bar is off for them). */
@media (prefers-reduced-motion:no-preference){html{scrollbar-width:none}html::-webkit-scrollbar{display:none}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--f-body);letter-spacing:-.009em;font-optical-sizing:auto;overflow-x:hidden;overflow-x:clip;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media (max-width:760px){body{font-size:17px}}
/* ---------- ambient background: halftone ink clouds ----------
   Two riso inks (pink and blue) as halftone clouds, each on its own screen angle like a real
   print, drifting very slowly behind the paper sections. Dark bands, cards and the hero sit on top, so
   the clouds only show in open paper. Barely there on purpose; they hold still for reduced motion.
   The dot masks come from tools/halftone_cloud.py. */
.bg-drift{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-drift i{position:absolute;width:min(76vmax,1150px);aspect-ratio:1;background:var(--c);-webkit-mask:url(../img/halftone-cloud-a.webp) center/contain no-repeat;mask:url(../img/halftone-cloud-a.webp) center/contain no-repeat;opacity:var(--o);mix-blend-mode:multiply;will-change:transform;translate:calc(var(--mx,0) * var(--px,0) * 2) calc(var(--my,0) * var(--px,0) * 2)}
.bg-drift .c1{--c:var(--pink);--o:.045;--px:34px;left:-26vmax;top:-22vmax;rotate:15deg;animation:bgd1 96s ease-in-out infinite alternate}
.bg-drift .c2{--c:var(--blue);--o:.035;--px:-52px;right:-30vmax;top:24vh;rotate:45deg;-webkit-mask-image:url(../img/halftone-cloud-b.webp);mask-image:url(../img/halftone-cloud-b.webp);animation:bgd2 124s ease-in-out infinite alternate}
@keyframes bgd1{40%{transform:translate3d(26vw,20vh,0) scale(1.06)}100%{transform:translate3d(46vw,4vh,0) scale(.94)}}
@keyframes bgd2{45%{transform:translate3d(-30vw,-16vh,0) scale(.92)}100%{transform:translate3d(-12vw,20vh,0) scale(1.08)}}
@media (max-width:760px){.bg-drift i{width:88vmax}}
/* quiet pages (VC, fund cases) keep to paper, ink and blue */
.quiet .bg-drift .c1{--c:var(--blue);--o:.035}.quiet .bg-drift .c2{--c:var(--ink);--o:.022}
/* on desktop the clouds lean with the pointer (each at its own depth, the blue one the other way) and a
   faint halftone ink spot trails the cursor; it sits behind everything, so it only shows on open paper */
.cur-ink{position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;background:var(--pink);-webkit-mask:url(../img/halftone-cloud-b.webp) center/contain no-repeat;mask:url(../img/halftone-cloud-b.webp) center/contain no-repeat;rotate:15deg;opacity:0;mix-blend-mode:multiply;transition:opacity .8s var(--ease);will-change:translate,scale}
.bg-drift.inked .cur-ink{opacity:.055}
.quiet .cur-ink{background:var(--blue)}
@media (prefers-reduced-motion:reduce){.bg-drift i{animation:none}}
@media print{.bg-drift{display:none}}
main{overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4,h5{margin:0;font-weight:inherit}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--pink);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:var(--r-pill);font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* paper grain, fixed so it never repaints on scroll */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
/* one rhythm on every page: the same space above and below each section */
.sec,.sec-tight{padding-block:var(--G);position:relative}
.sec-sm{padding-block:clamp(40px,4.4vw,72px);position:relative}
.band-ink{background:var(--ink);color:var(--paper)}
.band-alt{background:var(--paper-400)}
.band-soft{background:var(--paper-400)}
.band-blue{background:var(--blue);color:var(--paper)}
.band-pink{background:var(--pink);color:var(--ink)}
.band-card{background:var(--paper-100)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.c-3{grid-column:span 3}.c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-9{grid-column:span 9}.c-12{grid-column:1/-1}
.s-2{grid-column-start:2}.s-6{grid-column-start:6}.s-7{grid-column-start:7}.s-8{grid-column-start:8}
.stack>*+*{margin-top:var(--gap,20px)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center{text-align:center}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:48px}.mt-xl{margin-top:clamp(44px,5vw,72px)}
@media (max-width:1020px){
  .c-3{grid-column:span 6}.c-4,.c-5,.c-7,.c-8,.c-9{grid-column:1/-1}.c-6{grid-column:1/-1}
  .s-2,.s-6,.s-7,.s-8{grid-column-start:auto}
}
@media (max-width:760px){.c-3{grid-column:1/-1}}

/* ---------- type ---------- */
.disp{font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;text-wrap:balance}
.h1,.cta-h,.hero-h1,.reset-h{letter-spacing:-.02em}
.hl-stack>span{text-wrap:balance}
/* Scale: poster size. Every heading gets the full width of the page and runs as big as
   the hero (section headings about 144px on a laptop, openers about 150px, closes about
   160px). Big Shoulders is condensed, so a heading of two short lines still fits. On
   phones the size follows the screen so the longest words ("COMPOUNDING.") still fit. */
.h1{font-size:clamp(62px,9.9vw,162px)}
.h2,.sh2{font-size:clamp(54px,8.3vw,136px);line-height:.88;letter-spacing:-.012em}
.h2s{font-size:clamp(48px,6.9vw,112px);line-height:.9}
.h3{font-size:clamp(34px,3.6vw,58px);line-height:.94}
.h4{font-size:clamp(28px,2.6vw,40px);line-height:.98;font-weight:800}
.h5{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1.02;letter-spacing:.01em}
.lead{font-size:clamp(19px,1.45vw,22px);line-height:1.5;letter-spacing:-.014em;max-width:34em}
.body-l{font-size:clamp(17.5px,1.25vw,19.5px);line-height:1.6;max-width:38em}
.small{font-size:15px;line-height:1.5}
.muted{color:var(--ink-700)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.band-ink .muted,.band-blue .muted{color:rgba(246,244,239,.78)}
.mono{font-family:var(--f-body);font-size:14px;letter-spacing:0;font-weight:600;line-height:1.35}
/* Headline lockups (from the reference): big capitals line by line, and on top of that
   small italic link words at the start of a line, one pink chip, one word with a blue
   squiggle, and a pink full stop. Used on page openers and closes; section headings stay plain. */
.connector{font-family:var(--f-body);font-style:italic;font-weight:500;text-transform:lowercase;letter-spacing:0;font-size:.34em;line-height:1;vertical-align:middle;padding-inline:.04em;margin-right:.2em}
.wave{font-style:normal;text-decoration:underline wavy var(--blue);text-decoration-thickness:.055em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.hero .wave,.band-ink .wave{color:var(--yellow)}
.band-ink .wave{text-decoration-color:var(--pink)}
/* the squiggle paints above a pink chip on the next line */
.wave,.w:has(.wave){position:relative;z-index:2}
/* a line with a squiggle gets room below it; the other lines stay tight */
.hl-stack>span:not(:last-child):has(.wave){margin-bottom:.24em}
/* a squiggle on the last line needs room before whatever follows */
.hl-stack:has(>span:last-child .wave){padding-bottom:.18em}
.hero-h1 .connector{white-space:nowrap}
.pink{color:var(--pink)}.paper{color:var(--paper)}.blue{color:var(--blue)}.yellow{color:var(--yellow)}.ink{color:var(--ink)}
.band-ink .blue{color:var(--blue-300)}
.hl{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);padding-inline:.08em}
.strike{text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:.12em}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.link:hover{color:var(--pink-700);text-decoration-color:var(--pink)}
.band-ink .link:hover,.band-blue .link:hover{color:var(--pink)}
.prose p+p{margin-top:1em}
.num{font-family:var(--f-display);font-weight:900;line-height:.86;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{--bg:var(--paper-100);--fg:var(--ink);--bd:var(--ink);--shc:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);font:600 16px/1 var(--f-body);text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:4px 4px 0 var(--shc);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shc)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shc)}
.btn .arr{display:inline-block;transition:transform .25s var(--pop)}
.btn:hover .arr{transform:translate(2px,-2px) rotate(8deg)}
.btn-pink{--bg:var(--pink)}
.btn-ink{--bg:var(--ink);--fg:var(--paper);--shc:var(--pink)}
.btn-yellow{--bg:var(--yellow)}
.btn-paper{--bg:var(--paper);--shc:var(--pink)}
.btn-ghost{--bg:transparent;box-shadow:none}
.btn-ghost:hover{box-shadow:4px 4px 0 var(--shc)}
.band-ink .btn-ghost,.band-blue .btn-ghost{--fg:var(--paper);--bd:var(--paper);--shc:var(--pink)}
.band-ink .btn-pink,.band-blue .btn-pink{--bd:var(--ink);--shc:var(--paper)}
.btn-lg{min-height:62px;padding:0 32px;font-size:18px}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;box-shadow:3px 3px 0 var(--shc)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- labels ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--paper-100);font:600 14px/1 var(--f-body);letter-spacing:0;white-space:nowrap}
.tag-pink{background:var(--pink)}.tag-blue{background:var(--blue);color:var(--paper)}.tag-yellow{background:var(--yellow)}.tag-ink{background:var(--ink);color:var(--paper)}
.band-ink .tag:not(.tag-pink):not(.tag-yellow):not(.tag-blue){background:transparent;color:var(--paper);border-color:rgba(246,244,239,.5)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- stickers ---------- */
.star{clip-path:var(--star);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--yellow);color:var(--ink);aspect-ratio:1;width:var(--s,150px);height:var(--s,150px);padding:calc(var(--s,150px)*.17)}
.star .num{font-size:calc(var(--s,150px)*.27)}
.star .mono{font-size:max(9.5px,calc(var(--s,150px)*.068));margin-top:4px;letter-spacing:.1em}
.sticker{position:absolute;z-index:3;transform:rotate(var(--rot,10deg));transition:transform .45s var(--pop)}
.sticker:hover{transform:rotate(calc(var(--rot,10deg)*-1)) scale(1.06)}
/* Headline system, taken from the hero. Every display headline is Big Shoulders 900 in
   capitals, ink, closed by a pink full stop. One device for emphasis: the pink block with
   a blue misprint ("luck." in the hero), at most once in a page's opening headline and once
   in its closing one. No coloured phrases, no misprint on bare text, no small italic link
   words outside the hero. */
/* the pink chip, as in the reference: slightly rounded, tilted, a small ink drop shadow on the
   block and none on the letters */
.block-sticker{display:inline-block;background:var(--pink);color:var(--ink);padding:0 .14em;border-radius:.08em;transform:rotate(-2.5deg);box-shadow:clamp(4px,.05em,7px) clamp(4px,.05em,7px) 0 var(--ink);text-shadow:none}
.disp .block-sticker{font-size:1em}
.band-pink .block-sticker{background:var(--ink);color:var(--paper);box-shadow:clamp(4px,.05em,7px) clamp(4px,.05em,7px) 0 var(--paper)}
.band-blue .block-sticker{background:var(--paper);color:var(--ink)}
.quiet .block-sticker{background:var(--blue);color:var(--paper)}
.hl-stack{display:flex;flex-direction:column;gap:.04em}
.stamp{display:inline-flex;align-items:center;justify-content:center;border:3px solid currentColor;border-radius:10px;padding:8px 14px;font:600 15px/1 var(--f-body);letter-spacing:0;transform:rotate(-6deg);color:var(--pink-700);background:rgba(251,250,247,.7)}
.badge-round{width:var(--s,124px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid var(--ink);box-shadow:var(--sh)}

/* ---------- cards ---------- */
.card{background:var(--paper-100);border:2px solid var(--ink);border-radius:var(--r-card);position:relative}
a.card,.card.raised{box-shadow:var(--sh-lg)}
.card-pad{padding:clamp(22px,2.4vw,34px)}
.card-flat{box-shadow:none}
.card-pink{background:var(--paper-100);box-shadow:inset 0 7px 0 var(--pink)}.card-blue{background:var(--blue);color:var(--paper)}.card-yellow{background:var(--paper-100);box-shadow:inset 0 7px 0 var(--yellow)}.card-soft{background:var(--paper-100)}.card-ink{background:var(--ink);color:var(--paper)}
.tilt-l{transform:rotate(-1.6deg)}.tilt-r{transform:rotate(1.4deg)} /* images and collage only */
.lift{transition:transform .35s var(--pop),box-shadow .35s var(--ease)}
.lift:hover{transform:translate(-3px,-4px) rotate(0deg);box-shadow:12px 12px 0 var(--ink)}
.tape::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:28px;transform:translateX(-50%) rotate(-4deg);background:rgba(255,201,60,.82);border-left:2px dashed rgba(23,22,27,.18);border-right:2px dashed rgba(23,22,27,.18);z-index:2}
.halftone{background-image:radial-gradient(rgba(23,22,27,.2) 1.3px,transparent 1.7px);background-size:10px 10px}
.halftone-paper{background-image:radial-gradient(rgba(246,244,239,.16) 1.3px,transparent 1.7px);background-size:10px 10px}
.media{position:relative;overflow:hidden;border-radius:calc(var(--r-card) - 4px);background:var(--paper-400)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media.riso::after{content:"";position:absolute;inset:0;background:var(--pink);mix-blend-mode:screen;opacity:0;transition:opacity .4s}
.lift:hover .media.riso::after{opacity:.16}
.rule{height:2px;background:var(--ink);border:0;margin:0}
.dash{border:0;border-top:2px dashed currentColor;opacity:.5;margin:0}

/* ---------- header / nav ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding:12px clamp(8px,1.4vw,18px) 0;pointer-events:none}
.nav{pointer-events:auto;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1480px;margin-inline:auto;min-height:64px;background:var(--paper-100);border:2px solid var(--ink);border-radius:var(--r-pill);padding:7px 7px 7px 22px;box-shadow:var(--sh);transition:box-shadow .3s}
.is-scrolled .nav{box-shadow:6px 6px 0 var(--ink)}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.nav-logo img{width:118px;height:auto}
.nav-links{display:flex;gap:clamp(18px,2.6vw,38px);font-weight:500;font-size:16px}
.nav-links a{text-decoration:none;position:relative;padding:8px 2px;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* "Not for everyone" sits as a button beside Start a project, with a pink dot that pings now and then */
.nav-dot{position:relative;display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 1.5px var(--ink);vertical-align:.08em}
.nav-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--pink);opacity:0;animation:navping 2.6s var(--ease) infinite}
@keyframes navping{0%{transform:scale(.5);opacity:.9}60%,100%{transform:scale(1.5);opacity:0}}
.btn .nav-dot{margin:0}
.nav .nav-fit[aria-current="page"]{--bg:var(--ink);--fg:var(--paper);--shc:var(--pink)}
.nav .nav-fit[aria-current="page"] .nav-dot{box-shadow:0 0 0 1.5px var(--paper)}
@media (prefers-reduced-motion:reduce){.nav-dot::after{animation:none}}
.nav-cta{display:flex;gap:8px;align-items:center}
.menu-btn{display:none}
@media (max-width:900px){
  .nav-links,.nav-cta .btn-pink,.nav-cta .nav-fit{display:none}
  .menu-btn{display:inline-flex}
  .nav{min-height:58px;padding-left:18px}
  .nav-logo img{width:104px}
}
.menu{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:16px var(--gut) 32px;transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
.menu.open{transform:none;visibility:visible;transition:transform .5s var(--ease)}
.menu-top{display:flex;justify-content:space-between;align-items:center;min-height:62px}
.menu nav{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:4px}
.menu nav a{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(56px,16vw,96px);line-height:.95;text-decoration:none;transition:color .2s,transform .35s cubic-bezier(.16,1,.3,1)}
.menu nav a[aria-current="page"]{color:var(--pink)}
/* hover, keyboard focus and the moment of a tap: pink like the rest of the site's links, with a small step forward */
.menu nav a:hover,.menu nav a:focus-visible,.menu nav a:active{color:var(--pink);transform:translateX(10px)}
@media (prefers-reduced-motion:reduce){.menu nav a:hover,.menu nav a:focus-visible,.menu nav a:active{transform:none}}
.menu-foot{display:flex;flex-direction:column;gap:18px}

/* the way back from a case study */
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:16px;text-decoration:none;color:var(--ink-700);transition:color .2s}
.back span{transition:transform .3s var(--pop)}
.back:hover{color:var(--pink-700)}.back:hover span{transform:translateX(-4px)}
.quiet .back:hover{color:var(--blue-700)}

/* ---------- page hero (interior pages) ---------- */
.phero{padding-top:clamp(36px,4.4vw,68px);padding-bottom:clamp(48px,5.6vw,88px);position:relative}
.phero .lead{margin-top:clamp(22px,2.2vw,30px)}

/* ---------- editorial pieces: quirky, kept professional ---------- */
/* section head: the heading takes the wide column, the lead sits beside it on the last line */
.shead2{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,1.8vw,26px)}
.shead2 .lead{margin:0;max-width:34em}
/* a one-word heading keeps its lead beside it, on the heading's last line */
.shead2.short{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(32px,4.4vw,80px);align-items:end}
.shead2.short .lead{justify-self:end;max-width:30em}
@media (max-width:900px){.shead2.short{grid-template-columns:1fr}.shead2.short .lead{justify-self:start}}
/* pill tags */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;border:1.5px solid var(--ink);border-radius:var(--r-pill);font:600 12px/1 var(--f-body);color:var(--ink)}
.pill-pink{background:var(--pink)}
/* ticker: a strip of words that runs on its own (the pink one closes a page) */
.ticker{background:var(--ink);color:var(--paper);padding-block:clamp(14px,1.5vw,20px)}
.marquee.ticker{-webkit-mask:none;mask:none}
.ticker-group{gap:clamp(18px,2vw,30px);padding-right:clamp(18px,2vw,30px);font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(20px,1.9vw,28px);line-height:1;white-space:nowrap}
.ticker-group span:nth-of-type(3n+1){color:var(--yellow)}.ticker-group span:nth-of-type(3n+3){color:var(--pink)}
.ticker-group b{font-weight:400;color:var(--paper-600);font-size:.8em}
.ticker-pink{background:var(--pink);color:var(--ink);border-block:2px solid var(--ink);padding-block:clamp(10px,1.2vw,16px)}
.ticker-pink .ticker-group{font-weight:900;font-size:clamp(32px,2.9vw,44px)}
.ticker-pink .ticker-group span:nth-of-type(n){color:var(--ink)}.ticker-pink .ticker-group b{color:var(--ink)}
.quiet .ticker-pink{background:var(--blue)}.quiet .ticker-pink .ticker-group span:nth-of-type(n),.quiet .ticker-pink .ticker-group b{color:var(--paper)}
.cta-h{font-size:clamp(62px,10.1vw,160px);line-height:.88;max-width:none}
.cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,2.2vw,30px);margin-top:clamp(22px,2.2vw,30px)}
.cta-row .lead,.cta-row .body-l{margin:0;max-width:34em}
.cta-row .row{gap:22px}
.cta-mail{font-size:19px}
@media (max-width:480px){.h1,.h2,.sh2,.cta-h{font-size:15vw}.h2s{font-size:13vw}}

/* ---------- marquee (one per page) ---------- */
.marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:mq var(--mq,38s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee.paused .marquee-track{animation-play-state:paused}
/* a keyboard switch to stop the strip; it only shows itself when it has focus */
.mq-pause:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mq-pause:focus{position:absolute;z-index:3;left:0;bottom:-8px;transform:translateY(100%)}
.marquee-group{display:flex;align-items:center;gap:clamp(44px,6vw,88px);padding-right:clamp(44px,6vw,88px)}
.marquee-group img{height:calc(clamp(24px,2.6vw,34px) * var(--k,1));width:auto;opacity:.92}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- accordion ---------- */
.acc details{border-top:2px solid var(--ink)}
.acc details:last-child{border-bottom:2px solid var(--ink)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(26px,2.8vw,44px);line-height:1}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:500 22px/1 var(--f-body);transition:transform .3s var(--pop),background .2s}
.acc details[open] summary::after{transform:rotate(45deg);background:var(--pink)}
.acc .acc-body{padding:0 64px 28px 0;max-width:46em;font-size:18px;color:var(--ink-700)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .label{font-weight:600;font-size:15px}
.field .hint{font-size:14px;color:var(--ink-700)}
.input{width:100%;min-height:54px;padding:14px 16px;border:2px solid var(--ink);border-radius:var(--r-field);background:var(--paper-100);font-size:17px;transition:box-shadow .2s,border-color .2s}
textarea.input{min-height:132px;resize:vertical;line-height:1.5}
.input::placeholder{color:#6b6a70}
.input:focus{outline:none;box-shadow:4px 4px 0 var(--blue);border-color:var(--blue)}
.field.has-error .input{border-color:#c4135f;box-shadow:4px 4px 0 #c4135f}
.err{color:#b0124f;font-size:14px;font-weight:600;display:none}
.field.has-error .err{display:block}
.opt{margin-left:6px;font:600 13px var(--f-body);letter-spacing:0;color:var(--ink-500)}
.form-sum{flex-basis:100%;order:3;margin:0;color:#b0124f;font-weight:600;font-size:15px}
.form-sum:empty{display:none}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.choice{display:flex;flex-wrap:wrap;gap:10px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--paper-100);cursor:pointer;font-weight:500;font-size:15.5px;transition:background .2s,transform .2s var(--pop),box-shadow .2s}
.choice label:hover{transform:translateY(-2px)}
.choice input:checked+label{background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.choice input:focus-visible+label{outline:3px solid var(--blue);outline-offset:3px}
.band-ink .input,.band-blue .input{background:var(--paper-100);color:var(--ink)}
.form-done{display:none}
form.is-done .form-body{display:none}
form.is-done .form-done{display:block}

/* ---------- metric ---------- */
.metric .num{font-size:clamp(64px,7.6vw,120px);color:var(--blue)}
.band-ink .metric .num,.band-blue .metric .num{color:var(--paper)}
.metric .mono{margin-top:12px;display:block}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.stat-row>*{padding:clamp(24px,3vw,40px) clamp(14px,2vw,28px);border-left:2px solid var(--ink)}
.stat-row>*:first-child{border-left:0;padding-left:0}
@media (max-width:860px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-row>*:nth-child(3){border-left:0;padding-left:0}.stat-row>*:nth-child(n+3){border-top:2px solid var(--ink)}}

/* ---------- section head ---------- */
.shead{max-width:none}
/* the row that sits under a full-width heading */
.sub-row{margin-top:var(--in)}

/* ---------- layout system: every block sits on the 12-column grid ----------
   1. A section intro is a stack: heading, the lead right under it, the buttons right under that.
   2. Text beside a picture: two columns that line up; the text column carries its whole story.
   3. Card grids are even: same widths, same heights, nothing nudged out of line.
   4. A callout runs the full content width. */
:root{--gx:clamp(20px,2.4vw,36px)}
.shead>.lead,.shead>.body-l,.shead>.intro-meta{margin-top:clamp(18px,1.8vw,26px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(24px,2.4vw,32px)}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gx);row-gap:clamp(28px,3vw,44px);align-items:center}
.split>.split-text{grid-column:1/span 6;min-width:0}
.split>.split-media{grid-column:7/span 6;min-width:0}
.split>.split-text,.split>.split-media{grid-row:1}
.split.rev>.split-text{grid-column:7/span 6}
.split.rev>.split-media{grid-column:1/span 6}
.split.top{align-items:start}
.split-media.stick{position:sticky;top:120px}
/* Sideways sections: the heading sits in the text column, so the grid or picture beside it runs from the heading's top to the bottom of the copy */
.side{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gx);row-gap:clamp(28px,3vw,44px);align-items:stretch}
.side>.side-text{grid-column:1/span 6;min-width:0}
.side>.side-media{grid-column:7/span 6;min-width:0}
@media (max-width:1020px){.side>.side-text,.side>.side-media{grid-column:1/-1}}
@media (max-width:1020px){.split>.split-text,.split>.split-media{grid-column:1/-1!important;grid-row:auto!important}.split-media.stick{position:static}}
.callout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px var(--gx);align-items:baseline;padding:clamp(24px,2.8vw,40px);margin-top:var(--in)}
.callout>*{margin:0}
@media (max-width:860px){.callout{grid-template-columns:1fr}}
/* page openers with a picture: headline, lead and buttons on the left, the picture beside them */
.ph-split{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,30vw,440px);gap:clamp(28px,4vw,56px);align-items:center}
.ph-split .h1{font-size:clamp(54px,7.6vw,116px)}
@media (max-width:1020px){.ph-split{grid-template-columns:1fr}.ph-split .h1{font-size:clamp(54px,9.9vw,116px)}}
/* a bar that groups a sentence with its button */
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px;padding:clamp(22px,2.4vw,32px);border:2px solid var(--ink);border-radius:var(--r-card);background:var(--paper-100)}
.bar>p{max-width:46em}
/* ---------- case panels: one big card per case study, a five-tile bento inside ----------
   Layout of the bento (desktop): one tall tile on the left (wk-a), two wide tiles on the right
   (wk-b, wk-c), two small tiles under them (wk-d, wk-e). A tile with an <img> shows the picture
   under a dark fade with its caption; a tile without one is a type card, so a case looks finished
   before its pictures arrive. One composite picture can replace all five: .wk-bento.wk-one.
   On desktop the cards stack: each one holds under the nav while the next slides over it. */
.wk-stack{display:grid;gap:clamp(20px,2.4vw,32px);margin-top:var(--in)}
.wk-card{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px);padding:clamp(16px,1.8vw,26px);background:var(--paper-100);border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:8px 8px 0 var(--ink)}
.wk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;padding:4px 6px 0}
.wk-name{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,4.4vw,72px);line-height:.88;letter-spacing:-.01em}
.wk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}
.wk-result{font-size:16px;font-weight:500;color:var(--ink-700)}
.wk-bento{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;aspect-ratio:2/1}
.wk-tile{position:relative;margin:0;min-height:0;overflow:hidden;container-type:inline-size;display:flex;align-items:flex-end;border-radius:calc(var(--r-lg) - 8px);background:linear-gradient(160deg,var(--ink) 30%,#3b1f3c);color:var(--paper)}
.wk-tile:not(:has(img))::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--paper) 9%,transparent) 1.2px,transparent 1.6px);background-size:12px 12px}
.wk-a{grid-column:1/3;grid-row:1/4}.wk-b{grid-column:3/5;grid-row:1}.wk-c{grid-column:3/5;grid-row:2}.wk-d{grid-column:3;grid-row:3}.wk-e{grid-column:4;grid-row:3}
.wk-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.wk-tile:has(img)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--ink) 55%,transparent) 62%,color-mix(in srgb,var(--ink) 90%,transparent))}
.wk-tile figcaption{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:clamp(14px,1.6vw,24px)}
.wk-tile b{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(24px,2.3vw,42px);line-height:.9;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:break-word}
.wk-a b{font-size:clamp(34px,3.8vw,68px)}
/* a tile still waiting for its picture is a type card, so its title runs larger */
.wk-tile:not(:has(img)) b{font-size:clamp(28px,3vw,54px)}
/* the two small tiles size their title to the tile, so the longest word (about 6.4em, "conversations") always fits */
.wk-tile.wk-d b,.wk-tile.wk-e b{font-size:min(clamp(24px,2.3vw,42px),calc((100cqi - 2 * clamp(14px,1.6vw,24px)) / 6.6))}
.wk-tile.wk-d:not(:has(img)) b,.wk-tile.wk-e:not(:has(img)) b{font-size:min(clamp(28px,3vw,54px),calc((100cqi - 2 * clamp(14px,1.6vw,24px)) / 6.6))}
.wk-tile span{font-size:clamp(14px,1.1vw,17px);font-weight:500;line-height:1.35;color:color-mix(in srgb,var(--paper) 86%,transparent)}
.wk-pink{background:var(--pink);color:var(--ink)}.wk-pink::before{opacity:0}.wk-pink span{color:var(--ink-700)}
.wk-cover{position:absolute;inset:0;z-index:2;border-radius:calc(var(--r-lg) - 8px)}
.wk-bento:hover .wk-tile img{transform:scale(1.04)}
.wk-one{display:block}.wk-one>img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-lg) - 8px)}
@media (min-width:1024px) and (min-height:700px){
  .wk-card{position:sticky;top:calc(96px + var(--i,0) * 14px);height:min(calc(100svh - 96px - 58px),880px)}
  .wk-card .wk-bento{aspect-ratio:auto;flex:1;min-height:0}
}
@media (max-width:760px){
  .wk-bento{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:none}
  .wk-a{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .wk-b,.wk-c{grid-column:1/-1;grid-row:auto;aspect-ratio:2.2/1}
  .wk-d,.wk-e{grid-column:auto;grid-row:auto;aspect-ratio:1}
  .wk-tile.wk-d b,.wk-tile.wk-e b,.wk-tile.wk-d:not(:has(img)) b,.wk-tile.wk-e:not(:has(img)) b{font-size:min(28px,calc((100cqi - 24px) / 6.6))}
  .wk-d figcaption,.wk-e figcaption{padding:14px 12px}
  .wk-one>img{aspect-ratio:2/1;height:auto}
}

/* spec rows: a label, then the detail, one hairline between rows */
.rows{border-top:2px solid currentColor}
.rows>div{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:6px var(--gx);padding:18px 0 20px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.rows h3{font:600 14px/1.5 var(--f-body);letter-spacing:0;padding-top:3px}
.rows p{font-size:17px;line-height:1.55}
.rows .no h3{color:var(--pink-700)}
.band-ink .rows .no h3{color:var(--pink)}
@media (max-width:560px){.rows>div{grid-template-columns:1fr}}
.shead .lead{max-width:34em}
.shead .lead,.shead .body-l{margin-top:clamp(20px,2vw,28px)}

/* ---------- CTA band (pre-footer) ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band .h1{max-width:12ch}
.cta-band .cta-stamp{position:absolute;right:clamp(16px,6vw,110px);top:clamp(40px,8vw,120px)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding-top:clamp(56px,6.4vw,96px);overflow:hidden;position:relative}
.foot-grid{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:clamp(24px,3.4vw,48px)}
.foot h2{font:600 14px/1.3 var(--f-body);letter-spacing:0;color:var(--pink);margin-bottom:18px}
.foot ul{display:flex;flex-direction:column;gap:12px}
.foot a{text-decoration:none;color:rgba(246,244,239,.88);transition:color .2s}
.foot a:hover{color:var(--pink)}
.foot-statement{font-size:19px;line-height:1.5;max-width:22em;margin-top:22px;color:rgba(246,244,239,.82)}
.foot-giant{font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.82;font-size:clamp(60px,11.6vw,186px);letter-spacing:-.01em;margin-top:clamp(48px,6vw,88px);white-space:nowrap}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid rgba(246,244,239,.2);padding-block:26px 30px;margin-top:28px;font-size:14px;color:rgba(246,244,239,.7)}
.foot-bar nav{display:flex;gap:22px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}.foot-giant{white-space:normal;font-size:clamp(56px,19vw,120px)}}

/* ---------- reveal motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*70ms)}
  .js [data-reveal].in{opacity:1;transform:none}
  .js .now,.js .now path.line{transition:none!important}
  .js [data-reveal="pop"]{transform:scale(.6) rotate(-14deg)}
  .js [data-reveal="pop"].in{transform:rotate(var(--rot,10deg));transition-timing-function:var(--pop)}
  .js .draw path.line{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);transition:stroke-dashoffset 2.2s var(--ease) .2s}
  .js .draw.in path.line{stroke-dashoffset:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .marquee-track{animation:none!important;flex-wrap:wrap}
  .sticker:hover{transform:rotate(var(--rot,10deg))}
}

/* ---------- mobile resets ---------- */
@media (max-width:760px){
  .tilt-l,.tilt-r{transform:none}
  a.card,.card.raised{box-shadow:5px 5px 0 var(--ink)}
  .acc .acc-body{padding-right:0}
  .btn{white-space:normal;text-align:center}
  /* touch targets: standalone links and chapter chips reach 44px */
  .row>a.link,article>a.link,.cta-band .link{display:inline-flex;align-items:center;min-height:44px}
}

/* ==========================================================================
   Case study template (09 to 12)
   ========================================================================== */
.c-hero{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px)}
.c-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:28px}
.c-hero h1{font-size:clamp(46px,5.8vw,96px);line-height:.9}
.c-art{position:relative}
.c-art .card{padding:12px;transform:rotate(2deg)}
.c-art .media{aspect-ratio:4/3.4}
.c-art .sticker{left:-34px;bottom:-30px}
.facts{display:grid;grid-template-columns:1.1fr 1.6fr .8fr .8fr;border:2px solid var(--ink);border-radius:var(--r-card);background:var(--paper-100);margin-top:clamp(48px,6vw,80px);overflow:hidden}
.facts>div{padding:20px 22px;border-left:2px solid var(--ink)}
.facts>div:first-child{border-left:0}
.facts dt{font:600 14px var(--f-body);letter-spacing:0;color:var(--ink-700)}
.facts dd{margin:8px 0 0;font-weight:600;font-size:17px;line-height:1.35}
@media (max-width:1020px){.c-hero-grid{grid-template-columns:1fr}.c-art .sticker{left:auto;right:-6px}.facts{grid-template-columns:1fr 1fr}.facts>div:nth-child(3){border-left:0}.facts>div:nth-child(n+3){border-top:2px solid var(--ink)}}

.chapters{position:sticky;top:88px;z-index:20;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;width:max-content;max-width:calc(100% - var(--gut)*2);margin-inline:auto;padding:5px;background:var(--paper-100);border:2px solid var(--ink);border-radius:var(--r-pill);box-shadow:var(--sh)}
.chapters::-webkit-scrollbar{display:none}
.chapters a{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:var(--r-pill);text-decoration:none;font-weight:600;font-size:14px;transition:background .2s,color .2s}
.chapters a b{font:600 13px var(--f-body);letter-spacing:0;color:var(--pink-700)}
.chapters a:hover{background:var(--yellow-100)}
.chapters a[aria-current]{background:var(--ink);color:var(--paper)}
.chapters a[aria-current] b{color:var(--pink)}
@media (max-width:900px){.chapters{top:80px}.chapters a{min-height:44px}}

.chap{padding-block:clamp(72px,9vw,136px);scroll-margin-top:140px}
.chap-grid{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.chap-label{position:sticky;top:160px}
.chap-label .n{font-family:var(--f-display);font-weight:900;font-size:clamp(80px,8vw,128px);line-height:.75;color:var(--pink);-webkit-text-stroke:2px var(--ink)}
.band-ink .chap-label .n{-webkit-text-stroke:0}
.chap-label h2{margin-top:14px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(26px,2.4vw,34px);line-height:.95}
.chap-body>*+*{margin-top:24px}
.chap-body .say{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,3.8vw,58px);line-height:.95;max-width:20ch}
@media (max-width:860px){.chap-grid{grid-template-columns:1fr}.chap-label{position:static;display:flex;align-items:flex-end;gap:16px}.chap-label h2{margin:0}}

.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.points li{border:2px solid var(--ink);border-radius:16px;padding:22px 22px 24px;background:var(--paper-100);display:grid;grid-template-columns:auto 1fr;gap:16px}

.points .k{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:22px}
.points h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1}
.points p{margin-top:6px;font-size:16.5px;color:var(--ink-700)}
@media (max-width:640px){.points{grid-template-columns:1fr}}
.aside-note{border-left:4px solid var(--yellow);padding:6px 0 6px 18px;color:var(--ink-700)}

.big-metric{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);align-items:flex-end}
.big-metric .num{font-size:clamp(88px,10vw,168px);color:var(--blue)}
.band-ink .big-metric .num{color:var(--pink)}
.ticks{display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:18px}
.ticks li::before{content:"✳";color:var(--pink);font-size:18px}

.findings{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,36px)}
.finding{padding:clamp(24px,3vw,40px);position:relative}
.finding .when{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.finding .when .disp{font-size:clamp(34px,3.4vw,52px)}
.finding .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:22px}
.finding .cols h4{font:600 14px var(--f-body);letter-spacing:0;color:var(--ink-700);margin-bottom:8px}
.finding .cols .did{font-weight:600}
.finding .cols .did b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(34px,3vw,46px);line-height:.9;color:var(--blue);margin-bottom:8px}
.finding.contra{background:var(--yellow-100)}
.finding.contra .stamp{position:absolute;right:24px;top:-18px;background:var(--paper)}
@media (max-width:860px){.finding .cols{grid-template-columns:1fr}.finding.contra .stamp{position:static;margin:0 0 18px}}

.results{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:clamp(18px,3vw,40px);align-items:center;padding:22px 0;border-bottom:2px solid var(--ink)}
.res .label{font-weight:600;font-size:18px}
.bars{display:flex;flex-direction:column;gap:8px}
.bars .bar{display:flex;align-items:center;gap:12px;font:600 15px var(--f-body);letter-spacing:0}
.bars .bar i{display:block;height:20px;border:2px solid var(--ink);border-radius:4px;background:var(--paper-400);width:calc(var(--w) * 1%);min-width:10px}
.bars .bar.now i{background:var(--blue)}
.bars .bar span{white-space:nowrap}
.res .delta{font-family:var(--f-display);font-weight:900;font-size:clamp(34px,3.2vw,48px);line-height:.9;color:var(--pink-700);text-align:right;min-width:4ch}
@media (max-width:760px){.res{grid-template-columns:1fr}.res .delta{text-align:left}}
.flat{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:24px;border:2px dashed var(--ink);border-radius:16px}
.flat .tag{margin-top:2px}
@media (max-width:560px){.flat{grid-template-columns:1fr;gap:12px}.flat .tag{justify-self:start}}

.wrong{padding:clamp(26px,3vw,44px);box-shadow:inset 7px 0 0 var(--pink)}
.wrong .say{position:relative}
.wrong .lesson{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,3vw,44px);line-height:.95;color:var(--pink-700);margin-top:18px}
.next-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:center;text-decoration:none;padding:clamp(20px,2.4vw,32px)}
.next-case .media{aspect-ratio:16/10;border:2px solid var(--ink)}
.next-case:hover .go{background:var(--pink);transform:rotate(45deg)}
.next-case .go{width:64px;height:64px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-size:26px;transition:background .2s,transform .35s var(--pop)}
@media (max-width:860px){.next-case{grid-template-columns:1fr}}
.qph{border:2px dashed var(--ink);border-radius:var(--r-card);padding:clamp(28px,4vw,56px);background:repeating-linear-gradient(-45deg,var(--yellow-100),var(--yellow-100) 12px,#fff8e6 12px,#fff8e6 24px);text-align:center;margin:0}
.qph .disp{font-size:clamp(28px,3vw,44px)}

/* fund case studies */
.draft-note{margin-top:20px;display:inline-block;border:2px dashed var(--ink);border-radius:10px;padding:10px 16px;background:repeating-linear-gradient(-45deg,var(--yellow-100),var(--yellow-100) 10px,#fff8e6 10px,#fff8e6 20px);font-weight:600;font-size:15px}
.fund-plate{position:absolute;left:-18px;bottom:-26px;z-index:3;background:var(--paper-100);border:2px solid var(--ink);border-radius:14px;padding:16px 22px;box-shadow:var(--sh);transform:rotate(-3deg)}
.fund-plate img{height:58px;width:auto;max-width:240px;object-fit:contain}
.facts dd.tbc{color:var(--ink-700);font-weight:500;font-style:italic}
@media (max-width:1020px){.fund-plate{left:10px;bottom:-22px}.fund-plate img{height:34px}}

/* logos on paper: the client marks are white files, printed here in ink */
.logo-ink img{opacity:.88}
.logo-ink img.w{filter:brightness(0)}

/* ==========================================================================
   Decode loop. Four words stacked like the hero headline; the hero's pink "luck." block moves from step to step, and a pink line closes the loop back to 01.
   Used on the homepage (pinned to the scroll on desktop) and the Services hero.
   ========================================================================== */
.dstack{position:relative;justify-self:start;padding-right:clamp(76px,8vw,128px)}
.dwl{display:flex;flex-direction:column;gap:clamp(4px,1vh,12px)}
.dw{display:flex;align-items:center}
.dw span{position:relative;isolation:isolate;display:inline-block;padding:.02em .1em .04em;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(50px,7.2vw,118px);line-height:.9;letter-spacing:-.005em;color:var(--ink);-webkit-text-stroke:max(1px,.018em) transparent;transition:color .35s var(--ease),-webkit-text-stroke-color .35s var(--ease)}
.dw span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink);border-radius:.08em;box-shadow:clamp(4px,.05em,7px) clamp(4px,.05em,7px) 0 var(--ink);transform:rotate(-2.5deg) scaleX(0);transform-origin:0 50%;opacity:0;transition:transform .5s var(--pop),opacity .15s linear}
/* the return line: drawn from Learn back up to Position */
.dret{position:absolute;right:0;top:.45em;bottom:.45em;width:clamp(56px,6vw,96px);font-size:clamp(50px,7.2vw,118px);border:4px solid var(--pink);border-left:0;border-radius:0 999px 999px 0;clip-path:inset(0 -40px -40px -40px);transition:clip-path 1s cubic-bezier(.16,1,.3,1),opacity .2s linear}
.dret::before{content:"";position:absolute;left:-16px;top:-12px;border:10px solid transparent;border-right:16px solid var(--pink);border-left:0}
.dret i{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font:600 14px var(--f-body);letter-spacing:0;color:var(--pink-700);font-style:normal}
/* steps: while the loop plays, coming steps are outlines, done steps are ink, the live one wears the block.
   The outline is a fixed share of the letter size (about 1px on phones, 2px on a laptop), so it never
   fills the narrow counters of the heavy cut, and a filled word drops it, so it keeps the true weight. */
.dpin[data-step] .dw span{color:transparent;-webkit-text-stroke-color:var(--ink)}
.dpin[data-step="0"] .dw:nth-child(-n+1) span,.dpin[data-step="1"] .dw:nth-child(-n+2) span,.dpin[data-step="2"] .dw:nth-child(-n+3) span,.dpin[data-step="3"] .dw span{color:var(--ink);-webkit-text-stroke-color:transparent}
.dpin[data-step="0"] .dw:nth-child(1) span::before,.dpin[data-step="1"] .dw:nth-child(2) span::before,.dpin[data-step="2"] .dw:nth-child(3) span::before,.dpin[data-step="3"] .dw:nth-child(4) span::before{transform:rotate(-2.5deg) scaleX(1);opacity:1}
.dpin[data-step]:not([data-step="3"]) .dret{clip-path:inset(100% -40px -40px -40px);opacity:0}
@media (max-width:560px){.dstack{padding-right:58px}.dret{width:44px;border-width:3px}.dret i{display:none}}
/* the small loop in the Services hero plays on its own */
.dmini .dw span,.dmini .dret{font-size:clamp(44px,4.8vw,76px)}
.dmini .dstack{padding-right:clamp(64px,6vw,96px)}
.dmini .dret{width:clamp(48px,4.4vw,72px)}
@media (max-width:560px){.dmini .dw span,.dmini .dret{font-size:13vw}}

/* ==========================================================================
   Quiet volume: VC page and fund case studies. Paper, ink and blue.
   No tilts, no pink accents, misprint only in the page hero.
   ========================================================================== */
.quiet .tilt-l,.quiet .tilt-r,.quiet .c-art .card,.quiet .fund-plate,.quiet .fund-card .plate{transform:none!important}
.quiet .chap-label .n{color:var(--blue)}
.quiet .chapters a b{color:var(--blue)}
.quiet .chapters a[aria-current] b{color:var(--blue-300)}
.quiet .tag-pink{background:var(--blue);color:var(--paper)}
.quiet .tag-yellow{background:var(--paper-100)}
.quiet .card-pink,.quiet .card-yellow{box-shadow:inset 0 7px 0 var(--blue)}
.quiet .link:hover{color:var(--blue);text-decoration-color:var(--blue)}
.quiet .foot h2{color:var(--blue-300)}
.quiet ::selection{background:var(--blue);color:var(--paper)}

/* ==========================================================================
   Motion. Scroll-linked values arrive as --p (0 to 1) from yoso.js.
   .fx is set in <head> for desktop pointers with motion allowed; touch
   screens get the reveals and the scroll-filled text, not the pins.
   ========================================================================== */
.scroll-progress{position:fixed;top:0;left:0;right:0;z-index:99;height:3px;background:var(--pink);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.quiet .scroll-progress{background:var(--blue)}

/* headlines: each word rises out of its own slot, in full ink from the first frame
   (no grey half-states), and the pink block word lands last with a small kick, the way
   "luck." does in the hero. Total sequence stays under a second. */
.fx [data-split]{opacity:1!important;transform:none!important}
.fx [data-split]:not(.hero-h1):not([data-fill]) .w{display:inline-block;clip-path:inset(-.4em -.3em -.08em -.3em)}
.fx [data-split]:not(.hero-h1):not([data-fill]) .w>span{display:inline-block;transform:translate3d(0,110%,0);transition:transform .75s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi,0) * 45ms + var(--i,0) * 60ms)}
.fx [data-split]:not(.hero-h1):not([data-fill]) .w.a{clip-path:none}
.fx [data-split]:not(.hero-h1):not([data-fill]) .w.a>span{transform:scale(.55) rotate(-10deg);opacity:0;transition:transform .6s var(--pop),opacity .15s linear;transition-delay:calc(var(--wi,0) * 45ms + 200ms)}
.fx [data-split]:not(.hero-h1):not([data-fill]).in .w>span{transform:none;opacity:1}
.fx .hero-h1 .w{display:inline-block;opacity:0;transform:translate3d(0,.5em,0);transition:opacity .6s var(--ease),transform .95s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--wi,0) * 90ms + 150ms)}
.fx .hero-h1 .w.a{transform:translate3d(0,.5em,0) scale(.86)}
.fx .hero-h1.in .w{opacity:1;transform:none}

/* statements that fill in as you read them */
[data-fill] .w,.fx [data-fill][data-split] .w{display:inline;opacity:clamp(.13,calc(var(--fp,0) * (var(--n,10) + 2) - var(--wi,0)),1);transform:none;transition:opacity .18s linear}

/* images drift inside their frames */
.fx .media.px img,.fx .media.px video{transform:translate3d(0,calc((var(--p,.5) - .5) * -9%),0) scale(1.12);will-change:transform}

/* pins: a tall runway with a sticky stage inside */
.fx [data-pin]{position:relative}
.fx [data-pin] .pin-stick,[data-pin].pinned .pin-stick{position:sticky;top:96px;display:flex;flex-direction:column}

/* cursor tag */
.cur-tag{position:fixed;left:0;top:0;z-index:98;pointer-events:none;transform:translate3d(-300px,-300px,0)}
.cur-tag-in{position:absolute;left:-54px;top:-54px;width:108px;height:108px;border-radius:50%;background:var(--pink);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;gap:6px;font:700 16px var(--f-body);transform:scale(0) rotate(-20deg);transition:transform .4s var(--pop)}
.cur-tag-in i{font-style:normal}
.cur-tag.on .cur-tag-in{transform:scale(1) rotate(-8deg)}
.quiet .cur-tag-in{background:var(--blue);color:var(--paper)}
.fx .has-tag,.fx .has-tag *{cursor:none}


@media (prefers-reduced-motion:reduce){.scroll-progress,.cur-tag{display:none}}


.quiet .disp .pink{color:var(--blue)}

/* ==========================================================================
   Calm pass: fewer signals competing. Cards are plain paper (no coloured
   strips), clickable cards carry a light print shadow that deepens on hover,
   and covers sit straight. Colour is kept for the brand moments.
   ========================================================================== */
.card-pink,.card-yellow,.quiet .card-pink,.quiet .card-yellow{background:var(--paper-100);box-shadow:none}
a.card,.card.raised{box-shadow:var(--sh)}
a.card.lift:hover,.lift:hover{box-shadow:8px 8px 0 var(--ink)}
.tilt-l,.tilt-r{transform:none}
.draft-note{font-size:14px;padding:8px 14px;border-width:1.5px}
/* a bento tile with several pictures (data-rotate) cross-fades through them; without script the first one shows */
.wk-rot img{opacity:0;transition:opacity .9s var(--ease),transform .8s cubic-bezier(.16,1,.3,1)}
.wk-rot img.on{opacity:1}

/* ==========================================================================
   Case studies, editorial (pages written by tools/cases.py).
   Each case reads like a magazine feature: a dateline and an opening spread,
   a running head that follows the parts, side-heads that hold still while
   the text runs beside them, ruled lists, and charts drawn only from the
   numbers already in the copy. Heavy rules open a part; hairlines sit inside.
   ========================================================================== */
.cs-rail,.cs-main .k,.cs-lab,.cs-dek,.cs-mnum p,.cs-mname,.cs-mmeta{display:block;font:600 14px/1.4 var(--f-body);letter-spacing:0}
.cs-rail,.cs-main .k,.cs-mnum p{color:var(--pink-700)}
.cs-lab,.cs-dek,.cs-mname,.cs-mmeta{color:var(--ink-700)}

/* the opening spread */
.cs-hero{padding-block:clamp(14px,1.8vw,28px) clamp(48px,5.4vw,84px)}
.cs-dateline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
/* headline, standfirst and numbers on the left, the picture on the right; a wide picture takes a landscape
   frame and the numbers move under it, so the spread stays balanced */
.cs-open{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"h f" "s f" "n f";grid-template-rows:auto auto 1fr;column-gap:clamp(28px,4.4vw,80px);align-items:start;margin-top:clamp(28px,3.2vw,48px)}
.cs-open.wide{grid-template-areas:"h f" "s n";grid-template-rows:auto 1fr}
.cs-open-text{display:contents}
.cs-hero h1{grid-area:h;font-size:clamp(46px,5.3vw,88px);line-height:.9;text-wrap:balance}
.cs-stand{grid-area:s;margin-top:clamp(18px,2vw,28px);max-width:30em;text-wrap:pretty}
.cs-open .cs-stats{grid-area:n}
.cs-fig{grid-area:f;margin:0}
.cs-art{aspect-ratio:4/5;border:2px solid var(--ink)}
.cs-open.wide .cs-art{aspect-ratio:16/10}
.cs-plate{display:grid;place-items:center;aspect-ratio:4/5;border:2px solid var(--ink);border-radius:var(--r-card);background:var(--paper-100)}
.cs-plate img{width:auto;max-width:62%;max-height:46%;object-fit:contain}
.cs-hero .draft-note,.cs-mandate .draft-note,.cs-body .draft-note{display:block;width:fit-content;max-width:100%}

/* the numbers: a ruled table, figure on the left, its label and chart on the right */
.cs-stats{margin-top:clamp(28px,3vw,44px);border-top:2px solid var(--ink)}
.cs-stats>div{display:grid;grid-template-columns:minmax(min-content,.9fr) minmax(0,1.1fr);align-items:center;gap:6px 20px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.cs-stats .num{grid-row:1/3;font-size:clamp(40px,3.6vw,60px);line-height:.86}
.cs-stats .num.txt{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(24px,2.1vw,32px);line-height:.95}
.cs-stats .cs-vis{grid-column:2}
.cs-fn{padding-top:12px;max-width:36em;font-size:14px;line-height:1.5;color:var(--ink-700);text-wrap:pretty}

/* charts drawn from a stat's own value: pips for small counts, base + lift, before/after, an empty bar for zero */
.cs-vis{display:flex;align-items:center;gap:5px;max-width:240px}
.cs-vis.pips i{flex:none;width:14px;height:14px;border-radius:4px;background:var(--pink);border:2px solid var(--ink);transition:transform .4s var(--pop) calc(var(--k) * 70ms + .25s)}
.cs-vis.pips.more::after{content:"+";font:900 20px/1 var(--f-display);margin-left:3px}
.cs-vis.lift,.cs-vis.zero{width:100%;height:16px;gap:0;border:2px solid var(--ink);border-radius:5px;overflow:hidden}
.cs-vis.lift i{display:block;height:100%;width:var(--w);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1) .25s}
.cs-vis.lift .b{background:var(--ink)}
.cs-vis.lift .x{background:var(--pink);transition-delay:.85s}
.cs-vis.zero{background:repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in srgb,var(--ink) 16%,transparent) 6px 8px)}
.cs-vis.cmp,.cs-cmp{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%}
.cs-cmp{margin-top:14px}
.cs-vis.cmp i,.cs-cmp i{display:block;height:12px;width:var(--w);min-width:10px;border:2px solid var(--ink);border-radius:4px;background:var(--paper-100);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1) .25s}
.cs-vis.cmp i.now,.cs-cmp i.now{background:var(--pink);transition-delay:.6s}

/* the running head: the case's name and its parts, sticky under the nav, filling as you read */
.cs-story{position:relative}
.cs-mnav{position:sticky;top:92px;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block:2px solid var(--ink)}
.cs-mnav .wrap{display:flex;align-items:center;gap:18px}
.cs-mnav-t{flex:none;padding-right:18px;border-right:1px solid var(--ink);font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:20px;line-height:1.1}
.cs-mnav ol{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.cs-mnav ol::-webkit-scrollbar{display:none}
.cs-mnav a{display:flex;align-items:center;gap:8px;min-height:40px;white-space:nowrap;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-100);font:600 14px/1 var(--f-body);text-decoration:none;transition:background .25s,color .25s}
.cs-mnav a:has(span){padding-left:7px}
.cs-mnav a span{display:grid;place-items:center;min-width:28px;height:24px;padding:0 4px;border-radius:999px;background:var(--pink);font:900 15px/1 var(--f-display);color:var(--ink)}
.cs-mnav a:hover{background:var(--pink)}
.cs-mnav a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.cs-mnav-bar{position:absolute;left:0;bottom:-2px;width:100%;height:4px;background:var(--pink);transform-origin:left;transform:scaleX(var(--mp,0))}

/* a part: the side-head (label, heading, an optional picture) with the text beside it */
.cs-body{padding-bottom:clamp(40px,4.4vw,72px)}
.cs-block{padding-block:clamp(44px,5vw,84px);border-top:2px solid var(--ink);scroll-margin-top:150px}
.cs-body .cs-block:first-child{border-top:0}
.cs-bhead h2{margin-top:12px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(32px,3vw,50px);line-height:.92;max-width:18ch;text-wrap:balance}
.cs-bhead .cs-slot{margin-top:24px;aspect-ratio:4/3}
.cs-main{min-width:0;margin-top:clamp(20px,2.4vw,32px)}
.cs-main>*+*{margin-top:26px}
.cs-main .body-l{max-width:36em;color:var(--ink);text-wrap:pretty}
.cs-main .body-l+.body-l{margin-top:16px}

/* editorial marks: the story opens on a larger first paragraph, the thesis line is pulled out, an end mark closes it */
.cs-body .cs-block:first-child .cs-main>.body-l:first-child{font-size:clamp(19px,1.45vw,22px);line-height:1.5;letter-spacing:-.014em;max-width:32em}
.cs-pull{max-width:23em;font:600 clamp(23px,2vw,31px)/1.25 var(--f-body);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.cs-pull::before{content:"";display:block;width:56px;height:4px;margin-bottom:16px;background:var(--pink)}
.cs-going::after{content:"";display:inline-block;width:.55em;height:.55em;margin-left:.4em;background:var(--pink);border:2px solid var(--ink);vertical-align:-.02em}

/* ruled lists: points, pillars and result cards, no boxes */
.cs-cells,.cs-res{display:grid;grid-template-columns:repeat(var(--c,2),minmax(0,1fr));gap:0 clamp(24px,3vw,44px)}
.cs-cells>li,.cs-res>li{min-width:0;padding:16px 0 22px;border-top:1px solid var(--ink)}
.cs-cells .t{margin-top:6px;font-weight:600;font-size:18px;line-height:1.3}
.cs-cells p:not(.k):not(.t){margin-top:6px;font-size:16px;line-height:1.55;color:var(--ink-700)}
.cs-cells li.big .t .num{display:block;margin:4px 0 8px;font-family:var(--f-display);font-weight:900;font-size:clamp(46px,4.6vw,76px);line-height:.85;color:var(--ink)}
.cs-res .ft{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font:600 15px var(--f-body);letter-spacing:0;color:var(--ink-700)}
.cs-res .d{margin-top:12px;font-family:var(--f-display);font-weight:900;font-size:clamp(40px,3.6vw,58px);line-height:.85;color:var(--ink)}

/* the flow: one connected line of steps, the last node in pink */
.cs-steps{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:0 clamp(18px,2vw,28px)}
.cs-steps>li{position:relative;min-width:0;padding-top:40px}
.cs-steps>li::before{content:"";position:absolute;z-index:1;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:transform .4s var(--pop) calc(var(--k) * 180ms + .2s)}
.cs-steps>li:last-child::before{background:var(--pink)}
.cs-steps>li:not(:last-child)::after{content:"";position:absolute;top:9px;left:20px;right:calc(-1 * clamp(18px,2vw,28px));height:2px;background:var(--ink);transform-origin:left;transition:transform .5s ease calc(var(--k) * 180ms + .35s)}
.cs-steps .t{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(22px,1.8vw,27px);line-height:.95}
.cs-steps p:not(.t){margin-top:8px;font-size:16px;line-height:1.5;color:var(--ink-700)}
.cs-steps p.k{margin:0 0 6px;font-size:14px;color:var(--pink-700)}

/* progress: a timeline that draws itself (across on desktop, down on smaller screens) */
.cs-rows{position:relative}
.cs-rows li{position:relative}
.cs-rows li::before{content:"";position:absolute;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.cs-rows::before,.cs-rows::after{content:"";position:absolute;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.cs-rows::after{background:var(--pink);transition:transform 1s cubic-bezier(.16,1,.3,1) .2s}
.cs-rows li p:last-child{margin-top:8px;font-size:16.5px;line-height:1.55}
.cs-rows .t{margin-top:6px;font-weight:600;font-size:18px;line-height:1.3}

/* result extras: press line, funnel, what didn't move, where it's going */
.cs-press{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cs-press .k{margin-right:6px}
.cs-press span{padding:10px 14px;border:2px solid var(--ink);font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);line-height:1}
.cs-funnel{display:grid;gap:8px}
.cs-funnel li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;width:calc(100% - var(--k) * 17%);padding:16px 22px;border:2px solid var(--ink);border-radius:var(--r-card);background:var(--pink);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1) calc(var(--k) * 160ms + .2s)}
.cs-funnel li:nth-child(2){background:var(--paper-100)}
.cs-funnel li:nth-child(3){background:var(--ink);color:var(--paper)}
.cs-funnel b{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(32px,3.4vw,54px);line-height:.9}
.cs-funnel span{font-weight:600}
.cs-flat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:center;padding-top:16px;border-top:1px solid var(--ink)}
.cs-flatline{grid-row:span 2;width:120px;height:30px;fill:var(--paper);stroke:var(--ink);stroke-width:2}
.cs-flat p:last-child{margin-top:4px;color:var(--ink-700)}
.cs-going,.cs-aside{max-width:36em;padding-top:16px;border-top:2px solid var(--ink);font-size:18px;line-height:1.55}
.cs-going b,.cs-aside b{display:block;margin-bottom:6px;font:600 14px var(--f-body);letter-spacing:0;color:var(--pink-700)}
/* Flipkart case: a short line under a stat's label, the mandate head without a name line, the proof wall's episodes */
.cs-count>div{padding:9px 0}
.cs-count .num,.cs-count .num.txt{font-size:clamp(26px,2.2vw,34px)}
.cs-stats .cs-sub{grid-column:2;font-size:15px;line-height:1.45;color:var(--ink-700);text-wrap:pretty}
.cs-mtext>h2:first-child{margin-top:18px}
.cs-story>.cs-tail{border-top:2px solid var(--ink)}
.cs-eps .t{margin-top:8px;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(24px,2vw,32px);line-height:.95;text-wrap:balance}
.cs-cells.cs-eps p.cs-ep-n{margin-top:16px;font-weight:600;font-size:17px;line-height:1.3;color:var(--ink)}
.cs-eps .cs-ep-n .num{display:block;margin-bottom:6px;font-size:clamp(40px,3.6vw,58px);line-height:.85}

/* optional pictures: a frame shows only once its file is in site/img/work/case/ */
.cs-slot{position:relative;margin:0;overflow:hidden;border:2px solid var(--ink);border-radius:var(--r-card);background:var(--paper-100)}
.cs-slot:not(.has-img){display:none!important}
.cs-slot img,.cs-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* mandate cases (Bombay Shaving Company, Go Zero): the bridge, then one chapter per mandate with its head held on the left.
   Go Zero's account-level parts sit in a .cs-body before the first mandate. */
.cs-story>.cs-body{scroll-margin-top:150px}
.cs-story>.cs-body:not(:last-child){padding-bottom:0}
.cs-work{padding-block:clamp(40px,4.4vw,72px) clamp(20px,2.4vw,32px);border-top:2px solid var(--ink)}
.cs-bridge{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px clamp(28px,4vw,72px);align-items:end}
.cs-bridge h2{font-size:clamp(40px,4.6vw,76px);line-height:.88;text-wrap:balance}
.cs-bridge .lead{margin:0;max-width:30em}
.cs-mandate{padding-block:clamp(48px,5vw,84px);border-top:2px solid var(--ink);scroll-margin-top:150px}
.cs-story>.cs-mandate:first-of-type{border-top:0}
.cs-mnum{display:flex;align-items:baseline;gap:14px}
.cs-mnum span{font-family:var(--f-display);font-weight:900;font-size:clamp(56px,5vw,88px);line-height:.76;color:var(--pink)}
.cs-mname{margin:14px 0 8px}
.cs-mhead h2{font-size:clamp(32px,2.9vw,50px);line-height:.9;text-wrap:balance}
.cs-mmeta{margin-top:12px}
.cs-mhead .cs-stats{margin-top:20px}
.cs-mhead .cs-stats .num{font-size:clamp(34px,2.8vw,48px)}
.cs-mhead .cs-stats .num.txt{font-size:clamp(20px,1.6vw,26px)}
.cs-mhead .cs-slot{width:100%;margin-top:20px;aspect-ratio:16/10;max-height:28vh}
.cs-plead{max-width:34em;margin-bottom:clamp(8px,1vw,16px)}
.cs-mandate .cs-block{padding-block:clamp(26px,3vw,44px);border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.cs-mandate .cs-block:first-child{padding-top:0;border-top:0}
.cs-mandate .cs-plead+.cs-block{padding-top:clamp(26px,3vw,44px)}
.cs-mandate .cs-bhead h2{font-size:clamp(28px,2.5vw,42px)}
.cs-mandate .cs-main{margin-top:18px}

/* the Next bar */
.cs-next{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:clamp(22px,2.6vw,34px) max(var(--gut),calc((100% - var(--wrap)) / 2));background:var(--pink);border-block:2px solid var(--ink);text-decoration:none;transition:background .3s,color .3s}
.cs-next span{font:600 14px var(--f-body);letter-spacing:0}
.cs-next b{justify-self:end;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,52px);line-height:.9}
.cs-next i{font-style:normal;font-size:clamp(26px,2.6vw,40px);transition:transform .35s var(--pop)}
.cs-next:hover{background:var(--ink);color:var(--paper)}
.cs-next:hover i{transform:translateX(8px)}

/* fund cases run quiet: blue instead of pink */
.quiet .cs-lab,.quiet .cs-main .k,.quiet .cs-rail,.quiet .cs-going b{color:var(--blue-700)}
.quiet .cs-next{background:var(--blue);color:var(--paper)}

@media (min-width:1021px){
  .cs-body .cs-block{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(32px,4.4vw,80px);align-items:start}
  .cs-body .cs-bhead{position:sticky;top:178px}
  .cs-body .cs-main{margin-top:0}
  .cs-mandate>.wrap{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
  .cs-mhead{position:sticky;top:178px}
  .cs-rows{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:clamp(18px,2vw,30px);padding-top:34px}
  .cs-rows::before,.cs-rows::after{left:8px;right:0;top:7px;height:3px}
  .cs-rows::after{transform-origin:left}
  .cs-rows li::before{left:0;top:-34px}
}
@media (max-width:1199px){.cs-mnav-t{display:none}}
/* a long sequence (a kicker, a title and a real paragraph per item) runs across only when its column has room;
   in a narrower column it runs down, the way it does on phones */
.cs-main{container-type:inline-size}
@container (max-width:880px){
  .cs-steps.long{grid-template-columns:1fr}
  .cs-steps.long>li{padding:14px 0 16px 34px;border-top:1px solid var(--ink)}
  .cs-steps.long>li::before{top:16px}
  .cs-steps.long>li:not(:last-child)::after{display:none}
  .cs-rows.long{display:block;padding:0 0 0 34px}
  .cs-rows.long::before,.cs-rows.long::after{left:7px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .cs-rows.long::after{transform-origin:top}
  .cs-rows.long li{padding:14px 0 16px}
  .cs-rows.long li::before{left:-33px;top:19px}
}
@media (max-width:1020px){
  .cs-open,.cs-open.wide{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "s" "f" "n";grid-template-rows:auto}
  .cs-fig{margin-top:clamp(24px,3vw,36px)}
  .cs-art,.cs-plate{aspect-ratio:4/3}
  .cs-mhead{padding-bottom:clamp(24px,3vw,36px)}
  .cs-mhead .cs-slot{max-width:560px;max-height:none}
  .cs-steps{grid-template-columns:1fr}
  .cs-steps>li{padding:14px 0 16px 34px;border-top:1px solid var(--ink)}
  .cs-steps>li::before{top:16px}
  .cs-steps>li:not(:last-child)::after{display:none}
  .cs-rows{padding-left:34px}
  .cs-rows::before,.cs-rows::after{left:7px;top:0;bottom:0;width:3px}
  .cs-rows::after{transform-origin:top}
  .cs-rows li{padding:14px 0 16px}
  .cs-rows li::before{left:-33px;top:19px}
}
@media (max-width:860px){.cs-bridge{grid-template-columns:1fr}}
@media (max-width:760px){
  .cs-mnav{top:88px}
  .cs-flat{grid-template-columns:1fr}
  .cs-flatline{grid-row:auto;margin-bottom:10px}
  .cs-funnel li{width:calc(100% - var(--k) * 10%)}
}
@media (max-width:640px){
  .cs-cells,.cs-res{grid-template-columns:1fr}
  .cs-next{grid-template-columns:1fr auto;gap:8px 16px}
  .cs-next span{grid-column:1/-1}
  .cs-next b{justify-self:start}
}
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]:not(.in) .cs-vis.pips i{transform:scale(0)}
  .js [data-reveal]:not(.in) .cs-vis.lift i,.js [data-reveal]:not(.in) .cs-vis.cmp i,.js [data-reveal]:not(.in) .cs-cmp i{transform:scaleX(0)}
  .js .cs-steps[data-reveal]:not(.in)>li::before{transform:scale(0)}
  .js .cs-steps[data-reveal]:not(.in)>li::after{transform:scaleX(0)}
  .js .cs-rows[data-reveal]:not(.in)::after{transform:scale(0)}
  .js .cs-funnel[data-reveal]:not(.in) li{transform:scaleX(0)}
}