/* ===========================================================================
   case.css — the case-study surface.

   The first version of these pages was prose and HTML tables on the body
   background. RD's note was that they are "very bland", carry none of the
   imagery the PitchIQ demos are full of, and are not deployable. Both true.

   The reference is HockeyStack's case studies. What they actually do, read
   rather than assumed: the INDEX carries the visual weight -- single column,
   one full-bleed image per card, logo overlaid, headline, pull-quote,
   metadata badges -- while each article is ~85% text with one hero image,
   narrative sections (The Who / The Problem / The Results) and left-accented
   pull-quotes. No charts anywhere.

   So this borrows their structure and beats them on the one axis we can:
   they have no numbers to show and we have 13,842 decoded creatives. Every
   graphic here is generated from a verified figure.

   What it deliberately does NOT use: the demos' ad stills. Those are third
   parties' creative work pulled from the Meta Ad Library with no recorded
   usage rights, and the rival ones belong to companies we have no
   relationship with. Every pixel below is ours.

   Theme is Galvor's own, not a new one: the dark ground and bloom from
   hero.css, .gv-grad from shell.css, the glass tokens from shell.css, the
   7/12 card and bottom-gradient overlay from desk.css, --gv-h2 from base.css.

   Namespace: cs-
   =========================================================================== */

.cs{
  --cs-bg:#08060f;
  --cs-bloom:radial-gradient(1100px 620px at 78% -8%,#3a2070 0%,#1d1034 42%,#0e0a1c00 72%);
  --cs-ground:var(--cs-bloom),linear-gradient(158deg,#1a1030 0%,#120c22 38%,var(--cs-bg) 72%),var(--cs-bg);
  --cs-accent:#b48cff;
  --cs-ink:#f3f0fa;
  --cs-ink-2:#bdb3d4;
  --cs-ink-3:#8d82a8;
  --cs-line:#ffffff1f;
  --cs-ease:cubic-bezier(.16,1,.3,1);
  --cs-l-ink:#1b1626;
  --cs-l-ink-2:#4e4660;
  --cs-l-ink-3:#766f82;
  --cs-l-line:#17121f14;
}

/* ---- 1. the hero: dark, and the only place the headline is large --------- */

.cs-hero{
  position:relative;
  padding:calc(76px + clamp(44px,7vh,88px)) 5vw clamp(40px,6vh,76px);
  background:var(--cs-ground);
  color:var(--cs-ink);
  overflow:hidden;
}
/* a single hairline of light along the fold, so the dark block has an edge
   rather than just stopping */
.cs-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,#ffffff00,#ffffff3d 18%,#ffffff3d 82%,#ffffff00);
}
.cs-hero-in{max-width:1040px;margin-inline:auto;position:relative;z-index:1}

.cs-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--cs-ink-2);
  padding:7px 13px 7px 10px;border-radius:999px;
  border:1px solid var(--cs-line);background:#ffffff0f;
  transition:background .25s var(--cs-ease),color .25s var(--cs-ease);
}
.cs-back:hover{background:#ffffff1c;color:var(--cs-ink)}
.cs-back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

.cs-eyebrow{
  margin:clamp(22px,3.4vh,34px) 0 0;
  font-size:var(--gv-eyebrow,12.5px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#c4b4ee;
}
.cs-eyebrow span{color:var(--cs-accent);margin-right:8px}

.cs-h{
  margin:clamp(12px,1.8vh,18px) 0 0;
  font-size:clamp(31px,4.6vw,58px);line-height:1.04;letter-spacing:-.025em;
  font-weight:700;max-width:21ch;
}
.cs-lead{
  margin:clamp(16px,2.4vh,24px) 0 0;max-width:62ch;
  font-size:clamp(16.5px,1.32vw,19.5px);line-height:1.58;color:var(--cs-ink-2);
}
.cs-lead b{color:var(--cs-ink);font-weight:650}

/* ---- 2. the stat band: the numbers, before any prose ------------------- */

.cs-stats{
  margin:clamp(26px,4vh,40px) 0 0;
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
}
.cs-stat{
  padding:clamp(14px,1.7vw,19px) clamp(15px,1.8vw,21px);
  border-radius:15px;
  background:#ffffff14;border:1px solid #ffffff2b;
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
}
.cs-stat b{
  display:block;
  font:700 clamp(25px,2.9vw,38px)/1 ui-monospace,Menlo,monospace;
  letter-spacing:-.02em;
  background:linear-gradient(110deg,#c9a6ff,#e3a9d0,#a9c2f5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cs-stat em{
  display:block;margin-top:9px;font-style:normal;
  font-size:13.5px;line-height:1.35;font-weight:600;color:var(--cs-ink);
}
.cs-stat i{
  display:block;margin-top:4px;font-style:normal;
  font-size:12px;line-height:1.4;color:var(--cs-ink-3);
}
@media (prefers-contrast:more){
  .cs-stat b{background:none;color:#d9c6ff}
}

/* ---- 3. the figure: a graphic built from the numbers, not a photograph -- */

.cs-fig{
  margin:clamp(30px,5vh,56px) auto 0;max-width:1040px;
  padding:0 5vw;
}
.cs-fig-in{
  padding:clamp(18px,2.4vw,30px);
  border-radius:20px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--cs-l-line),0 30px 64px -40px #17121f59;
}
.cs-fig-k{
  margin:0 0 clamp(14px,1.8vh,20px);
  font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cs-l-ink-3);
}
.cs-fig-cap{
  margin:clamp(14px,1.8vh,18px) 0 0;
  font-size:13.5px;line-height:1.55;color:var(--cs-l-ink-3);
}
.cs-fig-cap b{color:var(--cs-l-ink);font-weight:650}

/* -- 3a. volume bars: the brand against its rivals -- */
.cs-bars{display:grid;gap:clamp(9px,1.2vh,13px)}
.cs-bar{display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;
  align-items:center;gap:clamp(10px,1.4vw,16px)}
.cs-bar-l{font-size:13.5px;font-weight:600;color:var(--cs-l-ink-2);white-space:nowrap}
.cs-bar-t{position:relative;height:clamp(22px,2.6vh,30px);border-radius:7px;
  background:#17121f0a;overflow:hidden}
.cs-bar-f{
  position:absolute;inset:0 auto 0 0;border-radius:7px;
  width:var(--w,0%);
  background:linear-gradient(90deg,#6d28d9,#a855f7);
  animation:cs-grow 1.1s var(--cs-ease) both;
}
.cs-bar.is-rival .cs-bar-f{background:linear-gradient(90deg,#b9adce,#d6cde4)}
.cs-bar-v{font:700 14.5px/1 ui-monospace,Menlo,monospace;color:var(--cs-l-ink);
  min-width:4.2ch;text-align:right}
@keyframes cs-grow{from{width:0}to{width:var(--w,0%)}}
@media (prefers-reduced-motion:reduce){
  .cs-bar-f{animation:none}
}

/* -- 3b. the collapse grid: every media file as one cell, the distinct ones lit -- */
.cs-grid{
  display:grid;gap:3px;
  grid-template-columns:repeat(var(--cols,32),1fr);
}
.cs-cell{aspect-ratio:1;border-radius:2px;background:#17121f14}
.cs-cell.is-on{background:linear-gradient(140deg,#7c3aed,#a855f7);
  box-shadow:0 0 0 1px #7c3aed40}
.cs-legend{
  display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,22px);
  margin:clamp(14px,1.8vh,18px) 0 0;
  font-size:13px;color:var(--cs-l-ink-2);
}
.cs-legend span{display:inline-flex;align-items:center;gap:7px}
.cs-legend i{width:11px;height:11px;border-radius:3px;background:#17121f14;flex:none}
.cs-legend span.on i{background:linear-gradient(140deg,#7c3aed,#a855f7)}

/* ---- 4. the body: light, narrow, and plainly set ----------------------- */

.cs-body{
  max-width:1040px;margin:clamp(34px,6vh,64px) auto 0;padding:0 5vw;
  color:var(--cs-l-ink-2);
}
.cs-sec{max-width:68ch}
.cs-sec+.cs-sec{margin-top:clamp(30px,5vh,52px)}
.cs-h2{
  margin:0 0 clamp(11px,1.5vh,16px);
  font-size:clamp(21px,2vw,27px);line-height:1.2;letter-spacing:-.015em;
  font-weight:700;color:var(--cs-l-ink);
}
.cs-h3{
  margin:clamp(18px,2.4vh,26px) 0 clamp(7px,1vh,10px);
  font-size:clamp(17px,1.45vw,20px);line-height:1.3;letter-spacing:-.01em;
  font-weight:650;color:var(--cs-l-ink);
}
.cs-p{margin:0 0 clamp(11px,1.4vh,15px);
  font-size:clamp(15.5px,1.22vw,17.5px);line-height:1.68}
.cs-p:last-child{margin-bottom:0}
.cs-p b{font-weight:650;color:var(--cs-l-ink)}
.cs-p a{color:#6d28d9;border-bottom:1px solid #c4b5fd}
.cs-p a:hover{border-bottom-color:#6d28d9}

.cs-l{list-style:none;margin:0;padding:0;display:grid;gap:clamp(9px,1.2vh,13px)}
.cs-l li{position:relative;padding-left:19px;
  font-size:clamp(15px,1.18vw,16.8px);line-height:1.62}
.cs-l li::before{content:"";position:absolute;left:0;top:.66em;
  width:11px;height:2px;border-radius:2px;background:var(--cs-accent)}
.cs-l b{font-weight:650;color:var(--cs-l-ink)}

/* ---- 5. the pull-quote: one sentence, the one worth remembering -------- */

.cs-quote{
  margin:clamp(28px,4.5vh,48px) 0;padding:0 0 0 clamp(18px,2.4vw,28px);
  border-left:3px solid var(--cs-accent);
  max-width:60ch;
}
.cs-quote p{
  margin:0;font-size:clamp(19px,1.95vw,27px);line-height:1.34;
  letter-spacing:-.015em;font-weight:600;color:var(--cs-l-ink);
}
.cs-quote span{
  display:block;margin-top:clamp(10px,1.4vh,14px);
  font-size:13.5px;line-height:1.5;font-weight:500;color:var(--cs-l-ink-3);
}

/* ---- 6. the limits: dark again, because it closes the page ------------- */

.cs-limits{
  margin:clamp(40px,6.5vh,76px) 0 0;padding:clamp(28px,4.5vw,46px) 5vw;
  background:var(--cs-ground);color:var(--cs-ink-2);
}
.cs-limits-in{max-width:1040px;margin-inline:auto}
.cs-limits .cs-h2{color:var(--cs-ink)}
.cs-limits .cs-p{color:var(--cs-ink-2)}
.cs-limits .cs-p b{color:var(--cs-ink)}
.cs-limits .cs-l li{color:var(--cs-ink-2)}
.cs-limits .cs-l b{color:var(--cs-ink)}
.cs-note{
  margin:clamp(18px,2.6vh,26px) 0 0;padding:clamp(14px,1.8vw,20px);
  border-radius:14px;background:#ffffff0f;border:1px solid var(--cs-line);
  font-size:14px;line-height:1.6;color:var(--cs-ink-2);
}
.cs-note b{color:var(--cs-ink);font-weight:650}

.cs-cta{
  margin:clamp(26px,4vh,40px) 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.cs-cta a{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 21px;border-radius:999px;font-size:15px;font-weight:600;
  background:#fff;color:#14101f;
  box-shadow:0 1px 2px #0000004d,0 10px 24px -10px #00000080;
  transition:transform .25s var(--cs-ease);
}
.cs-cta a:hover{transform:translateY(-1px)}
.cs-cta a.is-ghost{
  background:#ffffff0f;color:var(--cs-ink);border:1px solid var(--cs-line);box-shadow:none;
}

/* ---- 7. the index: one card per study, the graphic doing the work ------ */

.cs-idx{padding:calc(76px + clamp(34px,5vh,64px)) 5vw clamp(50px,8vh,90px)}
.cs-idx-in{max-width:1040px;margin-inline:auto}
.cs-idx-h{
  font-size:var(--gv-h2,clamp(30px,3.4vw,50px));line-height:1.06;
  letter-spacing:-.025em;font-weight:700;color:var(--cs-l-ink);max-width:20ch;
}
.cs-idx-sub{margin:clamp(13px,1.8vh,18px) 0 0;max-width:60ch;
  font-size:clamp(15.5px,1.22vw,17.5px);line-height:1.62;color:var(--cs-l-ink-2)}
.cs-idx-list{list-style:none;margin:clamp(28px,4.5vh,46px) 0 0;padding:0;
  display:grid;gap:clamp(12px,1.8vh,18px)}
.cs-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,2.6vw,34px);align-items:center;
  padding:clamp(18px,2.4vw,28px);border-radius:20px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--cs-l-line),0 22px 50px -38px #17121f4d;
  transition:box-shadow .3s var(--cs-ease),transform .3s var(--cs-ease);
}
.cs-card:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #17121f1f,0 30px 64px -34px #17121f66}
.cs-card-k{font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cs-l-ink-3)}
.cs-card-h{margin:9px 0 0;font-size:clamp(19px,1.75vw,24px);line-height:1.22;
  letter-spacing:-.018em;font-weight:700;color:var(--cs-l-ink)}
.cs-card-s{margin:10px 0 0;font-size:14.8px;line-height:1.56;color:var(--cs-l-ink-2)}
.cs-card-go{margin:clamp(12px,1.6vh,16px) 0 0;display:inline-flex;align-items:center;
  gap:7px;font-size:14px;font-weight:600;color:#6d28d9}
.cs-card-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.cs-card:hover .cs-card-go svg{transform:translateX(2px)}
.cs-card-viz{padding:clamp(13px,1.7vw,18px);border-radius:14px;background:#faf9fc;
  box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.cs-card-viz .cs-bar-l{font-size:11.5px;min-width:0}
.cs-card-viz .cs-bar{grid-template-columns:minmax(60px,auto) 1fr auto;gap:9px}
.cs-card-viz .cs-bar-t{height:15px;border-radius:5px}
.cs-card-viz .cs-bar-f{border-radius:5px}
.cs-card-viz .cs-bar-v{font-size:12px;min-width:3.6ch}

@media (max-width:760px){
  .cs-card{grid-template-columns:1fr}
  .cs-card-viz{order:-1}
  .cs-h{max-width:none}
}

/* ---- 8. the creative wall ----------------------------------------------
   The brands' own published advertising, as pulled from the public Meta Ad
   Library. Treatment is the Desk section's: a vertical card, a hairline, and
   a bottom gradient for any DOM sitting on top -- the one recipe on this site
   that has worked for real creative.

   Fixed aspect box with object-fit:cover, because a library mixes 9:16,
   1:1 and 1.91:1 and a wall of mixed ratios reads as a mistake. The ratio
   below matches the portrait exports, so those are not cropped at all.
   ----------------------------------------------------------------------- */

.cs-wall{
  display:grid;gap:clamp(8px,1.1vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(118px,13vw,176px),1fr));
}
.cs-shot{
  margin:0;position:relative;aspect-ratio:248/440;border-radius:13px;overflow:hidden;
  background:#ece8f2;
  box-shadow:inset 0 0 0 1px #17121f1f,0 12px 28px -22px #17121f;
}
.cs-shot img,.cs-shot video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#ece8f2;
}
.cs-shot figcaption{
  position:absolute;z-index:2;inset:auto 0 0 0;
  padding:26px 9px 8px;
  background:linear-gradient(to top,#0a0717f2 0%,#0a0717b8 52%,#0a071700 100%);
  font:600 10.5px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;
}
/* a video in the wall says so, quietly */
.cs-shot .cs-play{
  position:absolute;z-index:3;top:9px;right:9px;
  width:22px;height:22px;border-radius:50%;
  background:#0a0717a6;border:1px solid #ffffff3d;
  display:grid;place-items:center;
}
.cs-shot .cs-play svg{width:8px;height:8px;fill:#fff}

@media (max-width:520px){
  .cs-wall{grid-template-columns:repeat(2,1fr)}
}

/* ── blog cards and covers ─────────────────────────────────────────────
   A post's cover is not a stock picture: it is three or four of the brand's
   own ad frames, standing side by side. */
.cs-idx-in{max-width:1180px}
.bl-grid{list-style:none;margin:clamp(28px,4.5vh,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.bl-grid>li{display:flex;min-width:0}
.bl-grid>li.is-lead{grid-column:1/-1}
.bl-card{display:flex;flex-direction:column;width:100%;border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px var(--cs-l-line),0 22px 50px -38px #17121f4d;
  transition:box-shadow .3s var(--cs-ease),transform .3s var(--cs-ease)}
.bl-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px #17121f1f,0 30px 64px -34px #17121f66}
.bl-card:focus-visible{outline:2px solid #6d28d9;outline-offset:3px}
.bl-card-b{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.6vw,22px)}
.bl-card-h{margin:8px 0 0;font-size:clamp(18px,1.45vw,21px);line-height:1.24;
  letter-spacing:-.018em;font-weight:700;color:var(--cs-l-ink)}
.bl-card-s{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--cs-l-ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card .cs-card-go{margin-top:auto;padding-top:14px}
.bl-cover{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
  padding:14px 14px 0;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(160deg,#1b1230,#0c0817 70%)}
.bl-cover img{width:100%;height:118%;object-fit:cover;object-position:50% 12%;
  border-radius:10px 10px 0 0;display:block;
  transition:transform .5s var(--cs-ease)}
.bl-cover img:nth-child(even){margin-top:9%}
.bl-card:hover .bl-cover img{transform:translateY(-3%)}
.is-lead .bl-card{flex-direction:row}
.is-lead .bl-cover{flex:1.15;aspect-ratio:auto;min-height:340px;gap:10px;padding:22px 22px 0}
.is-lead .bl-card-b{flex:1;justify-content:center;padding:clamp(22px,3vw,44px)}
.is-lead .bl-card-h{font-size:clamp(24px,2.5vw,36px);line-height:1.12;letter-spacing:-.025em}
.is-lead .bl-card-s{font-size:16px;-webkit-line-clamp:5;margin-top:14px}
.is-lead .cs-card-go{margin-top:20px;padding-top:0}
/* in a post's hero the same strip sits beside the headline */
.cs-hero-in.has-cover{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  column-gap:clamp(24px,4vw,56px);align-items:center;max-width:1240px}
.cs-hero-in.has-cover>*{grid-column:1}
.cs-hero-in.has-cover>.bl-cover{grid-column:2;grid-row:1/span 6;aspect-ratio:4/4.4;
  background:none;padding:0;gap:10px;overflow:visible}
.cs-hero-in.has-cover>.bl-cover img{height:100%;border-radius:14px;
  box-shadow:0 30px 60px -30px #000c}
.cs-hero-in.has-cover>.cs-stats{grid-column:1/-1}
@media (prefers-reduced-motion:reduce){.bl-card,.bl-cover img{transition:none}}
@media (max-width:980px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-lead .bl-card{flex-direction:column}
  .is-lead .bl-cover{min-height:0;aspect-ratio:16/10}
  .cs-hero-in.has-cover{display:block}
  .cs-hero-in.has-cover>.bl-cover{aspect-ratio:16/10;margin:22px 0 0}
}
@media (max-width:620px){.bl-grid{grid-template-columns:1fr}}
.cs-inl{float:right;width:clamp(150px,22%,240px);height:auto;margin:4px 0 14px 24px;
  border-radius:14px;box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.cs-sec h2,.cs-sec .ct-tw{clear:both}
@media (max-width:620px){.cs-inl{float:none;display:block;margin:0 0 14px;width:60%}}
.cs-hero-in.has-cover>.cs-back{justify-self:start}