:root{
  --bg:#0e0d0b; --bg-raised:#151311; --ink:#f4efe7; --ink-dim:#b3aa9c; --ink-faint:#6f6759;
  --line:#2a2723; --accent:#d9622b; --accent-soft:#e8b48f;
  --display:"Fraunces",Georgia,serif; --body:"Spline Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace; --term:"VT323",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
:target{scroll-margin-top:96px;}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none;
}
::selection{background:var(--accent);color:#0e0d0b;}

/* grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0);}50%{transform:translate(-2%,1%);}100%{transform:translate(1%,-1%);}}
/* scanlines — lighter than the homepage so long-form text stays crisp */
.crt-lines{position:fixed;inset:0;pointer-events:none;z-index:205;mix-blend-mode:multiply;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,0.12) 3px,rgba(0,0,0,0.12) 4px);}
.crt-vig{position:fixed;inset:0;pointer-events:none;z-index:206;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,0.5) 100%);
  box-shadow:inset 0 0 120px rgba(0,0,0,0.5),inset 0 0 50px rgba(217,98,43,0.04);}
@media(max-width:680px){ .crt-lines{opacity:.35;} body::after{opacity:.09;mix-blend-mode:normal;animation:none;} }

/* reading progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:240;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));box-shadow:0 0 12px rgba(217,98,43,.6);}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:300;transform:translate(-50%,-50%);transition:width .25s,height .25s;mix-blend-mode:difference;}
.cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--accent-soft);border-radius:50%;pointer-events:none;z-index:300;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;opacity:.5;}
.cursor.hot{width:0;height:0;}
.cursor-ring.hot{width:64px;height:64px;opacity:1;background:rgba(217,98,43,.10);}
@media(pointer:coarse){body{cursor:auto;}.cursor,.cursor-ring{display:none;}}

/* top nav (direct child of body only — must not match nested .case-nav) */
body > nav{position:fixed;top:0;left:0;right:0;z-index:230;display:flex;justify-content:space-between;align-items:center;
  padding:1.3rem clamp(1.5rem,5vw,3.5rem);background:linear-gradient(to bottom,rgba(14,13,11,.85),rgba(14,13,11,0));}
.nav-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.nav-mark{display:flex;align-items:center;}
.nav-mark svg{height:17px;width:auto;display:block;fill:var(--ink);filter:drop-shadow(0 0 10px rgba(0,0,0,.55));transition:fill .3s;}
.nav-brand:hover .nav-mark svg{fill:var(--accent-soft);}
.nav-logo{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);text-shadow:0 0 12px rgba(0,0,0,.5);transition:color .3s;}
.nav-brand:hover .nav-logo{color:var(--accent-soft);}
.nav-right{display:flex;gap:2rem;align-items:center;}
.nav-right a{color:var(--ink);text-decoration:none;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 12px rgba(0,0,0,.5);transition:color .3s;}
.nav-right a:hover,.nav-right a[aria-current="page"]{color:var(--accent-soft);}
.nav-right a.nav-cta{color:var(--accent);text-shadow:0 0 12px rgba(217,98,43,.7);animation:navGlow 2.8s ease-in-out infinite;}
.nav-right a.nav-cta:hover{color:#ffb88a;}
@keyframes navGlow{0%,100%{text-shadow:0 0 10px rgba(217,98,43,.5);}50%{text-shadow:0 0 18px rgba(217,98,43,.9);}}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:0;cursor:none;}
.nav-burger span{display:block;width:24px;height:2px;background:var(--ink);margin:0 auto;border-radius:2px;transition:transform .35s cubic-bezier(.7,0,.2,1),opacity .25s;box-shadow:0 0 8px rgba(0,0,0,.5);}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:680px){
  .nav-burger{display:flex;z-index:62;}
  .nav-right{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.6rem;
    padding:6rem clamp(1.5rem,5vw,3.5rem) 2.5rem;background:rgba(8,7,6,.97);border-bottom:1px solid var(--line);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform .4s cubic-bezier(.7,0,.2,1),opacity .3s;}
  .nav-right.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-right a{font-size:1.4rem;letter-spacing:.06em;font-family:var(--display);font-weight:600;text-transform:none;}
}

/* shared bits */
.spine{position:absolute;top:0;bottom:0;left:0;width:6px;z-index:3;opacity:.9;
  background:repeating-linear-gradient(-45deg,var(--accent) 0 5px,#0e0d0b 5px 10px);}
.corner{position:absolute;width:13px;height:13px;border:1px solid var(--accent);pointer-events:none;opacity:.8;}
.corner.tl{top:8px;left:8px;border-right:none;border-bottom:none;}
.corner.tr{top:8px;right:8px;border-left:none;border-bottom:none;}
.corner.bl{bottom:8px;left:8px;border-right:none;border-top:none;}
.corner.br{bottom:8px;right:8px;border-left:none;border-top:none;}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.7rem;text-shadow:0 0 8px rgba(217,98,43,.35);}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  body::after,.crt-vig::before{animation:none;}
}

/* ---------- hero ---------- */
.case-hero{position:relative;padding:clamp(8rem,15vh,11rem) clamp(1.5rem,5vw,3.5rem) clamp(3rem,6vw,5rem);max-width:1320px;margin:0 auto;}
.case-hero-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media(max-width:900px){.case-hero-grid{grid-template-columns:1fr;}}
.case-title{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(2.6rem,7vw,5.6rem);margin:1.4rem 0 1.6rem;color:var(--ink);
  text-shadow:0 0 24px rgba(217,98,43,.2),-2px 0 rgba(255,60,60,.26),2px 0 rgba(217,98,43,.26);}
.case-lead{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.42rem);line-height:1.5;color:var(--ink-dim);max-width:46ch;}
.case-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem;}
.case-tags .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:2px;padding:.38rem .6rem;transition:color .3s,border-color .3s;}
.case-tags .tag:hover{color:var(--accent-soft);border-color:rgba(217,98,43,.4);}
.case-meta{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:1.6rem;}
.case-meta .k{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.4rem;}
.case-meta .v{font-size:.92rem;color:var(--ink);max-width:34ch;}

/* hero signal panel (stands in for hero art) */
.case-signal{position:relative;aspect-ratio:4/5;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  background:radial-gradient(120% 120% at 70% 10%,rgba(217,98,43,.10),transparent 55%),var(--bg-raised);
  display:flex;flex-direction:column;justify-content:space-between;padding:1.4rem;isolation:isolate;}
.case-signal::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(217,98,43,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(217,98,43,.06) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(120% 90% at 60% 30%,#000 30%,transparent 80%);}
.case-signal > *{position:relative;z-index:2;}
.sig-top{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);display:flex;align-items:center;gap:.55rem;}
.sig-top .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(217,98,43,.5);animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,98,43,.5);}70%{box-shadow:0 0 0 10px rgba(217,98,43,0);}100%{box-shadow:0 0 0 0 rgba(217,98,43,0);}}
.sig-num{font-family:var(--display);font-weight:900;font-size:clamp(5rem,12vw,9rem);line-height:.8;color:transparent;-webkit-text-stroke:1.4px var(--accent);align-self:flex-start;text-shadow:0 0 40px rgba(217,98,43,.15);}
.sig-foot{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:.8rem;}
.sig-foot span:last-child{color:var(--accent-soft);}

/* divider */
.hazard-rule{height:4px;max-width:1320px;margin:0 auto;background:repeating-linear-gradient(-45deg,var(--accent) 0 6px,#0e0d0b 6px 12px);opacity:.7;}

/* ---- imagery system ---- */
.case-shot{position:relative;aspect-ratio:4/5;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#0a0908;isolation:isolate;}
.case-shot img.shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:0;transition:transform 9s ease-out;}
.case-shot:hover img.shot-img{transform:scale(1.05);}
.case-shot .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(14,13,11,.55) 0%,transparent 24% 58%,rgba(14,13,11,.82) 100%);}
.case-shot .frame{position:absolute;inset:6px;border:1px solid rgba(217,98,43,.22);z-index:2;pointer-events:none;}
.case-shot .spine,.case-shot .corner{z-index:3;}
.shot-top{position:absolute;top:1.1rem;left:1.2rem;z-index:3;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);display:flex;align-items:center;gap:.55rem;text-shadow:0 1px 6px rgba(0,0,0,.85);}
.shot-top .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(217,98,43,.5);animation:pulse 2.4s ease-out infinite;}
.shot-badge{position:absolute;top:.95rem;right:1.2rem;z-index:3;font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);text-shadow:0 1px 10px rgba(0,0,0,.95);}
.shot-badge small{font-family:var(--mono);font-weight:400;font-size:.58rem;color:var(--ink-faint);letter-spacing:.1em;vertical-align:.55em;margin-left:.1em;}
.shot-foot{position:absolute;left:1.2rem;right:1.2rem;bottom:1.05rem;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);text-shadow:0 1px 6px rgba(0,0,0,.85);}
.shot-foot img{display:block;height:30px;width:auto;border:1px solid rgba(244,239,231,.28);border-radius:2px;box-shadow:0 4px 14px rgba(0,0,0,.5);}
.case-shot.is-empty{background:radial-gradient(120% 90% at 50% 0%,#16130f,#0a0908);}
.case-shot.is-empty .ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:var(--ink-faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.28em;font-size:.6rem;text-align:center;padding:1rem;}
.case-shot.is-empty .ph b{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5.5vw,3.4rem);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.3px rgba(217,98,43,.5);}
.case-shot.is-empty::after,.case-fig-frame.is-empty::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);}

.client-mark{display:flex;flex-direction:column;gap:.45rem;}
.client-mark .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
.client-mark img{display:block;width:104px;height:auto;border:1px solid var(--line);border-radius:2px;transition:border-color .3s;}
.client-mark:hover img{border-color:rgba(217,98,43,.45);}

.case-fig{margin:clamp(1.4rem,3.2vw,2.4rem) 0;}
.case-fig-frame{position:relative;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#0a0908;isolation:isolate;}
/* images keep their natural aspect ratio — no forced crop */
.case-fig-frame img,.case-fig-frame video{display:block;width:100%;height:auto;z-index:0;transition:transform 9s ease-out;}
.case-fig:hover .case-fig-frame img,.case-fig:hover .case-fig-frame video{transform:scale(1.03);}
/* flat assets (tall infographics, sprite strips) don't zoom on hover */
.case-fig-frame.is-flat:hover img,.case-fig-frame.is-flat:hover video{transform:none;}
.case-fig-frame .frame{position:absolute;inset:6px;border:1px solid rgba(217,98,43,.18);z-index:2;pointer-events:none;}
.case-fig-frame .corner,.case-fig-frame .spine{z-index:3;}
/* empty placeholder has no image, so it needs an explicit shape */
.case-fig-frame.is-empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 0%,#16130f,#0a0908);}
.case-fig-frame.is-empty .ph{z-index:1;color:var(--ink-faint);font-family:var(--mono);text-transform:uppercase;letter-spacing:.28em;font-size:.58rem;}
.case-fig figcaption{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;margin-top:.9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.case-fig figcaption .lbl{color:var(--accent);display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;}
.case-fig figcaption .lbl img{height:20px;width:auto;border:1px solid var(--line);border-radius:2px;}
.case-fig figcaption .cap{color:var(--ink-dim);max-width:54ch;text-align:right;letter-spacing:.01em;text-transform:none;font-size:.82rem;line-height:1.5;}

/* multi-image rows — bundle related or small shots instead of stretching them full-width */
.case-grid{display:grid;gap:clamp(0.9rem,2vw,1.5rem);margin:clamp(1.4rem,3.2vw,2.4rem) 0;align-items:start;}
.case-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.case-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.case-grid .case-fig{margin:0;}
/* a solo portrait/tall shot shouldn't dominate the full body width */
.case-fig.narrow{max-width:600px;margin-left:auto;margin-right:auto;}
/* long vertical infographics: readable centered column rather than full bleed */
.case-fig.long{max-width:860px;margin-left:auto;margin-right:auto;}
@media(max-width:760px){.case-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.case-grid.cols-2,.case-grid.cols-3{grid-template-columns:1fr;}}
@media(max-width:640px){.case-fig figcaption{flex-direction:column;align-items:flex-start;gap:.4rem;}.case-fig figcaption .cap{text-align:left;}.client-mark img{width:88px;}}

/* ---------- body ---------- */
.case-body{max-width:1180px;margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,3.5rem) clamp(2rem,4vw,3rem);}
.beat{display:grid;grid-template-columns:210px 1fr;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(2rem,4vw,3.2rem) 0;border-top:1px solid var(--line);}
.beat:first-child{border-top:none;}
@media(max-width:820px){.beat{grid-template-columns:1fr;gap:1rem;}}
.beat-head{display:flex;align-items:baseline;gap:.8rem;}
.beat-no{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.1em;}
.beat-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
@media(min-width:821px){.beat-head{position:sticky;top:108px;align-self:start;}}
.beat-text p{font-size:1.13rem;line-height:1.72;color:var(--ink-dim);max-width:64ch;}
.beat-text p strong{color:var(--ink);font-weight:600;}

/* pullquote */
.case-quote{position:relative;margin:clamp(2.2rem,5vw,3.6rem) 0;padding:clamp(1.4rem,3vw,2rem) 0 clamp(1.4rem,3vw,2rem) clamp(1.6rem,4vw,2.6rem);}
.case-quote p{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.28;
  color:var(--accent-soft);max-width:24ch;text-shadow:0 0 30px rgba(217,98,43,.12);}

/* role box */
.case-role{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:2px;
  padding:1.3rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;background:rgba(255,255,255,.012);}
.case-role .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);}
.case-role .v{font-family:var(--mono);font-size:.92rem;color:var(--ink);letter-spacing:.02em;line-height:1.5;}

/* prev / next */
.case-nav{max-width:1320px;margin:clamp(2rem,5vw,4rem) auto 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:680px){.case-nav{grid-template-columns:1fr;}}
.case-nav-card{position:relative;overflow:hidden;text-decoration:none;color:var(--ink);
  padding:clamp(1.8rem,4vw,2.8rem) clamp(1.5rem,5vw,3.5rem);display:flex;flex-direction:column;gap:.6rem;
  border-bottom:1px solid var(--line);transition:padding .4s;}
.case-nav-card.next{text-align:right;align-items:flex-end;border-left:1px solid var(--line);}
@media(max-width:680px){.case-nav-card.next{text-align:left;align-items:flex-start;border-left:none;}}
.case-nav-card .pi-bg{position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:0;}
.case-nav-card:hover .pi-bg{transform:translateY(0);}
.case-nav-card > *{position:relative;z-index:1;transition:color .4s;}
.case-nav-card .dir{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);}
.case-nav-card .nm{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-.02em;line-height:1.05;}
.case-nav-card:hover .dir,.case-nav-card:hover .nm{color:#0e0d0b;}

/* footer */
footer{position:relative;z-index:10;border-top:1px solid var(--line);padding:2.4rem clamp(1.5rem,5vw,3.5rem);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-faint);}
footer a{color:var(--ink-faint);text-decoration:none;transition:color .3s;}
footer a:hover{color:var(--accent-soft);}
.fsoc{display:flex;gap:1.4rem;}