/* Case study detail pages (generated by tools/build-cases.mjs from data/cases.json).
   Studio hero with a results board, run-sheet body, navy close. */

/* ---------- Hero ---------- */
.case-hero { padding-top: clamp(2rem, 1.2rem + 3vw, 4rem); }
.case-back { color: var(--on-studio-2); font-size: var(--t-small); margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.case-back svg { transform: scaleX(-1); }
.case-back:hover svg { transform: scaleX(-1) translateX(3px); }
.case-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: end; }
@media (min-width: 1040px) { .case-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); gap: var(--s-9); } }
.case-hero .case-hero__title { font-size: clamp(2.25rem, 1.15rem + 3.9vw, 4.75rem); line-height: 0.96; max-width: 17ch; }
.case-hero__chyron { margin-top: var(--s-6); }
.case-hero__chyron .chyron__title { white-space: normal; }
.case-hero__challenge { margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--studio-line); display: grid; gap: var(--s-2); max-width: 62ch; }
@media (min-width: 760px) { .case-hero__challenge { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-5); align-items: baseline; } }
.case-hero__challenge dt { color: var(--on-studio-3); }
.case-hero__challenge dd { margin: 0; color: var(--on-studio); font-size: var(--t-lead); font-weight: 560; line-height: 1.4; letter-spacing: -0.012em; }

/* The board: headline results as rundown rows of big numbers */
.case-board { background: var(--control); border: 1px solid var(--studio-line); border-radius: 4px; padding: 0 clamp(1.1rem, 0.9rem + 1vw, 1.75rem); box-shadow: var(--shadow-monitor); }
.case-board li { display: grid; gap: var(--s-1); padding-block: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); border-bottom: 1px solid var(--studio-line); max-width: none; }
.case-board li:last-child { border-bottom: 0; }
.case-board__value { font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.75rem); font-weight: 830; letter-spacing: -0.045em; line-height: 0.9; color: var(--on-studio); }
.case-board__label { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-studio-2); line-height: 1.3; }

/* ---------- Overview + situation ---------- */
.case-brief__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 960px) { .case-brief__row { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-9); align-items: baseline; } }
.case-brief__lead { color: var(--ink); max-width: 58ch; }
.case-brief__row--situation { margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-top: var(--s-6); border-top: 2px solid var(--ink); }
.case-brief__h { font-size: var(--t-h3); font-weight: 760; letter-spacing: -0.025em; line-height: 1.1; }
.case-brief__row--situation p { color: var(--ink-2); max-width: 64ch; font-size: 1.125rem; line-height: 1.65; }

/* ---------- Approach (real, ordered steps) ---------- */
.case-steps { margin-top: var(--s-7); border-top: 1px solid var(--sheet-line); counter-reset: step; }
.case-steps li { display: grid; gap: var(--s-2); padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); border-bottom: 1px solid var(--sheet-line); max-width: none; }
@media (min-width: 900px) { .case-steps li { grid-template-columns: 7rem minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-6); align-items: baseline; } }
.case-steps__n { color: var(--ink-2); }
.case-steps__title { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.case-steps li p { color: var(--ink-2); max-width: 56ch; }

/* ---------- Execution ---------- */
.case-exec__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 960px) { .case-exec__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-9); align-items: start; } .case-exec .h2 { position: sticky; top: 8rem; } }
.case-exec__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--sheet-line); font-weight: 560; line-height: 1.45; max-width: none; }
.case-exec__list li:first-child { border-top: 1px solid var(--sheet-line); }
.case-exec__list svg { width: 20px; height: 20px; margin-top: 2px; color: var(--ink); }

/* ---------- Results ---------- */
.case-results__list { margin-top: var(--s-7); border-top: 2px solid var(--ink); }
.case-result { display: grid; gap: var(--s-3); padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); border-bottom: 1px solid var(--sheet-line); max-width: none; }
@media (min-width: 860px) { .case-result { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: baseline; } .case-result--words > div { grid-column: 2; } }
.case-result__value { font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 830; letter-spacing: -0.05em; line-height: 0.88; color: var(--ink); }
.case-result__label { font-size: var(--t-h3); font-weight: 740; letter-spacing: -0.02em; line-height: 1.12; }
.case-result--words .case-result__label { font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem); font-weight: 800; letter-spacing: -0.035em; }
.case-result div > p { margin-top: var(--s-3); color: var(--ink-2); max-width: 56ch; }

/* ---------- What we learned + close ---------- */
.case-close__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 960px) { .case-close__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-9); align-items: baseline; } }
.case-close__learned { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.5; color: var(--on-studio); max-width: 56ch; }
.case-close__ask { margin-top: clamp(3.5rem, 2.5rem + 4vw, 7rem); padding-top: var(--s-7); border-top: 1px solid var(--studio-line); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 960px) { .case-close__ask { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-9); align-items: start; } }
.case-close__ask .voice { color: var(--on-studio); max-width: 16ch; }
.case-close__ask p:not(.voice) { color: var(--on-studio-2); max-width: 50ch; }
.case-close__ask .cta-group { margin-top: var(--s-5); }
.case-close__crisis { margin-top: var(--s-4); font-size: var(--t-small); }
.case-close__crisis a { color: var(--on-studio); font-weight: 650; }

.case-pager { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--studio-line); }
@media (min-width: 760px) { .case-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .case-pager__link--next { border-left: 1px solid var(--studio-line); text-align: right; justify-items: end; } }
.case-pager__link { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-5) var(--s-5) 0; text-decoration: none; border-bottom: 1px solid var(--studio-line); transition: background-color var(--d-fast); }
.case-pager__link--next { padding: var(--s-5) 0 var(--s-5) var(--s-5); }
@media (max-width: 759px) { .case-pager__link, .case-pager__link--next { padding-inline: 0; } }
.case-pager__link:hover { background: var(--studio-2); }
.case-pager__link .time { color: var(--on-studio-3); }
.case-pager__link:hover .time { color: var(--tally); }
.case-pager__title { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: 760; letter-spacing: -0.025em; line-height: 1.15; max-width: 30ch; }
.case-pager__client { color: var(--on-studio-2); font-size: var(--t-small); }