/* ============================================================
   XQUBE GLOBAL — PAGE 04 · CASE STUDIES
   Page-specific styles only. The system lives in main.css.

   This is the proof page, so the numbers lead. Each case gets a
   pinned stage: the story on the left, an instrument on the right,
   and the number-field writing that case's figure behind both.
   The Situation / The Stakes / What XQUBE Did then read out
   beneath, unhurried, as a rest.

   Everything here degrades. With no JS, with reduced motion, or on
   a small screen, every scene collapses into the flow and every
   instrument ships in its finished, fully-lit state.
   ============================================================ */

/* ---------- you are here ---------- */
.nav-links a.is-here { color: var(--text); }
.nav-links a.is-here::after { transform: scaleX(1); opacity: 0.55; }
.mobile-links a.is-here { color: var(--text); }
.mobile-links a.is-here .mono { color: var(--pink); }

/* ============================================================
   1 · THE TITLE SCENE
   ============================================================ */
.scene.cs-title { height: 200vh; }
.cs-title-block { max-width: 1080px; }
.cs-h1 {
  font-size: clamp(34px, 5.2vw, 74px);
  line-height: 1.07;
  letter-spacing: -0.028em;
  font-weight: 600;
  max-width: 19ch;
  margin: 0 auto;
  text-wrap: balance;
}
.cs-title-meta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
  margin-top: clamp(32px, 5vh, 60px);
  font-size: 10.5px; letter-spacing: 0.26em;
  color: var(--faint);
}
.cs-title-meta i {
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .js .cs-title-stage .cs-title-meta {
    opacity: var(--metaop, 0);
    transform: translateY(calc((1 - var(--metaop, 0)) * 16px));
    transition: opacity 0.12s linear;
  }
}

/* ============================================================
   2 · THE CASE STAGES
   ============================================================ */
.scene.cs-scene { height: 430vh; }
.scene.cs-scene .cs-stage {
  justify-content: center;
  padding-top: calc(var(--nav-h) + var(--s3));
  padding-bottom: var(--s4);
}
/* the number-field is atmosphere here, not a layer to read through */
.cs-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(66% 54% at 50% 52%, rgba(10, 10, 14, 0.9), rgba(10, 10, 14, 0.52) 56%, transparent 80%);
  pointer-events: none;
}
.cs-grid {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 4.4vw, 72px);
  align-items: center;
}

/* ---- the story column ---- */
.cs-index {
  display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; letter-spacing: 0.26em;
  color: var(--faint);
  margin-bottom: var(--s3);
}
.cs-index em {
  font-style: normal;
  font-size: 15px; letter-spacing: 0.1em;
  color: var(--purple-soft);
  text-shadow: 0 0 16px rgba(91, 76, 255, 0.6);
}
.cs-index i {
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--purple), transparent);
}
.cs-kicker {
  font-size: 10.5px; letter-spacing: 0.16em; line-height: 1.7;
  color: var(--faint);
  margin-bottom: var(--s2);
  max-width: 44ch;
}
.cs-h2 {
  font-size: clamp(26px, 2.9vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.022em;
  font-weight: 600;
  max-width: 19ch;
  text-wrap: balance;
}
.cs-stats { margin-top: clamp(22px, 3.2vh, 38px); max-width: 520px; }
.cs-stats .case-stat { gap: var(--s3); padding: clamp(11px, 1.5vh, 17px) 0; }
.cs-stats .case-stat dt {
  font-size: clamp(26px, 2.5vw, 36px);
  min-width: 134px;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.cs-stats .case-stat dd { font-size: 13.5px; }
.cs-stats .case-stat.on dt {
  color: #fff;
  text-shadow: 0 0 26px rgba(148, 138, 255, 0.5);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
  .js .cs-stats .case-stat {
    opacity: var(--sop, 0);
    transform: translateY(calc((1 - var(--sop, 0)) * 20px));
  }
}

/* ---- the instrument panel ---- */
.cs-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  padding: clamp(22px, 2.4vw, 30px);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.cs-panel:hover {
  border-color: rgba(148, 138, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
              0 20px 52px rgba(0, 0, 0, 0.45), 0 0 30px rgba(91, 76, 255, 0.1);
}
.cs-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
}
.cs-panel-label { color: var(--mist); white-space: nowrap; }
.cs-panel-count { white-space: nowrap; }
.cs-panel-count em {
  font-style: normal;
  color: var(--purple-soft);
  text-shadow: 0 0 14px rgba(91, 76, 255, 0.6);
}

/* ============================================================
   3 · INSTRUMENT 01 — the close: book meets bank, then twelve
   months of reports land on schedule
   ============================================================ */
/* the panel head already draws the rule; the ledger does not repeat it */
.cs-panel .recon { margin-top: 16px; border-top: 0; padding-top: 0; }
.cs-months {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.cs-months-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--faint);
  margin-bottom: 10px;
}
.cs-month-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.cs-month {
  text-align: center;
  font-size: 9px; letter-spacing: 0.02em; line-height: 1;
  padding: 8px 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  color: rgba(166, 170, 184, 0.35);
  transition: color 0.45s ease, border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}
.cs-month.on {
  color: #fff;
  border-color: rgba(148, 138, 255, 0.55);
  background: rgba(91, 76, 255, 0.12);
  box-shadow: 0 0 14px rgba(91, 76, 255, 0.3);
}

/* ============================================================
   4 · INSTRUMENT 02 — twelve sets of books becoming one system
   ============================================================ */
.cs-shops {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cs-shop {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 9px 10px 10px;
  transform: rotate(calc(var(--r, 0) * 1deg * (1 - var(--s, 0))))
             translateY(calc(var(--ty, 0) * 1px * (1 - var(--s, 0))));
  transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}
.cs-shop.on {
  border-color: rgba(148, 138, 255, 0.5);
  background: rgba(91, 76, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 16px rgba(91, 76, 255, 0.18);
}
.cs-shop i {
  display: block; font-style: normal;
  font-size: 9px; letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 8px;
  transition: color 0.45s ease;
}
.cs-shop.on i { color: var(--purple-soft); }
.cs-shop b {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 4px;
  transition: background 0.45s ease;
}
.cs-shop b:last-child { margin-bottom: 0; }
.cs-shop b:nth-of-type(1) { width: calc(1% * (var(--w1, 60) + (86 - var(--w1, 60)) * var(--s, 0))); }
.cs-shop b:nth-of-type(2) { width: calc(1% * (var(--w2, 60) + (58 - var(--w2, 60)) * var(--s, 0))); }
.cs-shop b:nth-of-type(3) { width: calc(1% * (var(--w3, 60) + (72 - var(--w3, 60)) * var(--s, 0))); }
.cs-shop.on b { background: rgba(148, 138, 255, 0.5); }

.cs-rulebooks {
  position: relative;
  height: 46px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.cs-rb-row,
.cs-rb-one { position: absolute; left: 0; right: 0; top: 16px; display: flex; gap: 8px; }
.cs-rb-row {
  opacity: calc(1 - var(--merge, 0));
  transform: translateY(calc(var(--merge, 0) * -8px));
}
.cs-rb-one {
  opacity: var(--merge, 0);
  transform: translateY(calc((1 - var(--merge, 0)) * 8px));
}
.cs-rb {
  font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 12px;
  white-space: nowrap;
}
.cs-rb-one .cs-rb {
  color: var(--purple-soft);
  border-color: rgba(148, 138, 255, 0.55);
  background: rgba(91, 76, 255, 0.09);
  box-shadow: 0 0 22px rgba(91, 76, 255, 0.22);
  letter-spacing: 0.22em;
}

/* ============================================================
   5 · INSTRUMENT 03 — eight states of nexus folding into one
   compliance calendar
   ============================================================ */
.cs-map { position: relative; height: 262px; margin-top: 18px; }
.cs-st {
  position: absolute; left: 0; right: 0;
  top: calc(var(--i, 0) * 32px);
  height: 26px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(calc(var(--merge, 0) * var(--dy, 0px)));
  opacity: calc(1 - var(--merge, 0));
  transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}
.cs-st i {
  font-style: normal;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--faint);
  width: 22px;
  transition: color 0.45s ease;
}
.cs-st b {
  font-weight: 400; font-size: 12.5px;
  color: rgba(166, 170, 184, 0.5);
  transition: color 0.45s ease;
}
.cs-st em {
  margin-left: auto; font-style: normal;
  font-size: 8.5px; letter-spacing: 0.2em;
  color: transparent;
  transition: color 0.45s ease;
}
.cs-st.on {
  border-color: rgba(255, 77, 128, 0.5);
  background: rgba(255, 77, 128, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px rgba(255, 77, 128, 0.22);
}
.cs-st.on i { color: #fff; }
.cs-st.on b { color: var(--text); }
.cs-st.on em { color: var(--pink-soft); }

.cs-one {
  position: absolute; left: 0; right: 0;
  top: calc(112px - var(--merge, 0) * 8px);
  height: calc(26px + var(--merge, 0) * 18px);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  border: 1px solid rgba(148, 138, 255, 0.55);
  border-radius: 8px;
  background: rgba(91, 76, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
              0 12px 42px rgba(0, 0, 0, 0.45), 0 0 34px rgba(91, 76, 255, 0.18);
  opacity: var(--merge, 0);
}
.cs-one span {
  font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--purple-soft);
  white-space: nowrap;
}
.cs-one-ticks { margin-left: auto; display: flex; gap: 4px; }
.cs-one-ticks i {
  display: block; width: 7px; height: 10px; border-radius: 2px;
  background: rgba(110, 96, 255, 0.8);
  box-shadow: 0 0 10px rgba(91, 76, 255, 0.55);
}

.cs-notice {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 7px 13px;
  font-size: 9.5px; letter-spacing: 0.2em;
  border: 1px solid var(--line);
  border-left: 1px solid var(--pink);
  border-radius: 4px;
  background: rgba(13, 13, 19, 0.7);
  color: var(--mist);
  transition: color 0.55s ease, border-color 0.55s ease, text-decoration-color 0.55s ease;
}
.cs-notice.resolved {
  border-left-color: var(--purple);
  border-color: rgba(148, 138, 255, 0.4);
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: var(--purple-soft);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
  .js .cs-notice {
    opacity: var(--noticeop, 0);
    transform: translateY(calc((1 - var(--noticeop, 0)) * 10px));
  }
}

/* ============================================================
   6 · THE READING RESTS — the unhurried telling
   ============================================================ */
.cs-read-label { color: var(--mist); }
.cs-read-head {
  font-size: 11px; letter-spacing: 0.22em; font-weight: 400;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
  margin-bottom: clamp(22px, 3.4vh, 34px);
}
.cs-read-grid {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: clamp(40px, 5.5vw, 88px);
  align-items: start;
  margin-top: clamp(28px, 4vh, 48px);
}
.cs-read-col .body-lg + .body-lg { margin-top: var(--s3); }

.cs-did { margin-top: clamp(56px, 8vh, 104px); }
.cs-did-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  max-width: 980px;
}
.cs-did-head .cs-read-head { flex: 1; margin-bottom: 0; }
.cs-steps { list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: 980px; }
.cs-step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.js .cs-step {
  transition: opacity 0.75s cubic-bezier(0.22, 0.6, 0.2, 1),
              transform 0.75s cubic-bezier(0.22, 0.6, 0.2, 1),
              padding-left 0.35s cubic-bezier(0.3, 0.7, 0.3, 1),
              border-color 0.35s ease;
}
.cs-step:hover { padding-left: 12px; border-bottom-color: rgba(148, 138, 255, 0.35); }
.cs-step-num {
  font-size: 11.5px; letter-spacing: 0.12em;
  color: var(--faint);
  transition: color 0.35s ease;
}
.cs-step:hover .cs-step-num { color: var(--purple-soft); }
.cs-step-text {
  font-size: clamp(16.5px, 1.7vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
}
.cs-quote {
  margin-top: clamp(48px, 7vh, 92px);
  max-width: 42ch;
}

/* ============================================================
   7 · NEXT
   ============================================================ */
.cs-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(44px, 6vw, 96px);
  align-items: start;
}
.cs-next-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.cs-sib-cards { display: grid; gap: var(--s2); }
.cs-sib-cards .svc-card { min-height: 0; }

/* short desktop windows: scale the stage rather than clip it */
@media (min-width: 981px) and (max-height: 820px) {
  .cs-grid { transform: scale(0.88); transform-origin: 50% 50%; }
  .scene.cs-title .scroll-cue { display: none; }
}

/* ============================================================
   STATICS — no-JS gets the whole argument, finished and lit
   ============================================================ */
.no-js .cs-shops { --s: 1; }
.no-js .cs-shop { transform: none; }
.no-js .cs-month {
  color: #fff;
  border-color: rgba(148, 138, 255, 0.55);
  background: rgba(91, 76, 255, 0.12);
}
.no-js .cs-rulebooks { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.no-js .cs-rb-row,
.no-js .cs-rb-one { position: static; opacity: 1; transform: none; flex-wrap: wrap; }
.no-js .cs-map { position: static; height: auto; display: flex; flex-direction: column; gap: 6px; }
.no-js .cs-st { position: static; top: auto; transform: none; opacity: 1; }
.no-js .cs-st i { color: #fff; }
.no-js .cs-st b { color: var(--text); }
.no-js .cs-st em { color: var(--pink-soft); }
.no-js .cs-one { position: static; top: auto; height: auto; padding: 12px 14px; margin-top: 12px; opacity: 1; }
.no-js .cs-notice { opacity: 1; transform: none; }
.no-js .cs-title-meta { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cs-shops { --s: 1; }
  .cs-shop { transform: none; }
  .cs-month {
    color: #fff;
    border-color: rgba(148, 138, 255, 0.55);
    background: rgba(91, 76, 255, 0.12);
  }
  .cs-rulebooks { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 10px; }
  .cs-rb-row, .cs-rb-one { position: static; opacity: 1; transform: none; flex-wrap: wrap; }
  .cs-map { position: static; height: auto; display: flex; flex-direction: column; gap: 6px; }
  .cs-st { position: static; top: auto; transform: none; opacity: 1; }
  .cs-st i { color: #fff; }
  .cs-st b { color: var(--text); }
  .cs-st em { color: var(--pink-soft); }
  .cs-one { position: static; top: auto; height: auto; padding: 12px 14px; margin-top: 12px; opacity: 1; }
  .cs-notice { opacity: 1; transform: none; }
  .cs-title-meta { opacity: 1; transform: none; }
  .cs-grid { transform: none; }
}

/* ============================================================
   RESPONSIVE — every pinned scene collapses into the flow
   ============================================================ */
@media (max-width: 980px) {
  .scene.cs-title { height: auto; }
  .scene.cs-scene { height: auto; }
  .scene.cs-scene .cs-stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-top: var(--section-gap);
    padding-bottom: 0;
  }
  .cs-stage::before { display: none; }
  .cs-grid { grid-template-columns: 1fr; gap: var(--s5); transform: none; align-items: start; }
  .cs-title-stage .ghost-center { display: none; }

  /* on a phone the world never lights words it cannot finish */
  .js [data-words] .w { opacity: 1; }

  .cs-h1 { font-size: clamp(30px, 8vw, 44px); max-width: 100%; }
  .cs-title-block { text-align: left; }
  .cs-title-meta { justify-content: flex-start; opacity: 1 !important; transform: none !important; }
  .cs-h2 { font-size: clamp(24px, 6.6vw, 34px); max-width: 100%; }
  .cs-stats { max-width: 100%; }
  .cs-stats .case-stat dt { min-width: 108px; font-size: clamp(24px, 7vw, 32px); }

  /* ---- THE INSTRUMENTS ARE NO LONGER PINNED OPEN HERE ----
     Every device on this page used to be flattened to its finished frame at
     this width, because js/case-studies.js returned early on a phone and
     nothing would ever have driven it. That was not a fallback, it was a
     contradiction: twelve months lit under a head still reading five ledger
     rows tied out; MICHIGAN / OHIO / INDIANA sitting beside the ONE SCHEDULE
     pill they are supposed to become; eight states of nexus AND the single
     calendar that replaces them, at once, permanently.

     The scenes now play at every width (on a clock rather than a scrub — see
     the long note in js/case-studies.js), so the flatteners have to go or
     they would hold each instrument at the last frame of its own beat.

     Removing them strands nothing. The two states in which no scene runs
     both keep their own finished statics further up this file: .no-js
     (lines 457-474) and prefers-reduced-motion: reduce (476-495), the latter
     because js/main.js skips the entire scene pass under reduced motion.
     What is left below is only what is genuinely about SIZE. */

  /* the ledger bars keep their finished widths: width is a layout property
     and twelve cards x three bars re-laid-out every frame is exactly the
     cost a handset cannot pay inside a scrolling film. The straightening is
     handed to the compositor instead — scaleX from each store's own ratio to
     1, so the twelve sets of books still start uneven and still line up. */
  .cs-shop b:nth-of-type(1) { width: 86% !important; }
  .cs-shop b:nth-of-type(2) { width: 58% !important; }
  .cs-shop b:nth-of-type(3) { width: 72% !important; }
  .cs-shop b { transform-origin: 0 50%; }
  .cs-shop b:nth-of-type(1) { transform: scaleX(calc(var(--w1, 60) / 86 + (1 - var(--w1, 60) / 86) * var(--s, 0))); }
  .cs-shop b:nth-of-type(2) { transform: scaleX(calc(var(--w2, 60) / 58 + (1 - var(--w2, 60) / 58) * var(--s, 0))); }
  .cs-shop b:nth-of-type(3) { transform: scaleX(calc(var(--w3, 60) / 72 + (1 - var(--w3, 60) / 72) * var(--s, 0))); }

  /* THE FOOTPRINT transfers as it is. The map is 262px of absolutely-placed
     rows 32px apart and --dy converges them on the centre in plain pixels —
     none of that is viewport-relative, and measured at 360px the widest row
     (Massachusetts · NEXUS) is ~190px inside a ~268px panel. So the fold is
     the desktop fold, not a phone impression of it.

     The one calendar is the single exception. On desktop it GROWS into the
     gap the states leave: top and height are both scrubbed. On a phone that
     is a re-layout of the panel on every frame of the fold, so here it fades
     in already at its full size, where it will sit. Same moment, same
     meaning, paid for with opacity instead of layout. */
  .cs-one { top: 104px; height: auto; min-height: 44px; }

  /* belt and braces: the --noticeop entrance is gated to >=981px, so nothing
     should be holding the notice down here — but it carries approved copy and
     this page's worst bug class is copy left at opacity 0 */
  .cs-notice { opacity: 1 !important; transform: none !important; }

  /* The blanket lit-ledger above went with the flatteners, because the live
     ledger has to be able to tie out row by row. css/main.css only carries
     half of it into the two static states (it lights the dot but not the
     figures beside it), and the phone used to get both — so put the finished
     ledger back for exactly those two, and only there. */
  .no-js .recon-row b { color: var(--text); }
  .no-js .recon-row i { box-shadow: 0 0 10px rgba(91, 76, 255, 0.85); }

  .cs-read-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .cs-next-grid { grid-template-columns: 1fr; }
  .cs-step { grid-template-columns: 40px 1fr; gap: var(--s2); }
}

@media (max-width: 640px) {
  /* the sector list stacks; a trailing rule on a wrapped line reads as debris,
     so the gradient rules go. Losing them costs the only thing that said where
     one label ended and the next began, and with five sectors rather than three
     two of them now share a line — at the old flat 10px, "FRANCHISE CHAIN
     ARCHITECTURE FIRM" reads as one run-on string, because 10px is barely wider
     than the word-space inside a label at this tracking. The column gap is
     therefore pulled away from the row gap: 24px between neighbours on a line
     is unmistakably wider than the space inside a name, 10px between lines
     keeps the block tight. */
  .cs-title-meta { column-gap: 24px; row-gap: 10px; }
  .cs-title-meta i { display: none; }
  .cs-panel-head { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 9.5px; letter-spacing: 0.18em; }
  .cs-shops { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .cs-month-row { gap: 3px; }
  .cs-month { font-size: 8.5px; padding: 7px 0 6px; }
  .cs-months-head { flex-direction: column; gap: 6px; }
  /* These four used to be unconditional, from when the live map was flattened
     into a plain column at this width too. The live map is absolutely placed
     again (see the note in the 980px block), and there `height: auto` would
     break the 32px rhythm the fold converges on — so the relief now belongs
     only to the two layouts that really do stack: no-JS here, reduced motion
     in its own query below. */
  .no-js .cs-st { flex-wrap: wrap; height: auto; padding: 9px 12px; }
  .no-js .cs-st em { margin-left: 0; }
  .no-js .cs-one { flex-wrap: wrap; }
  .no-js .cs-one-ticks { margin-left: 0; }
  /* THE LONGEST ENTITY LABEL WAS WRAPPING OUT OF ITS OWN ROW.
     .cs-st is 26px tall and absolutely placed on a 32px pitch, and the relief
     above (height: auto) is deliberately withheld from the live map because it
     would break the rhythm the fold converges on. So the row cannot grow — the
     label has to fit. At 360px, case 05's "Controlled Foreign Corporations"
     needed 186px in a 174px box and broke to a second line that the 26px row
     then clipped. The other four rows were fitting with 0-1px to spare, i.e.
     the whole ladder was on a knife edge and any longer label would have done
     the same. Half a point off the label and two off each gap gives every row
     real margin without touching the rhythm, the type scale elsewhere, or a
     single character of the approved labels. */
  .cs-st { gap: 10px; }
  .cs-st b { font-size: 11.5px; }

  .cs-quote { max-width: 100%; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .cs-next-chips .chip-link { width: 100%; justify-content: center; }
}

/* the reduced-motion twin of the no-JS ledger restoration in the 980px block */
@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .recon-row b { color: var(--text); }
  .recon-row i { box-shadow: 0 0 10px rgba(91, 76, 255, 0.85); }
}

/* Reduced motion stacks the map into a flex column, so it wants the same
   breathing room the no-JS layout gets above. */
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .cs-st { flex-wrap: wrap; height: auto; padding: 9px 12px; }
  .cs-st em { margin-left: 0; }
  .cs-one { flex-wrap: wrap; }
  .cs-one-ticks { margin-left: 0; }
}

/* ONE COMPLIANCE CALENDAR plus twelve ticks is about 347px of content in a
   ~268px panel, so on the narrowest phones it takes two lines. It is given
   that room up front rather than animated into it, for the same reason the
   980px block froze its top and height: no layout work per frame. */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  /* The three rulebooks are one absolutely-placed line again rather than a
     wrapping stack, so they have to fit on it. MICHIGAN · OHIO · INDIANA at
     the desktop tracking measures ~235px against a ~228px panel interior on
     a 320px handset — seven pixels of INDIANA clipped by the panel's own
     overflow. Tightened here rather than reworded or dropped. The merged
     pill is left exactly as it is: it already fits, and its wider tracking
     is what makes it read as the resolved state. */
  .js .cs-rb-row .cs-rb { letter-spacing: 0.12em; padding: 5px 9px; }
  .js .cs-one {
    flex-wrap: wrap; align-content: center;
    row-gap: 7px;
    padding: 9px 14px;
    min-height: 52px;
  }
  .js .cs-one-ticks { margin-left: 0; }
}

/* Same four-child card as services.html — see the note in css/services.css.
   Without explicit areas the tagline lands in the auto column and the arrow
   wraps to its own row; below 560px the description renders one word per
   line. Scoped to .cs-sib-cards so nothing else moves. */
.cs-sib-cards .svc-card {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas:
    "num name arrow"
    "num line arrow";
  align-items: start;
  row-gap: 6px;
}
.cs-sib-cards .svc-num   { grid-area: num; }
.cs-sib-cards .svc-name  { grid-area: name; }
.cs-sib-cards .svc-line  { grid-area: line; }
.cs-sib-cards .svc-arrow { grid-area: arrow; align-self: center; justify-self: end; }
@media (max-width: 560px) {
  .cs-sib-cards .svc-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 4px 12px;
    row-gap: 5px;
  }
  .cs-sib-cards .svc-arrow { align-self: start; margin-top: 2px; transform: none; }
}


/* ============================================================
   GLASS, COSTED FOR A PHONE (page-scoped)
   css/main.css flattens its OWN glass components below 980px, but it cannot
   reach the devices this page declares. backdrop-filter re-blurs everything
   behind an element on every frame it moves, and these sit inside a
   scrolling film — it is the most expensive thing a handset does here.

   Blur removed below 980px. Where the surface was too sheer to survive
   without it (var(--surface) is 3.5% white) an opaque base is added as
   background-COLOR, not background, so any ruled gradient painted on top
   of it is left intact.
   ============================================================ */
@media (max-width: 980px) {
  .cs-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--glass-flat);
  }
}