/* Case study pages.
   One canvas, one ink, one accent (olive). Geist for everything, Geist Mono for small labels only.
   No italics: emphasis is weight. Every size and gap below comes from the tokens. */
:root{
  /* colour */
  --canvas:#FCFCFA;
  --ink:#1A1F12;
  --ink-soft:#3B4232;
  --grey:#5F6556;
  --border:rgba(26,31,18,.12);
  --accent:#56652A;
  --accent-hover:#434F1F;
  --stage:#F2F1EC;                 /* set per case study on <body> */
  /* legacy names used by the diagram */
  --paper:#FCFCFA; --olive:var(--accent); --olive-deep:#2A3213; --lime:#C9D56F; --sand:var(--stage); --white:#FFFFFF;
  --olive-20:var(--border); --olive-60:var(--grey);

  /* type */
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-28:28px; --fs-40:40px; --fs-64:64px;

  /* space, 8-point */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --gut:clamp(16px,4vw,48px);
  --measure:680px;
  --wide:1200px;

  /* shape */
  --r-sm:8px; --r-md:16px;
  --rule:1px solid var(--border);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--canvas);scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:var(--fs-18);line-height:1.6;-webkit-font-smoothing:antialiased}
em,.it{font-style:normal;font-weight:500;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--canvas)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono);font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.eyebrow{margin:0 0 var(--s2);color:var(--accent)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2);padding:var(--s2) var(--gut);background:rgba(252,252,250,.92);backdrop-filter:blur(8px);border-bottom:var(--rule)}
.logo{display:inline-flex;align-items:flex-end;font-weight:900;font-size:26px;line-height:.8;letter-spacing:-.045em;text-transform:uppercase;color:var(--accent)}
.logo svg{width:.79em;height:.735em;margin:0 .01em}
.links{display:flex;gap:var(--s3);font-size:var(--fs-16);color:var(--ink-soft)}
.links a:hover{color:var(--ink)}
.nav .mail{justify-self:end;font-size:var(--fs-14);color:var(--ink-soft)}
.nav .mail:hover{color:var(--ink)}

/* ---------- Intro: the hook ---------- */
main{width:100%}
.crumbs{display:flex;justify-content:space-between;max-width:var(--wide);margin:0 auto;padding:var(--s3) var(--gut) 0;font-size:var(--fs-14);color:var(--grey)}
.crumbs a:hover{color:var(--ink)}
.intro{max-width:var(--wide);margin:0 auto;padding:var(--s7) var(--gut) var(--s6)}
.intro h1{margin:0 0 var(--s3);max-width:15em;font-weight:600;font-size:clamp(36px,5.2vw,var(--fs-64));line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.lead{margin:0;max-width:36em;font-size:var(--fs-20);line-height:1.5;color:var(--ink-soft)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin:var(--s6) 0 0;padding-top:var(--s3);border-top:var(--rule)}
.facts dt{color:var(--grey);margin-bottom:var(--s1)}
.facts dd{margin:0;font-size:var(--fs-16);line-height:1.4}

/* ---------- Cover ---------- */
.cover{max-width:calc(var(--wide) - 2 * 0px);margin:0 auto;padding:0 var(--gut)}
.cover > *{border-radius:var(--r-md)}
.cover{display:block}
.cover .stagebox,.cover .mock.hero{width:100%;background:var(--stage);border-radius:var(--r-md)}

/* ---------- Metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));max-width:var(--wide);margin:var(--s6) auto 0;padding:0 var(--gut)}
.metric{padding:var(--s3) var(--s3) var(--s3) 0;display:flex;flex-direction:column;gap:var(--s1);border-top:2px solid var(--ink)}
.metric + .metric{padding-left:var(--s3);margin-left:0}
.metric b{font-weight:600;font-size:var(--fs-40);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric span{font-size:var(--fs-14);color:var(--grey);line-height:1.4}

/* ---------- In short ---------- */
.tldr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);width:calc(min(100%,var(--wide)) - 2 * var(--gut));margin:var(--s6) auto 0;padding:var(--s5) 0;border-top:var(--rule);border-bottom:var(--rule)}
.tldr p:not(.eyebrow){margin:0;font-size:var(--fs-18);line-height:1.55;color:var(--ink)}

/* ---------- Body: contents + story ---------- */
.body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s6);max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}
.toc{padding-top:var(--s7)}
.toc > *{position:sticky;top:96px}
.toc .eyebrow{margin-bottom:var(--s2)}
.toc ol{position:sticky;top:132px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--fs-14)}
.toc a{display:flex;gap:var(--s2);align-items:baseline;color:var(--grey);transition:color .2s}
.toc a .mono{font-size:11px;color:inherit;letter-spacing:.04em}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc a.on{font-weight:500}
.sec{padding:var(--s7) 0;border-bottom:var(--rule)}
.sec:last-child{border-bottom:0}
.sec h2{margin:0 0 var(--s3);max-width:18em;font-weight:600;font-size:clamp(28px,3vw,var(--fs-40));line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.sec p{margin:0 0 var(--s2);max-width:var(--measure);color:var(--ink-soft)}
.sec p.eyebrow{color:var(--accent);margin-bottom:var(--s2)}
.sec a{border-bottom:1px solid currentColor}

/* stat row inside a section */
.stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s3);margin:var(--s4) 0}
.stats div{padding-top:var(--s2);border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:var(--s1)}
.stats b{font-weight:600;font-size:var(--fs-28);line-height:1;letter-spacing:-.02em}
.stats span{font-size:var(--fs-14);color:var(--grey);line-height:1.4}

/* figures: every visual sits on the case study's one stage colour */
.fig{margin:var(--s5) 0 0;display:flex;flex-direction:column;gap:var(--s2)}
.fig-row{display:flex;justify-content:center;align-items:flex-end;gap:var(--s3);width:100%;background:var(--stage);border-radius:var(--r-md);padding:var(--s5);overflow:hidden}
.fig .shot{background:var(--white);border-radius:var(--r-sm);overflow:hidden;box-shadow:0 1px 2px rgba(26,31,18,.06),0 24px 48px -24px rgba(26,31,18,.28)}
.fig .shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fig .desk{width:min(48%,560px);aspect-ratio:16/10}
.fig .desk.solo{width:min(100%,880px)}
.fig figcaption{font-size:var(--fs-14);color:var(--grey);max-width:var(--measure);line-height:1.5}
/* text that follows a figure starts a new block, so captions read as belonging to their screen */
.sec .fig + p,.sec .fig + .stats,.sec .fig + .steps{margin-top:var(--s6)}
.sec .fig + .fig{margin-top:var(--s6)}

/* numbered steps */
.steps{display:flex;flex-direction:column;margin-top:var(--s4)}
.step{display:grid;grid-template-columns:var(--s6) minmax(0,1fr);gap:var(--s1) var(--s2);padding:var(--s3) 0;border-top:var(--rule)}
.step > .mono{padding-top:6px;color:var(--accent)}
.step h3{margin:0;font-weight:600;font-size:var(--fs-20);line-height:1.3}
.step .meta{margin:var(--s1) 0 var(--s1);color:var(--grey)}
.step p:not(.meta){margin:0;font-size:var(--fs-16)}

/* write-up placeholder */
.wip{border:1px dashed var(--grey);padding:var(--s2) var(--s3);max-width:var(--measure);margin:var(--s1) 0 var(--s2)}

/* ---------- Contact ---------- */
.contact{width:calc(min(100%,var(--wide)) - 2 * var(--gut));margin:0 auto;padding:var(--s8) 0 var(--s7);border-top:var(--rule)}
.contact h2{margin:0 0 var(--s2);max-width:14em;font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.03em}
.contact p:not(.eyebrow){margin:0 0 var(--s4);color:var(--ink-soft)}
.cta{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cta a{padding:14px var(--s3);border:1px solid var(--ink);border-radius:999px;font-size:var(--fs-14);font-weight:500;transition:background .2s,color .2s}
.cta a:first-child{background:var(--ink);color:var(--canvas)}
.cta a:hover{background:var(--accent);border-color:var(--accent);color:var(--canvas)}

/* ---------- Footer ---------- */
.foot{display:flex;justify-content:space-between;gap:var(--s2);width:calc(min(100%,var(--wide)) - 2 * var(--gut));margin:0 auto;padding:var(--s3) 0;border-top:var(--rule);color:var(--grey)}
.foot a:hover{color:var(--ink)}

.progress{position:fixed;right:var(--s3);bottom:var(--s3);z-index:10;font-variant-numeric:tabular-nums;color:var(--grey)}

/* ---------- Mobile ---------- */
@media (max-width:899px){
  .crumbs a,.foot a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs{padding-top:var(--s1)}
  .nav{grid-template-columns:1fr auto}
  .nav .links{display:none}
  .intro{padding:var(--s6) var(--gut) var(--s5)}
  .facts{grid-template-columns:1fr 1fr;margin-top:var(--s5)}
  .metrics,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric + .metric{padding-left:0}
  .metric:nth-child(even){padding-left:var(--s3)}
  .tldr{grid-template-columns:1fr;gap:var(--s4)}
  .body{grid-template-columns:1fr;gap:0}
  .toc,.progress{display:none}
  .sec{padding:var(--s6) 0}
  .fig-row{flex-wrap:wrap;padding:var(--s3)}
  .fig .desk,.fig .desk.solo{width:100%}
  .step{grid-template-columns:1fr}
}
@media (max-width:520px){
  .nav .mail{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* token flow diagram: hub and spokes, lime light on deep olive */
.flow{position:relative;width:100%;overflow:hidden;isolation:isolate;color:var(--paper);padding:clamp(48px,5vw,72px) clamp(16px,3vw,40px);
  background:
    radial-gradient(circle at 50% 52%,rgba(201,213,111,.20),transparent 34%),
    repeating-radial-gradient(circle at 50% 52%,transparent 0 58px,rgba(201,213,111,.09) 58px 59px),
    radial-gradient(circle at 20% 10%,rgba(201,213,111,.06),transparent 40%),
    var(--olive-deep);
  --s1:#1F3B73;--s2:#E4572E;--s3:#F2EFE6}
.flow[data-ci="new"]{--s1:#0E7C66;--s2:#F4B400;--s3:#FFF8E7}
.flow-kicker{position:relative;z-index:2;margin:0 0 clamp(28px,4vw,48px);text-align:center;color:var(--lime);letter-spacing:.42em;font-size:11px}
.flow-kicker::before{content:"";display:inline-block;width:40px;height:1px;background:var(--lime);vertical-align:middle;margin-right:14px;box-shadow:0 0 8px var(--lime)}
.flow-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.9fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,72px)}
.flow-col{display:flex;flex-direction:column;gap:clamp(14px,2vw,26px)}
.flow-col:first-child{gap:clamp(40px,7vw,110px)}

.fcard{position:relative;border:1px solid rgba(201,213,111,.24);border-radius:14px;padding:16px 16px 12px;
  background:linear-gradient(160deg,rgba(252,252,247,.07),rgba(252,252,247,.02));backdrop-filter:blur(4px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(252,252,247,.06);transition:border-color .4s,box-shadow .4s,opacity .4s}
.fcard:hover,.fcard.lit{border-color:rgba(201,213,111,.7);box-shadow:0 0 0 1px rgba(201,213,111,.25),0 0 28px -6px rgba(201,213,111,.45)}
.fcard-h{display:flex;align-items:center;gap:12px}
.fcard-h .mono{color:var(--paper);letter-spacing:.2em;font-size:11px}
.ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(201,213,111,.55);background:rgba(201,213,111,.08);color:var(--lime);box-shadow:0 0 14px -4px rgba(201,213,111,.6)}
.ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fcard p{margin:12px 0 0;font-size:15px;line-height:1.35;color:rgba(252,252,247,.88);max-width:none}
.fcard-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(201,213,111,.16);color:var(--lime);font-size:10px;letter-spacing:.14em}
.fcard.ci{border-style:dashed}
.flow[data-ci="current"] .fcard.ci{opacity:.72}
.flow[data-ci="new"] .fcard[data-link="in"]:not(.ci){opacity:.5}
.flip{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--olive-deep);background:var(--lime);border:0;border-radius:999px;padding:6px 12px;cursor:pointer;box-shadow:0 0 16px -2px rgba(201,213,111,.7);transition:transform .2s}
.flip:hover{transform:translateY(-1px)}
.flow[data-ci="new"] .flip{background:transparent;color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.sw{display:flex;gap:6px;margin-top:10px}
.sw i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(252,252,247,.25);transition:background-color .7s ease}
.sw .s1{background:var(--s1)}.sw .s2{background:var(--s2)}.sw .s3{background:var(--s3)}

.hub{position:relative;justify-self:center;width:min(100%,250px);aspect-ratio:1;display:grid;place-items:center}
.hub svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-glow{fill:none;stroke:var(--lime);stroke-width:26;opacity:.28;filter:blur(14px);transition:opacity .5s}
.hub-ring{fill:none;stroke:#E9F0B4;stroke-width:7;filter:drop-shadow(0 0 6px var(--lime)) drop-shadow(0 0 18px var(--lime))}
.hub-orbit{fill:none;stroke:var(--lime);stroke-width:1;stroke-dasharray:2 7;opacity:.6;transform-origin:100px 100px;animation:spin 40s linear infinite}
.hub-core{fill:rgba(201,213,111,.10);stroke:rgba(201,213,111,.4);stroke-width:1}
.hub-l{position:static;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.hub-l b{font-family:var(--sans);font-weight:600;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;color:var(--paper)}
.hub-l small{position:absolute;left:0;right:0;bottom:0;font-size:10px;letter-spacing:.16em;color:var(--lime)}
.hub.flash .hub-glow{opacity:.75}
.hub.flash .hub-ring{animation:pop .7s ease}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{40%{stroke-width:11}}

.flow-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.flow-lines .base{fill:none;stroke:rgba(201,213,111,.35);stroke-width:1.2;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1),opacity .4s}
.flow-lines .pulse{fill:none;stroke:#E9F0B4;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--lime)) drop-shadow(0 0 10px var(--lime));opacity:0;transition:opacity .6s}
.flow.in .flow-lines .pulse{opacity:1}
.flow-lines .dim{opacity:.18}
.flow-lines .pulse.dim{opacity:0}

@media (max-width:899px){
  .flow-grid{grid-template-columns:1fr;gap:28px}
  .flow-col:first-child{gap:16px}
  .hub{width:190px}
  .fcard{background:linear-gradient(160deg,rgba(252,252,247,.07),rgba(252,252,247,.02)),var(--olive-deep)}
}
@media (prefers-reduced-motion:reduce){
  .hub-orbit{animation:none}
  .flow-lines .base{transition:none}
}

/* device mockups: rendered on the case study's stage colour */
.stage-wrap{background:var(--stage);border-radius:var(--r-md);display:flex;justify-content:center;align-items:flex-end;gap:var(--s3);padding:var(--s6) var(--s5);overflow:hidden}
.stage-wrap:has(.mock){padding:0}
.stage-wrap .shot{background:var(--white);border-radius:var(--r-sm);overflow:hidden;box-shadow:0 1px 2px rgba(26,31,18,.06),0 24px 48px -24px rgba(26,31,18,.28)}
.stage-wrap .shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.stage-wrap .desk{width:min(46%,560px);aspect-ratio:16/10}
.mock{display:block;width:100%;height:auto}
.fig-row:has(.mock){padding:0}
.fig .mock.solo{width:min(100%,900px);margin:0 auto}
.fig-row.pair{gap:0}
.fig-row.pair .mock{width:50%}
@media (max-width:899px){
  .stage-wrap{flex-wrap:wrap;padding:var(--s3)}
  .stage-wrap .desk{width:100%}
  .fig-row.pair .mock{width:100%}
}

/* email links: copy the address as a fallback when no mail app opens */
.contact h2 .talk{border-bottom:3px solid currentColor;color:var(--accent)}
.contact h2 .talk:hover{color:var(--accent-hover)}
.toast{position:fixed;left:50%;bottom:var(--s3);z-index:200;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:var(--canvas);padding:12px var(--s3);border-radius:999px;font-size:var(--fs-14);font-weight:500;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}