/* case-studies.css — the case study hub and the two story pages.

   The hub is deliberately two cards and a headline. Everything that used to be
   body copy is either a drawn plate, a chip, a figure or a before/now pair, so
   the pages can be read at a glance and only the reader who wants the detail
   clicks through to it.

   Structure still comes from core.css (sections, hero, buttons) and content.css
   (kv rows, notes). This file holds the four components those do not have. */

/* ── 1. the two hub cards ─────────────────────────────────────────────────
   Whole-card links. No shadows, hairline borders, a small lift on hover, in
   keeping with the rest of the site. */
.cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.cs-card{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper);color:inherit;text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.cs-card:hover,.cs-card:focus-visible{border-color:var(--ink);transform:translateY(-3px)}

/* the drawn plate: one line illustration per business, in the house stroke
   idiom, which carries the card visually instead of a paragraph */
.cs-plate{position:relative;padding:24px 26px 0;border-bottom:1px solid var(--rule);background:linear-gradient(180deg,color-mix(in oklab,var(--hazard) 5%,white) 0%,var(--paper) 100%)}
.cs-plate svg{display:block;width:100%;height:auto;color:var(--ink)}
.cs-plate .cs-ac{fill:var(--hazard);stroke:none}
.cs-idx{position:absolute;top:18px;right:22px;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;color:var(--ink-mute)}

.cs-card-body{display:flex;flex-direction:column;gap:14px;flex:1;padding:26px 26px 24px}
.cs-eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hazard)}
.cs-card h3{margin:0;font-family:var(--f-display);font-size:clamp(24px,2.5vw,34px);line-height:1.06;letter-spacing:-.025em;font-weight:700}
.cs-card p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}

.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cs-chip{font-family:var(--f-mono);font-size:13px;color:var(--ink-2);border:1px solid var(--rule);padding:5px 10px}

.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--rule)}
.cs-stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1;letter-spacing:-.025em}
.cs-stat span{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--ink-mute)}

.cs-go{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding-bottom:3px;font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--hazard)}
.cs-go .arr{transition:transform .16s ease}
.cs-card:hover .cs-go .arr{transform:translateX(5px)}

/* ── 2. what they use it for ──────────────────────────────────────────────
   Six cells, an icon, a short heading and one sentence. */
.cs-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cs-feat{padding:26px 24px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cs-feat-ic{display:block;color:var(--hazard);margin-bottom:14px}
.cs-feat h4{margin:0 0 8px;font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.015em}
.cs-feat p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}

/* ── 3. the story hero ────────────────────────────────────────────────────
   Each story page repeats the plate the reader clicked on the hub, so the two
   pages are recognisably the same thing. It drops away on narrow screens: it
   is orientation, not information. */
.cs-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center}
.cs-hero-art{padding:22px 24px;border:1px solid var(--rule);background:linear-gradient(180deg,color-mix(in oklab,var(--hazard) 5%,white) 0%,var(--paper) 100%)}
.cs-hero-art svg{display:block;width:100%;height:auto;color:var(--ink)}
.cs-hero-art .cs-ac{fill:var(--hazard);stroke:none}

/* ── 4. the job, end to end ───────────────────────────────────────────────
   Six stages on one track, with the modules each stage runs on named beneath.
   This is the "how do they actually use it" answer in a single glance. */
.cs-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
/* the track is drawn per cell rather than once across the top, so a wrapped
   row on a narrower screen carries its own line and its own markers */
.cs-flow li{position:relative;padding:30px 20px 26px 0}
.cs-flow li::after{content:"";position:absolute;left:0;top:0;right:0;height:1px;background:var(--rule)}
.cs-flow li::before{content:"";position:absolute;z-index:1;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--hazard)}
.cs-flow .n{display:block;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;color:var(--ink-mute)}
.cs-flow h4{margin:8px 0 14px;font-family:var(--f-display);font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.cs-flow span.m{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sec-dark .cs-flow{border-top-color:oklch(0.32 0.01 60)}
.sec-dark .cs-flow li::before{background:var(--accent-on-dark)}
.sec-dark .cs-flow li::after{background:oklch(0.32 0.01 60)}
.sec-dark .cs-flow .n{color:oklch(0.62 0.005 60)}
.sec-dark .cs-flow span.m{color:oklch(0.80 0.005 60)}

/* ── 5. the module strip ──────────────────────────────────────────────────
   What the business switched on, grouped by what a director is trying to do,
   so thirty chips read as five short lists rather than as one wall. */
.cs-modgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cs-modgroup{padding:24px 22px 26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cs-modgroup h4{margin:0 0 16px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hazard)}
.cs-mods{display:flex;flex-wrap:wrap;gap:8px}
.cs-mod{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--rule);font-size:14.5px;color:var(--ink-2)}
.cs-mod::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--hazard)}
.sec-dark .cs-modgroups{border-top-color:oklch(0.32 0.01 60);border-left-color:oklch(0.32 0.01 60)}
.sec-dark .cs-modgroup{border-right-color:oklch(0.32 0.01 60);border-bottom-color:oklch(0.32 0.01 60)}
.sec-dark .cs-modgroup h4{color:var(--accent-on-dark)}
.sec-dark .cs-mod{border-color:oklch(0.32 0.01 60);color:oklch(0.84 0.005 60)}
.sec-dark .cs-mod::before{background:var(--accent-on-dark)}

/* ── 6. before and now ────────────────────────────────────────────────────
   The benefit as a pair with the change drawn between them, so the row can be
   read without reading it: faint on the left, arrow, solid on the right. */
.cs-ba{border-top:1px solid var(--ink)}
.cs-ba-row{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.cs-ba-c{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.cs-lbl{display:flex;align-items:center;gap:7px;padding-top:4px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.cs-lbl::before{content:"";width:7px;height:7px;border:1px solid currentColor}
.cs-ba-c.now .cs-lbl{color:var(--hazard)}
.cs-ba-c.now .cs-lbl::before{background:var(--hazard);border-color:var(--hazard)}
.cs-ba-c p{margin:0;font-size:16.5px;line-height:1.45}
.cs-ba-c.before p{color:var(--ink-mute)}
.cs-ba-c.now p{color:var(--ink);font-weight:500}
.cs-arrow{justify-self:center;font-family:var(--f-mono);font-size:22px;line-height:1;color:var(--hazard)}
.sec-dark .cs-arrow{color:var(--accent-on-dark)}

/* prose links, since the global reset strips underlines */
.prose a{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--hazard)}
.prose a:hover{background:var(--hazard);color:var(--hazard-ink)}

/* ── dark ground corrections ──────────────────────────────────────────────*/
.sec-dark .cs-ba{border-top-color:var(--paper)}
.sec-dark .cs-ba-row{border-bottom-color:oklch(0.32 0.01 60)}
.sec-dark .cs-lbl{color:oklch(0.62 0.005 60)}
.sec-dark .cs-ba-c.now .cs-lbl{color:var(--accent-on-dark)}
.sec-dark .cs-ba-c.before p{color:oklch(0.62 0.005 60)}
.sec-dark .cs-ba-c.now p{color:var(--paper)}
.sec-dark .kv{border-top-color:oklch(0.32 0.01 60)}
.sec-dark .kv-row{border-bottom-color:oklch(0.32 0.01 60)}
.sec-dark .kv-row dt{color:oklch(0.65 0.005 60)}
.sec-dark .kv-row dd{color:oklch(0.82 0.005 60)}
.sec-dark .kv-row dd b{color:var(--paper)}

/* ── responsive ───────────────────────────────────────────────────────────*/
@media (max-width:1200px){
.cs-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
.cs-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:36px}
}
@media (max-width:900px){
.cs-cards{grid-template-columns:minmax(0,1fr);gap:24px}
.cs-hero-grid{grid-template-columns:minmax(0,1fr)}
.cs-hero-art{display:none}
}
@media (max-width:720px){
.cs-feats{grid-template-columns:minmax(0,1fr)}
.cs-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-ba-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0}
.cs-arrow{justify-self:start;transform:rotate(90deg)}
.cs-stats{gap:12px}
.cs-stat b{font-size:22px}
}