/* Shared styles for the case study pages. Tokens, nav, sections, contact,
   footer and motion are copied from index.html; case components follow. */

/* ---------- Design tokens (ds-1) ---------- */
:root {
  --ink: #161617;
  --ink-2: #3A3A3D;
  --muted: #6E6E73;
  --line: #E5E5E2;
  --line-strong: #D6D6D3;
  --line-soft: #EDEDEA;
  --ground: #FFFFFF;
  --ground-alt: #FAFAF8;
  --brand: #E7573E;         /* site vermilion */
  --brand-text: #C2412A;
  --accent: var(--brand);   /* display, large text, on dark */
  --accent-text: var(--brand-text);   /* small text on light grounds */
  /* Case study accents (build-cases.js also reads these to recolour the visuals) */
  --case-where: #8B6CF0;      --case-where-text: #6A4BD6;   /* Allocation AI */
  --case-what: #4383F5;       --case-what-text: #2B63D6;    /* Promo Advisor */
  --case-when: #1F9A66;       --case-when-text: #17784F;    /* Smart Flighting */
  --dark: #161617;
  --dark-raise: #1C1C1E;
  --dark-text: #F5F5F3;
  --dark-muted: #A1A1A6;
  --dark-line: #2C2C2E;
  --dark-line-strong: #48484C;
  --frost: rgba(255, 255, 255, 0.9);
  --hover-tint: rgba(22, 22, 23, 0.06);

  /* contextual roles, flipped by .is-dark */
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --mark: var(--accent-text);
  --focus: var(--accent-text);
  --sec-bg: var(--ground);

  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-lead-hero: clamp(18px, 1.6vw, 22px);
  --fs-28: clamp(22px, 2.2vw, 28px);
  --fs-40: clamp(28px, 3vw, 40px);
  --fs-56: clamp(32px, 4.4vw, 56px);
  --fs-80: clamp(40px, 5.6vw, 80px);
  --fs-display: clamp(48px, 7vw, 104px);
  --fs-counter: clamp(44px, 7vw, 96px);
  --track-display: -0.045em;
  --track-head: -0.03em;
  --track-label: 0.12em;

  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --pad-x: clamp(20px, 4vw, 40px);
  --pad-y: clamp(96px, 12vw, 160px);
  --wrap: 1200px;
  --gutter: 24px;
  --nav-h: 52px;

  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-pill: 999px;

  --t-fast: 200ms;
  --t-reveal: 320ms;
  --stagger: 40ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 1440px) { :root { --wrap: 1280px; } }

/* Per-case accent. On <html> it recolours the whole page (tokens derived on :root follow);
   on a case link card it gives that card its own study's colour. */
[data-case="allocation-ai"] { --accent: var(--case-where); --accent-text: var(--case-where-text); }
[data-case="promo-advisor"] { --accent: var(--case-what); --accent-text: var(--case-what-text); }
[data-case="smart-flighting"] { --accent: var(--case-when); --accent-text: var(--case-when-text); }

/* The site header and phone menu belong to the homepage, so they keep the brand vermilion on every page. */
.site-head, .sheet { --accent: var(--brand); --accent-text: var(--brand-text); --mark: var(--brand-text); --focus: var(--brand-text); }

.is-dark {
  --fg: var(--dark-text);
  --fg-muted: var(--dark-muted);
  --rule: var(--dark-line);
  --rule-strong: var(--dark-line-strong);
  --mark: var(--accent);
  --focus: var(--accent);
  --sec-bg: var(--dark);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
strong { font-weight: 600; color: var(--fg); }
::selection { background: var(--accent); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { display: block; flex: none; width: 16px; height: 16px; }
.mono-label { font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); }
.accent { color: var(--accent); }

.skip { position: fixed; left: var(--s-16); top: -120px; z-index: 100; padding: var(--s-12) var(--s-16); border-radius: var(--r-8); background: var(--ink); color: #FFFFFF; }
.skip:focus { top: var(--s-16); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid12 > * { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .grid12 > .col-index { grid-column: 1 / 4; }
  .grid12 > .col-body { grid-column: 4 / -1; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  min-height: 48px; padding: 0 var(--s-24);
  border: 0; border-radius: var(--r-pill);
  font-size: var(--fs-16); font-weight: 500; line-height: 1; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn-solid { background: var(--ink); color: #FFFFFF; }
.is-dark .btn-solid { background: var(--dark-text); color: var(--ink); }
.btn-line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule-strong); }
@media (hover: hover) {
  .btn-solid:hover { background: var(--ink-2); }
  .is-dark .btn-solid:hover { background: #FFFFFF; }
  .btn-line:hover { box-shadow: inset 0 0 0 1px var(--fg); }
}
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-8); min-height: 44px;
  font-weight: 500; color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .link-arrow:hover { text-decoration-color: var(--fg); } }
.text-link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
@media (hover: hover) { .text-link:hover { color: var(--accent-text); text-decoration-color: currentColor; } }

/* ---------- Navigation ---------- */
.site-head { position: fixed; top: var(--s-12); left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav {
  position: relative;
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--nav-h); padding: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--frost);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
.brand { display: flex; align-items: center; gap: var(--s-8); min-height: 44px; padding: 0 0 0 var(--s-8); font-size: var(--fs-16); font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.brand-mark { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.brand-avatar { display: block; flex: none; width: 28px; border-radius: 50%; overflow: hidden; background: var(--accent); }
.brand-avatar img { filter: grayscale(1) brightness(1.3) contrast(0.88); }

.switcher { flex: none; }
.switcher > summary { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill); color: var(--ink-2); list-style: none; cursor: pointer; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary .ico { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease-out); }
.switcher[open] > summary .ico { transform: rotate(180deg); }
@media (hover: hover) { .switcher > summary:hover { color: var(--ink); background: var(--hover-tint); } }
.switcher-panel {
  position: absolute; top: calc(100% + var(--s-4)); left: 0;
  display: grid; gap: 2px; min-width: 240px; padding: var(--s-4);
  border-radius: var(--r-24); background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.switcher[open] .switcher-panel { animation: drop-in var(--t-fast) var(--ease-out); }
.switcher-item { --od-gap: var(--s-8); min-height: 44px; padding: 6px var(--s-16) 6px var(--s-8); border-radius: var(--r-16); color: var(--ink); }
.switcher-item > .od-field { --od-gap: 0; }
@media (hover: hover) { .switcher-item:hover { background: var(--hover-tint); } }
.switcher-name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.switcher-desc { font-size: var(--fs-12); line-height: 1.3; color: var(--muted); }

.nav-links { display: none; margin-left: auto; align-items: center; gap: 2px; }
.nav-links a { display: flex; align-items: center; gap: var(--s-8); min-height: 44px; padding: 0 var(--s-12); border-radius: var(--r-pill); font-size: var(--fs-14); color: var(--ink-2); white-space: nowrap; transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
@media (hover: hover) { .nav-links a:hover { color: var(--ink); background: var(--hover-tint); } }
.nav-links a[aria-current] { color: var(--ink); font-weight: 500; }
.nav-links a[aria-current]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }
.nav-cv { display: flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 var(--s-16); border-radius: var(--r-pill); font-size: var(--fs-14); font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow var(--t-fast) var(--ease-out); }
@media (hover: hover) { .nav-cv:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.nav-menu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: var(--s-4); border: 0; border-radius: 50%; background: var(--ink); color: #FFFFFF; cursor: pointer; }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cv { margin-left: var(--s-8); }
  .nav-menu { display: none; }
}
@media (max-width: 1023.98px) {
  .nav-cv { display: none; }
  .nav-menu { margin-left: auto; }
}
@media (max-width: 359.98px) { .nav .brand { font-size: var(--fs-14); } }

/* Mobile menu sheet */
.sheet {
  width: min(calc(100% - 2 * var(--pad-x)), var(--wrap)); max-width: none;
  margin: var(--s-12) auto auto; padding: 0;
  border: 0; border-radius: calc(var(--nav-h) / 2);
  background: var(--ground); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sheet::backdrop { background: rgba(22, 22, 23, 0.5); }
/* Opens by growing down out of the nav bar; closes back into it. */
.sheet[open] { animation: sheet-open var(--t-reveal) var(--ease-out); }
.sheet[open]::backdrop { animation: sheet-fade var(--t-reveal) var(--ease-out); }
.sheet[open] .sheet-inner > :not(.sheet-top) { animation: fade-in var(--t-reveal) var(--ease-out) 80ms both; }
.sheet.is-closing { animation: sheet-close var(--t-fast) cubic-bezier(0.4, 0, 1, 1) forwards; }
.sheet.is-closing::backdrop { animation: sheet-fade var(--t-fast) cubic-bezier(0.4, 0, 1, 1) reverse forwards; }
@keyframes sheet-open { from { clip-path: inset(0 0 calc(100% - var(--nav-h)) 0 round calc(var(--nav-h) / 2)); } to { clip-path: inset(0 round calc(var(--nav-h) / 2)); } }
@keyframes sheet-close { from { clip-path: inset(0 round calc(var(--nav-h) / 2)); } to { clip-path: inset(0 0 calc(100% - var(--nav-h)) 0 round calc(var(--nav-h) / 2)); opacity: 0; } }
@keyframes sheet-fade { from { opacity: 0; } }
.sheet-inner { padding: var(--s-4) var(--s-4) var(--s-24); }
.sheet-top { height: 44px; }
.sheet-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.sheet-links { margin-top: var(--s-16); padding-inline: var(--s-16); }
.sheet-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); min-height: 56px; border-top: 1px solid var(--line); font-size: var(--fs-22); font-weight: 500; letter-spacing: -0.02em; }
.sheet-links a[aria-current] .sheet-num { color: var(--accent-text); }
.sheet-links a[aria-current] .sheet-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-12); border-radius: 2px; background: var(--accent); vertical-align: 0.15em; }
.sheet-num { font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--muted); }
.sheet-foot { --od-gap: var(--s-12); margin-top: var(--s-24); padding-inline: var(--s-16); }
.sheet-foot .btn-solid { flex: 1; }

/* ---------- Sections ---------- */
main > section { scroll-margin-top: 0; }
.sec { padding-block: var(--pad-y); background: var(--sec-bg); color: var(--fg); }
.sec--alt { --sec-bg: var(--ground-alt); border-block: 1px solid var(--line-soft); }
.sec-head { row-gap: var(--s-24); padding-top: var(--s-24); border-top: 1px solid var(--rule); }
.sec-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-12); }
.sec-num { font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--mark); }
.sec-label { font-size: var(--fs-16); font-weight: 500; }
.sec-sub { font-size: var(--fs-14); color: var(--fg-muted); }
@media (min-width: 1024px) {
  .sec-index { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: var(--s-4); }
  .sec-num { margin-bottom: var(--s-8); }
}
.sec-title { font-size: var(--fs-56); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; max-width: 20ch; text-wrap: balance; }
.lead { margin-top: var(--s-24); max-width: 64ch; font-size: var(--fs-18); line-height: 1.65; color: var(--fg-muted); text-wrap: pretty; }
.rule-label { display: flex; align-items: center; gap: var(--s-16); }
.rule-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.kicker { margin-top: var(--s-96); max-width: 24ch; font-size: var(--fs-40); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.bullets { display: grid; gap: var(--s-12); }
.bullets li { position: relative; padding-left: var(--s-24); color: var(--fg-muted); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 1px; background: var(--fg); }


/* ---------- Contact and footer ---------- */
.contact-title { font-size: var(--fs-80); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); max-width: 16ch; text-wrap: balance; }
.contact-actions { --od-gap: var(--s-12); margin-top: var(--s-48); }
.contact-links { --od-gap: var(--s-4) var(--s-24); margin-top: var(--s-16); }
.copy-btn .ico-done { display: none; }
.copy-btn.is-done .ico-done { display: block; }
.copy-btn.is-done .ico-copy { display: none; }

.foot { padding-block: var(--s-16); background: var(--dark); color: var(--fg-muted); border-top: 1px solid var(--dark-line); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8) var(--s-24); font-size: var(--fs-14); }
.foot-id { --od-gap: var(--s-16); }
.foot-name { display: flex; align-items: center; gap: var(--s-8); font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.foot-links { --od-gap: 0 var(--s-24); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-muted); transition: color var(--t-fast) var(--ease-out); }
@media (hover: hover) { .foot-links a:hover { color: var(--fg); } }

/* ---------- Motion ---------- */
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }
.will-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.will-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- Case study: hero ---------- */
.case-hero { padding-block: calc(var(--s-12) + var(--nav-h) + var(--s-24)) var(--pad-y); background: var(--dark); color: var(--fg); }
.case-back { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-14); color: var(--fg-muted); transition: color var(--t-fast) var(--ease-out); }
@media (hover: hover) { .case-back:hover { color: var(--fg); } }
.case-eyebrow { display: block; margin-top: var(--s-64); color: var(--mark); }

/* Condensed case-study strip at the top of the hero */
.case-switch { display: grid; gap: var(--s-12); }
.case-switch > .case-back { justify-self: start; }
.case-tabs { display: grid; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.case-tab { --od-gap: var(--s-12); grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 48px; padding: var(--s-8) var(--s-16); border-radius: var(--r-12); box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--fg); transition: box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.case-tab-name { font-size: var(--fs-16); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
@media (hover: hover) { a.case-tab:hover { background: var(--dark-raise); box-shadow: inset 0 0 0 1px var(--fg-muted); } }
.case-tab[aria-current] { background: var(--dark-raise); box-shadow: inset 0 0 0 2px var(--fg); }
.case-tab { --mark: var(--accent); }
.case-tab .mono-label { color: var(--mark); }
.case-tab[aria-current] .mono-label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--s-8); border-radius: 1px; background: var(--accent); vertical-align: 0.1em; }
@media (min-width: 768px) {
  .case-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-tab { --od-gap: var(--s-4); grid-template-columns: none; align-items: start; padding: var(--s-12) var(--s-16); }
}
.case-title { margin-top: var(--s-16); font-size: var(--fs-80); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); }
.case-title > span { display: block; }
.case-lead { margin-top: var(--s-32); max-width: 60ch; font-size: var(--fs-lead-hero); line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; }
.case-lead strong { font-weight: 500; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24) var(--gutter); margin: var(--s-48) 0 0; padding-top: var(--s-24); border-top: 1px solid var(--rule); }
.facts > div { --od-gap: var(--s-4); }
.facts dt { font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); }
.facts dd { margin: 0; font-size: var(--fs-16); line-height: 1.45; }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Case study: product visuals ---------- */
.viz { margin: var(--s-64) 0 0; }
.viz-head { --od-gap: var(--s-8); margin-bottom: var(--s-16); }
.viz-head .mono-label { color: var(--mark); }
.viz-title { font-size: var(--fs-28); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.viz-frame { padding: clamp(8px, 1.6vw, 20px); border-radius: var(--r-16); background: var(--ground-alt); box-shadow: inset 0 0 0 1px var(--line); }
.sec--alt .viz-frame { background: var(--ground); }
.is-dark .viz-frame { background: var(--dark-raise); box-shadow: inset 0 0 0 1px var(--dark-line); }
.viz-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-12); }
.viz-scroll > * { min-width: 600px; }
.viz figcaption { margin-top: var(--s-16); max-width: 72ch; color: var(--fg-muted); text-wrap: pretty; }
.viz figcaption > span:first-child { color: var(--fg); font-weight: 500; }
/* responsive rules the source visuals relied on */
@media (max-width: 780px) {
  #v2-kpi-scenario { grid-template-columns: 1fr 1fr !important; }
  #v2-kpi-baseline { flex-direction: column !important; }
  #v2-kpi-baseline > div { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  #v2-kpi-baseline > div:last-child { border-bottom: none !important; }
}

/* ---------- Case study: impact ---------- */
.impact-num { font-size: clamp(64px, 11vw, 160px); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; color: var(--accent); white-space: nowrap; }
.impact-text { margin-top: var(--s-24); max-width: 30ch; font-size: var(--fs-28); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.impact-src { display: block; margin-top: var(--s-16); }
.impact-cards { display: grid; gap: var(--s-24) var(--gutter); margin-top: var(--s-64); }
.impact-cards > li { --od-gap: var(--s-8); padding-top: var(--s-16); border-top: 1px solid var(--rule); }
.impact-v { font-size: var(--fs-22); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.impact-d { color: var(--fg-muted); }
@media (min-width: 768px) { .impact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Case study: prose, chips, modules ---------- */
.prose { display: grid; gap: var(--s-16); max-width: 68ch; margin-top: var(--s-32); font-size: var(--fs-18); line-height: 1.65; color: var(--fg-muted); text-wrap: pretty; }
.chips { --od-gap: var(--s-8); margin-top: var(--s-32); }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-12); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--rule-strong); font-family: var(--mono); font-size: var(--fs-12); letter-spacing: 0.04em; color: var(--ink-2); }
.modules { display: grid; gap: var(--s-24) var(--gutter); margin-top: var(--s-48); }
.modules > li { padding-top: var(--s-16); border-top: 1px solid var(--rule); }
.modules .mono-label { color: var(--mark); }
.module-name { margin-top: var(--s-8); font-size: var(--fs-22); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.modules p { margin-top: var(--s-8); color: var(--fg-muted); }
@media (min-width: 768px) { .modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Case study: decisions ---------- */
.decisions { display: grid; gap: var(--s-48) var(--gutter); margin-top: var(--s-64); }
.decision { display: flex; flex-direction: column; padding-top: var(--s-24); border-top: 1px solid var(--rule); }
.decision-meta { --od-gap: var(--s-12); }
.decision-num { font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--mark); }
.decision-tag { font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); }
.decision-title { margin-top: var(--s-16); font-size: var(--fs-22); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.decision > p { margin-top: var(--s-12); color: var(--fg-muted); text-wrap: pretty; }
.tradeoff { --od-gap: var(--s-4); margin-top: var(--s-24); padding: var(--s-16); border-radius: var(--r-12); background: var(--ground-alt); color: var(--ink-2); }
.tradeoff .mono-label { color: var(--mark); }
@media (min-width: 1024px) { .decisions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Case study: lesson ---------- */
.lesson-statement { font-size: var(--fs-56); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; max-width: 22ch; text-wrap: balance; }
.lesson-follow { margin-top: var(--s-24); max-width: 52ch; font-size: var(--fs-22); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }

/* ---------- Case study: in context ---------- */
.context { display: grid; gap: var(--s-16); margin-top: var(--s-64); }
.ctx-card { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-24); border-radius: var(--r-16); background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); transition: box-shadow var(--t-fast) var(--ease-out); }
@media (hover: hover) { a.ctx-card:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.ctx-card { --mark: var(--accent-text); }
.ctx-card .mono-label { color: var(--mark); }
.ctx-name { font-size: var(--fs-28); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-head); }
.ctx-tag { font-size: var(--fs-18); }
.ctx-desc { color: var(--fg-muted); }
.ctx-foot { display: flex; align-items: center; gap: var(--s-8); margin-top: auto; padding-top: var(--s-16); font-weight: 500; }
.ctx-card.is-current { box-shadow: inset 0 0 0 2px var(--ink); }
.ctx-card.is-current .ctx-foot { font-family: var(--mono); font-size: var(--fs-12); font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-muted); }
@media (min-width: 768px) { .context { grid-template-columns: repeat(3, minmax(0, 1fr)); } }