/**
 * Metalight — shared typography scale (all marketing pages)
 * Desktop defaults; tablet/mobile tokens adjust in media queries below.
 */
:root {
  --text-light: #464646;

  /* Hero */
  --ml-font-hero: 48px;
  --ml-font-hero-lh: 1.15;
  --ml-font-hero-accent: 48px;

  /* Home hero multi-line (index only) */
  --ml-font-hero-line-2: 32px;
  --ml-font-hero-emphasis: 36px;

  /* Section headings (H2) */
  --ml-font-section: 42px;
  --ml-font-section-lh: 1.2;
  --ml-font-section-mb: 50px;

  /* Service / feature titles (H3) */
  --ml-font-subsection: 28px;
  --ml-font-subsection-lh: 1.3;

  /* In-content headings (H4–H6) */
  --ml-font-block: 24px;
  --ml-font-block-lh: 1.35;

  /* Lead / intro paragraphs */
  --ml-font-lead: 18px;
  --ml-font-lead-lh: 1.75;

  /* Body copy */
  --ml-font-body: 16px;
  --ml-font-body-lh: 1.7;

  /* Tabs, labels, form fields */
  --ml-font-ui: 15px;

  /* Secondary text, cards */
  --ml-font-small: 14px;

  /* Fine print, compact tabs */
  --ml-font-caption: 13px;

  /* CTA banners */
  --ml-font-cta: 20px;

  /* Buttons */
  --ml-font-btn: 16px;
}

@media (max-width: 991.98px) {
  :root {
    --ml-font-hero: 36px;
    --ml-font-section: 32px;
    --ml-font-subsection: 24px;
    --ml-font-block: 22px;
    --ml-font-lead: 16px;
    --ml-font-section-mb: 40px;
    --ml-font-hero-line-2: 26px;
    --ml-font-hero-emphasis: 30px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --ml-font-hero: 30px;
    --ml-font-section: 28px;
    --ml-font-subsection: 22px;
    --ml-font-block: 20px;
    --ml-font-lead: 15px;
    --ml-font-body: 14px;
    --ml-font-small: 13px;
    --ml-font-ui: 14px;
    --ml-font-section-mb: 32px;
    --ml-font-hero-line-2: 22px;
    --ml-font-hero-emphasis: 26px;
  }
}

/* Shared hero + section patterns (optional hooks; page CSS may also use vars) */
.hero-title,
.about-hero-content h1,
.staffing-hero-content h1,
.technology-hero-content h1,
.contact-hero .hero-title {
  font-size: var(--ml-font-hero);
  line-height: var(--ml-font-hero-lh);
}

.hero-description,
.about-hero-content .about-desc,
.staffing-desc,
.technology-desc,
.contact-hero .hero-desc {
  font-size: var(--ml-font-body);
  line-height: var(--ml-font-body-lh);
}

.section-title,
.about-title,
.staffing-section-title,
.framework-title,
.industries-title,
.why-title,
.contact-title,
.tech-services > .container > .section-title {
  font-size: var(--ml-font-section);
  line-height: var(--ml-font-section-lh);
}

.domain-title,
.delivery-title {
  font-size: var(--ml-font-section);
  line-height: var(--ml-font-section-lh);
}

.service-content h3 {
  font-size: var(--ml-font-subsection);
  line-height: var(--ml-font-subsection-lh);
}