/* ==========================================================================
   Forma Consulting - Case Studies (page-specific)
   Loads AFTER styles.css and only adds; never redefines the system.
   cs- = case-studies namespace.
   ========================================================================== */

/* ---------- Hero ---------- */
.cs-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: end;
}
.cs-hero-copy .page-sub { margin-bottom: 0; max-width: 56ch; }
.cs-honesty { border-left: 1px solid var(--hairline-dark); padding-left: 22px; }
.cs-honesty p { margin-top: 16px; font-size: 0.8438rem; line-height: 1.6; color: var(--paper-ink); }

/* ---------- Case sections ---------- */
.cs-case { background: var(--offwhite); padding: clamp(104px, 12vw, 180px) 0; }
.cs-case + .cs-case { border-top: 1px solid var(--hairline-light); }
.cs-case-dark { background: var(--navy-deep); color: var(--paper-ink); border-top: 0 !important; position: relative; overflow: hidden; }
.cs-case-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 82% 12%, rgba(20, 51, 82, 0.5) 0%, rgba(20, 51, 82, 0) 60%);
}
.cs-case-dark .shell { position: relative; }
.cs-case-dark .sec-title { color: var(--offwhite); }

/* ---------- Case 01: the dossier ---------- */
.cs-case-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(36px, 5vw, 88px); align-items: start;
}
.cs-spec { position: sticky; top: 100px; }
.cs-spec .stamp { margin: 4px 0 6px; }
.cs-spec dl { margin: 20px 0 24px; border-top: 1px solid var(--hairline-light); }
.cs-spec dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline-light); }
.cs-spec dt {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 4px;
}
.cs-spec dd { font-size: 0.9rem; font-weight: 600; color: var(--navy); line-height: 1.5; }

.cs-body header .sec-title { margin-bottom: clamp(28px, 3.5vw, 40px); max-width: 22ch; }

.cs-block { padding: clamp(28px, 3.4vw, 42px) 0; border-top: 1px solid var(--hairline-light); }
.cs-block-label {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.cs-block-label::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: var(--teal); flex: none; }
.cs-block > p { color: var(--ink-soft); max-width: 60ch; margin-bottom: 22px; }

.cs-before { max-width: 560px; margin-bottom: 26px; border-top: 2px solid var(--ink); }
.cs-before .edx-name { font-weight: 700; font-variant-numeric: tabular-nums; }

.cs-timebar { border-top: 1px solid var(--hairline-light); padding-top: 16px; max-width: 560px; }
.cs-timebar figcaption {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 14px;
}
.cs-timebar-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 6px 0; }
.cs-timebar-row span { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.cs-timebar-row b { font-size: 0.8438rem; font-weight: 700; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.cs-bar { height: 9px; background: rgba(14, 42, 71, 0.06); border: 1px solid var(--hairline-light); overflow: hidden; }
.cs-bar i { display: block; height: 100%; width: 0; transition: width 1.1s var(--ease) 0.2s; }
.cs-bar-before { background: rgba(14, 42, 71, 0.28); }
.cs-bar-after { background: var(--teal); transition-delay: 0.5s; }
.rv-in .cs-bar-before, html.no-js .cs-bar-before { width: 92%; }
.rv-in .cs-bar-after, html.no-js .cs-bar-after { width: 3.5%; min-width: 6px; }

.cs-system { border-top: 1px solid var(--hairline-light); padding-top: 18px; margin-bottom: 28px; }
.cs-system-agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.cs-sys-agent {
  display: flex; align-items: flex-start; gap: 10px;
  border-left: 1px solid var(--hairline-light); padding-left: 13px;
}
.cs-sys-agent .mascot-sm { flex: none; margin-top: 3px; }
.cs-sys-agent b { display: block; font-size: 0.875rem; font-weight: 700; }
.cs-sys-agent span { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.45; display: block; }
.cs-system-base {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  border-top: 2px solid var(--teal); padding-top: 12px;
}
.cs-system-base span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.cs-system-base i { font-style: normal; font-size: 0.78rem; color: var(--ink-soft); }

/* Mini rail timeline inside case 01 */
.cs-timeline { position: relative; padding-left: 30px; }
.cs-timeline::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px;
  background: var(--hairline-light);
}
.cs-phase { position: relative; padding-bottom: 22px; }
.cs-phase:last-child { padding-bottom: 0; }
.cs-phase::before {
  content: ""; position: absolute; left: -30px; top: 10px;
  width: 12px; height: 2px; border-radius: 2px; background: var(--gold);
}
.cs-phase-day {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 3px;
}
.cs-phase h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 3px; }
.cs-phase div > p { font-size: 0.92rem; color: var(--ink-soft); max-width: 52ch; }

.cs-ledger { margin-bottom: 24px; }
.cs-method {
  font-size: 0.8125rem; color: var(--ink-soft); max-width: 74ch; line-height: 1.65;
  border-left: 2px solid var(--gold); padding-left: 16px;
}

/* ---------- Cases 02 + 03: alternating editorial ---------- */
.cs-alt-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 88px); align-items: center;
}
.cs-alt-flip .cs-alt-text { order: 2; }
.cs-alt-flip .cs-alt-surface { order: 1; justify-self: start; }
.cs-alt-surface { justify-self: end; width: min(100%, 420px); }

.cs-alt-text .stamp { margin-bottom: 18px; }
.cs-alt-text .sec-title { margin: 10px 0 20px; max-width: 20ch; }
.cs-alt-text > p { max-width: 56ch; margin-bottom: 16px; }
.cs-case-dark .cs-alt-text > p { color: var(--paper-ink); }
.cs-case-dark .cs-alt-text b { color: var(--white); }
.cs-case:not(.cs-case-dark) .cs-alt-text > p { color: var(--ink-soft); }
.cs-case:not(.cs-case-dark) .cs-alt-text b { color: var(--navy); }

.cs-points { margin-top: 8px; }
.cs-points li {
  position: relative;
  padding: 11px 0 11px 24px; border-top: 1px solid var(--hairline-dark);
  font-size: 0.95rem; color: var(--offwhite);
}
.cs-points li::before {
  content: ""; position: absolute; left: 2px; top: 1.5em;
  width: 12px; height: 2px; border-radius: 2px; background: var(--teal);
}
.cs-points-light li { border-top-color: var(--hairline-light); color: var(--navy); }

/* Vignette headers (both cases) */
.cs-feed-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 12px;
}
.cs-feed-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.cs-case-dark .cs-feed-title { color: var(--offwhite); }
.cs-feed-meta { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); text-align: right; }
.cs-feed-meta-light { color: var(--ink-soft); }
.cs-feed-main { min-width: 0; flex: 1; }
.cs-feed-main b { display: block; font-size: 0.9rem; line-height: 1.4; }
.cs-feed-main i { display: block; font-style: normal; font-size: 0.78rem; color: var(--paper-dim); }
.cs-feed .anno-t { min-width: 60px; }
.cs-feed-note { margin-top: 14px; }

/* Staggered feed entrance, driven by the shared reveal state */
html.js .cs-feed .anno-row { opacity: 0; transform: translateX(-8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
html.js .rv-in.cs-alt-surface .cs-feed .anno-row { opacity: 1; transform: none; }
html.js .rv-in.cs-alt-surface .cs-feed .anno-row:nth-child(2) { transition-delay: 0.2s; }
html.js .rv-in.cs-alt-surface .cs-feed .anno-row:nth-child(3) { transition-delay: 0.4s; }
html.js .rv-in.cs-alt-surface .cs-feed .anno-row:nth-child(4) { transition-delay: 0.6s; }

/* Monday report vignette (case 03) */
.cs-report-nums { display: flex; gap: clamp(18px, 3vw, 34px); padding: 2px 0 18px; }
.cs-report-nums p { display: grid; gap: 2px; }
.cs-report-nums b {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums;
}
.cs-report-nums b.cs-up { color: var(--teal); }
.cs-report-nums span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Case 04: reserved for the first real client ---------- */
.cs-next { background: var(--offwhite); padding: 0 0 clamp(96px, 11vw, 160px); }
.cs-next-band {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
  background: var(--white);
  border-radius: 24px;
  padding: clamp(36px, 5vw, 64px);
  box-shadow: 0 24px 54px -26px rgba(14, 42, 71, 0.28);
}
.cs-next-band::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(14, 42, 71, 0.06);
  pointer-events: none;
}
.cs-next-copy .stamp { margin-bottom: 14px; }
.cs-next-copy .sec-title { margin: 4px 0 16px; }
.cs-next-copy > p:last-child { color: var(--ink-soft); max-width: 52ch; }
.cs-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: var(--white); border-radius: 12px;
  border: 1px solid var(--hairline-light);
  box-shadow: 0 10px 22px -14px rgba(14, 42, 71, 0.3);
  margin-bottom: 14px;
}
.cs-logo-chip img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.cs-next-slot { border-left: 1px solid var(--hairline-light); padding-left: clamp(20px, 3vw, 44px); }
.cs-next-slot-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px;
}
.cs-slot-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: baseline;
  padding: 13px 0 15px; border-bottom: 1px solid var(--hairline-light);
}
.cs-slot-row span { font-size: 0.9rem; color: var(--ink-soft); }
.cs-slot-row b {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-press);
}
.cs-slot-meter { grid-column: 1 / -1; position: relative; display: block; height: 3px; background: rgba(14, 42, 71, 0.07); overflow: hidden; }
html.motion-ok .cs-slot-meter::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -35%;
  width: 35%; background: linear-gradient(90deg, rgba(201, 169, 110, 0), rgba(201, 169, 110, 0.85), rgba(201, 169, 110, 0));
  animation: cs-measure 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.cs-slot-row:nth-child(3) .cs-slot-meter::after { animation-delay: 0.5s; }
.cs-slot-row:nth-child(4) .cs-slot-meter::after { animation-delay: 1s; }
/* Hub (case-studies) slot rows: floor the label + let long values wrap so labels never crush */
.cs-next-slot .cs-slot-row { grid-template-columns: minmax(88px, 0.8fr) minmax(0, 1.3fr); }
.cs-next-slot .cs-slot-row b { white-space: normal; }
@keyframes cs-measure { 0% { left: -35%; } 100% { left: 100%; } }

/* ---------- Bridge to the ops analysis (uses the shared .summon plate) ---------- */
.cs-bridge { background: var(--offwhite); padding: 0 0 clamp(104px, 12vw, 176px); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .cs-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .cs-honesty { max-width: 520px; }
  .cs-case-grid { grid-template-columns: 1fr; }
  .cs-spec { position: static; max-width: 460px; }
}

@media (max-width: 860px) {
  .cs-next-band { grid-template-columns: 1fr; gap: 30px; }
  .cs-next-slot { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline-light); padding-top: 20px; }
  .cs-alt-grid { grid-template-columns: 1fr; }
  .cs-alt-flip .cs-alt-text { order: 1; }
  .cs-alt-flip .cs-alt-surface { order: 2; }
  .cs-alt-surface { justify-self: start; }
  .cs-system-agents { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cs-timebar-row { grid-template-columns: 48px minmax(0, 1fr) 56px; gap: 8px; }
  .cs-feed .anno-t { min-width: 50px; }
  .cs-feed-head { flex-direction: column; gap: 2px; }
  .cs-feed-meta { text-align: left; }
}

/* Phone: metric rows stack, the label takes the top line and the value sits
   under it at full width. Feed rows follow the shared stacked anno-row grid. */
@media (max-width: 600px) {
  .cs-slot-row { grid-template-columns: 1fr; gap: 5px; padding: 13px 0 15px; }
  .cs-feed-main { grid-row: 2; grid-column: 1 / -1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cs-bar-before { width: 92% !important; transition: none !important; }
  .cs-bar-after { width: 3.5% !important; min-width: 6px; transition: none !important; }
  html.js .cs-feed .anno-row { opacity: 1; transform: none; }
  .cs-slot-meter::after { display: none !important; }
}

/* ---------- Round 7: client builds lead the page ---------- */
/* .cs-live opens the page right after the dark hero, so it carries its own top padding */
.cs-live { padding-top: clamp(84px, 10vw, 150px); }
/* Round 8: the live cards answer the hand. A quiet lift on `translate` (its
   own channel, so the reveal's transform is untouched), the shadow deepens,
   the gold edge presses. Keyboard focus inside the card earns the same read.
   The transition list restates the reveal's own opacity/transform timing so
   arrival stays exactly as designed. */
html.js .cs-next-band.rv {
  transition:
    opacity 0.85s var(--ease) var(--d, 0s), transform 0.85s var(--ease) var(--d, 0s),
    translate 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
html.no-js .cs-next-band { transition: translate 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.cs-next-band:hover, .cs-next-band:focus-within {
  translate: 0 -4px;
  box-shadow: 0 32px 64px -24px rgba(14, 42, 71, 0.34);
}
.cs-live .cs-next-band + .cs-next-band { margin-top: clamp(28px, 4vw, 52px); }
/* Measured rows: real numbers read as numbers, not as placeholder tags */
.cs-slot-done b {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
/* Transition header between the client builds and the walkthroughs */
.cs-divide { background: var(--offwhite); padding: clamp(16px, 2vw, 36px) 0 0; }
.cs-divide .sec-head { margin-bottom: 0; }
.cs-divide + .cs-case { padding-top: clamp(56px, 7vw, 96px); }

/* Round 8: close the dead band under the dark clinic walkthrough */
.cs-case-dark { padding-bottom: clamp(72px, 8.5vw, 124px); }
.cs-case-dark + .cs-case { padding-top: clamp(72px, 8.5vw, 124px); }