/* Shared brand typography scale (homepage canonical) */
:root {
  --font-brand: 'Lato', sans-serif;
  --text-h1: clamp(52px, 7vw, 96px);
  --text-h2: clamp(36px, 5vw, 64px);
  --text-h3: clamp(28px, 3.5vw, 44px);
  --text-h4: clamp(22px, 2.5vw, 32px);
}

body {
  font-family: var(--font-brand);
}

.display {
  font-family: var(--font-brand);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.display-xl { font-size: var(--text-h1); }
.display-lg { font-size: var(--text-h2); }
.display-md { font-size: var(--text-h3); }
.display-sm { font-size: var(--text-h4); }

/* Marketing page intros: keep H1 scale, tighten on small screens */
@media (max-width: 768px) {
  .display-xl {
    font-size: clamp(36px, 8vw, 56px);
  }

  .display-lg {
    font-size: clamp(30px, 5.5vw, 44px);
  }
}

@media (max-width: 480px) {
  .display-xl {
    font-size: clamp(28px, 7vw, 44px);
  }
}

/* Case study headings (long titles need balance + slightly tighter mobile scale) */
.cs-title,
.cs-section-title,
.cs-metric-val,
.cs-outcome-val,
.cs-callout-text,
.cs-hero-tagline {
  font-family: var(--font-brand);
}

.cs-title {
  font-size: var(--text-h1);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.cs-section-title {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.cs-metric-val,
.cs-outcome-val {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.cs-callout-text {
  font-size: var(--text-h4);
  font-weight: 400;
  line-height: 1.5;
}

.cs-hero-tagline {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Case study body copy */
.cs-prose {
  font-family: var(--font-brand);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.75;
}

.cs-prose strong {
  font-weight: 600;
}

.cs-list li {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .cs-title {
    font-size: clamp(36px, 5vw, 56px);
  }
}

@media (max-width: 640px) {
  .cs-title {
    font-size: clamp(28px, 6.2vw, 44px);
    line-height: 1.12;
  }

  .cs-section-title {
    font-size: clamp(24px, 5vw, 32px);
  }
}

.cs-hero-wordmark {
  font-family: var(--font-brand);
  font-size: var(--text-h1);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
