/* =====================================================================
   case.css — the case-study vocabulary, shared by the five cases.
   Loaded AFTER base.css. Owns only what is specific to a case page:
   the hero, the stepped rail, metrics, and the tail navigation.
   Tokens, nav, closing and footer come from base.css.
   ===================================================================== */

/* Back-link — a secondary button, not a pill */
a.backlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;letter-spacing:.005em;
  color:var(--ink);background:transparent;border:1.5px solid var(--ink);
  white-space:nowrap;padding:14px 22px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
a.backlink .a{display:inline-block;transition:transform .15s}
a.backlink:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px var(--ink-4);border-color:var(--ink-3);color:var(--ink)}
a.backlink:hover .a{transform:translateX(-3px)}

/* =====================================================================
   HERO — eyebrow row → h1 → rule → standfirst → hero image
   ===================================================================== */
.case-hero{padding:48px 0 44px;background:var(--accent)}
.case-hero .meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;gap:24px}
.case-hero .meta .where{
  font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
}
.case-hero h1{
  font-family:var(--sans);font-weight:700;font-size:var(--t-page);
  line-height:.92;letter-spacing:-.025em;color:var(--ink);max-width:18ch;text-wrap:balance;
}
.case-hero h1 + .rule-thick{margin-top:24px}
.case-hero .body{
  margin-top:36px;display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);
  gap:clamp(40px, 6vw, 110px);align-items:start;
}
@media(max-width:760px){.case-hero .body{grid-template-columns:1fr}}

/* Hero image band — a photograph, so it crops */
.case-band{
  position:relative;width:100%;aspect-ratio:16 / 9;margin-top:0;
  background-color:var(--paper-2);border:1px solid var(--hairline);overflow:hidden;
}
.case-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.case-band .label{display:none}

/* =====================================================================
   STEPPED NARRATIVE — sticky rail left, measured prose right
   ===================================================================== */
.cs-step{padding:56px 0;border-top:1px solid var(--hairline);position:relative}
.cs-step.tint{background:var(--paper-2)}
.cs-grid{
  display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);
  gap:clamp(30px,5.5vw,104px);align-items:start;
}
.cs-rail{position:sticky;top:78px;align-self:start;border-top:3px solid var(--ink);padding-top:15px}
.cs-name{
  display:block;font-family:var(--sans);font-weight:700;font-size:var(--t-sub);
  line-height:1.04;letter-spacing:-.02em;color:var(--ink);max-width:14ch;text-wrap:balance;
}
.cs-content{padding-top:4px}
.cs-content > p{
  font-family:var(--body);font-size:var(--t-read);line-height:1.7;
  color:var(--ink-2);max-width:var(--measure-read);text-wrap:pretty;
}
.cs-content > p + p{margin-top:20px}
.cs-content strong{color:var(--ink);font-weight:600}
.cs-content em{font-style:italic}
.cs-content a:not(.btn){border-bottom:1px solid var(--ink-4);transition:border-color .15s}
.cs-content a:not(.btn):hover{border-bottom-color:var(--ink);color:inherit}

/* The pulled line — one per step at most. Selector has to outrank
   `.cs-content > p`, which is declared above it in this same file. */
.cs-content > p.cs-pull,
.cs-content .cs-pull{
  margin:34px 0 6px;padding:26px 0 0;border-top:1px solid var(--ink);
  font-family:var(--mono);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(20px,1.8vw,24px);line-height:1.35;color:var(--ink);max-width:var(--measure-pull);
}

/* Definition list inside a step */
.cs-content .cop-defs{
  list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;
  max-width:var(--measure-read);border-top:1px solid var(--hairline);
}
.cs-content .cop-defs li{
  padding:16px 0;border-bottom:1px solid var(--hairline);
  font-family:var(--body);font-size:var(--t-list);line-height:1.6;color:var(--ink-2);
}
.cs-content .cop-defs li em{
  display:inline-block;min-width:8.5em;font-family:var(--mono);font-style:normal;
  font-size:.78em;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}

/* Documents keep their edges; captions sit below in the label voice */
.cs-cap{
  margin-top:12px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:var(--ink-3);max-width:54ch;
}
.cop-figure{margin-top:24px;max-width:340px}
.cop-figure img{display:block;width:100%;height:auto;border:1px solid var(--hairline);background:#fff}
.cop-figure .cs-cap{margin-top:14px}
@media(max-width:520px){.cop-figure{max-width:100%}}

/* =====================================================================
   METRICS
   ===================================================================== */
.metric-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:8px;
}
.metric-cell{background:var(--paper);padding:26px 22px}
.cs-step.tint .metric-cell{background:var(--paper-2)}
.metric-num{
  font-family:var(--mono);font-weight:400;font-size:clamp(28px,3.4vw,44px);
  letter-spacing:-.02em;line-height:1;color:var(--ink);white-space:nowrap;
}
.metric-cap{
  font-family:var(--mono);font-size:10.5px;font-weight:400;line-height:1.55;
  letter-spacing:.04em;color:var(--ink-3);margin-top:12px;
}
/* The strip sits inside the measured content column, so it needs to drop to
   two-up well before the page itself gets narrow — four 90px cells turn a
   sentence-length caption into seven lines. */
@media(max-width:1100px){.metric-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.metric-strip{grid-template-columns:1fr}}

.metric-line{font-family:var(--body);font-size:var(--t-read);line-height:1.6;color:var(--ink-2);margin-top:0;max-width:var(--measure-read)}
.impact-note{margin-top:30px;font-family:var(--body);font-size:var(--t-read);line-height:1.7;color:var(--ink-2);max-width:var(--measure-read)}

/* Outcome list — paired heading + sentence */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:6px;border-top:1px solid var(--hairline)}
.split-item{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-bottom:1px solid var(--hairline)}
.split-item-head{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.005em;color:var(--ink)}
.split-item-body{font-family:var(--body);font-size:var(--t-list);line-height:1.55;color:var(--ink-2);max-width:42ch}
@media(max-width:760px){.split-2{grid-template-columns:1fr}}

/* Testimonial */
.testimonial{margin-top:32px;border-top:1px solid var(--ink);padding-top:32px;max-width:60ch}
.testimonial blockquote{
  font-family:var(--body);font-size:clamp(19px,1.6vw,22px);line-height:1.5;
  letter-spacing:-.006em;color:var(--ink);text-wrap:pretty;
}
.testimonial .attr{
  margin-top:18px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}

@media(max-width:820px){
  .cs-grid{grid-template-columns:1fr;gap:16px}
  .cs-rail{position:static}
}

/* Subtle reveal as each step enters */
@media(prefers-reduced-motion:no-preference){
  .cs-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
  .cs-reveal.in{opacity:1;transform:none}
}

/* =====================================================================
   TAIL — prev/next and the return
   ===================================================================== */
.next-prev{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.next-prev a{padding:24px 18px;display:flex;flex-direction:column;gap:6px;transition:background .15s}
.next-prev a:first-child{border-right:1px solid var(--hairline)}
.next-prev a:hover{background:rgba(15,14,11,.02);color:inherit}
.next-prev a:last-child{text-align:right;align-items:flex-end}
.next-prev .dir{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.next-prev .t{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.008em;color:var(--ink);line-height:1.2}
@media(max-width:600px){
  .next-prev{grid-template-columns:1fr}
  .next-prev a:first-child{border-right:0;border-bottom:1px solid var(--hairline)}
  .next-prev a:last-child{text-align:left;align-items:flex-start}
}

.back-bottom{padding:34px 0 8px}
.back-bottom a:not(.btn){
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-weight:700;font-size:var(--t-sub);
  letter-spacing:-.02em;color:var(--ink);transition:gap .15s;
}
.back-bottom a .a{display:inline-block;transition:transform .15s}
.back-bottom a:not(.btn):hover{gap:18px;color:var(--ink)}
.back-bottom a:hover .a{transform:translateX(-4px)}
.back-bottom .sub{
  margin-top:10px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.back-all{margin-top:40px;text-align:center}

/* =====================================================================
   CAROUSEL
   ===================================================================== */
.carousel{margin:30px 0 6px;max-width:440px}
.carousel .frame{position:relative;width:100%;aspect-ratio:4 / 3;background:#000;border:1px solid var(--hairline);overflow:hidden}
.carousel .slides{display:flex;gap:10px;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.carousel .slide{flex:0 0 70%;height:100%;margin:0}
.carousel .slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.carousel .nav{
  position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1;cursor:pointer;padding:0;
  transition:background .15s,color .15s;z-index:2;
}
.carousel .nav:hover{background:var(--ink);color:var(--paper)}
.carousel .nav.prev{left:12px}
.carousel .nav.next{right:12px}
.carousel .bar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:13px}
.carousel .cap{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.5;max-width:40ch}
.carousel .dots{display:flex;gap:7px;flex:none;padding-top:3px}
.carousel .dot{width:7px;height:7px;background:var(--ink-4);border:none;padding:0;cursor:pointer;transition:background .15s,transform .15s}
.carousel .dot.active{background:var(--ink);transform:scale(1.18)}
@media(max-width:520px){.carousel{max-width:100%}}

/* Image-fit utilities on .case-band / .cs-content figures */
.cs-steps{counter-reset:cs}
.case-band.is-filled{background:#000}
.case-band.is-contain{background:#fff}
.case-band.is-contain img{object-fit:contain}
.case-band.is-wide{aspect-ratio:21 / 9}
.case-visual{
  position:relative;width:100%;aspect-ratio:16 / 9;margin:0 0 20px;
  background-color:var(--paper-2);border:1px solid var(--hairline);overflow:hidden;
}
.case-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.case-visual.is-filled .label,.case-visual .label{display:none}
.cs-content figure img.is-contain{object-fit:contain;background:#fff}