/* ═══════════════════════════════════════════════════════════
   casestudy.css — the 4 case studies. Extends site.css.

   A dossier, not a service page: one ink header carrying the
   "Case Study" eyebrow and the client's name, a photo plate
   straddling the fold, then three acts — challenge on white,
   approach on ink as a numbered ledger, results closing on
   its own plate above the CTA.
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero ──────────────────────────────────────────────── */
.cs-hero{background:var(--ink);color:#fff;padding-top:clamp(38px,5vw,60px)}
/* The plate hangs half out of the ink band; the padding below it is what the
   white section underneath then sits against. */
.cs-hero:has(.cs-plate){padding-bottom:0}
.cs-hero__in{padding-bottom:clamp(34px,4.5vw,54px)}

.cs-eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);margin-top:26px;
}
.cs-hero h1{margin-top:14px;max-width:17ch}
.cs-hero .lede{margin-top:20px;max-width:64ch}
.cs-hero .acts{margin-top:28px}

/* ─── Photo plates ──────────────────────────────────────── */
.cs-plate{
  position:relative;overflow:hidden;border-radius:4px;
  box-shadow:0 22px 54px rgba(11,30,45,.30);
}
.cs-plate img{width:100%;aspect-ratio:16/7;object-fit:cover}
/* Half the plate overhangs the ink, so the white act below opens against it.
   The overhang is added back as padding so the first act's spine still clears it. */
.cs-hero .cs-plate{margin-bottom:calc(-1 * clamp(60px,7.5vw,124px))}
.cs-hero+.sect{padding-top:calc(var(--pad-sm) + clamp(60px,7.5vw,124px))}

.cs-plate--wide{box-shadow:0 18px 44px rgba(11,30,45,.16);margin-bottom:clamp(32px,4vw,52px)}
.cs-plate--wide img{aspect-ratio:16/6}

/* ─── An act: copy in the measure with its photo alongside ─ */
.cs-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,5vw,72px);align-items:start;
}
.cs-split__txt .copy{max-width:56ch}
.cs-split__txt .acts{margin-top:28px}
.cs-split__txt .ticks{margin-top:22px}
.cs-split__fig{border-radius:4px;overflow:hidden}
.cs-split__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ─── The closing act ───────────────────────────────────── */
.cs-close .copy{max-width:66ch}
.cs-close .ticks{margin-top:24px}
.cs-close .acts{margin-top:32px}

.cs-approach .acts{margin-top:34px}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width:860px){
  .cs-split{grid-template-columns:1fr}
  .cs-split__fig{position:static;order:-1}
  .cs-split__fig img{aspect-ratio:16/10}
  .cs-plate img{aspect-ratio:16/9}
  .cs-plate--wide img{aspect-ratio:16/9}
}
@media (max-width:560px){
  .approach-step{grid-template-columns:1fr;gap:8px}
  .approach-step__n{padding-top:0}
}