/* ============================================================
   Guy Nagar — portfolio. Shared stylesheet for all pages.
   ============================================================ */

/* The Google Fonts stylesheet is loaded asynchronously, so Outfit and Inter
   arrive after first paint and the swap reflows text. Measured cost of that
   reflow: CLS on the SmallHeroes hero block went 0.007 -> 0.043.

   These faces stand in until the real fonts land. Each is Arial scaled so its
   advance width and line box match the webfont it replaces, which makes the
   swap close to invisible. Arial is named explicitly rather than relying on
   system-ui: it exists on Windows and macOS and has a metric-compatible
   substitute on most Linux, so the correction is the same everywhere instead
   of being tuned to whichever machine measured it. If Arial is missing the
   face simply fails and the stack falls through to its next family.

   Ratios are measured, not published values, and they are calibrated against
   the face this rule actually resolves to rather than derived from Arial in
   the abstract: local("Arial") loads Arial Regular, and because the face
   declares its own font-weight the browser does not synthesise bold, so a
   ratio taken from Arial Bold came out 18% too narrow. Each value below was
   solved by measuring the declared face against its webfont and iterating to
   zero — _workbench/calibrate_fb.py reproduces and re-verifies it.
   ascent/descent are divided by size-adjust because the overrides resolve
   against the already-adjusted em.

   The unicode-range is deliberately narrow: Latin plus general punctuation,
   which is the text whose metrics these ratios were solved for. Arial covers
   far more than Inter's loaded subset does, so a wide range let the fallback
   capture glyphs that had always fallen through to the system font and render
   them under a Latin-derived size-adjust — permanently, not just before the
   swap. Two were caught this way: the Hebrew wordmark (132.95px from Segoe UI,
   pulled to 125.63px) and the arrows in the Earlier-work list. Symbols outside
   this range — arrows, the shekel sign — resolve exactly as they did before. */
@font-face{font-family:"Outfit fb";src:local("Arial");font-weight:800;
  size-adjust:102.46%;ascent-override:97.60%;descent-override:25.37%;line-gap-override:0%;unicode-range:U+0-24F,U+2000-206F}
@font-face{font-family:"Outfit fb";src:local("Arial");font-weight:600;
  size-adjust:99.42%;ascent-override:100.58%;descent-override:26.15%;line-gap-override:0%;unicode-range:U+0-24F,U+2000-206F}
@font-face{font-family:"Inter fb";src:local("Arial");font-weight:600;
  size-adjust:108.02%;ascent-override:89.80%;descent-override:22.22%;line-gap-override:0%;unicode-range:U+0-24F,U+2000-206F}
@font-face{font-family:"Inter fb";src:local("Arial");font-weight:400;
  size-adjust:105.91%;ascent-override:91.59%;descent-override:22.66%;line-gap-override:0%;unicode-range:U+0-24F,U+2000-206F}

:root{
  --bg:#08090A; --bg-alt:#0B0C0F; --surface:#101216; --surface-2:#15181D;
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14);
  --text:#F0F0F3; --muted:#A8A8B2; --faint:#8B8B95;
  /* the portfolio's own colour. it used to be a teal 16 degrees from 50K's
     brand green, which made the personal site read as an extension of 50K.
     this blue sits ~51 degrees away, and between the two product accents. */
  --accent:#5FC4F2; --accent-hover:#86D6F8; --accent-strong:#3DB5EC;
  --accent-soft:rgba(95,196,242,.11); --accent-line:rgba(95,196,242,.34);
  --accent-ink:#06141C; --accent-rgb:95,196,242;
  --violet:#7658FF;

  --f-display:Outfit,"Outfit fb",Inter,system-ui,sans-serif;
  --f-body:Inter,"Inter fb",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,monospace;

  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:96px; --s9:132px;

  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --max:1300px; --gutter:44px; --headh:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* each case study wears its product's colour, so entering it feels like entering
   the product — 50K is its brand green, SmallHeroes its violet */
body.p50k{--accent:#1DDE8D;--accent-hover:#4FE9A8;--accent-soft:rgba(29,222,141,.08);
  --accent-line:rgba(29,222,141,.32);--accent-ink:#04251A;--accent-rgb:29,222,141}
body.psh{--accent:#A08DFF;--accent-hover:#BCADFF;--accent-soft:rgba(140,121,255,.10);
  --accent-line:rgba(160,141,255,.36);--accent-ink:#17103A;--accent-rgb:160,141,255}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--f-display);line-height:1.06;letter-spacing:-.028em;font-weight:600}
h2{text-wrap:balance}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:where(section,article,[id]){scroll-margin-top:calc(var(--headh) + 20px)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* labels were 11-12px uppercase monospace in the accent colour, which read as
   terminal output and got hard to follow on a phone. sentence-cased Inter at a
   readable size now; monospace is reserved for numbers, dates and states. */
.label{font-family:var(--f-body);font-size:13.5px;font-weight:600;letter-spacing:.04em}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* reveal — enhancement only; readable without JS */
.rv{opacity:1;transform:none}
/* `js` is set inline so revealed content is hidden before first paint and
   there is no flash. Reading must never depend on the script arriving,
   though, so the animation below reveals everything with no JavaScript
   involved: it starts at .5s and finishes at .9s. `js-on` means the script is
   alive and will handle reveals on scroll, so the failsafe stands down.

   KEEP IN SYNC WITH site.js — the .5s animation-delay must match the
   REVEAL_FAILSAFE_MS constant at the top of that file. site.js compares its
   own start time against that number to decide whether the reveal is already
   under way; if the two drift apart, a late script can cancel a reveal that
   has begun and re-hide content. Change one, change the other. */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms);
  animation:rv-failsafe .4s var(--ease) .5s forwards}
.js-on .rv{animation:none}
/* our script started after the CSS failsafe had already begun revealing. The
   reveal is abandoned for this load rather than snapping content back to
   hidden — see the late-start branch in site.js. */
.reveal-skipped .rv,.js.reveal-skipped .rv{opacity:1;transform:none;animation:none;transition:none}
.js .rv.in{opacity:1;transform:none}
@keyframes rv-failsafe{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   HEADER
   ============================================================ */
header{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(8,9,10,.74);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.stuck{border-bottom-color:var(--line);background:rgba(8,9,10,.94)}
.nav{display:flex;align-items:center;gap:var(--s4);height:var(--headh)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;
  font-size:16.5px;text-decoration:none;letter-spacing:-.02em;white-space:nowrap;
  min-height:44px}
.brand .dot{width:9px;height:9px;border-radius:3px;background:var(--accent);
  box-shadow:0 0 8px rgba(var(--accent-rgb),.30);transition:transform .35s var(--ease);flex:none}
.brand:hover .dot{transform:rotate(45deg) scale(1.15)}
.navlinks{display:flex;gap:var(--s5);margin-left:auto;align-items:center}
.navlinks a{position:relative;text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:500;
  transition:color .25s;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.navlinks a::after{content:"";position:absolute;left:0;bottom:11px;width:0;height:1px;background:var(--accent);transition:width .3s var(--ease)}
.navlinks a:hover{color:var(--text)} .navlinks a:hover::after{width:100%}
.navlinks a[aria-current="page"]{color:var(--accent)}
.navlinks a[aria-current="page"]::after{width:100%}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);border-radius:999px;
  padding:14px 26px;min-height:48px;font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s,color .25s,background .25s;white-space:nowrap;
  font-family:inherit;cursor:pointer}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-p:hover{background:var(--accent-hover);transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(var(--accent-rgb),.16)}
.btn-s{border-color:var(--line-strong);color:var(--text);background:none}
.btn-s:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.nav .btn{padding:10px 20px;min-height:40px;font-size:14.5px}

/* mobile menu */
.menubtn{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.menubtn span{display:block;width:17px;height:1.5px;background:var(--text);position:relative;transition:background .2s}
.menubtn span::before,.menubtn span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
  background:var(--text);transition:transform .3s var(--ease)}
.menubtn span::before{top:-5.5px} .menubtn span::after{top:5.5px}
.menubtn[aria-expanded="true"] span{background:transparent}
.menubtn[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.menubtn[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}
.mobmenu{display:none;border-top:1px solid var(--line);background:rgba(8,9,10,.98);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.mobmenu ul{list-style:none;padding:var(--s2) 0 var(--s4)}
.mobmenu a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  text-decoration:none;padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.02em}
.mobmenu a span{font-family:var(--f-body);font-size:12.5px;letter-spacing:.02em;
  color:var(--faint);font-weight:500}
.mobmenu a[aria-current="page"]{color:var(--accent)}
.mobmenu .btn{width:100%;margin-top:var(--s4)}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{position:relative;padding:var(--s9) 0 var(--s8);overflow:hidden}
.glow{position:absolute;border-radius:50%;pointer-events:none}
/* a wash, not an orb: nearly invisible looked at directly, but the page reads
   slightly lit instead of flat black */
.glow-a{inset:0;width:auto;height:auto;border-radius:0;
  background:radial-gradient(circle at 50% 20%,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.025) 35%,transparent 65%)}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@media(prefers-reduced-motion:reduce){.glow-a,.glow-b{animation:none}}
/* the home hero is centred — with nothing beside it, a left-aligned block
   reads as a missing element rather than as deliberate space. it also gives
   the site its structural rule: home is a poster, case studies are documents. */
.hero .wrap{position:relative;z-index:1;text-align:center}
.eyebrow{color:var(--accent);display:block;margin-bottom:var(--s5)}
h1{font-size:clamp(40px,5.6vw,82px);font-weight:800;letter-spacing:-.042em;max-width:15ch;text-wrap:balance}
/* centring belongs to the home hero only — on a case page the h1 must stay
   flush left with the wordmark and the body copy above and below it */
.hero h1{margin-inline:auto}
/* the headline is white; the accent lives in one word. a fully coloured
   sentence read as a tech landing page. the second line stays subordinate
   in size but no longer in colour. */
h1 .hl{font-style:normal;color:var(--accent)}
.lead{color:var(--muted);font-size:clamp(17px,1.4vw,20px);max-width:52ch;
  margin:var(--s5) auto 0;line-height:1.7}
/* this is the proof, not a disclaimer — it was small, grey and set in mono,
   which read as footnote. same family as the body, higher contrast, marked. */
.proof{list-style:none;margin-top:var(--s6);display:inline-flex;flex-direction:column;
  gap:10px;text-align:left}
.proof li{color:#C4C7CF;font-size:15.5px;line-height:1.55;position:relative;padding-left:20px}
.proof li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s6);
  justify-content:center}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-alt)}
.stripin{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s5) 0;text-align:center}
.stripin .label{color:var(--faint)}
.stripin ul{list-style:none;display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:center}
.stripin li{font-family:var(--f-display);font-weight:600;font-size:19px;color:var(--muted);letter-spacing:-.015em}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:var(--s9) 0;border-top:1px solid var(--line)}
.shead{margin-bottom:var(--s7);max-width:70ch}
.shead .label{color:var(--accent);display:block;margin-bottom:var(--s3)}
.shead h2{font-size:clamp(29px,3.6vw,46px);font-weight:600}
.shead p{color:var(--muted);margin-top:var(--s3);font-size:17.5px}

/* ============================================================
   PROJECT SUMMARY (home)
   ============================================================ */
.idx{color:var(--accent);display:block;margin-bottom:var(--s7)}
.project{padding:var(--s9) 0;border-top:1px solid var(--line-strong)}
.project:first-of-type{border-top:0;padding-top:0}
.project.alt{background:linear-gradient(180deg,rgba(118,88,255,.055),rgba(118,88,255,.012) 40%,transparent),var(--bg-alt)}
.pnum{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.04em;
  color:#C4C7CF;margin-bottom:var(--s3)}
.pnum i{font-style:normal;font-family:var(--f-mono);color:var(--accent);letter-spacing:.07em}
.pname{font-size:clamp(50px,7.2vw,100px);font-weight:800;letter-spacing:-.045em;line-height:.94}
.pkind{color:var(--muted);font-size:18px;margin-top:var(--s2)}
.ptitle{font-size:clamp(26px,3.4vw,44px);font-weight:600;margin-top:var(--s6);max-width:24ch;letter-spacing:-.032em}
.psum{color:var(--muted);font-size:18px;line-height:1.78;max-width:62ch;margin-top:var(--s4)}
.psum+.psum{margin-top:var(--s3)}
.pvisual{margin-top:var(--s7)}

.factsrow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s6);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s5) 0}
.factsrow dt{font-family:var(--f-body);font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:#8B8B95;margin-bottom:7px}
.factsrow dd{font-size:15.5px;color:var(--text);line-height:1.5}

.decisions{margin-top:var(--s7);border-top:1px solid var(--line)}
.dec{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.dec .n{font-family:var(--f-mono);font-size:12px;color:var(--accent);letter-spacing:.14em;padding-top:6px}
.dec h4{font-size:clamp(20px,2.1vw,24px);font-weight:600;margin-bottom:9px;letter-spacing:-.022em}
.dec p{color:var(--muted);font-size:16.5px;line-height:1.72;max-width:62ch}

.metric{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6);
  border-top:1px solid var(--line);padding-top:var(--s5)}
.metric .big{font-family:var(--f-display);font-size:clamp(40px,4.6vw,58px);font-weight:800;
  color:var(--accent);letter-spacing:-.04em;line-height:1}
.metric div h4{font-size:18px;margin-bottom:4px;font-weight:600}
.metric div p{color:var(--muted);font-size:15.5px;max-width:48ch}

/* the link out to the full case study */
.casecta{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s7);padding:var(--s5);border:1px solid var(--accent-line);border-radius:var(--r-md);
  background:var(--accent-soft);text-decoration:none;
  transition:background .3s,border-color .3s,transform .25s var(--ease)}
.casecta:hover{background:rgba(var(--accent-rgb),.15);transform:translateY(-2px)}
.cc-t{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,2vw,23px);
  letter-spacing:-.022em;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.cc-meta{font-family:var(--f-body);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;padding:3px 11px}
.cc-d{color:var(--muted);font-size:15.5px;margin-top:9px;line-height:1.6;max-width:64ch}
.cc-go{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);
  border-radius:999px;padding:13px 22px;font-size:14.5px;font-weight:600;white-space:nowrap;min-height:48px}
.casecta:hover .cc-go svg{transform:translateX(3px)}
.cc-go svg{transition:transform .3s var(--ease)}

/* ============================================================
   FIGURES · TRIPTYCH · ANNOTATIONS · RAILS
   ============================================================ */
.cap{font-size:15px;color:#A8A8B2;margin-top:12px;line-height:1.6;max-width:64ch}
.shot{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.shot img{width:100%}
.phoneshot{filter:drop-shadow(0 30px 60px rgba(0,0,0,.62))}

/* three screens, same size, each with its own note */
/* three phones at full column width dominate the section they introduce —
   80% keeps them legible without turning the summary into a gallery */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.6vw,40px);
  align-items:start;max-width:80%;margin-inline:auto}
.triptych figure{margin:0;display:flex;flex-direction:column}
.tp-shot{position:relative}
.tp-shot img{width:100%}
.tp-n{position:absolute;top:0;left:0;transform:translate(-30%,-30%);
  width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-family:var(--f-mono);font-size:12px;font-weight:700;display:grid;place-items:center;z-index:2;
  box-shadow:0 0 0 5px rgba(8,9,10,.9),0 6px 18px -6px rgba(0,0,0,.9)}
.triptych figcaption{margin-top:var(--s4);border-top:1px solid var(--line-strong);padding-top:var(--s3)}
.triptych figcaption b{display:block;font-family:var(--f-display);font-size:18.5px;font-weight:600;
  letter-spacing:-.02em;margin-bottom:7px}
.triptych figcaption span{color:var(--muted);font-size:15px;line-height:1.65;display:block}

/* one screen, pins in the margin, numbered key beside it */
.anno{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--s6);align-items:center}
.anno.wide{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
.anno.flat{grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center}
.anno-stage{position:relative}
.anno-stage img{width:100%}
.anno.flat .anno-stage img{border-radius:var(--r-md);border:1px solid var(--line)}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-family:var(--f-mono);font-size:12px;font-weight:700;display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18),0 6px 18px -6px rgba(0,0,0,.8);z-index:2}
.pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent-line)}
.anno-key{list-style:none}
.anno-key li{display:grid;grid-template-columns:26px 1fr;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--line);color:var(--muted);font-size:16px;line-height:1.65}
.anno-key li:first-child{padding-top:0}
.anno-key li:last-child{border-bottom:0}
.anno-key i{font-style:normal;font-family:var(--f-mono);font-size:14px;font-weight:700;
  color:var(--accent);border:1px solid var(--accent-line);border-radius:50%;width:26px;height:26px;
  display:grid;place-items:center;margin-top:1px}
.anno-key b{color:var(--text);font-weight:600}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:var(--s3);
  overflow-x:auto;padding-bottom:var(--s3);scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.rail>figure{scroll-snap-align:start;margin:0}
/* the rail scrolls but holds no links, so keyboard users cannot reach it
   without a tabindex. give the focus ring somewhere sensible to land. */
.rail:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.rail img{border-radius:var(--r-sm);border:1px solid var(--line)}
.rail figcaption{font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:.02em;
  color:#A8A8B2;margin-top:10px}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}

.board{background:#F4F7F8;border-radius:var(--r-md);padding:var(--s5);display:grid;
  place-items:center;border:1px solid var(--line)}
.board.tight{padding:var(--s4)}
.boards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.boards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.boards img,.boards2 img{width:100%}

/* ============================================================
   THE BOOK — a real spread from the product, on the dark stage
   ============================================================ */
.bookstage{position:relative;padding:var(--s4) 0 var(--s2)}
.bookstage::before{content:"";position:absolute;left:50%;top:52%;width:82%;height:74%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,225,180,.09),transparent 70%)}
.openbook{position:relative;display:block;width:100%;max-width:100%;margin:0 auto;
  filter:drop-shadow(0 60px 90px rgba(0,0,0,.85))}
/* the book is the argument here — let it out past the text column */
/* the book is the evidence — let it run the full width of the page */
.chapter .bookstage{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
.bookcap{text-align:center;margin-top:var(--s5);margin-left:auto;margin-right:auto}

/* ============================================================
   CASE STUDY PAGE
   ============================================================ */
.casetop{position:relative;overflow:hidden;padding:var(--s7) 0 var(--s6);border-bottom:1px solid var(--line)}
/* identity: the product's name, big, in the product's colour */
.casemark{font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(56px,8vw,120px);color:var(--accent);
  text-shadow:0 0 60px color-mix(in srgb,var(--accent) 36%,transparent)}
.casegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:var(--s8);align-items:center;padding-bottom:var(--s6)}
.heroanim{position:relative;width:100%;max-width:400px;justify-self:end;
  aspect-ratio:1/2;filter:drop-shadow(0 34px 64px rgba(0,0,0,.65))}
/* a page from the product, given room to be looked at */
.heroshot{justify-self:end;width:100%;max-width:430px;
  filter:drop-shadow(0 44px 80px rgba(0,0,0,.7))}
.heroanim svg{display:block}
.heroanim>noscript img{width:100%}
/* small motion tiles — bare, no container */
.motion{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);align-items:end}
.motion .lot{width:100%;aspect-ratio:1}
.motion figure{margin:0}
.motion figcaption{font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:.02em;
  color:#A8A8B2;margin-top:9px;text-align:center}
.lotinline{width:min(200px,42vw);aspect-ratio:1;margin:0 auto}

/* widgets straight from the product — no frame, no bubble */
.wgrid{columns:3;column-gap:var(--s4)}
.wgrid>*{break-inside:avoid;margin:0 0 var(--s4);width:100%;display:block}
.wgrid img{width:100%;border-radius:14px}

/* companions strip */
.compgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3)}
.compgrid figure{margin:0}
.compgrid img{width:100%;border-radius:12px}
.compgrid figcaption{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.45}
.compgrid figcaption b{color:var(--text);font-weight:600;display:block;font-size:15px}
/* was 12px uppercase monospace, which read as a technical state rather than
   the navigation link it is. Sentence case, body face, readable size. */
.back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--muted);
  font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:.01em;
  min-height:44px;transition:color .25s}
.back:hover{color:var(--accent)}
.back svg{transition:transform .3s var(--ease)}
.back:hover svg{transform:translateX(-3px)}
.casetop h1{font-size:clamp(38px,5.4vw,74px);max-width:18ch;margin-top:var(--s4)}
.casetop .pkind{font-size:clamp(18px,2vw,22px);max-width:40ch}
.casemeta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s7);
  border-top:1px solid var(--line);padding-top:var(--s5)}
.casemeta dt{font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:.03em;
  color:#8B8B95;margin-bottom:7px}
.casemeta dd{font-size:15.5px;color:var(--text);line-height:1.5}

/* section index, sticky on the way down */
.toc{position:sticky;top:var(--headh);z-index:40;background:rgba(8,9,10,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tocin{display:flex;gap:var(--s5);align-items:center;overflow-x:auto;padding:13px 0;
  scrollbar-width:none;-ms-overflow-style:none}
.tocin::-webkit-scrollbar{display:none}
/* the rail hides its scrollbar, so when it overflows nothing says so. A fade
   at the right edge, over the sticky bar's own translucent background.
   Scoped to this case study; 50K keeps its current treatment. */
body.psh .toc{position:sticky;overflow:hidden}
body.psh .toc::after{content:"";position:absolute;right:0;top:0;bottom:0;width:54px;
  pointer-events:none;background:linear-gradient(90deg,rgba(8,9,10,0),rgba(8,9,10,.92) 62%)}
@media(min-width:1151px){body.psh .toc::after{display:none}}
.tocin a{text-decoration:none;color:var(--faint);font-family:var(--f-body);font-size:14px;
  font-weight:500;letter-spacing:.025em;white-space:nowrap;transition:color .25s;padding:4px 0;
  min-height:44px;display:inline-flex;align-items:center}
.tocin a:hover{color:var(--text)}
.tocin a.on{color:var(--accent)}
/* the navigator sat at 5.91:1 — passing AA but the weakest text on the
   page. Muted takes it to 8.45:1, and the active item gets weight and a
   rule under it so position is readable without relying on colour alone.
   Scoped to this case study; 50K keeps its current treatment. */
body.psh .tocin a{color:var(--muted)}
body.psh .tocin a:hover{color:var(--text)}
body.psh .tocin a.on{color:var(--accent);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent)}

.chapter{padding:var(--s8) 0;border-top:1px solid var(--line)}
.chapter:first-of-type{border-top:0}
.ch-i{display:flex;align-items:baseline;gap:10px;font-family:var(--f-body);
  font-size:14px;font-weight:600;letter-spacing:.035em;color:#C4C7CF;margin-bottom:var(--s3)}
.ch-i i{font-style:normal;font-family:var(--f-mono);color:var(--accent);letter-spacing:.07em}
.chapter h2{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.032em;max-width:22ch}
.chapter>p{color:var(--muted);font-size:17.5px;line-height:1.85;margin-top:var(--s4);max-width:66ch}
.chapter figure,.chapter .anno,.chapter .rail,.chapter .boards,.chapter .boards2,
.chapter .triptych,.chapter .bookstage{margin-top:var(--s6)}
.aside{color:var(--muted);font-size:16.5px;border-left:2px solid var(--accent-line);
  padding:2px 0 2px var(--s4);line-height:1.75;margin-top:var(--s5);max-width:60ch}
.aside b{color:var(--text);font-weight:600}

.bullets{list-style:none;margin-top:var(--s5);max-width:66ch}
.bullets li{color:var(--muted);font-size:16.5px;line-height:1.78;padding-left:26px;position:relative;margin-bottom:var(--s4)}
.bullets li:last-child{margin-bottom:0}
.bullets li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:2px;background:var(--accent);opacity:.8}
.bullets b{color:var(--text);font-weight:600}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start;margin-top:var(--s6)}
.twocol h3{font-family:var(--f-body);font-size:13.5px;letter-spacing:.035em;
  color:var(--accent);margin-bottom:var(--s3);font-weight:600}
.twocol p{color:var(--muted);font-size:16.5px;line-height:1.8;margin-top:0}
.twocol p+p{margin-top:var(--s3)}

.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);margin-top:var(--s6)}
.jstep{border-top:2px solid var(--accent);padding-top:var(--s3)}
.jstep h3{font-size:16px;margin-bottom:6px;font-weight:600;font-family:var(--f-display)}
.jstep p{color:var(--faint);font-size:13.5px;line-height:1.6;margin:0}

/* outcome — two stats, then plain prose. nothing clever. */
/* auto-fit so a single outcome takes the full measure instead of sitting in
   half a grid with a hole beside it */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s6);
  margin-top:var(--s6);max-width:920px}
.results>div>p{max-width:60ch}
.results>div{border-left:2px solid var(--accent-line);padding-left:var(--s4)}
.results .big{font-family:var(--f-display);font-size:clamp(30px,3.2vw,40px);font-weight:800;
  color:var(--accent);letter-spacing:-.035em;line-height:1.08;display:block;margin-bottom:var(--s3)}
.results p{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0}
/* the caveat that keeps the number honest, set below it rather than inside it */
.results .qual{color:var(--faint);font-size:14px;line-height:1.65;margin-top:10px}

/* results are one thing, thinking about them afterwards is another */
.reflection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);
  margin-top:var(--s8);border-top:1px solid var(--line);padding-top:var(--s6)}
.reflection p{color:var(--muted);font-size:16px;line-height:1.78;margin:0}
.outsub{font-family:var(--f-body);font-size:13.5px;letter-spacing:.035em;
  color:var(--accent);margin:0 0 var(--s3);font-weight:600}

/* what comes after the case */
.caseend{padding:var(--s8) 0;border-top:1px solid var(--line-strong);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}
.nextcase{text-decoration:none;border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:var(--s5);transition:border-color .3s,transform .25s var(--ease),background .3s;display:block}
.nextcase:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-2px)}
.nextcase .label{color:var(--faint);display:block;margin-bottom:var(--s3)}
.nextcase b{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);font-weight:600;
  letter-spacing:-.03em;display:block}
.nextcase span{color:var(--muted);font-size:15.5px;display:block;margin-top:8px}

/* ============================================================
   EARLIER WORK · ABOUT · CONTACT
   ============================================================ */
/* each earlier project reads the same way as the two big ones, just shorter:
   identity → one line → the picture → the detail underneath */
/* Earlier work — these have no case study behind them, so each one is a
   single compact row: everything readable on the left, one image on the
   right. No entry should cost more than about half a screen. */
.eworks{margin-top:var(--s7)}
.ework{padding:var(--s7) 0;border-top:1px solid var(--line)}
.ework:first-child{border-top:1px solid var(--line-strong)}
.ework-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s7);align-items:center}
.ometa{font-family:var(--f-body);font-size:12.5px;font-weight:500;letter-spacing:.03em;
  color:#A8A8B2;margin-bottom:10px}
.ometa i{font-style:normal;font-family:var(--f-mono);color:var(--accent);margin-right:10px;letter-spacing:.07em}
.ometa i{font-style:normal;color:var(--accent);margin-right:10px}
.ework h3{font-size:clamp(25px,2.7vw,34px);font-weight:600;letter-spacing:-.032em}
.ework .kind{color:var(--muted);font-size:15.5px;margin-top:7px}
.elede{color:var(--text);font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.6;
  letter-spacing:-.012em;margin-top:var(--s4)}
.ework-more{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.ework-more .tags{margin-top:var(--s4)}

/* click-to-enlarge: the thumbnail is a real button, not an image with a
   click handler bolted on, so it is keyboard reachable and announced */
.zoomable{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;border-radius:var(--r-md);overflow:hidden;
  transition:transform .3s var(--ease)}
.zoomable img{width:100%;display:block;border-radius:var(--r-md)}
/* was 10.5px uppercase monospace, which was unreadable and read as a
   technical state. Sentence case in the body face, at a legible size. */
.zoomtag{position:absolute;left:12px;bottom:12px;font-family:var(--f-body);font-size:14px;
  font-weight:600;letter-spacing:.01em;color:var(--text);
  background:rgba(8,9,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;
  opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s var(--ease)}
.zoomable:hover{transform:scale(1.012)}
.zoomable:hover .zoomtag,.zoomable:focus-visible .zoomtag{opacity:1;transform:none}
@media(hover:none){.zoomtag{opacity:1;transform:none}.zoomable:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.zoomable,.zoomtag{transition:none}.zoomable:hover{transform:none}}

/* the lightbox itself */
#lightbox{border:0;padding:0;background:none;max-width:100vw;max-height:100vh;
  width:100%;height:100%;overflow:hidden}
#lightbox::backdrop{background:rgba(4,5,6,.88);backdrop-filter:blur(6px)}
#lightbox .lbin{display:grid;place-items:center;width:100%;height:100%;padding:clamp(16px,4vw,56px)}
#lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-md);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
#lightbox .lbclose{position:fixed;top:16px;right:16px;z-index:2;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,22,26,.9);border:1px solid var(--line-strong);color:var(--text);
  font-size:20px;line-height:1;cursor:pointer;transition:border-color .25s,color .25s}
#lightbox .lbclose:hover{border-color:var(--accent);color:var(--accent)}
.did{color:var(--muted);font-size:16.5px;line-height:1.78}
.did b{color:var(--text);font-weight:600}
.did+.did{margin-top:var(--s3)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-family:var(--f-body);font-size:12.5px;font-weight:500;letter-spacing:.01em;
  color:#A8A8B2;border:1px solid var(--line);border-radius:999px;padding:5px 12px}

/* the survey sits in the same grid as the icon and illustration boards, so it
   has to carry the same weight — capped only so a 4:5 card doesn't tower over
   the near-square board beside it */
.board-sm{width:100%;max-width:660px;margin-inline:auto;align-self:center}

/* the KYC flow: six screens in order, scrollable on small widths */
/* six screens across came out ~190px each — too small to read the thing the
   section is arguing about. three across at full page width went too far the
   other way, so the grid is capped: two rows of three at a legible size. */
.kycflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5);
  max-width:940px;
  margin-top:var(--s6);align-items:start}
.kycflow figure{margin:0}
.kycflow img{width:100%;border-radius:var(--r-sm);border:1px solid var(--line)}
/* these run about 190px wide — the detail is the whole point, so each one
   has to be openable */
.kycflow .zoomable{border-radius:var(--r-sm)}
.kycflow .zoomtag{left:8px;bottom:8px;font-size:14px;padding:5px 11px;letter-spacing:.01em}
.kycflow figcaption{color:#A8A8B2;font-size:14.5px;line-height:1.55;margin-top:12px}
.kycflow figcaption b{display:block;color:var(--text);font-weight:600;font-size:14px;margin-bottom:4px}

/* the fuller story, after the picture rather than before it */
.pbody{margin-top:var(--s6)}
.pbody p{color:var(--muted);font-size:17.5px;line-height:1.8;max-width:64ch}
.pbody p+p{margin-top:var(--s3)}

.aboutgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}
.aboutgrid p{color:var(--muted);margin-bottom:var(--s4);line-height:1.85}
/* the management line was disappearing inside a paragraph — it earns its own */
.aboutnote{color:var(--text)!important;font-size:16px;line-height:1.7;
  border-left:2px solid var(--accent-line);padding-left:var(--s4);margin-top:var(--s5)!important}
.sublabel{color:var(--faint);display:block;margin-bottom:var(--s4)}

.tlrow{display:grid;grid-template-columns:140px 1fr;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.tlrow .yr{color:#A8A8B2;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;padding-top:4px}
.tlrow h3{font-size:17.5px;font-weight:600;margin-bottom:3px}
.tlrow p{color:var(--muted);font-size:15px;margin:0}
.cvlink{display:inline-flex;align-items:center;gap:9px;margin-top:var(--s5);
  font-family:var(--f-body);font-size:13.5px;font-weight:600;letter-spacing:.03em;
  color:var(--accent);text-decoration:none;min-height:44px}
.cvlink:hover{text-decoration:underline;text-underline-offset:5px}

/* capabilities, not a tool inventory — a recruiter wants to know what you
   can carry, not which applications are installed */
.bring{margin-top:var(--s8);border-top:1px solid var(--line-strong);padding-top:var(--s6)}
.bring>.label{color:var(--faint);display:block;margin-bottom:var(--s5)}
.bringgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.bringgrid h3{font-family:var(--f-display);font-size:clamp(19px,1.8vw,23px);font-weight:600;
  letter-spacing:-.024em;margin-bottom:var(--s3);position:relative;padding-top:var(--s4)}
.bringgrid h3::before{content:"";position:absolute;top:0;left:0;width:26px;height:2px;background:var(--accent)}
.bringgrid p{color:var(--muted);font-size:16px;line-height:1.72;margin:0}

.contact{text-align:center;background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.05));
  padding:var(--s8) 0}
.contact h2{font-size:clamp(35px,5.6vw,70px);margin-bottom:var(--s4);letter-spacing:-.04em;font-weight:800}
.contact p{color:var(--muted);max-width:54ch;margin:0 auto var(--s6);font-size:18px}
.contact .cta{justify-content:center}
footer{padding:var(--s5) 0;border-top:1px solid var(--line);color:var(--faint);font-size:14px;
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1150px){
  :root{--gutter:32px;--s9:100px;--s8:72px}
  .twocol,.aboutgrid{grid-template-columns:1fr}
  .twocol{gap:var(--s6)}
  .journey{grid-template-columns:repeat(2,1fr)}
  .factsrow,.casemeta{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
  .bringgrid{grid-template-columns:1fr;gap:var(--s5)}
  .anno,.anno.wide{grid-template-columns:1fr;gap:var(--s5);justify-items:center}
  .anno.flat{grid-template-columns:1fr;gap:var(--s5)}
  .anno-stage{max-width:340px;width:100%}
  .anno.flat .anno-stage{max-width:none}
  .anno-key{width:100%}
  .ework-grid{grid-template-columns:1fr;gap:var(--s5)}
  .kycflow{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
  .caseend{grid-template-columns:1fr}
}
@media(max-width:1150px){
  .casegrid{grid-template-columns:1fr;gap:var(--s6)}
  /* the phone sat too far from the metadata once the grid stacked.
     ~20% tighter, scoped to this case study so 50K is untouched. */
  body.psh .casegrid{gap:38px}
  .heroanim{justify-self:center;max-width:320px}
  .heroshot{justify-self:center;max-width:360px}
  .chapter .bookstage{margin-left:0;margin-right:0}
  .wgrid{columns:2}
  .compgrid{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .motion{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .split{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s6);padding-top:var(--s5)}
  :root{--gutter:20px;--s9:72px;--s8:56px;--s7:40px;--headh:58px}
  body{font-size:16.5px}
  .navlinks{display:none}
  /* Three columns rather than flex, so Contact is centred against the viewport
     and not against whatever space is left between the wordmark and the menu.
     The outer 1fr columns are equal by definition, so the middle one sits on
     the centre line whatever the wordmark measures. */
  .nav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2)}
  .brand{order:1;justify-self:start}
  .nav .btn{order:2;justify-self:center;margin-inline:0}
  .menubtn{display:flex;order:3;justify-self:end;margin-left:0}
  .mobmenu.open{display:block}
  .hero{padding-top:var(--s5);padding-bottom:var(--s6)}
  .lead,.proof{margin-top:var(--s4)}
  .strip{display:none}
  .journey{grid-template-columns:1fr;gap:var(--s4)}
  .results{grid-template-columns:1fr;gap:var(--s5)}
  .reflection{grid-template-columns:1fr;gap:var(--s5);margin-top:var(--s7)}
  .boards,.boards2{grid-template-columns:1fr}
  .ptitle{margin-top:var(--s5)}
  .ptitle br,.casetop h1 br{display:none}
  .psum{font-size:17px}
  .pkind{font-size:16.5px}
  .dec{grid-template-columns:1fr;gap:var(--s2);padding:var(--s4) 0}
  .dec .n{padding-top:0}
  .tlrow{grid-template-columns:1fr;gap:3px}
  .cta .btn{width:100%}
  .casecta{padding:var(--s4)}
  .cc-go{width:100%;justify-content:center;margin-top:var(--s2)}
  .cc-d{font-size:14.5px;margin-top:7px}
  .chapter>p,.bullets{max-width:none}
  .chapter h2,.casetop h1{max-width:none}
  .rail{grid-auto-columns:minmax(165px,1fr)}
  .anno-stage{max-width:225px}
  .anno.wide .anno-stage{max-width:250px}
  .anno.flat .anno-stage{max-width:none}
  .anno-key li{grid-template-columns:26px 1fr;gap:12px;padding:12px 0;font-size:15.5px}
  .anno-key i{width:26px;height:26px;font-size:14px}
  .ework{padding:var(--s6) 0}
  .bring{margin-top:var(--s7);padding-top:var(--s5)}
  /* six phone screens don't fit a phone — scroll them sideways instead.
     grid-template-columns:none is load-bearing: without it the desktop
     repeat(3) template survives into the carousel, crushes the first three
     cards to slivers, and their captions pile onto the body text. */
  .kycflow{display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:64vw;max-width:none;gap:16px;
    overflow-x:auto;padding-bottom:var(--s3);scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .kycflow figure{scroll-snap-align:start}
  .kycflow::-webkit-scrollbar{height:6px}
  .kycflow::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
  .elede{font-size:16.5px}
  .pbody p{font-size:17px}
  .wgrid{columns:1}
  .compgrid{grid-template-columns:repeat(2,1fr)}
  .motion{grid-template-columns:repeat(2,1fr)}
  .results{grid-template-columns:1fr}
  .heroanim{max-width:270px}
  .heroshot{max-width:300px}
}
@media(max-width:520px){
  /* three tiny thumbnails help nobody — make them swipeable at a readable size.
     max-width:none matters: the base rule's 80% cap was shrinking the rail. */
  .triptych{grid-auto-flow:column;grid-auto-columns:64vw;grid-template-columns:none;
    max-width:none;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3);
    scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .triptych figure{scroll-snap-align:center}
  .triptych::-webkit-scrollbar{height:6px}
  .triptych::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
  /* the badge has to sit inside the frame here — the rail's overflow clips
     anything hanging off the first item's top-left corner */
  .tp-n{transform:none;top:9px;left:9px;box-shadow:0 4px 14px -4px rgba(0,0,0,.9)}
}

/* ── who does what: the split that keeps the AI story honest ────────── */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);
  margin-top:var(--s7);border-top:1px solid var(--line);padding-top:var(--s6)}
.split h3{font-family:var(--f-body);font-size:15px;letter-spacing:.03em;
  color:var(--accent);font-weight:600;margin-bottom:var(--s4)}
/* one line instead of a second responsibility matrix — the matrix that
   carries weight is the one in section 08, and two in a row diluted it */
.respline{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--accent);
  letter-spacing:.015em}
/* a detail crop, not a full-bleed screenshot — it should not compete with
   the companion gallery it used to duplicate */
.pickshot{max-width:540px}
.pickshot .zoomable{border:1px solid var(--line-strong)}
.ownlist{list-style:none}
.ownlist li{color:var(--text);font-size:16px;line-height:1.5;padding:11px 0 11px 22px;
  border-bottom:1px solid var(--line);position:relative}
.ownlist li:last-child{border-bottom:0}
.ownlist li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:2px;background:var(--accent)}
/* the agents' column reads quieter — it is support, not authorship */
.ownlist--alt li{color:var(--muted)}
.ownlist--alt li::before{background:var(--line-strong)}

/* ── link out to the real product ───────────────────────────────────
   deliberately quieter than the case-study CTA: it is corroboration,
   not the thing you want the visitor to click first */
.livelink{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s3);
  font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);text-decoration:none;min-height:44px;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.livelink:hover{color:var(--accent);border-bottom-color:var(--accent-line)}
/* SmallHeroes is pre-launch. Both entry points render as spans, not disabled
   links, so there is nothing to click, focus or crawl. */
.livelink.soon{color:var(--faint);cursor:default}
.casecta.soon{border-style:dashed;background:none;cursor:default}
.casecta.soon:hover{background:none;transform:none}
.casecta.soon .cc-go{background:none;color:var(--accent);
  border:1px solid var(--accent-line)}
.livelink svg{flex:none;opacity:.85}

/* ── compact mobile case navigator ──────────────────────────────────
   below 760px the horizontal TOC rail becomes "04 / 08 · Section name"
   with a Sections button opening the list. built by JS from the rail,
   so without JS the scrollable rail simply remains. */
.casenav{display:none}
@media(max-width:760px){
  .js-on .toc .tocin{display:none}
  .js-on .casenav{display:flex;align-items:center;justify-content:space-between;
    gap:var(--s3);padding:9px 0}
  .casenav .cn-now{display:flex;align-items:baseline;gap:10px;min-width:0;
    font-size:14px;font-weight:600;color:var(--text)}
  .casenav .cn-i{font-family:var(--f-mono);font-size:12.5px;color:var(--accent);
    letter-spacing:.05em;flex:none}
  .casenav .cn-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .casenav .cn-open{flex:none;display:inline-flex;align-items:center;gap:7px;
    background:none;border:1px solid var(--line-strong);border-radius:999px;
    color:var(--text);font:600 14px/1 var(--f-body);padding:0 14px;min-height:44px;
    cursor:pointer;transition:border-color .25s,color .25s}
  .casenav .cn-open[aria-expanded="true"],.casenav .cn-open:hover{
    border-color:var(--accent);color:var(--accent)}
  .casenav .cn-open svg{transition:transform .3s var(--ease)}
  .casenav .cn-open[aria-expanded="true"] svg{transform:rotate(180deg)}
}
.cn-list{display:none;border-top:1px solid var(--line)}
.cn-list.open{display:block}
.cn-list a{display:flex;align-items:baseline;gap:12px;text-decoration:none;
  padding:13px 0;border-bottom:1px solid var(--line);color:var(--muted);
  font-size:15px;min-height:44px}
.cn-list a:last-child{border-bottom:0}
.cn-list a i{font-style:normal;font-family:var(--f-mono);font-size:12px;
  color:var(--faint);letter-spacing:.05em;flex:none}
.cn-list a[aria-current="location"]{color:var(--accent)}
.cn-list a[aria-current="location"] i{color:var(--accent)}