/* ─────────────────────────────────────────────────────────────────────────────
   case.css — the case-study surface (six pages + the index).
   Same machined system as the homepage: true black, one signal red per view,
   three type voices, hairlines instead of boxes, flat except live state.
   Shared file (not inlined per page) so it is fetched once and cached across
   all seven pages.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#000000; --bg2:#0c0d10; --term:#0a0b0e;
  --text:#eceef1; --lead:#cfd2d6; --dim:#878b93; --dimmer:#4a4e56;
  --red:#ff2a33; --red-soft:#ff6b72; --red-deep:#7a1318;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --disp:'Bebas Neue',sans-serif; --body:'Space Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --padx:clamp(1.4rem,7vw,7rem);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--red);color:#000;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
html{scrollbar-color:var(--dimmer) var(--bg);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#20232a;border-radius:999px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#2c3038;}
.maxw{max-width:var(--maxw);margin:0 auto;}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem var(--padx);
  text-shadow:0 1px 14px rgba(0,0,0,.75);}
.nav .brand{display:flex;align-items:center;gap:.6rem;}
.nav .brand svg{width:28px;color:var(--text);}
.nav .brand b{font-family:var(--disp);font-weight:400;font-size:1.5rem;letter-spacing:.03em;
  text-transform:uppercase;line-height:.9;}
.nav .brand b .hl{color:var(--red);}
.nav .navlinks{display:flex;align-items:center;gap:1.4rem;}
.nav .lnk{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);border-bottom:1px solid transparent;padding-bottom:.15rem;transition:.25s var(--ease);}
.nav .lnk:hover{color:var(--red-soft);border-color:var(--red);}
.nav .cta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--text);border-radius:999px;padding:.5rem .95rem;transition:.25s var(--ease);}
.nav .cta:hover{color:var(--red-soft);border-color:var(--red);transform:translateY(-2px);}
@media(max-width:720px){ .nav .navlinks .lnk{display:none;} }

/* ── hero: the artifact leads ────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;}
.hero .shot{position:relative;flex:0 0 46svh;min-height:46svh;background-size:cover;
  background-position:center top;filter:saturate(.72) contrast(1.02);}
.hero .shot::after{content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(255,42,51,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.72) 78%, #000 100%);}
.hero .inner{flex:1 1 auto;display:flex;align-items:center;
  padding:2.4rem var(--padx) clamp(2.6rem,7vh,4.2rem);}
.hero .inner .w{width:100%;max-width:var(--maxw);margin:0 auto;}
@media(max-width:760px){ .hero .shot{flex:0 0 34svh;min-height:34svh;} }
.caseno{font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);margin-bottom:1.4rem;}
.caseno span{color:var(--dimmer);}
.hero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.7rem,6.4vw,5.4rem);line-height:.9;letter-spacing:.01em;}
.hero h1 .hl{color:var(--red);}
.hero .kicker{font-family:var(--body);font-weight:300;color:var(--lead);
  font-size:clamp(.98rem,1.4vw,1.14rem);line-height:1.55;max-width:52ch;margin-top:1.2rem;}
.hero .meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--dim);text-transform:lowercase;}
.hero .meta i{font-style:normal;color:var(--dimmer);}
.hero .live{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);border-bottom:1px solid var(--line2);padding-bottom:.2rem;transition:.25s var(--ease);}
.hero .live:hover{color:var(--red-soft);border-color:var(--red);}

/* ── sections ────────────────────────────────────────────────────────────── */
.blk{padding:clamp(4rem,10vh,7rem) var(--padx);border-top:1px solid var(--line);}
.blk.plain{border-top:0;}
.shead{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:2.6rem;}
.shead .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;color:var(--red);}
.shead h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,3rem);line-height:.95;letter-spacing:.02em;}
.lead{font-family:var(--body);font-weight:300;font-size:clamp(1.02rem,1.5vw,1.24rem);
  line-height:1.58;color:var(--lead);max-width:54ch;}
.lead + .lead{margin-top:1.1rem;}

/* the brief: a spec strip, hairline-ruled, not cards */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem;
  border-top:1px solid var(--line);}
.spec div{padding:1.2rem 1.3rem 1.3rem 0;border-bottom:1px solid var(--line);}
.spec dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.5rem;}
.spec dd{font-size:.92rem;line-height:1.5;color:var(--text);}
@media(max-width:720px){ .spec{grid-template-columns:1fr;} }

/* ── the decisions: an engineering ledger, hairlines not boxes ───────────── */
.dec{display:grid;grid-template-columns:15rem 1fr;gap:2rem 2.6rem;
  padding:2.2rem 0;border-top:1px solid var(--line);position:relative;}
.dec:first-of-type{border-top:1px solid var(--line2);}
.dec .con b{display:block;font-family:var(--mono);color:var(--dimmer);font-weight:400;
  font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:.75rem;}
.dec .con span{display:block;font-family:var(--body);font-weight:300;font-size:.92rem;
  line-height:1.5;color:var(--lead);}
.dec h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:1.75rem;
  line-height:.98;letter-spacing:.02em;margin-bottom:.85rem;}
.dec p{font-size:.95rem;line-height:1.62;color:var(--lead);max-width:56ch;}
.dec p b{font-weight:500;color:var(--text);}
.dec::after{content:attr(data-i);position:absolute;right:0;bottom:-.6rem;pointer-events:none;
  font-family:var(--disp);font-size:9rem;line-height:.8;color:var(--text);opacity:.04;}
@media(max-width:1080px){ .dec::after{display:none;} }
@media(max-width:860px){
  .dec{grid-template-columns:1fr;gap:1rem;padding:1.8rem 0;}
  .dec .con{line-height:1.5;}
}

/* ── method: the shell session (how process is presented in this system) ─── */
.term{background:var(--term);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-top:2.2rem;position:relative;}
.term .top{display:flex;align-items:center;gap:.45rem;padding:.75rem 1.1rem;
  border-bottom:1px solid var(--line);}
.term .top i{width:9px;height:9px;border-radius:999px;background:var(--dimmer);display:block;}
.term .top i:first-child{background:var(--red);}
.term .top b{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin-left:.7rem;}
.term .body{padding:1.25rem 1.3rem 1.45rem;font-family:var(--mono);font-size:.78rem;
  line-height:1.95;color:#c9ccd1;overflow-x:auto;}
.term .body div{white-space:pre;}
.term .p{color:var(--red);}
.term .o{color:#fff;}
.term .c{color:var(--dimmer);}
@media(max-width:600px){ .term .body{font-size:.68rem;} }

/* ── skills: chips ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.2rem;}
.chip{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);border:1px solid var(--line2);border-radius:999px;padding:.5rem .85rem;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);}

/* ── evidence strip ──────────────────────────────────────────────────────── */
.ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.9rem;margin-top:2.4rem;}
.ev figure{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--bg2);transition:.3s var(--ease);}
.ev figure:hover{transform:translateY(-3px);border-color:var(--red);}
/* contain, not cover: the evidence set mixes phone captures, ultra-wide plates and
   portrait plans. Letterboxing them on the panel ground reads as a contact sheet
   and never crops the thing being shown. */
.ev img{width:100%;height:100%;object-fit:contain;aspect-ratio:16/10;background:var(--bg2);
  filter:saturate(.85);}
.ev figcaption{position:absolute;left:.7rem;bottom:.7rem;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border-radius:999px;padding:.35rem .7rem;}

/* ── pager ───────────────────────────────────────────────────────────────── */
.pager{display:flex;justify-content:space-between;gap:1rem;align-items:stretch;
  padding:0 var(--padx) clamp(3rem,8vh,5rem);}
.pager a{flex:1;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;
  transition:.3s var(--ease);display:block;}
.pager a:hover{transform:translateY(-3px);border-color:var(--red);}
.pager .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.6rem;}
.pager .t{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:1.5rem;
  line-height:1;letter-spacing:.02em;}
.pager a.next{text-align:right;}
@media(max-width:640px){ .pager{flex-direction:column;} .pager a.next{text-align:left;} }

/* ── index (work.html) ───────────────────────────────────────────────────── */
.ihero{padding:9rem var(--padx) 0;position:relative;}
.ihero .mark{top:56%;opacity:.05;}
.ihero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,8.5vw,6.6rem);line-height:.88;letter-spacing:.01em;}
.ihero h1 .hl{color:var(--red);}
.ihero .lead{margin-top:1.6rem;}
.band{padding:clamp(3.4rem,8vh,5.5rem) var(--padx) 0;}
.band .bh{display:flex;align-items:baseline;gap:1rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--line);margin-bottom:2rem;}
.band .bh .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;color:var(--dimmer);}
.band .bh h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:1.6rem;
  letter-spacing:.03em;line-height:1;}
.band .bh p{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--dim);
  margin-left:auto;text-transform:lowercase;}
@media(max-width:720px){ .band .bh p{display:none;} }

.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem;}
.band .lead + .cases{margin-top:2.2rem;}
.ccard{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--bg2);transition:.3s var(--ease);display:block;min-height:19rem;
  display:flex;flex-direction:column;justify-content:flex-end;}
.ccard:hover{transform:translateY(-4px);border-color:var(--red);}
.ccard .im{position:absolute;inset:0;background-size:cover;background-position:center top;
  filter:saturate(.7);opacity:.5;transition:.4s var(--ease);}
.ccard:hover .im{opacity:.72;filter:saturate(.95);}
.ccard::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.94) 100%);}
.ccard .body{position:relative;z-index:2;padding:1.4rem 1.5rem 1.5rem;}
.ccard .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.55rem;transition:.25s var(--ease);}
.ccard:hover .k{color:var(--red-soft);}
.ccard h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:1.9rem;
  line-height:.95;letter-spacing:.02em;}
.ccard p{font-size:.88rem;line-height:1.55;color:var(--lead);margin-top:.6rem;max-width:44ch;}
.ccard .go{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-top:1rem;transition:.25s var(--ease);}
.ccard:hover .go{color:var(--red-soft);}

/* ── cta + footer ────────────────────────────────────────────────────────── */
.endcta{padding:clamp(4.5rem,11vh,7.5rem) var(--padx);border-top:1px solid var(--line);text-align:left;}
.endcta h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.92;letter-spacing:.01em;}
.endcta h2 .hl{color:var(--red);}
.ctaBtn{display:inline-block;margin-top:2rem;background:var(--red);color:#000;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  border-radius:999px;padding:1rem 1.7rem;transition:.25s var(--ease);}
.ctaBtn:hover{background:var(--red-soft);transform:translateY(-2px);}
footer{padding:2.4rem var(--padx);border-top:1px solid var(--line);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--dimmer);
  text-transform:uppercase;}

/* ── the cube motif, as stroke line-art ──────────────────────────────────── */
.mark{position:absolute;right:var(--padx);top:50%;transform:translateY(-50%);
  width:min(23vw,15rem);color:var(--text);opacity:.055;pointer-events:none;}
@media(max-width:900px){ .mark{display:none;} }

/* ── motion: one authored entrance, gated ────────────────────────────────── */
.fx{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.fx.in{opacity:1;transform:none;}
.d1{transition-delay:.07s;} .d2{transition-delay:.15s;} .d3{transition-delay:.24s;} .d4{transition-delay:.33s;}
@media(prefers-reduced-motion:reduce){
  .fx{opacity:1!important;transform:none!important;transition:none!important;}
  .hero .shot{transform:none;}
  *{scroll-behavior:auto!important;}
}