/*
 * Typography
 *
 * Global heading styles, text utilities, and responsive type scaling.
 * Dependencies: tokens.css
 */

/* ── Headings — lowercase globally ── */
h1, h2, h3, h4 {
  text-transform: lowercase;
}

/* ── Eyebrow label ── */
.eyebrow {
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
  text-transform: uppercase; line-height: 1;
}

/* ── Display number (01, 02, +163%) ── */
.display-number {
  font-family: var(--font-body); font-weight: 900; font-size: 48px;
  line-height: 1; letter-spacing: -0.48px;
}

/* ── Description text (22px body) ── */
.text-description {
  font-family: var(--font-body); font-weight: 400; font-size: 22px;
  line-height: 1;
}

/* ── Caption ── */
.caption {
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  line-height: 1;
}

/* ── Mobile-only line break ── */
.mobile-break { display: none; }
@media (max-width: 768px) {
  .mobile-break { display: block; }
}

/* ── Responsive type scaling ── */
@media (max-width: 768px) {
  h2, .wp-block-heading:where(:not(h1)) {
    font-size: 24px !important;
    text-wrap: balance;
  }
  h3, .service-card__label {
    font-size: 20px !important;
  }
  .eyebrow,
  .hero__eyebrow,
  .description__label,
  .for-you__label {
    font-size: 13px !important;
  }
}