/* ==========================================================================
   Case studies under /work/ (CASE_STUDIES in build_pages.py): Stafford and Esco Tool.
   Started as the Stafford sheet (v2, October 4, 2026), built from the review draft
   Shelley approved, and shared from October 5, 2026 so every case study reads the same:
   jump menu, data cards, numbered changes, metrics table, closing CTA. The "Case study"
   label sits under the h1 in Plex, not mono above it. The hero, stats, quote, compare
   table and checks are the service-page blocks. Stafford-only pieces (the lockup, the
   heatmap shots, the phones, the logo row, the configurator) stay here because they
   are small; a study's own extras go in assets/css/work/<name>.css.
   ========================================================================== */

  /* ---------- Shared text pieces ---------- */

  .cs-lead { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
  .cs-note { margin-top: 20px; color: var(--muted); font-size: 0.9375rem; max-width: 74ch; }
  .cs-closing { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--ink); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 64ch; }

  /* ---------- 1. Hero: text beside the 50th anniversary lockup ---------- */

  .cs-hero .svc-hero__inner { align-items: center; }
  .cs-kicker { margin-top: 16px; font-weight: 600; color: var(--blue); }
  .cs-tags { list-style: none; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
  .cs-tags li { padding: 4px 10px; border: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-2); }
  .cs-lockup { margin: 0; padding: clamp(20px, 2.5vw, 32px); background: #fff; border: 1px solid var(--line); }
  .cs-lockup img { display: block; width: 100%; height: auto; }
  .cs-lockup figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }

  /* ---------- 2. Testimonial on the wash, right under the hero ---------- */

  .cs-quote-top { padding: clamp(48px, 6vw, 80px) 0; }
  .cs-quote-top .svc-quote { margin-top: 0; }

  /* The six results on the blue band under the hero: three across, two rows. */
  .cs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }

  /* The pull quote runs a size up from the shared .svc-quote. */
  .cs-pull blockquote p { font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.4; max-width: 52ch; }

  /* ---------- Jump menu ---------- */
  /* A thin text bar fixed under the 72px site header (73px with its hairline). Hidden
     over the hero; the script adds .is-shown past it and marks the current link. */

  .cs-jump { --jump-h: 48px; position: fixed; top: 73px; left: 0; right: 0; z-index: 45; height: var(--jump-h); background: rgba(252, 252, 252, 0.96); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s; }
  .cs-jump.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s; }
  /* Without the script the bar never shows, so the page reads as it would without it. */
  .cs-jump .wrap { height: 100%; }
  .cs-jump__list { list-style: none; display: flex; gap: 28px; height: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cs-jump__list::-webkit-scrollbar { display: none; }
  .cs-jump__list li { flex: none; display: flex; }
  .cs-jump__list a { position: relative; display: flex; align-items: center; font-size: 0.9375rem; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease); }
  .cs-jump__list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
  .cs-jump__list a:hover,
  .cs-jump__list a[aria-current] { color: var(--ink); }
  .cs-jump__list a[aria-current]::after { transform: none; }
  .cs-jump__list a:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

  /* Anchors land below both bars: the 73px header and the 48px jump menu. A section
     stops right under them and its own top padding gives the air. A row inside a
     section (#channels, #systems, #demand) gets 24px of its own. */
  body [id] { scroll-margin-top: calc(73px + 48px); }
  body .cs-group[id] { scroll-margin-top: calc(73px + 48px + 24px); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  /* ---------- 3. Approach: three labelled rows of cards ---------- */

  .cs-group { margin-top: clamp(40px, 5vw, 64px); }
  .cs-group__label { display: flex; align-items: center; gap: 14px; font-size: 1rem; font-weight: 600; color: var(--blue); }
  .cs-group__label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
  .cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
  .cs-card { padding: 28px; background: var(--wash); }
  .cs-card__head { display: flex; align-items: center; gap: 12px; }
  .cs-card__head .icon { font-size: 32px; color: var(--blue); }
  .cs-card__head h4 { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.15; letter-spacing: -0.02em; }
  .cs-card__body { margin-top: 20px; }
  .cs-card__body div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
  .cs-card__body dt,
  .cs-hp-change__body h4 { font-family: var(--f-mono); font-size: var(--data); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .cs-card__body div:last-child dt,
  .cs-hp-change__body div:last-child h4 { color: var(--blue); }
  .cs-card__body dd,
  .cs-hp-change__body p { margin: 8px 0 0; line-height: 1.6; color: var(--ink-2); }
  .cs-card__body div:last-child dd,
  .cs-hp-change__body div:last-child p { color: var(--ink); font-weight: 600; }

  /* ---------- 4. The heatmap story, then the metrics ---------- */

  .cs-hp-evidence { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 56px); align-items: start; }
  .cs-shot { margin: 0; }
  .cs-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, 0 100%); }
  .cs-shot figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }
  .cs-shot figcaption strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

  .cs-hp-changes { list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; counter-reset: hp; }
  .cs-hp-change { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px clamp(28px, 4vw, 64px); padding: 28px 0 32px; border-top: 1px solid var(--rule); }
  .cs-hp-change:first-child { border-top: 1px solid var(--ink); }
  .cs-hp-change h3 { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.2; letter-spacing: -0.02em; display: flex; gap: 14px; align-items: baseline; }
  .cs-hp-change h3::before { counter-increment: hp; content: '0' counter(hp); font-family: var(--f-mono); font-size: var(--data); font-weight: 500; color: var(--blue); letter-spacing: 0.04em; }
  .cs-hp-change__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

  .cs-hp-mobile { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; gap: clamp(20px, 4vw, 48px); margin-top: clamp(48px, 6vw, 72px); }
  .cs-hp-phone { margin: 0; }
  .cs-hp-phone img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
  .cs-hp-phone figcaption { margin-top: 12px; text-align: center; font-family: var(--f-mono); font-size: var(--data); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .cs-hp-phone:last-child figcaption { color: var(--blue); }
  .cs-hp-mobile-cap { margin-top: 16px; text-align: center; font-size: 0.9375rem; color: var(--muted); }

  .cs-metrics-block { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ink); }
  .cs-subtitle { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.06; letter-spacing: -0.025em; max-width: 22ch; }

  /* ---------- 6. Brief, concept, final ---------- */

  .cs-logo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 56px); align-items: stretch; }
  .cs-logo-step { margin: 0; display: flex; flex-direction: column; }
  .cs-logo-step__img { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--wash); min-height: 260px; clip-path: polygon(0 0, calc(100% - var(--notch-sm)) 0, 100% var(--notch-sm), 100% 100%, 0 100%); }
  .cs-logo-step__img img { max-width: 100%; max-height: 320px; width: auto; height: auto; display: block; }
  .cs-logo-step figcaption { margin-top: 14px; border-top: 1px solid var(--ink); padding-top: 12px; }
  .cs-logo-step figcaption strong { display: block; font-weight: 600; }
  .cs-logo-step figcaption span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }

  /* ---------- 4, continued. Per-visit metrics with before and after bars ---------- */

  .cs-metrics { width: 100%; margin-top: clamp(32px, 4vw, 48px); border-collapse: collapse; }
  .cs-metrics th { text-align: left; font-family: var(--f-mono); font-size: var(--data); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0 16px 14px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
  .cs-metrics th:nth-child(3)::before,
  .cs-metrics th:nth-child(4)::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; background: var(--muted); }
  .cs-metrics th:nth-child(4) { color: var(--blue); }
  .cs-metrics th:nth-child(4)::before { background: var(--blue); }
  .cs-metrics td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
  .cs-metrics td.num { font-family: var(--f-mono); font-size: 0.9375rem; white-space: nowrap; color: var(--muted); }
  .cs-metrics td.num + td.num { color: var(--blue); font-weight: 500; }
  .cs-metrics td.chg { font-family: var(--f-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: 1.35rem; color: var(--blue); white-space: nowrap; letter-spacing: -0.02em; }
  .cs-bars { width: 34%; }
  .cs-bar { position: relative; height: 12px; background: var(--wash); margin: 4px 0; }
  .cs-bar span { position: absolute; inset: 0 auto 0 0; background: var(--muted); transform-origin: left; transition: transform 1.2s var(--ease-expo) 0.2s; }
  .cs-bar--after span { background: var(--blue); }
  .js .cs-metrics:not(.is-in) .cs-bar span { transform: scaleX(0); }

  /* Group rows: a metrics table drawn from several tools (Esco) gets one heading row per
     tool and window, so no comparison mixes sources. */
  .cs-metrics__group th { padding: 28px 16px 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink); white-space: normal; }
  .cs-metrics__group:first-child th { padding-top: 12px; }
  .cs-metrics__group th::before { display: none; }

  /* A numbered change with one column of body, not the data and changed pair. */
  .cs-hp-change__body--one { grid-template-columns: minmax(0, 1fr); }
  .cs-hp-change__body--one > p { margin-top: 0; color: var(--ink-2); max-width: 64ch; }

  /* ---------- 5. Configurator walk-through ---------- */

  .cs-config { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 56px); align-items: start; }
  .cs-config__fig { margin: 0; }
  .cs-config__stage { position: relative; aspect-ratio: 1000 / 754; background: #fff; border: 1px solid var(--line); overflow: hidden; }
  .cs-config__stage img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s var(--ease); }
  .cs-config__stage img.is-on { opacity: 1; }
  .cs-config__fig figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }
  .cs-config__steps { list-style: none; border-top: 1px solid var(--ink); }
  .cs-config__steps li { border-bottom: 1px solid var(--rule); }
  .cs-config__steps button { appearance: none; background: none; border: 0; font: inherit; color: inherit; text-align: left; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; width: 100%; padding: 14px 0; cursor: pointer; position: relative; }
  .cs-config__steps button::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--blue); }
  .cs-config__steps button[aria-current]::after { width: 100%; }
  .cs-config.is-auto .cs-config__steps button[aria-current]::after { transition: width var(--dur, 2.2s) linear; }
  .cs-config__steps button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
  .cs-config__n { font-family: var(--f-mono); font-size: var(--data); font-weight: 500; color: var(--muted); padding-top: 2px; }
  .cs-config__steps strong { display: block; font-weight: 600; color: var(--muted); }
  .cs-config__steps span span { display: block; margin-top: 2px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
  .cs-config__steps button[aria-current] .cs-config__n { color: var(--blue); }
  .cs-config__steps button[aria-current] strong,
  .cs-config__steps button:hover strong { color: var(--ink); }
  .cs-config__check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 24px; color: var(--ink-2); line-height: 1.5; }
  .cs-config__check .icon { font-size: 22px; color: var(--blue); margin-top: 1px; }
  .cs-config__more { margin-top: 24px; }

  /* ---------- 8. Closing CTA: the blue band, as on /work/ ---------- */

  .work-cta { text-align: center; }
  .work-cta__inner { display: flex; flex-direction: column; align-items: center; }
  .work-cta .svc-title { max-width: 18ch; }
  .work-cta__text { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--on-blue-muted); max-width: 56ch; }
  .work-cta .svc-actions { justify-content: center; margin-top: 40px; }

  /* ---------- Motion off ---------- */

  @media (prefers-reduced-motion: reduce) {
    .cs-config__stage img, .cs-bar span { transition: none; }
  }

  /* ---------- Narrow screens ---------- */

  @media (max-width: 960px) {
    .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-logo-row { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 860px) {
    .cs-config,
    .cs-hp-evidence,
    .cs-hp-change { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 720px) {
    .cs-hp-change__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cs-cards { grid-template-columns: minmax(0, 1fr); }
    .cs-card { padding: 24px 20px; }
    .cs-jump__list { gap: 22px; }
    .cs-bars { display: none; }
    .cs-metrics td, .cs-metrics th { padding-right: 10px; }
    .cs-metrics td.chg { font-size: 1.15rem; }
  }

  @media (max-width: 480px) {
    .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .cs-metrics th:nth-child(3)::before,
    .cs-metrics th:nth-child(4)::before { display: none; }
  }