/* Mint SEO — Case Studies Index. Matches Figma board 927:184. */

.cs-h { background: #fff; }
.cs-h__in { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) 48px clamp(28px, 4vw, 44px); }
.cs-h__in .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.cs-h__in h1 { margin: 0; font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); }
.cs-h__in p { margin: 18px 0 0; max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--body); }

.cs-row { width: 100%; }
.cs-row--tint { background: var(--mint-tint); }
.cs-row--white { background: #fff; }
.cs-row__in { max-width: 1180px; margin: 0 auto; padding: clamp(44px, 4.5vw, 60px) 48px; display: grid; grid-template-columns: 340px 1fr 210px; gap: 56px; align-items: center; }
.cs-stat { min-width: 0; }
.cs-stat .tag { display: inline-block; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.cs-row--white .cs-stat .tag { background: var(--mint-tint); border-color: transparent; }
.cs-stat .v { margin: 16px 0 6px; font-size: clamp(46px, 5.2vw, 66px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--mint-ink); }
.cs-stat .l { font-size: 17px; font-weight: 700; color: var(--ink); }
.cs-body { min-width: 0; }
.cs-body .client { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); margin: 0 0 10px; }
.cs-body h3 { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.cs-body p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.cs-link { justify-self: start; font-size: 16px; font-weight: 800; color: var(--mint-ink); text-decoration: none; white-space: nowrap; transition: gap 0.2s; }
.cs-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .cs-h__in { padding: 44px 22px 28px; }
  .cs-row__in { grid-template-columns: 1fr; gap: 20px; padding: 40px 22px; }
  .cs-stat .v { font-size: 52px; }
}