/* ============================================================
   case-study.css — the case-study page.
   Loaded after base.css + resources.css, which supply the tokens,
   .wrap/.pad/.paper/.lead/.rv/.btn and the .guide-hero shell this
   page reuses. Only what a case study needs beyond a guide landing
   lives here: a seven-step motion (resources.css tops out at five),
   the pull-quote, the preconditions checklist and the proof note.
   ============================================================ */

/* ---------- hero: no cover shot, so no 400px column reserved for one.
     resources.css sizes .guide-grid for a guide landing page (copy + the
     PDF cover). A case study has no artifact to show, so the copy takes
     the full measure and the headline gets room to be a sentence. ---------- */
.cs-hero .guide-grid{grid-template-columns:1fr;padding-bottom:104px}
.cs-hero .guide-copy h1{max-width:21ch;font-size:clamp(34px,4.6vw,58px)}
.cs-hero .guide-copy .lead{max-width:64ch}
@media(max-width:900px){.cs-hero .guide-grid{padding-bottom:72px}}

/* ---------- hero meta strip: the facts an owner scans first ---------- */
.cs-meta{
  display:flex;flex-wrap:wrap;gap:0 44px;margin-top:34px;
  border-top:1px solid rgba(248,249,247,.16);padding-top:22px;
}
.cs-meta div{display:flex;flex-direction:column;gap:5px}
.cs-meta dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);
}
.cs-meta dd{font-size:15.5px;font-weight:500;color:var(--paper)}

/* ---------- the motion: seven steps, numbered, two rows ---------- */
.cs-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;
  border-top:1px solid var(--light);
}
.cs-step{
  padding:30px 26px 32px 0;border-right:1px solid var(--light);
  border-bottom:1px solid var(--light);
}
.cs-steps .cs-step:nth-child(4n){border-right:0;padding-right:0}
.cs-steps .cs-step:nth-last-child(-n+3){border-bottom:0}
.cs-step .sn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-ink);margin-bottom:13px;display:block;
}
.cs-step h3{font-size:18px;line-height:1.22;margin-bottom:9px}
.cs-step p{font-size:14.5px;color:var(--muted);line-height:1.5}
/* step 8 is the one the whole page is really about */
.cs-step.key{padding-left:24px;margin-left:-1px;border-left:2px solid var(--green)}

@media(max-width:900px){
  .cs-steps{grid-template-columns:repeat(2,1fr)}
  .cs-steps .cs-step{border-right:1px solid var(--light);border-bottom:1px solid var(--light);padding:26px 22px 24px 0}
  .cs-steps .cs-step:nth-child(2n){border-right:0;padding-right:0}
  .cs-steps .cs-step:nth-last-child(-n+1){border-bottom:0}
}
@media(max-width:560px){
  .cs-steps{grid-template-columns:1fr}
  .cs-steps .cs-step{border-right:0;padding:24px 0 22px}
  .cs-steps .cs-step:nth-last-child(-n+1){border-bottom:0}
  .cs-step.key{padding-left:20px}
}

/* ---------- pull quote — one per page, or it stops being a pull ---------- */
.cs-quote{
  margin:64px 0 0;padding:0 0 0 32px;border-left:2px solid var(--green);
  max-width:60ch;
}
.cs-quote p{
  font-size:clamp(20px,2.3vw,27px);line-height:1.34;font-weight:500;color:var(--navy);
  letter-spacing:-.01em;
}
.cs-quote cite{
  display:block;margin-top:18px;font-style:normal;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-ink);
}
@media(max-width:560px){.cs-quote{padding-left:20px;margin-top:44px}}

/* ---------- outcomes: what we can say, stated plainly ---------- */
.cs-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;
  border-top:1px solid var(--light)}
.cs-outcome{padding:30px 30px 32px 0;border-right:1px solid var(--light)}
.cs-outcomes .cs-outcome:last-child{border-right:0;padding-right:0}
.cs-outcome h3{font-size:17px;line-height:1.25;margin-bottom:9px}
.cs-outcome p{font-size:14.5px;color:var(--muted);line-height:1.5}
@media(max-width:820px){
  .cs-outcomes{grid-template-columns:1fr}
  .cs-outcome{border-right:0;border-bottom:1px solid var(--light);padding:24px 0 22px}
  .cs-outcomes .cs-outcome:last-child{border-bottom:0}
}

/* ---------- the proof note. Small, honest, not a disclaimer band.
     It says the numbers are being confirmed from the client's own
     system before we print them. That is a feature of how we work,
     so it reads as a note, not an apology. ---------- */
.cs-proof{
  margin-top:44px;padding:20px 24px;border:1px solid var(--light);border-radius:2px;
  background:var(--white);max-width:64ch;
}
.cs-proof p{font-size:14px;line-height:1.55;color:var(--muted)}
.cs-proof strong{color:var(--navy);font-weight:600}

/* ---------- preconditions: the qualifying checklist ---------- */
.cs-checks{margin-top:44px;display:flex;flex-direction:column;gap:0;max-width:74ch}
.cs-check{
  display:grid;grid-template-columns:26px 1fr;gap:18px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--light);
}
.cs-checks .cs-check:last-child{border-bottom:0}
.cs-check .cs-tick{
  font-family:var(--mono);font-size:12px;color:var(--green-ink);padding-top:3px;
}
.cs-check h3{font-size:17px;margin-bottom:6px;line-height:1.25}
.cs-check p{font-size:15px;color:var(--muted);line-height:1.5}

/* ---------- the legal note. Genuinely useful, so it is styled as
     content rather than fine print. ---------- */
.cs-legal{margin-top:56px;padding:26px 28px;border-left:2px solid var(--navy);
  background:var(--white);max-width:70ch}
.cs-legal p.cs-legal-k{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-ink);margin-bottom:10px;
}
.cs-legal p{font-size:15px;line-height:1.55;color:var(--muted)}
.cs-legal p + p{margin-top:10px}

/* ============================================================
   NAVY SURFACES. .pad without .paper is the navy band, and the
   grids above are written for paper: --muted body copy and
   --light rules both fail on navy (2.1:1 and invisible). These
   are the same components on the dark surface, not new ones.
   ============================================================ */
.pad:not(.paper) .cs-steps,
.pad:not(.paper) .cs-step,
.pad:not(.paper) .cs-outcomes,
.pad:not(.paper) .cs-outcome{border-color:rgba(248,249,247,.18)}
.pad:not(.paper) .cs-step p,
.pad:not(.paper) .cs-outcome p{color:var(--slate)}
.pad:not(.paper) .cs-step .sn{color:var(--green-on-navy)}
.pad:not(.paper) .cs-step.key{border-left-color:var(--green)}
.pad:not(.paper) .cs-quote p{color:var(--paper)}
.pad:not(.paper) .cs-quote cite{color:var(--slate)}
.pad:not(.paper) .cs-check{border-bottom-color:rgba(248,249,247,.18)}
.pad:not(.paper) .cs-check p{color:var(--slate)}
.pad:not(.paper) .cs-check .cs-tick{color:var(--green-on-navy)}

/* ---------- closing CTA. resources.css stacks .next-actions because
     there it lives in a 300px sidebar column; here it spans the full
     measure, where stacked buttons stretch to 1200px and stop reading
     as buttons. And .next-note's --slate-ink is the paper-side muted,
     which is 2.4:1 on navy. ---------- */
.cs-cta .next-actions{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:34px}
.cs-cta .next-actions .btn{flex:0 0 auto}
.cs-cta .next-note{
  color:var(--slate);letter-spacing:.03em;font-size:12.5px;margin-top:20px;max-width:60ch;
}
.cs-cta .lead{max-width:64ch}
@media(max-width:560px){
  .cs-cta .next-actions{flex-direction:column}
  .cs-cta .next-actions .btn{width:100%}
}

/* ============================================================
   THE STAT ROW. Deliberately counts and zeros, never a dollar
   figure: everything here is provable without the client's
   report, so the hero can hit hard while the revenue number is
   still held. A fifth tile is cut and commented in the source
   for the day that figure clears.
   ============================================================ */
.cs-stats{
  display:flex;flex-wrap:wrap;gap:0 56px;margin-top:38px;
  border-top:1px solid rgba(248,249,247,.18);
  border-bottom:1px solid rgba(248,249,247,.18);
  padding:26px 0;
}
.cs-stats div{display:flex;flex-direction:column;gap:4px}
.cs-stat-n{
  font-size:clamp(34px,4vw,48px);line-height:1;font-weight:500;letter-spacing:-.03em;
  color:var(--paper);
}
.cs-stats .key .cs-stat-n{color:var(--green-on-navy)}
.cs-stats dt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);
}
@media(max-width:760px){
  .cs-stats{gap:26px 40px}
  .cs-stat-n{font-size:32px}
}

/* ---------- authorship list: what our partner actually did.
     Numbered rules rather than bullets — it reads as a record,
     not as a brag. ---------- */
.cs-did{margin-top:44px;max-width:76ch;counter-reset:did}
.cs-did p{
  counter-increment:did;position:relative;padding:16px 0 16px 52px;
  border-bottom:1px solid rgba(248,249,247,.18);
  font-size:17px;line-height:1.5;color:var(--paper);
}
.cs-did p:last-child{border-bottom:0}
.cs-did p::before{
  content:counter(did,decimal-leading-zero);position:absolute;left:0;top:19px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--green-on-navy);
}
.paper .cs-did p{color:var(--navy);border-bottom-color:var(--light)}
.paper .cs-did p::before{color:var(--green-ink)}
@media(max-width:560px){.cs-did p{padding-left:40px;font-size:16px}}