/* case.css: the case study detail layout, ported from the case-*.html prototypes.
   Loaded only on single case_study pages, on top of site.css (which already owns the
   header, the footer curtain, the pills and the contact form).

   Everything here is scoped under .cs, the <main> wrapper, for two reasons: the
   prototype used short generic names (.wrap, .row, .meta, .rule) that would otherwise
   reach into the homepage markup, and site.css already owns a .console. The log band is
   .cslog here for that last reason; nothing binds to it in JS, so the rename is free.

   The shell, the type scale and the reveal live in doc.css, shared with the legal
   pages. This file is only what is specific to a case study. */

/* .cs also carries .doc, so it starts below the fixed header the same way. */
.cs{ padding-top:clamp(5rem,10vw,7rem); }


.cs .cs-hero{ padding-top:clamp(2.5rem,6vw,4.5rem); }
.cs .cs-hero__in{ max-width:46rem; }
.cs .cs-kick{ color:var(--maroon); margin-bottom:clamp(1.4rem,3vw,2rem); }
.cs .cs-q{ font-size:clamp(1.9rem,1.1rem + 3.4vw,3.1rem); letter-spacing:-.015em; }

.cs .meta{ margin-top:clamp(2.2rem,5vw,3.4rem); }
.cs .meta__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; padding:1rem 0; }
.cs .meta__k{ display:block; font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.16em; font-size:8.5px; color:var(--ink-faint); margin-bottom:.4rem; }
.cs .meta__v{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink); }
@media (max-width:640px){ .cs .meta__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem .8rem; } }

/* csec, not sec: site.css already owns .sec and .section */
.cs .csec{ display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1.6rem;
  padding-top:clamp(2.8rem,7vw,4rem); }
.cs .csec__label{ padding-top:.25rem; }
@media (max-width:720px){
  .cs .csec{ grid-template-columns:1fr; gap:.9rem; }
  .cs .csec__label{ padding-top:0; }
}

/* ---- before / now diptych ---- */
.cs .dip{ display:grid; grid-template-columns:minmax(0,1fr) .5px minmax(0,1fr); gap:1.4rem; }
.cs .dip__spine{ background:var(--line); }
.cs .dip__h{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:8.5px; color:var(--ink-faint); padding-bottom:.65rem; display:block; }
.cs .dip__h--now{ color:var(--maroon); }
.cs .row{ display:grid; grid-template-columns:1.1rem minmax(0,1fr); gap:.55rem;
  padding:.5rem 0; align-items:baseline; }
.cs .row__n{ font-family:var(--font-mono); font-size:9.5px; color:#B4B0A6; }
.cs .row__t{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.cs .row--on .row__t{ color:var(--ink); }
.cs .row--on .row__n{ color:var(--maroon); }
.cs .dip__note{ margin-top:1rem; font-size:12px; color:var(--ink-soft); line-height:1.6; }
@media (max-width:560px){
  .cs .dip{ grid-template-columns:1fr; gap:1.6rem; }
  .cs .dip__spine{ height:.5px; }
}

.cs .flow{ display:flex; align-items:center; padding:.4rem 0 .9rem; }
.cs .flow__end{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.cs .flow__line{ flex:1; height:.5px; background:var(--line); margin:0 .75rem; }
.cs .flow__dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; }
.cs .flow__prose{ margin-top:.9rem; }
@media (max-width:560px){
  .cs .flow__end{ white-space:normal; max-width:8.5rem; line-height:1.35; }
}

/* full-bleed ink band, contents still on the 1100px shell */
.cs .cslog{ margin-top:clamp(2.8rem,7vw,4rem); background:var(--ink);
  padding:clamp(1.6rem,4vw,2rem) 0; }
.cs .cslog__head{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.cs .cslog__dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.cs .cslog__label{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:9px; color:rgba(240,238,230,.5); }
.cs .cslog__list{ font-family:var(--font-mono); font-size:11px; line-height:2.1;
  color:rgba(240,238,230,.8); }
.cs .cslog__list li{ list-style:none; }
.cs .cslog__t{ color:var(--gold); }
@media (max-width:560px){
  .cs .cslog__list{ font-size:10px; line-height:1.95; }
}

.cs .fig{ padding:clamp(3rem,8vw,4.5rem) 0; text-align:center; }
.cs .fig__n{ font-family:var(--font-display); font-weight:400; color:var(--maroon);
  font-size:clamp(3.4rem,2rem + 6vw,5.4rem); letter-spacing:-.02em; line-height:1; }
.cs .fig__c{ margin:.9rem auto 0; max-width:22rem; line-height:1.9; }

.cs .quote{ padding:clamp(2.6rem,7vw,3.6rem) 0; }
.cs .quote__in{ max-width:38rem; margin:0 auto; text-align:center; }
.cs .quote__t{ font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(1.15rem,.9rem + 1vw,1.5rem); line-height:1.4; margin-bottom:1rem; }

/* copy still waiting on the client's sign-off */
.cs .todo{ color:#B4B0A6; font-style:italic; }