/* ===============================================================
   Case Studies — page-specific layer
   Loaded ONLY on case-studies.html, on top of css/styles.css.
   Reuses the site's tokens and motifs; adds nothing to the global
   sheet, so the frozen homepage is untouched.

   Governing principle: a designed, on-brand ARTIFACT, not a formatted
   document. Lead with the universal units — time and money. One
   oversized transformation, one instrument-like measurement scale, a
   signed spec sheet. Orange fills meaning in exactly two display spots.
=============================================================== */

.cs-page {
  /* Local, page-scoped aliases onto the global ink (no new colours). */
  --cs-ink-70: rgb(32 36 43 / 0.70);
  --cs-ink-60: rgb(32 36 43 / 0.60);
  --cs-ink-45: rgb(32 36 43 / 0.45);
  --cs-ink-30: rgb(32 36 43 / 0.30);
  /* Hairline weights: frame-weight (~18%) and a fainter rule (~15%). */
  --cs-hair: rgb(32 36 43 / 0.18);
  --cs-rule: rgb(32 36 43 / 0.15);
  --cs-axis: rgb(32 36 43 / 0.42);
  /* One reading measure for the whole document — a generous ~72
     characters per line regardless of type size, expressed in ch so
     the mechanism line (larger type) and body prose (smaller type)
     both read at the same line length instead of the same pixel width. */
  --cs-measure: 72ch;
  /* Width of the mono-label rail used to unify every labelled section
     (Working Definition's ledger rows, The Problem, What Was Built)
     under one grid: label in this rail, content beside it. */
  --cs-rail: 168px;
}

/* ---------------------------------------------------------------
   Nav — current-page state (ink only; orange is reserved).
--------------------------------------------------------------- */
.cs-page .nav-links a[aria-current="page"] { color: var(--ink); }
.cs-page .nav-links a[aria-current="page"].underline-draw::after { transform: scaleX(1); }

/* ---------------------------------------------------------------
   Document column — the article carries .container too (same
   max-width:1840 / responsive padding-inline as every homepage
   section), so this page's left edge is pixel-identical to the nav
   logo's and hero-h1's — no more floating narrow column on a wide
   canvas. Individual components below cap their own measure (prose
   in ch, instrument-like components in px), the same relationship
   hero-h1/hero-support have to .hero.container.
--------------------------------------------------------------- */
.cs-study {
  /* Matches hero-h1's own padding-top exactly, so the eyebrow/title
     start at the same vertical position the homepage headline does. */
  padding-block: clamp(48px, 7vh, 96px) clamp(72px, 13vh, 176px);
}

/* Generous void between major blocks so the page breathes like a
   confident, sparse artifact rather than a uniform stack. */
.cs-block + .cs-block { margin-top: clamp(88px, 13vh, 184px); }

/* ---------------------------------------------------------------
   Eyebrows — tiny mono uppercase, the quiet system voice.
--------------------------------------------------------------- */
.cs-eyebrow,
.cs-category {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cs-ink-45);
}

/* ---------------------------------------------------------------
   Head — Title + Dek
--------------------------------------------------------------- */
.cs-title {
  margin-top: var(--s5);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  /* No ch-cap — anchored top-left at the container's full width, same
     as the homepage's own hero-h1 at desktop widths. */
}

.cs-dek {
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--cs-ink-60);
  max-width: 62ch;
}

/* ---------------------------------------------------------------
   HERO TRANSFORMATION — the oversized centerpiece.
   Two numbers in ink, a long orange arrow between. The largest
   element on the page; fills the first screen with void.
--------------------------------------------------------------- */
.cs-hero {
  text-align: center;
  padding-block: clamp(20px, 6vh, 72px);
}

.cs-transform {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4.5vw, 64px);
  flex-wrap: nowrap;
}

.cs-tf-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.cs-tf-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(80px, 13.5vw, 188px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-tf-unit {
  margin-top: clamp(8px, 1vw, 16px);
  font-family: var(--mono);
  font-size: clamp(12px, 1.3vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cs-ink-60);
}

/* Grows to fill the space between the two numerals, so the
   transformation spans the full content width edge to edge instead of
   sitting as a small centered clump. preserveAspectRatio="none" on the
   svg (see case-studies.html) lets it stretch horizontally at a fixed
   height. */
.cs-tf-arrow {
  flex: 1 1 auto;
  min-width: 60px;
  width: auto;
  height: clamp(24px, 3.4vw, 44px);
  /* nudge onto the numerals' optical centre (they sit above their units) */
  margin-bottom: clamp(18px, 3vw, 40px);
}

.cs-hero-caption {
  margin-top: clamp(28px, 5vh, 56px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--cs-ink-60);
}

/* ---------------------------------------------------------------
   WORKING DEFINITION — a signed spec sheet (not a bordered box).
   Corner registration crop-marks + a document header + hairline
   ledger rows.
--------------------------------------------------------------- */
.cs-spec {
  position: relative;
  /* No horizontal padding: the header + rows sit on the same left edge
     as the title and all prose. Vertical padding keeps room for the
     corner crop-marks. Full width, so it matches the engine grid. */
  padding: clamp(28px, 4vw, 56px) 0;
}

/* The spec's own registration crop-marks reuse the .rf-tick motif,
   anchored to this positioned block's four corners. */
.cs-spec .rf-tick { position: absolute; }
.cs-spec .rf-tl { top: 0; left: 0; }
.cs-spec .rf-tr { top: 0; right: 0; }
.cs-spec .rf-bl { bottom: 0; left: 0; }
.cs-spec .rf-br { bottom: 0; right: 0; }

.cs-spec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--cs-hair);
}

.cs-spec-title {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.cs-spec-ref {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cs-ink-45);
  white-space: nowrap;
}

.cs-spec-sub {
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cs-ink-60);
}

.cs-spec-rows {
  margin-top: var(--s6);
  border-top: 1px solid var(--cs-hair);
}

.cs-spec-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--cs-hair);
}

.cs-spec-row dt {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cs-ink-60);
  padding-top: 3px;
}

.cs-spec-row dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

.cs-means {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.cs-means li {
  position: relative;
  padding-left: var(--s5);
}

.cs-means li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -0.05em;
  font-family: var(--mono);
  color: var(--cs-ink-45);
}

/* The signed target's ink hairline tick — ink, never orange. It rhymes
   with (and is paid off by) the orange 91% on the scale below. */
.cs-target-tick {
  white-space: nowrap;
  border-bottom: 1px solid rgb(32 36 43 / 0.55);
  padding-bottom: 1px;
}

/* ---------------------------------------------------------------
   THE RESULT — a precision measurement scale.
   Ink axis + ticks + numerals; an ink TARGET flag at 60; the
   emphasized orange DELIVERED marker at 91; an orange 60→91 span.
--------------------------------------------------------------- */
.cs-scale {
  margin-top: clamp(48px, 8vh, 104px);
}

.cs-scale-plot {
  position: relative;
  height: 176px;
}

/* Axis line */
.cs-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  height: 1px;
  background: var(--cs-axis);
}

/* The one orange fill of meaning on the scale: the 60→91 over-delivery.
   Grows left→right on the draw-in. */
.cs-axis-span {
  position: absolute;
  bottom: -1px;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
}

/* Minor ticks every 10%, hanging just below the axis. */
.cs-ticks span {
  position: absolute;
  bottom: 39px;
  width: 1px;
  height: 8px;
  background: var(--cs-ink-30);
  transform: translateX(-50%);
}

/* Numerals under the labelled gridlines. */
.cs-nums span {
  position: absolute;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cs-ink-45);
}

/* Markers rise from the axis; label above the stem. */
.cs-mk {
  position: absolute;
  bottom: 46px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cs-mk-stem { display: block; }

/* TARGET (ink) — a modest flag, low. */
.cs-mk--target .cs-mk-label {
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cs-ink-60);
  white-space: nowrap;
}
.cs-mk--target .cs-mk-stem {
  width: 1px;
  height: 22px;
  background: rgb(32 36 43 / 0.55);
}

/* DELIVERED (orange) — the emphasized needle + display label, high. */
.cs-mk--delivered { z-index: 2; }
.cs-mk--delivered .cs-mk-label {
  margin-bottom: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--accent);
}
.cs-mk-kicker {
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.cs-mk-val {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.cs-mk--delivered .cs-mk-stem {
  width: 2px;
  height: 52px;
  background: var(--accent);
  transform-origin: bottom center;
}

/* Draw-in: armed hides the orange story; .is-drawn plays it once — the
   span sweeps 60→91, then the needle plants and the label fades up.
   Visible by default (unarmed), so it never goes missing. */
.cs-scale--armed .cs-axis-span { transform: scaleX(0); }
.cs-scale--armed .cs-mk--delivered { opacity: 0; }
.cs-scale--armed .cs-mk--delivered .cs-mk-stem { transform: scaleY(0); }

.cs-scale--armed.is-drawn .cs-axis-span {
  transform: scaleX(1);
  transition: transform 340ms var(--ease-out-strong);
}
.cs-scale--armed.is-drawn .cs-mk--delivered {
  opacity: 1;
  transition: opacity 240ms var(--ease-out-strong) 150ms;
}
.cs-scale--armed.is-drawn .cs-mk--delivered .cs-mk-stem {
  transform: scaleY(1);
  transition: transform 280ms var(--ease-out-strong) 130ms;
}

.cs-result-line {
  margin-top: clamp(40px, 6vh, 72px);
  margin-left: calc(var(--cs-rail) + var(--s5));
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.7;
  max-width: var(--cs-measure);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   TRUST LINE — mirrors the homepage's own .trust-line exactly
   (same idea, same content role): centered, on the homepage's 60ch
   measure, so the two read as one system rather than two treatments.
--------------------------------------------------------------- */
.cs-trust {
  font-family: var(--serif);
  font-size: clamp(23px, 2.8vw, 32px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Prose (The problem / What was built) — the label-rail grid: the
   mono eyebrow sits in a fixed left rail, the body prose in the main
   column beside it, the two together spanning the full content width
   (the same relationship Working Definition's dt/dd rows use below).
--------------------------------------------------------------- */
/* Content column is bounded to the reading measure (not 1fr) — in a
   wide container 1fr let the grid track run far past the capped text,
   reading as a narrow column with the right half dead. Bounding the
   track itself means rail + content together size to what's actually
   filled, and the block sits left-flush at the same edge the hero
   title and the full-width figures below start at. */
.cs-prose {
  display: grid;
  grid-template-columns: var(--cs-rail) minmax(0, var(--cs-measure));
  column-gap: var(--s5);
}

.cs-prose .cs-eyebrow {
  padding-top: 3px;
}

.cs-body {
  margin-top: 0;
  font-family: var(--serif);
  /* Matches the homepage's own body size/line-height exactly. */
  font-size: 18px;
  line-height: 1.6;
  max-width: var(--cs-measure);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   The mechanism — one line, where the money lives; hairline-ruled
   full width, indented to the same content-column edge every other
   labelled section's prose starts at.
--------------------------------------------------------------- */
.cs-mechanism-block {
  border-top: 1px solid var(--cs-rule);
  border-bottom: 1px solid var(--cs-rule);
}

.cs-mechanism {
  padding-block: clamp(36px, 6vh, 64px);
  margin-left: calc(var(--cs-rail) + var(--s5));
  font-family: var(--serif);
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: var(--cs-measure);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Engine strip — reusable component, dense mono, hairline grid.
--------------------------------------------------------------- */
.cs-engine-caption--top {
  margin: 0 0 var(--s5);
}

.cs-engine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cs-hair);
  border: 1px solid var(--cs-hair);
}

.cs-stat {
  background: var(--canvas);
  padding: var(--s5) var(--s5) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 128px;
}

.cs-stat-num {
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cs-stat-desc {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cs-ink-60);
}

.cs-engine-caption {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cs-ink-45);
}

@media (max-width: 899px) { .cs-engine { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) {
  .cs-engine { grid-template-columns: 1fr; }
  .cs-stat { min-height: 0; }
}

/* ---------------------------------------------------------------
   Close — the existing bracket-CTA, given room and centred.
--------------------------------------------------------------- */
.cs-close {
  padding-top: clamp(24px, 5vh, 56px);
  text-align: center;
}

.cs-close .bracket-cta { font-size: 15px; padding: var(--s3) 20px; }
.cs-close .bracket-cta::before,
.cs-close .bracket-cta::after { width: 9px; height: 9px; }
.cs-close .bracket-cta::before { top: 5px; left: 2px; }
.cs-close .bracket-cta::after  { bottom: 5px; right: 2px; }

/* ---------------------------------------------------------------
   Motion baseline — one-way brighten. Elements are visible by
   default; JS only *arms* below-the-fold ones, then flips them to
   .is-revealed once, on entry. No-JS / reduced-motion / missed
   observer => full ink. Nothing here can leave content hidden.
--------------------------------------------------------------- */
.cs-reveal-armed {
  opacity: var(--scrub-floor, 0.22);
  transform: translateY(10px);
}

.cs-reveal-armed.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-out-strong),
              transform 600ms var(--ease-out-strong);
}

@media (prefers-reduced-motion: reduce) {
  .cs-reveal-armed { opacity: 1 !important; transform: none !important; }
  .cs-scale--armed .cs-axis-span { transform: none !important; }
  .cs-scale--armed .cs-mk--delivered { opacity: 1 !important; }
  .cs-scale--armed .cs-mk--delivered .cs-mk-stem { transform: none !important; }
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */

/* Hero transformation stacks; the arrow turns to point down. */
@media (max-width: 639px) {
  .cs-transform { flex-direction: column; gap: clamp(10px, 3vw, 20px); }
  .cs-tf-arrow { flex: 0 0 auto; transform: rotate(90deg); width: 52px; height: 12px; margin-bottom: 0; }
  .cs-tf-num { font-size: clamp(72px, 22vw, 120px); }
}

/* Working Definition rows reflow to stacked label / value <640px. */
@media (max-width: 639px) {
  .cs-spec-row { grid-template-columns: 1fr; gap: var(--s3); }
  .cs-spec-row dt { padding-top: 0; }
  .cs-spec-head { flex-direction: column; gap: var(--s2); }
  /* Drop the spec's own crop-marks on the narrowest screens. */
  .cs-spec .rf-tick { display: none; }
}

/* The label-rail grid (The Problem / What Was Built) and the rail-
   indented standalone lines (the mechanism, the result line) collapse
   to a single column with no left offset — a 168px rail has no room
   on a phone. */
@media (max-width: 639px) {
  .cs-prose { grid-template-columns: 1fr; }
  .cs-prose .cs-eyebrow { padding-top: 0; }
  .cs-body { margin-top: var(--s3); }
  .cs-mechanism,
  .cs-result-line {
    margin-left: 0;
  }
}

/* The scale gets a touch more height on small screens so the tall
   orange label clears the ticks. */
@media (max-width: 559px) {
  .cs-scale-plot { height: 168px; }
  .cs-mk-val { font-size: 34px; }
}