/* ════════════════════════════════════════════════════════════════════════════
 * SONDER SYSTEM — /case-studies page-specific styles (2026-07-23)
 * Loaded AFTER home.css. Reuses the home design tokens + class vocabulary.
 * Adds only the before→after comparison component for the three case studies.
 * ══════════════════════════════════════════════════════════════════════════ */

/* hero summary metric strip (glanceable, reuses .grad) */
.cs-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 6vw, 76px); }
.cs-sum { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.cs-sum-num { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1; letter-spacing: -.04em; }
.cs-sum-lbl { font-size: .9rem; color: var(--ink-soft); max-width: 17ch; text-align: center; }

/* one case study block */
.cstudy { padding-block: clamp(56px, 8vh, 104px); }
.cstudy + .cstudy { border-top: 1px solid var(--line); }
.cstudy-head { max-width: 760px; margin-bottom: clamp(28px, 4vh, 44px); }
.cstudy-head .h-section { margin-top: 10px; }

/* before → after layout */
.ba { display: grid; grid-template-columns: 1fr auto 1.15fr; gap: clamp(16px, 2.4vw, 30px); align-items: stretch; }
@media (max-width: 860px) { .ba { grid-template-columns: 1fr; gap: 16px; } }

.ba-col { border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 18px; }
.ba-before { background: rgba(38,35,43,.028); border: 1px solid var(--line-soft); }
/* match home: no left gradient rail (read as a cheap "pushed-in" object) — the
   card stands out via a stronger violet border + shadow instead */
.ba-after {
  background: var(--card); border: 1px solid rgba(122,107,208,.30);
  box-shadow: 0 34px 90px -46px rgba(122,107,208,.7); position: relative; overflow: hidden;
}
/* subtle hover lift, consistent with home cards */
.ba-col { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ba-after:hover { transform: translateY(-4px); box-shadow: 0 44px 110px -44px rgba(122,107,208,.85); }
@media (prefers-reduced-motion: reduce) { .ba-after:hover { transform: none; } }

.ba-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: .38em .9em; border-radius: var(--radius-pill);
  background: rgba(38,35,43,.06); color: var(--muted);
}
.ba-tag--good { background: rgba(122,107,208,.12); color: var(--violet-ink); }

.ba-cond { font-size: .98rem; line-height: 1.5; color: var(--ink-soft); font-family: var(--display); font-weight: 500; }

/* the standout "after" hero metric */
.ba-hero { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.ba-hero-num { font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.ba-hero-lbl { font-size: .92rem; color: var(--muted); }

/* metric rows */
.ba-metrics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ba-metrics li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.ba-metrics li:first-child { border-top: none; }
.m-label { font-size: .9rem; color: var(--ink-soft); }
.m-val { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.ba-before .m-val { color: var(--ink-soft); font-weight: 600; }
.m-val.m-flat { color: var(--muted); font-weight: 600; font-size: 1rem; }
.ba-after .m-val { color: var(--violet-ink); }

/* the centre arrow between columns */
.ba-arrow {
  align-self: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.2rem; box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--violet-deep), var(--coral));
}
@media (max-width: 860px) { .ba-arrow { transform: rotate(90deg); justify-self: center; } }

/* key-change callout */
.ba-change {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.45;
  color: var(--violet-ink);
  background: rgba(179,171,230,.12); border: 1px solid rgba(179,171,230,.22);
  border-radius: var(--radius-lg); padding: 20px 26px;
}
.ba-change-lbl {
  flex: 0 0 auto; font-family: var(--body); font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--violet-deep);
  background: rgba(122,107,208,.14); padding: .4em .8em; border-radius: var(--radius-pill);
  align-self: center;
}

/* final CTA dual buttons */
.cs-final-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* footer NICE credit line */
.footer-credit { width: 100%; text-align: center; font-size: .78rem; color: var(--muted); }
.footer-credit a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.footer-credit a:hover { color: var(--ink); }