/* case-studies.html-only styles. Shared cross-page classes (header/footer
   chrome, .case-card family, quotes, dark contact cards) live in
   components.css — this page reuses almost all of it.

   Colors reference the design tokens defined in base.css's :root — see that
   file's top-of-file comment for the light/dark mechanism. */

.cs-hero { border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, var(--color-gradient-hero-start) 0%, var(--color-surface-page) 70%); padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 56px) clamp(36px, 4vw, 56px); }
.cs-hero-title { font-size: clamp(38px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin: 18px 0 0; max-width: 16ch; }
.cs-hero-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--color-text-secondary); margin: 22px 0 0; max-width: 60ch; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }

.cs-list-section { padding: clamp(48px, 6vw, 88px) clamp(18px, 4vw, 56px); background: var(--color-surface-card); border-bottom: 1px solid var(--color-border); }
.no-results { text-align: center; color: var(--color-text-muted); font-size: 16px; padding: 20px 0; }

.cs-quotes-section { padding: clamp(56px, 7vw, 96px) clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--color-border); }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; margin-top: 26px; }

.cs-cta-section { padding: clamp(64px, 8vw, 110px) clamp(18px, 4vw, 56px); background: var(--color-surface-inverted); color: var(--color-text-on-inverted-primary); }
.cs-cta-grid { max-width: 1168px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.cs-cta-title { font-size: clamp(30px, 4vw, 52px); line-height: 1.03; letter-spacing: -.03em; font-weight: 800; margin: 18px 0 0; }
.cs-cta-lead { font-size: 17.5px; line-height: 1.6; color: var(--color-text-on-inverted-secondary); margin: 20px 0 0; max-width: 44ch; }
.cs-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.cs-cta-btn { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; font-size: 16px; padding: 16px 26px; border-radius: 10px; }
.cs-cta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }