/* ============ STORYFORMA — CASE STUDIES SHARED CSS ============
   Used by /case-studies/index.html + each /case-studies/<slug>/index.html
   Pulls the design tokens from the main site so case-studies feel native, not bolted-on.
*/

:root{
  --bg:#0b0b0a;
  --bg-2:#141312;
  --bg-3:#1a1916;
  --ink:#efe7d6;
  --ink-2:#b8b0a4;
  --ink-3:#7a7468;
  --hot:#ff4a1c;
  --hot-hover:#ff6638;
  --line:rgba(239,231,214,.12);
  --tracking-mono:0.18em;
  --tracking-mono-wide:0.22em;
  --tracking-mono-loose:0.3em;
  --tracking-display:-0.025em;
  --tracking-heading:-0.015em;
  --tracking-body:-0.005em;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-out-strong:cubic-bezier(.16,.84,.3,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;}
body{line-height:1.5;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ============ NAV (top of every case-study page) ============ */
.cs-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;gap:24px;
  background:rgba(11,11,10,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.cs-nav .brand{
  display:flex;align-items:center;gap:14px;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink);
}
.cs-nav .brand b{color:var(--hot);font-weight:500;}
.cs-nav .nav-actions{display:flex;align-items:center;gap:24px;}
.cs-nav .back{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--ink-2);
  transition:color .25s var(--ease-out-strong);
}
.cs-nav .back:hover{color:var(--ink);}
.cs-nav .back::before{content:"← ";color:var(--ink-3);}
/* Book a Call — outlined nav CTA, matches homepage exactly */
.cs-nav .book{
  display:inline-flex;align-items:center;gap:12px;padding:10px 18px;
  border:1px solid var(--ink);color:var(--ink);text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:var(--tracking-mono);text-transform:uppercase;
  transition:background .2s,color .2s;
}
.cs-nav .book:hover{background:var(--ink);color:var(--bg);}
.cs-nav .book .rec{width:8px;height:8px;background:var(--hot);border-radius:50%;box-shadow:0 0 10px var(--hot);}
/* Mobile nav — drop back-link text, tighten gap, shrink brand suffix on phones */
@media (max-width:880px){
  .cs-nav{padding:14px 20px;gap:12px;}
  .cs-nav .brand{font-size:12px;letter-spacing:0.14em;}
  .cs-nav .nav-actions{gap:12px;}
  .cs-nav .back{display:none;}
  .cs-nav .book{padding:9px 14px;font-size:11px;letter-spacing:0.14em;gap:8px;}
}
@media (max-width:520px){
  .cs-nav .brand .sub{display:none;}
  .cs-nav .brand{font-size:11px;letter-spacing:0.12em;}
  .cs-nav .book{padding:8px 12px;font-size:10px;letter-spacing:0.12em;}
}

/* ============ INDEX HEAD (case studies index page) ============
   Editorial slate-style: kicker + big serif H1 + lede column.
   No fabricated stat row — only 3 cases, stats would feel padded.
*/
/* Film-grain texture — fixed full-viewport overlay, never cuts off across sections.
   SVG noise is rasterized once by the browser then blended over everything.
   `screen` blend mode + ~10% opacity reads as actual film grain on dark bg
   (only the bright pixels of the noise come through; dark pixels stay invisible). */
body.cs-index::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.cs-index .head{
  padding:96px 40px 64px;max-width:1280px;margin:0 auto;
  border-bottom:1px solid var(--line);
}
.cs-index .head .kicker{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--hot);
  padding-top:16px;border-top:1px solid var(--hot);display:inline-block;margin-bottom:24px;
}
.cs-index .head h1{
  font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(56px, 8.5vw, 108px);line-height:.94;letter-spacing:var(--tracking-display);
  margin:0;color:var(--ink);
}
.cs-index .head h1 .it{font-style:italic;}
.cs-index .head h1 .hot{color:var(--hot);font-style:italic;}
.cs-index .head h1 .muted{color:var(--ink-3);}
.cs-index .head .lede{
  margin-top:32px;max-width:680px;
  font-family:"Inter",sans-serif;font-weight:300;font-size:18px;line-height:1.55;color:var(--ink-2);
  letter-spacing:var(--tracking-body);
}
.cs-index .head .lede b{color:var(--ink);font-weight:400;}

/* ============ INDEX — FULL-WIDTH HORIZONTAL CASE ROWS ============
   Layout: left column with case# + year (mono), right card split into
   image-frame + body. Card spans full content width, not a 3-up grid. */
.cs-index .index{padding:48px 40px 96px;max-width:1280px;margin:0 auto;}

.case-row{
  padding:32px 0 36px;border-bottom:1px solid var(--line);
}
.case-row:last-child{border-bottom:none;}

.case-card{
  display:grid;grid-template-columns:1.2fr 1fr;gap:0;
  background:var(--bg-2);border:1px solid var(--line);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .35s var(--ease-out-strong), background .35s var(--ease-out-strong), transform .45s var(--ease-out-strong);
}
.case-card:hover{border-color:var(--ink-3);background:var(--bg-3);transform:translateY(-2px);}
.case-card:hover .case-frame img{filter:contrast(1.06) saturate(1) brightness(1);}
.case-card:hover .view{background:var(--hot);border-color:var(--hot);color:var(--bg);}

.case-frame{position:relative;min-height:340px;overflow:hidden;}
.case-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.08) saturate(.78) brightness(.92);
  transition:filter .5s var(--ease-out-strong);
}

.case-body{padding:28px 32px 24px;display:flex;flex-direction:column;gap:18px;}
.case-meta-top{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--ink-3);
}
.case-meta-top b{color:var(--ink);font-weight:500;}
.case-meta-top .industry .sep{color:var(--ink-3);margin:0 8px;}
.case-meta-top .status{color:var(--hot);}

.case-body h2{
  font-family:"Instrument Serif",serif;font-weight:400;font-size:48px;line-height:.98;letter-spacing:-.02em;color:var(--ink);
  margin:0;
}
.case-body h2 .it{font-style:italic;}

.case-summary{
  font-family:"Inter",sans-serif;font-weight:300;font-size:17px;line-height:1.55;color:var(--ink-2);
  letter-spacing:var(--tracking-body);margin:0;
}
.case-summary b{color:var(--ink);font-weight:400;}

/* Editorial result callout — orange "Result" mono label + serif italic stat headline */
.case-result{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:16px 0;border-top:1px dotted var(--line);border-bottom:1px dotted var(--line);
}
.case-result .res-label{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--hot);
  padding-top:6px;line-height:1.6;
}
.case-result .res-num{
  font-family:"Inter",sans-serif;font-weight:400;font-size:18px;line-height:1.5;letter-spacing:var(--tracking-body);color:var(--ink);
}
.case-result .res-num .big{font-weight:500;color:var(--hot);font-style:normal;}
.case-result .res-num .muted{
  color:var(--ink-2);font-size:14px;display:block;margin-top:6px;
  font-family:"Inter",sans-serif;font-weight:300;line-height:1.5;letter-spacing:var(--tracking-body);
}

.case-tail{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-top:auto;}
.case-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink-3);
}
.case-tags .t{padding:5px 9px;border:1px solid var(--line);}
.case-tags .t.hot{color:var(--hot);border-color:rgba(255,74,28,.4);}

.view{
  display:inline-grid;place-items:center;width:48px;height:48px;
  border:1px solid var(--ink);color:var(--ink);font-size:18px;
  transition:background .25s var(--ease-out-strong), color .25s var(--ease-out-strong), border-color .25s var(--ease-out-strong);
  flex:0 0 auto;
}

/* ============ DETAIL PAGE — HERO ============ */
.cs-detail{max-width:880px;margin:0 auto;padding:0 40px;}
.cs-detail .hero{padding:80px 0 40px;}
.cs-detail .hero .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--ink-3);margin-bottom:24px;}
.cs-detail .hero .meta .pill{padding:6px 12px;border:1px solid var(--line);color:var(--ink-2);}
.cs-detail .hero .meta .pill.hot{color:var(--hot);border-color:var(--hot);}
.cs-detail .hero h1{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(48px, 6.5vw, 84px);line-height:.96;letter-spacing:var(--tracking-display);margin:0 0 18px;}
.cs-detail .hero h1 .it{font-style:italic;color:var(--ink-2);}
.cs-detail .hero .deck{font-family:"Instrument Serif",serif;font-size:22px;line-height:1.45;color:var(--ink-2);max-width:680px;}

.cs-detail .visual{margin:32px 0 64px;}
.cs-detail .visual img{width:100%;aspect-ratio:16/9;object-fit:cover;}
/* Video variant — embedded YouTube/Wistia iframe at 16:9 */
.cs-detail .visual.video{position:relative;aspect-ratio:16/9;background:var(--bg-2);overflow:hidden;}
.cs-detail .visual.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* ============ DETAIL PAGE — BODY SECTIONS ============ */
.cs-detail .body{max-width:680px;margin:0 auto;}
.cs-detail .body section{padding:40px 0;border-top:1px solid var(--line);}
.cs-detail .body section:first-child{border-top:none;padding-top:0;}
.cs-detail .body h2{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--hot);
  margin:0 0 18px;
}
.cs-detail .body p{
  font-family:"Inter",sans-serif;font-weight:300;font-size:18px;line-height:1.65;color:var(--ink);
  margin:0 0 18px;letter-spacing:var(--tracking-body);
}
.cs-detail .body p b{color:var(--ink);font-weight:500;}
.cs-detail .body p .it{font-style:italic;color:var(--ink-2);}
.cs-detail .body p:last-child{margin-bottom:0;}

/* Numbers callout */
.cs-detail .numbers{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:24px;
  margin:32px 0 0;padding:32px;border:1px solid var(--line);background:var(--bg-2);
}
.cs-detail .numbers .stat .v{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;font-size:48px;line-height:1;color:var(--hot);letter-spacing:-0.03em;}
.cs-detail .numbers .stat .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--ink-3);margin-top:8px;}

/* ============ DETAIL PAGE — VIDEO GALLERY ============
   Portrait-format (9:16) phone reels, gallery grid, sits between body and end-CTA. */
.cs-detail .video-section{margin-top:64px;padding-top:48px;border-top:1px solid var(--line);}
.cs-detail .video-section h2{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--hot);
  margin:0 0 24px;
}
.cs-detail .video-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:18px;
}
.cs-detail .video-grid .v{
  position:relative;aspect-ratio:9/16;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;
}
/* Widescreen variant — for 16:9 source footage (e.g. brand films, lookbook reels) */
.cs-detail .video-grid .v.wide{aspect-ratio:16/9;}
.cs-detail .video-grid .v iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
@media (max-width:880px){
  .cs-detail .video-section{margin-top:48px;padding-top:32px;}
  .cs-detail .video-grid{gap:12px;}
}
@media (max-width:520px){
  .cs-detail .video-grid{grid-template-columns:1fr;}
}

/* ============ INDEX PAGE — END CTA ============ */
.cs-index .end{
  padding:96px 40px;text-align:center;border-top:1px solid var(--line);
  max-width:1280px;margin:0 auto;
}
.cs-index .end h3{
  font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(40px, 5.5vw, 64px);line-height:1.04;letter-spacing:var(--tracking-display);
  margin:0 0 32px;
}
.cs-index .end h3 .it{font-style:italic;color:var(--ink-2);}
@media (max-width:880px){
  .cs-index .end{padding:64px 20px;}
  .cs-index .end h3{font-size:34px;}
}

/* ============ DETAIL PAGE — CTA ============ */
.cs-detail .end{padding:80px 0;text-align:center;border-top:1px solid var(--line);margin-top:64px;}
.cs-detail .end h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:42px;line-height:1.05;margin:0 0 24px;}
.cs-detail .end h3 .it{font-style:italic;color:var(--ink-2);}
/* Hot orange filled CTA — matches homepage .cta exactly */
.cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 22px;background:var(--hot);color:#0b0b0a;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;font-weight:500;
  text-decoration:none;transition:transform .2s, background .2s;white-space:nowrap;line-height:1;border:none;cursor:pointer;
}
.cta:hover{transform:translateY(-2px);background:var(--hot-hover);}
.cta svg{width:16px;height:16px;}

.cs-detail .all-link{display:block;margin-top:32px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:var(--tracking-mono-wide);text-transform:uppercase;color:var(--ink-3);}
.cs-detail .all-link:hover{color:var(--ink);}

/* ============ FOOT ============ */
.cs-foot{padding:40px;border-top:1px solid var(--line);text-align:center;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:var(--tracking-mono-loose);text-transform:uppercase;color:var(--ink-3);margin-top:64px;}

/* ============ MOBILE ============ */
@media (max-width: 880px){
  .cs-index .head{padding:48px 20px 32px;}
  .cs-index .head h1{font-size:54px;}
  .cs-index .head .lede{margin-top:24px;font-size:16px;}
  .cs-index .index{padding:32px 20px 64px;}
  .case-row{padding:24px 0;}
  .case-card{grid-template-columns:1fr;}
  .case-frame{min-height:240px;}
  .case-body{padding:22px 20px 22px;gap:14px;}
  .case-body h2{font-size:32px;}
  .case-summary{font-size:15px;}
  .case-result{grid-template-columns:1fr;gap:8px;}
  .case-result .res-num{font-size:20px;}
  .case-tail{grid-template-columns:1fr;gap:14px;align-items:start;}
  .view{align-self:flex-start;}
  .cs-detail{padding:0 20px;}
  .cs-detail .hero{padding:48px 0 24px;}
  .cs-detail .hero h1{font-size:42px;}
  .cs-detail .hero .deck{font-size:18px;}
  .cs-detail .body p{font-size:16px;}
  .cs-detail .visual{margin:24px 0 40px;}
  .cs-detail .numbers{padding:20px;}
  .cs-detail .numbers .stat .v{font-size:36px;}
  .cs-detail .end h3{font-size:32px;}
}

/* ============ CUSTOM CURSOR (matches homepage) ============
   14px ink dot default → 44px hot-orange disc on interactive targets.
   Hidden on touch + reduced-motion. JS in script.js. */
@media (hover:hover) and (pointer:fine){
  body{cursor:none;}
  a, button, input, textarea, select, .cta, [data-cursor]{cursor:none;}
  .custom-cursor{
    position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .28s var(--ease-out-strong), height .28s var(--ease-out-strong), background .2s ease, opacity .28s ease;
    mix-blend-mode:difference;will-change:transform;opacity:.92;
  }
  .custom-cursor.hover{width:44px;height:44px;background:var(--hot);mix-blend-mode:normal;opacity:.82;}
  .custom-cursor.click{opacity:.55;}
  /* Smooth out magnetic CTA returns when JS clears the inline transform */
  .cta{transition:transform .35s var(--ease-out-strong), background .2s ease;}
}
@media (prefers-reduced-motion:reduce){
  body{cursor:auto !important;}
  .custom-cursor{display:none !important;}
}