/* ============ RESET & TOKENS ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0c;
  --bg-soft:#101014;
  --ink:#f4f3ee;
  --ink-soft:#d7d6cf;
  --ink-dim:#8a8a90;
  --ink-faint:#46464c;
  --accent:#c6f24e;
  --accent-ink:#c6f24e;
  --line:rgba(244,243,238,.10);
  --pad:clamp(1.25rem,4vw,4rem);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  color-scheme:dark;
}
/* ---- light theme ---- */
:root[data-theme="light"]{
  --bg:#f4f2ea;
  --bg-soft:#eae7dc;
  --ink:#17171b;
  --ink-soft:#3a3a40;
  --ink-dim:#62626a;
  --ink-faint:#b4b1a6;
  --accent:#c6f24e;        /* brand lime stays for fills/decoration */
  --accent-ink:#4c7000;    /* darkened lime for legible accent text */
  --line:rgba(20,20,26,.14);
  color-scheme:light;
}
html{transition:background .4s ease,color .4s ease}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans)}
body{overflow-x:hidden;font-weight:400;line-height:1.4}
a{color:inherit;text-decoration:none}
li{list-style:none}
/* ========================================================================
   TYPE & ACCENT SYSTEM (keep to this)
   - Serif (--serif): DISPLAY only — titles, headings, statement, big numbers,
     pull-quotes, the "challenge" problem-line. The `.italic` class is the
     serif-italic display device.
   - Sans (--sans): all running text + UI — body, beats, verdict, lists, etc.
   - Emphasis is TONAL, never coloured: body <em> = ink + 500 roman; <b> = ink 600.
     Inside a serif display line, emphasis = italic in the same ink.
   - Accent (--ca / --ca-ink) is for STRUCTURE only: eyebrows, labels, table
     headers, list bullets, chapter markers, the big numbers, links/hover.
     Never colour a word mid-sentence with it.
   ======================================================================== */
.italic{font-family:var(--serif);font-style:italic;font-weight:400}
em{font-style:normal;font-weight:500;color:var(--ink)}
::selection{background:var(--accent);color:#0a0a0c}
img,canvas{display:block}
.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,7vw,6rem);line-height:.95;letter-spacing:-.01em}
.section-index{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

/* ============ WEBGL + GRAIN ============ */
#webgl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}

/* ============ CURSOR ============ */
.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--accent);
  z-index:9999;pointer-events:none;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),background .3s}
.cursor.is-hover{width:64px;height:64px;background:var(--ink)}
.cursor.is-label{width:84px;height:84px;background:var(--accent)}
.cursor__label{font-size:.7rem;color:#0a0a0c;font-weight:500;opacity:0;letter-spacing:.04em;text-transform:uppercase;
  transform:scale(.5);transition:opacity .25s,transform .25s;mix-blend-mode:normal}
.cursor.is-label .cursor__label{opacity:1;transform:scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============ LOADER ============ */
.loader{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;flex-direction:column;
  justify-content:flex-end;padding:var(--pad)}
.loader__inner{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem}
.loader__count{font-family:var(--serif);font-size:clamp(4rem,16vw,12rem);line-height:.8;letter-spacing:-.02em}
.loader__count i{font-size:.3em;font-family:var(--sans);font-style:normal;vertical-align:top;color:var(--ink-dim)}
.loader__name{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);overflow:hidden}
.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:block}
.loader__bar{height:1px;width:100%;background:var(--line);position:relative;overflow:hidden}
.loader__bar-fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.loader.is-done{pointer-events:none}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem var(--pad);mix-blend-mode:difference;border-bottom:1px solid transparent;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease,padding .3s ease}
/* once scrolled off the hero, drop the blend and give the bar a readable backdrop */
.nav.is-scrolled{mix-blend-mode:normal;padding-top:.85rem;padding-bottom:.85rem;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line)}
.nav__brand{font-weight:600;letter-spacing:.06em;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.nav__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.4rem);font-size:.85rem}
.nav__links a{color:var(--ink-dim);transition:color .3s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{color:var(--ink)!important;border:1px solid var(--line);border-radius:100px;padding:.45rem 1rem}
/* difference blend assumes a dark backdrop, switch to normal colours in light mode */
:root[data-theme="light"] .nav{mix-blend-mode:normal}
.nav__theme{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;color:inherit;
  cursor:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:border-color .3s,background .3s}
.nav__theme svg{width:16px;height:16px;display:block}
.nav__theme .ico-sun{display:none}
:root[data-theme="light"] .nav__theme .ico-sun{display:block}
:root[data-theme="light"] .nav__theme .ico-moon{display:none}
@media(max-width:680px){.nav__links a:not(.nav__cta){display:none}}

/* ============ HERO ============ */
.hero{min-height:100svh;padding:6rem var(--pad) var(--pad);display:flex;flex-direction:column;
  justify-content:space-between;position:relative}
.hero__top{display:flex;justify-content:space-between;width:100%;margin-top:auto}
.tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  border-top:1px solid var(--line);padding-top:.6rem;flex:1;max-width:200px}
.tag--right{text-align:right}
.hero__title{font-family:var(--serif);font-weight:400;line-height:.8;letter-spacing:-.03em;
  font-size:clamp(5.5rem,28vw,24rem);margin:.1em 0;display:flex}
.hero__title .word{display:inline-block;will-change:transform}
.hero__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hero__lead{max-width:34ch;font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.45;color:var(--ink-soft)}
/* hero-lead emphasis follows the body rule (ink + 500), no inline accent */
.hero__meta{font-size:.78rem;color:var(--ink-dim);letter-spacing:.04em;text-align:right}
.scroll-cue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:.5rem;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.scroll-cue__line{width:1px;height:42px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue__line i{position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--accent);
  animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(300%)}}
@media(max-width:680px){.scroll-cue{display:none}.hero__meta{text-align:left}}

/* ============ STATEMENT ============ */
.statement{padding:clamp(7rem,16vh,14rem) var(--pad);max-width:1500px}
.statement__eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2.5rem}
.statement__text{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,5.2vw,4.6rem);line-height:1.12;
  letter-spacing:-.01em;max-width:18ch}
.statement__text .sw{display:inline-block;opacity:.12;transition:opacity .1s;will-change:opacity}
.statement__foot{margin-top:3.5rem;display:flex;justify-content:flex-end}
.statement__foot p{max-width:38ch;color:var(--ink-dim);font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.5}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(2rem,4vw,3.5rem) var(--pad);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem}
.stat:last-child{border-right:none}
.stat__num{font-family:var(--serif);font-size:clamp(2.6rem,6vw,5rem);line-height:.9;letter-spacing:-.02em;color:var(--accent-ink)}
.stat__label{font-size:.78rem;color:var(--ink-dim);letter-spacing:.02em;max-width:16ch}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* ============ WORK ============ */
.work{padding:clamp(6rem,12vh,11rem) var(--pad) 4rem}
.work__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;gap:1rem}
.projects{border-top:1px solid var(--line)}
.project{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.project__link{display:grid;grid-template-columns:56px minmax(0,2.1fr) minmax(0,2.7fr) auto auto;gap:1.5rem;align-items:center;
  padding:clamp(1.5rem,3.5vw,2.6rem) 0;position:relative;z-index:2;transition:padding .5s cubic-bezier(.16,1,.3,1),color .4s}
.project::after{content:"";position:absolute;inset:0;background:var(--pcolor,var(--accent));transform:translateY(101%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);z-index:1}
.project:hover::after{transform:translateY(0)}
.project:hover .project__link{padding-left:1.5rem;padding-right:1.5rem;color:#0a0a0c}
.project:hover .project__desc,.project:hover .project__index{color:rgba(10,10,12,.6)}
.project:hover .project__tags i{border-color:rgba(10,10,12,.3);color:#0a0a0c}
.project:hover .project__result{background:#0a0a0c;color:var(--pcolor)}
.project__index{font-size:.8rem;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.project__title{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,3rem);line-height:1;letter-spacing:-.01em}
.project__desc{font-size:.92rem;color:var(--ink-dim);line-height:1.45;max-width:42ch}
.project__tags{display:flex;gap:.4rem;flex-wrap:wrap}
.project__tags i{font-style:normal;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:.3rem .65rem;color:var(--ink-dim)}
.project__result{justify-self:end;white-space:nowrap;font-size:.78rem;font-weight:500;background:var(--bg-soft);
  border-radius:100px;padding:.5rem .9rem;color:var(--accent-ink)}
@media(max-width:980px){
  .project__link{grid-template-columns:40px 1fr;gap:.6rem 1rem}
  .project__desc{grid-column:2;max-width:none}
  .project__tags{grid-column:2}
  .project__result{grid-column:2;justify-self:start;margin-top:.3rem}
  .project__index{align-self:start;padding-top:.3rem}
}

/* ============ MARQUEE ============ */
.marquee{padding:clamp(3rem,7vh,6rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.marquee__track{display:flex;gap:2.5rem;align-items:center;white-space:nowrap;will-change:transform;width:max-content}
.marquee__track span{font-family:var(--serif);font-size:clamp(2.4rem,7vw,5.5rem);line-height:1}
.marquee__track .dot{color:var(--accent-ink);font-family:var(--sans);font-size:1.6rem}

/* ============ SERVICES ============ */
.services{padding:clamp(6rem,12vh,11rem) var(--pad)}
.services__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3rem;flex-wrap:wrap;gap:1rem}
.services__list{border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:80px 1fr 1.4fr;gap:1.5rem;align-items:start;
  padding:clamp(1.6rem,4vw,3rem) 0;border-bottom:1px solid var(--line);transition:background .4s}
.service__no{font-size:.8rem;color:var(--accent-ink);font-variant-numeric:tabular-nums;padding-top:.4rem}
.service__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.01em;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.service__desc{color:var(--ink-dim);font-size:clamp(.92rem,1.2vw,1.05rem);line-height:1.5;max-width:40ch}
.service:hover .service__name{transform:translateX(1.2rem);color:var(--accent-ink)}
@media(max-width:780px){.service{grid-template-columns:50px 1fr;gap:.6rem 1rem}.service__desc{grid-column:2}
  .service:hover .service__name{transform:translateX(.4rem)}}

/* ============ TOOLS ============ */
.tools{padding:clamp(5rem,10vh,9rem) var(--pad);text-align:center}
.tools__label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:2.5rem}
.tools__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:900px;margin:0 auto}
.tools__grid span{font-family:var(--serif);font-size:clamp(1.4rem,3.4vw,2.6rem);padding:.3rem 1.2rem;border:1px solid var(--line);
  border-radius:100px;transition:background .35s,color .35s,border-color .35s}
.tools__grid span:hover{background:var(--accent);color:#0a0a0c;border-color:var(--accent-ink)}

/* ============ CONTACT ============ */
.contact{padding:clamp(7rem,16vh,15rem) var(--pad) clamp(3rem,6vh,5rem);text-align:center}
.contact__eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2.5rem}
.contact__big{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,11vw,9rem);line-height:.95;
  letter-spacing:-.02em;display:inline-block}
.contact__big .reveal-line>span{transition:color .4s}
/* let descenders (g, y) show without breaking the slide-in reveal */
.contact__big .reveal-line{overflow:clip;overflow-clip-margin:0.22em}
.contact__big:hover .italic{color:var(--accent-ink)}
.contact__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(3rem,8vh,6rem);border-top:1px solid var(--line);padding-top:1.6rem}
.contact__mail{font-size:clamp(.95rem,2vw,1.2rem);transition:color .3s}
.contact__mail:hover{color:var(--accent-ink)}
.contact__socials{display:flex;gap:1.5rem;font-size:.95rem;color:var(--ink-dim)}
.contact__socials a:hover{color:var(--ink)}

/* ============ FOOTER ============ */
.footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.6rem var(--pad);border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-dim)}
.footer__mid{flex:1;text-align:center;min-width:200px}
.footer__top{background:none;border:none;color:var(--ink-dim);font:inherit;cursor:none}
.footer__top:hover{color:var(--accent-ink)}
@media(max-width:680px){.footer{justify-content:center;text-align:center}.footer__mid{order:3}}

/* ============ CASE STUDY READER ============ */
/* The case-study reader follows the page theme. --ca is the bright per-case accent
   (fills/glows); --ca-ink is a theme-aware accent for text, darkened in light. */
.case{position:fixed;inset:0;z-index:500;background:var(--bg);transform:translateY(100%);
  visibility:hidden;display:flex;flex-direction:column;color:var(--ink);
  --ca:var(--accent);--ca-ink:var(--ca);
  transition:transform .8s cubic-bezier(.16,1,.3,1),visibility 0s linear .8s}
:root[data-theme="light"] .case{--ca-ink:color-mix(in srgb,var(--ca),#14140a 50%)}
.case.is-open{visibility:visible;transform:translateY(0);
  transition:transform .8s cubic-bezier(.16,1,.3,1),visibility 0s}
.case__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .9s ease;display:none}
.case.has-fx .case__fx{display:block;opacity:1}
/* the path crosses the narrow column on phones, keep it a subtle backdrop there */
@media(max-width:768px){.case.has-fx .case__fx{opacity:.42}}
/* promote these to their own compositor layers so they reliably paint
   ABOVE the WebGL canvas (a composited GL layer can otherwise ignore z-index) */
.case__bar,.case__progress{position:relative;z-index:3;transform:translateZ(0)}
.case__scroll{position:relative;z-index:1;transform:translateZ(0)}
.case__bar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem var(--pad);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.case__bar-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ca-ink)}
.case__chapter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.78rem;
  letter-spacing:.04em;color:var(--ink-dim);display:flex;align-items:center;gap:.5rem;white-space:nowrap;
  transition:opacity .3s}
.case__chapter b{color:var(--ink);font-weight:500}
.case__chapter i{width:6px;height:6px;border-radius:50%;background:var(--ca-ink);display:inline-block;font-style:normal}
@media(max-width:680px){.case__chapter{display:none}}
.case__close{background:none;border:1px solid var(--line);border-radius:100px;color:var(--ink);
  font:inherit;font-size:.82rem;padding:.45rem 1rem;cursor:none;display:flex;align-items:center;gap:.5rem;
  transition:background .3s,color .3s,border-color .3s}
.case__close:hover{background:var(--ca);color:#0a0a0c;border-color:var(--ca)}
.case__close-x{font-size:.9rem}
.case__progress{position:relative;z-index:3;height:2px;background:var(--line)}
.case__progress-fill{height:100%;width:0;background:var(--ca-ink);transition:width .1s linear}
/* slim side rail: where am I in the story, and jump between acts */
.case__rail{position:fixed;right:max(1.1rem,1.8vw);top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:1rem;align-items:flex-end}
@media(max-width:1040px){.case__rail{display:none}}
.case__rail-item{display:flex;align-items:center;gap:.65rem;flex-direction:row;
  background:none;border:none;cursor:none;font:inherit;color:var(--ink-dim);padding:.1rem 0}
.case__rail-lbl{font-size:.7rem;letter-spacing:.03em;opacity:0;transform:translateX(8px);
  transition:opacity .3s,transform .3s,color .3s;white-space:nowrap}
.case__rail-dot{width:22px;height:2px;border-radius:2px;background:var(--ink-faint);
  transition:background .3s,width .3s}
.case__rail-item:hover .case__rail-lbl,.case__rail-item.is-active .case__rail-lbl{opacity:1;transform:none;color:var(--ink)}
.case__rail-item:hover .case__rail-dot{background:var(--ca-ink)}
.case__rail-item.is-active .case__rail-dot{background:var(--ca-ink);width:36px}
.case__scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.case__inner{max-width:920px;margin:0 auto;padding:clamp(2.5rem,7vw,6rem) var(--pad) 8rem}

.case__head{border-bottom:1px solid var(--line);padding-bottom:2.5rem;margin-bottom:3rem}
.case__num{font-size:.8rem;color:var(--ca-ink);letter-spacing:.04em}
.case__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,8vw,6rem);line-height:.95;
  letter-spacing:-.02em;margin:.4rem 0 .6rem}
.case__tagline{font-size:clamp(1.05rem,2.2vw,1.5rem);color:var(--ink-soft);max-width:34ch;line-height:1.35}
.case__meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem}
.case__meta div{display:flex;flex-direction:column;gap:.4rem}
.case__meta span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.case__meta b{font-weight:500;font-size:.92rem;color:var(--ink)}
@media(max-width:640px){.case__meta{grid-template-columns:repeat(2,1fr);gap:1.4rem}}

.cs-section{margin-bottom:3.2rem;opacity:0;transform:translateY(20px);position:relative}
.cs-section.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}

.cs-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ca-ink);margin-bottom:1rem}
.cs-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.05;
  letter-spacing:-.01em;margin-bottom:1.1rem}
.cs-p{font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6;color:var(--ink-soft);max-width:62ch;margin-bottom:1rem}
.cs-p em,.cs-p .em{color:var(--ink);font-style:normal}
.cs-p code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:color-mix(in srgb,var(--ca) 12%,transparent);color:var(--ink);
  padding:.1em .45em;border-radius:6px;border:1px solid var(--line)}
.cs-p a,.cs-cap a{color:var(--ink);font-weight:500;text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--ca) 55%,transparent);text-underline-offset:3px;
  text-decoration-thickness:1.5px;transition:text-decoration-color .25s}
.cs-p a:hover,.cs-cap a:hover{text-decoration-color:var(--ca)}
.cs-list{display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0;max-width:62ch}
.cs-list li{position:relative;padding-left:1.6rem;font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.cs-list li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--ca-ink)}
.cs-list li b{color:var(--ink);font-weight:600}

/* problem/solution beat: each unit of work as Challenge -> Move -> Outcome.
   Neutral "challenge" reads as the problem; accent "move/outcome" as the solve. */
.cs-beat{display:flex;flex-direction:column;gap:1.25rem;max-width:64ch;margin:.3rem 0 1.6rem}
.cs-beat__block{position:relative;padding-left:1.25rem;border-left:2px solid var(--line)}
.cs-beat__block--move{border-left-color:color-mix(in srgb,var(--ca) 55%,var(--line))}
.cs-beat__block--outcome{border-left-color:var(--ca-ink)}
.cs-beat__tag{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.55rem}
.cs-beat__block--move .cs-beat__tag,.cs-beat__block--outcome .cs-beat__tag{color:var(--ca-ink)}
.cs-beat__challenge{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.7vw,1.95rem);
  line-height:1.18;letter-spacing:-.01em;color:var(--ink)}
/* serif challenge: one emphasis device — italic in the same ink (no accent, no faux-bold) */
.cs-beat__challenge em,.cs-beat__challenge b{font-family:inherit;font-style:italic;font-weight:400;color:var(--ink)}
.cs-beat__move{font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6;color:var(--ink-soft);margin:0 0 .55rem}
.cs-beat__move:last-child{margin:0}
.cs-beat__move b{color:var(--ink);font-weight:600}
.cs-beat__outcome{font-size:1.05rem;line-height:1.5;color:var(--ink);margin:0}
.cs-beat__outcome b{color:var(--ink);font-weight:600}
/* a real participant voice inside a beat, the "show" behind the "tell" */
.cs-beat__quote{margin:0;padding-left:1.25rem;border-left:2px solid var(--ca-ink);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.4;color:var(--ink)}
.cs-beat__quote cite{display:block;margin-top:.55rem;font-style:normal;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}

.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:2rem 0}
.cs-metric{background:var(--bg);padding:1.8rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.cs-metric b{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:.9;color:var(--ca-ink)}
.cs-metric span{font-size:.8rem;color:var(--ink-dim);line-height:1.35}
@media(max-width:640px){.cs-metrics{grid-template-columns:1fr}}

/* synthesis cards: right / wrong / surprise, honest reflection on a hypothesis */
.cs-cards{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:1.8rem 0}
.cs-card{background:var(--bg);padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.9rem}
.cs-card__label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
  display:flex;align-items:center;gap:.5rem}
.cs-card__label::before{font-size:.85rem;line-height:1}
.cs-card--yes .cs-card__label{color:var(--ca-ink)}
.cs-card--yes .cs-card__label::before{content:"\2713"}
.cs-card--no .cs-card__label::before{content:"\21BA"}
.cs-card--aha .cs-card__label{color:var(--ca-ink)}
.cs-card--aha .cs-card__label::before{content:"\2726"}
.cs-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.cs-card li{font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.cs-card li b{color:var(--ink);font-weight:600}
@media(max-width:760px){.cs-cards{grid-template-columns:1fr}}

/* wide tables (e.g. the 5-col funnel) scroll horizontally on narrow screens
   instead of clipping their last column */
.cs-table-wrap{margin:1.5rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cs-table{width:100%;border-collapse:collapse;font-size:.92rem}
.cs-table-wrap .cs-table{margin:0}

/* donut chart: proportional slices in the case accent + labelled legend */
.cs-donut{margin:1.8rem 0}
.cs-donut__body{display:flex;gap:2.2rem;align-items:center;flex-wrap:wrap}
.cs-donut__chart{flex:0 0 auto;width:210px;max-width:100%}
.cs-donut__chart svg{width:100%;height:auto;display:block;overflow:visible}
.cs-donut__legend{list-style:none;margin:0;padding:0;flex:1 1 280px;min-width:240px;display:flex;flex-direction:column;gap:.6rem}
.cs-donut__row{display:flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--ink-soft);line-height:1.35}
.cs-donut__sw{flex:0 0 auto;width:12px;height:12px;border-radius:3px}
.cs-donut__lbl{flex:1 1 auto}
.cs-donut__val{flex:0 0 auto;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.cs-donut__cap{font-size:.78rem;color:var(--ink-dim);margin-top:1.1rem;line-height:1.4}
@media(max-width:560px){.cs-donut__chart{width:170px;margin-inline:auto}}
.cs-table th{text-align:left;font-weight:500;color:var(--ca-ink);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.cs-table td{padding:.9rem 1rem;border-bottom:1px solid var(--line);color:var(--ink-soft);line-height:1.45;vertical-align:top}
.cs-table tr td:first-child{color:var(--ink)}
.cs-quote{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;color:var(--ink);
  border-left:2px solid var(--ca);padding-left:1.4rem;margin:2rem 0;max-width:30ch}

/* per-act payoff card, closes a goal on its own result */
.cs-result{display:flex;flex-direction:column;gap:.5rem;margin:1.5rem 0}
.cs-result__n{font-family:var(--serif);font-weight:400;font-size:clamp(4.5rem,15vw,10rem);line-height:.82;
  letter-spacing:-.03em;color:var(--ca-ink)}
.cs-result__label{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--ink)}
.cs-result__note{font-size:clamp(.95rem,1.3vw,1.08rem);color:var(--ink-dim);line-height:1.55;max-width:48ch;margin-top:.6rem}
/* verdict / decision callout, resolves a thread */
.cs-verdict{border:1px solid var(--line);border-left:2px solid var(--ca);border-radius:14px;
  padding:clamp(1.2rem,2.4vw,1.8rem);margin:1.6rem 0;max-width:56ch;
  background:linear-gradient(120deg,color-mix(in srgb,var(--ca) 7%,transparent),transparent 70%)}
.cs-verdict__label{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ca-ink);margin-bottom:.8rem}
.cs-verdict__text{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.45;color:var(--ink)}
.cs-verdict__text em{font-family:var(--sans);font-style:normal;font-weight:500;color:var(--ink)}

/* narrative chapter dividers, the storytelling beats along the path */
.cs-chapter{margin:5.5rem 0 2.5rem;padding-top:2.5rem;border-top:1px solid var(--line);position:relative}
.cs-chapter:first-child{border-top:none;padding-top:0;margin-top:1rem}
.cs-chapter__no{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ca-ink);
  display:inline-flex;align-items:center;gap:.6rem}
.cs-chapter__no::before{content:"";width:30px;height:1px;background:var(--ca-ink);display:inline-block}
.cs-chapter__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1;
  letter-spacing:-.02em;margin:.6rem 0 .4rem}
.cs-chapter__blurb{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink-dim);max-width:40ch;line-height:1.5}
.cs-stage{display:block}
.cs-chapter__ghost{display:none}
/* two-column "split" scene, narrative beside its visual, denser & uses the width */
.cs-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,3.4vw,3rem);align-items:center}
.cs-split .cs-col--text>:first-child{margin-top:0}
.cs-split .cs-col--media{margin:0}
.cs-split .cs-figure,.cs-split .cs-compare,.cs-split .cs-gallery{margin:0}
.cs-split .cs-cap{margin:.7rem 0 0}
@media(max-width:820px){.cs-split{grid-template-columns:1fr;gap:1.3rem}}

/* figures / galleries / before-after: flat editorial mount, the image sits
   edge-to-edge with only a hairline border + gentle radius clipping it, so it
   reads as part of the page, no matte, no float, no shadow on dark. */
.cs-frame{display:block;position:relative;padding:0;border-radius:12px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);background:var(--bg-soft);transition:border-color .4s}
.cs-frame:hover{border-color:color-mix(in srgb,var(--ca) 32%,var(--line))}
.cs-frame img,.cs-frame video{width:100%;height:auto;display:block;border-radius:inherit}
/* light mode: a soft, tight lift gives the edge-to-edge image separation on white */
:root[data-theme="light"] .cs-frame{background:#fff;box-shadow:0 10px 30px -22px rgba(20,20,26,.16)}
.cs-figure{margin:2rem 0}
/* standalone figures: cap tall/portrait images so they don't dominate the page,
   and let the frame shrink to the image so the border hugs it, centred */
.cs-figure .cs-frame{width:fit-content;max-width:100%;margin-inline:auto}
.cs-figure .cs-frame img,.cs-figure .cs-frame video{width:auto;max-width:100%;max-height:78vh}
/* capped + zoomable: fixed 425px height (consistent with the matched figure rows),
   click to read the full image in the lightbox */
.cs-figure--capped{text-align:center}
.cs-figzoom{position:relative;display:inline-block;margin:0 auto;padding:0;border:0;background:none;
  cursor:zoom-in;line-height:0;max-width:100%}
.cs-figure--capped .cs-frame{height:425px;width:auto}
.cs-figure--capped .cs-frame img{height:425px;width:auto;max-width:100%;max-height:425px}
.cs-figzoom:hover .cs-expand,.cs-figzoom:focus-visible .cs-expand{opacity:1;transform:none}
.cs-figzoom:focus-visible{outline:2px solid var(--ca-ink);outline-offset:3px;border-radius:12px}
.cs-figure figcaption,.cs-cap{font-size:.78rem;color:var(--ink-dim);margin-top:.85rem;line-height:1.4}
.cs-cap{margin:.6rem 0 1.8rem}
.cs-hero{margin:0 0 1rem}
.cs-hero .cs-frame{border-radius:14px}

/* ---- scrolling hero: the desktop lobby pans down on a loop, then eases back to
   the top. Title + contents live in the header above; no overlays. ---- */
.cs-scanhero{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#0b0b0d;margin:0 0 1rem}
.reel__shot{position:absolute;inset:0;overflow:hidden}
.reel__shot--desk img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;
  transform-origin:50% 0;will-change:transform}
@media(max-width:640px){.cs-scanhero{aspect-ratio:4/3}}
/* count-aware: 3 items -> 3 cols, 2 items -> 2 cols, narrow -> stacks. No empty columns. */
.cs-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:.9rem;margin:1.8rem 0 .4rem;align-items:start}
.cs-gallery figure{margin:0}
.cs-gallery .cs-frame{border-radius:10px}
.cs-gallery figcaption{font-size:.7rem;color:var(--ink-dim);margin-top:.6rem;text-align:center;letter-spacing:.02em}
/* height-matched row: columns flex-grow ∝ aspect ratio (set inline) -> equal image heights */
.cs-figrow{display:flex;gap:.9rem;align-items:flex-start;margin:1.8rem 0 .4rem}
.cs-figrow figure{flex-basis:0;min-width:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.cs-figrow .cs-frame{border-radius:10px}
.cs-figrow figcaption{font-size:.7rem;color:var(--ink-dim);text-align:center;letter-spacing:.02em;line-height:1.4}
@media(max-width:640px){.cs-figrow{flex-direction:column}.cs-figrow figure{flex-basis:auto}}

/* ---------- Carousel: space-saving filmstrip for dense reference sheets ---------- */
.cs-car{margin:1.8rem 0 .4rem}
.cs-car__track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:.2rem .2rem .6rem;scrollbar-width:none;-ms-overflow-style:none}
.cs-car__track::-webkit-scrollbar{display:none}
.cs-car__slide{position:relative;flex:0 0 auto;scroll-snap-align:start;
  width:clamp(240px,74vw,316px);display:flex;flex-direction:column;gap:.6rem;cursor:zoom-in;margin:0}
/* show the part of each sheet that fits the card (top-anchored crop), not the whole
   scaled-down sheet, the full sheet is one tap away via the zoom lightbox */
.cs-car__slide .cs-frame{height:clamp(300px,44vh,420px);display:block;background:var(--bg-soft)}
.cs-car__slide .cs-frame img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center}
/* fade + expand hint so a cropped card still reads as "there's more, tap to see" */
.cs-car__slide .cs-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  pointer-events:none;border-radius:inherit;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 72%,transparent),transparent)}
.cs-expand{position:absolute;top:.55rem;right:.55rem;width:30px;height:30px;
  border-radius:8px;display:grid;place-items:center;color:#fff;
  background:color-mix(in srgb,#05060a 52%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s}
.cs-car__slide:hover .cs-expand,.cs-car__slide:focus-visible .cs-expand{opacity:1;transform:none}
.cs-expand svg{width:15px;height:15px}
.cs-car__slide figcaption{font-size:.7rem;color:var(--ink-dim);text-align:center;
  letter-spacing:.02em;max-width:320px;margin:0 auto;line-height:1.4}
.cs-car__slide:focus-visible{outline:2px solid var(--ca-ink);outline-offset:3px;border-radius:12px}
.cs-car__ctl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.5rem}
.cs-car__nav{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s,color .2s,opacity .2s}
.cs-car__nav svg{width:18px;height:18px}
.cs-car__nav:hover:not(:disabled){border-color:color-mix(in srgb,var(--ca) 50%,var(--line));color:var(--ca-ink)}
.cs-car__nav:disabled{opacity:.28;cursor:default}
.cs-car__dots{display:flex;gap:.45rem;align-items:center}
.cs-car__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--ink-faint);
  cursor:pointer;transition:transform .2s,background .2s}
.cs-car__dot.is-active{background:var(--ca-ink);transform:scale(1.35)}

/* ---------- Zoom lightbox (click a carousel slide) ---------- */
body.zoom-open{overflow:hidden}
.cs-zoom{position:fixed;inset:0;z-index:1000;display:flex;padding:clamp(1rem,4vw,3rem);
  background:color-mix(in srgb,#05060a 78%,transparent);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);animation:zoomIn .22s ease}
.cs-zoom[hidden]{display:none}
@keyframes zoomIn{from{opacity:0}to{opacity:1}}
.cs-zoom__scroll{margin:auto;max-width:1040px;max-height:92vh;overflow:auto;border-radius:14px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7);scrollbar-width:thin}
.cs-zoom__scroll img{display:block;width:100%;height:auto}
.cs-zoom__close{position:fixed;top:1.1rem;right:1.2rem;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:1.1rem;
  cursor:pointer;display:grid;place-items:center;transition:background .2s}
.cs-zoom__close:hover{background:rgba(255,255,255,.22)}
@media(max-width:640px){.cs-car__slide{min-width:200px}}

/* ---------- Annotated craft figure: pins on a real screen + rationale legend ---------- */
.cs-annot{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:1.8rem;align-items:start;margin:1.8rem 0 .4rem}
.cs-annot__stage{position:relative;width:100%}
.cs-annot__stage .cs-frame{display:block}
.cs-annot__stage .cs-frame img{width:100%;height:auto;display:block}
.cs-annot__pin{position:absolute;transform:translate(-50%,-50%);width:27px;height:27px;border-radius:50%;
  border:2px solid #fff;background:var(--ca-ink);color:var(--bg);font:700 .74rem/1 var(--sans);
  display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 2px 9px rgba(0,0,0,.35);
  transition:transform .16s,box-shadow .16s}
.cs-annot__pin:hover,.cs-annot__pin.is-active{transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--ca) 38%,transparent),0 2px 9px rgba(0,0,0,.35)}
.cs-annot__pin:focus-visible{outline:2px solid var(--ca-ink);outline-offset:3px}
.cs-annot__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.cs-annot__item{display:flex;gap:.85rem;align-items:flex-start;padding:.6rem .65rem;border-radius:11px;
  border:1px solid transparent;transition:background .2s,border-color .2s}
.cs-annot__item.is-active{background:color-mix(in srgb,var(--ca) 11%,transparent);
  border-color:color-mix(in srgb,var(--ca) 30%,var(--line))}
.cs-annot__num{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--ca-ink);color:var(--bg);
  font:700 .76rem/1 var(--sans);display:grid;place-items:center;margin-top:.05rem}
.cs-annot__tag{display:inline-block;font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ca-ink);font-weight:700;margin-bottom:.25rem}
.cs-annot__txt p{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin:0;max-width:46ch}
.cs-annot__txt p b{color:var(--ink);font-weight:600}
@media(max-width:680px){
  .cs-annot{grid-template-columns:1fr;gap:1.1rem}
  .cs-annot__stage{max-width:300px;margin-inline:auto}
}
.cs-compare{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.8rem 0 .4rem}
.cs-compare figure{position:relative;margin:0}
.cs-compare .lbl{position:absolute;top:.7rem;left:.7rem;z-index:2;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--bg) 85%,transparent);border:1px solid var(--line);border-radius:100px;padding:.28rem .65rem;color:var(--ink-dim);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cs-compare .lbl--after{color:var(--ca-ink);border-color:color-mix(in srgb,var(--ca) 50%,var(--line))}
@media(max-width:640px){.cs-compare{grid-template-columns:1fr}}
/* stacked variant for wide / multi-panel before-after flows that need full width */
.cs-compare--stacked{grid-template-columns:1fr;gap:1.1rem}
/* design-decision note: the "why" behind a before/after, accented like a verdict */
.cs-decision{display:flex;gap:1rem;align-items:flex-start;margin:1.1rem 0 1.8rem;padding:1rem 1.2rem;
  border:1px solid var(--line);border-left:2px solid var(--ca);border-radius:12px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--ca) 6%,transparent),transparent 70%)}
.cs-decision__tag{flex:0 0 auto;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ca-ink);
  padding-top:.2rem;white-space:nowrap}
.cs-decision p{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink)}
@media(max-width:640px){.cs-decision{flex-direction:column;gap:.45rem}}

/* ---- Winning Over Sweden: one consistent image height across every figure block.
   Each image renders at --cs-img-h, width follows its own aspect ratio (no crop,
   no letterbox); multi-image groups lay out as centred, wrapping flex rows. ---- */
[data-slug="winning-over-sweden"]{--cs-img-h:clamp(300px,44vh,420px)}
/* standalone + stacked figures (not the art-directed hero) — frame hugs the image */
[data-slug="winning-over-sweden"] .cs-figure:not(.cs-hero):not(.cs-figure--capped) .cs-frame{
  width:-moz-fit-content;width:fit-content;height:var(--cs-img-h);max-width:100%;margin-inline:auto}
[data-slug="winning-over-sweden"] .cs-figure:not(.cs-hero):not(.cs-figure--capped) .cs-frame img{
  width:auto;height:100%;max-width:100%;max-height:none}
/* capped / zoom figure + carousel slides — pin to the same height */
[data-slug="winning-over-sweden"] .cs-figure--capped .cs-frame,
[data-slug="winning-over-sweden"] .cs-figure--capped .cs-frame img{height:var(--cs-img-h);max-height:var(--cs-img-h)}
[data-slug="winning-over-sweden"] .cs-car__slide .cs-frame{height:var(--cs-img-h)}
/* gallery — centred flex row, each tile at the shared height, frame hugs the image */
[data-slug="winning-over-sweden"] .cs-gallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}
[data-slug="winning-over-sweden"] .cs-gallery figure{flex:0 0 auto;width:-moz-fit-content;width:fit-content;min-width:0;max-width:100%}
[data-slug="winning-over-sweden"] .cs-gallery .cs-frame{height:var(--cs-img-h);width:auto;max-width:100%}
[data-slug="winning-over-sweden"] .cs-gallery .cs-frame img{height:100%;width:auto;max-width:100%}
/* caption must not inflate the figure past the image width: contribute 0 to the
   intrinsic size, then fill the resolved (image) width and wrap within it */
[data-slug="winning-over-sweden"] .cs-gallery figcaption{width:0;min-width:100%}
/* reimagining-onboarding: present tall phone screens at a capped, shared height,
   centred in their grid cells; wide iteration screenshots sit well under the cap */
[data-slug="reimagining-onboarding"] .cs-gallery figure{display:flex;flex-direction:column;align-items:center}
[data-slug="reimagining-onboarding"] .cs-gallery .cs-frame{width:auto;max-width:100%}
[data-slug="reimagining-onboarding"] .cs-gallery .cs-frame img{max-height:440px;width:auto;height:auto;max-width:100%}
/* bare figure: frameless transparent-PNG that floats on the page background,
   a soft drop-shadow (follows the cut-out alpha) lifts the cards off the surface */
.cs-figure--bare{margin:2rem 0 .6rem}
.cs-figure--bare img{display:block;width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.14))}
.cs-figure--bare figcaption{text-align:center}
/* wide breakout: extend a figure beyond the text column, centred on the reader
   (capped so it clears the right-hand chapter rail); degrades with the viewport */
.cs-figure--wide figcaption{max-width:62ch;margin-inline:auto}
/* animated framework graph: three.js field + SVG nodes + GSAP */
.cs-flow{position:relative;margin:2rem 0 .6rem;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)}
.cs-flow__bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.cs-flow__svg{position:relative;z-index:1;width:100%;height:auto;display:block;padding:1.1rem}
.fl-edge{stroke:var(--ca);stroke-width:2;opacity:.22;stroke-linecap:round;transition:opacity .25s}
.fl-edge.is-lit{opacity:.85}
.fl-node text{font-family:"Inter",system-ui,sans-serif;font-size:17px;font-weight:500;fill:#fff;pointer-events:none}
.fl-node rect{stroke:rgba(255,255,255,.14);stroke-width:1;transition:filter .2s}
.fl-node--brown rect{fill:#b07d62}
.fl-node--hub rect{fill:#3b82f6}
.fl-node--hub text{font-size:19px}
.fl-node--amber rect{fill:#e2ad48}
.fl-node--amber text{fill:#241804}
.fl-node--green rect{fill:#46a883}
.fl-node--blue rect{fill:#5b8fd6}
.fl-node:hover rect{filter:brightness(1.14)}
.fl-node:focus-visible{outline:none}
.fl-node:focus-visible rect{stroke:#fff;stroke-width:2}
.cs-flow figcaption{position:relative;z-index:1;font-size:.78rem;color:var(--ink-dim);padding:0 1.2rem 1.1rem;line-height:1.45}
.cs-flow__full{font:inherit;color:var(--ca-ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* desktop only: below 1200px it stays column-width (so it never shrinks or
   collides); above, it breaks out, centred, capped to clear the right-hand rail */
@media(min-width:1200px){
  .cs-figure--wide{width:min(1240px,calc(100vw - 22rem));margin-left:50%;transform:translateX(-50%)}
}
/* figrow — natural width at the shared height (drop the aspect-based flex-grow) */
[data-slug="winning-over-sweden"] .cs-figrow{flex-wrap:wrap;justify-content:center}
[data-slug="winning-over-sweden"] .cs-figrow figure{flex:0 0 auto!important;width:-moz-fit-content;width:fit-content;max-width:100%}
[data-slug="winning-over-sweden"] .cs-figrow .cs-frame{height:var(--cs-img-h);width:auto;max-width:100%}
[data-slug="winning-over-sweden"] .cs-figrow .cs-frame img{height:100%;width:auto;max-width:100%}
[data-slug="winning-over-sweden"] .cs-figrow figcaption{width:0;min-width:100%}
/* compare before/after — both panels at the shared height */
[data-slug="winning-over-sweden"] .cs-compare{align-items:start}
[data-slug="winning-over-sweden"] .cs-compare figure{display:flex;flex-direction:column;align-items:center}
[data-slug="winning-over-sweden"] .cs-compare .cs-frame{height:var(--cs-img-h);width:auto;max-width:100%}
[data-slug="winning-over-sweden"] .cs-compare .cs-frame img{height:100%;width:auto;max-width:100%}
/* annotated figure — fix the stage height, let the image drive width so pins stay aligned */
[data-slug="winning-over-sweden"] .cs-annot__stage{width:fit-content;margin-inline:auto;line-height:0}
[data-slug="winning-over-sweden"] .cs-annot__stage .cs-frame{height:var(--cs-img-h);width:auto;display:block}
[data-slug="winning-over-sweden"] .cs-annot__stage .cs-frame img{height:100%;width:auto}

.case__foot{border-top:1px solid var(--line);margin-top:3.5rem;padding-top:2.5rem}
.case__foot .cs-stage{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

.case__live{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--ink)}
.case__live:hover{color:var(--ca-ink)}
.case__next{font-size:.85rem;color:var(--ink-dim);border:1px solid var(--line);border-radius:100px;
  padding:.6rem 1.1rem;cursor:none;background:none;font:inherit;transition:background .3s,color .3s,border-color .3s}
.case__next:hover{background:var(--ink);color:#0a0a0c;border-color:var(--ink)}
body.case-open{overflow:hidden}

/* ============ MOTION SAFETY ============ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .statement__text .sw{opacity:1}
}