/* Shared typography: Manrope and the hierarchy established by About and Service. */
@font-face {
  font-family: Manrope;
  src: url('assets/manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --font-family: Manrope, Arial, sans-serif;
  --type-page-title: clamp(2.75rem, 4.6vw, 5.25rem);
  --type-section-title: clamp(2.125rem, 3.25vw, 3.5rem);
  --type-card-title: 1.4375rem;
  --type-body: 1rem;
  --type-lead: 1.125rem;
  --type-meta: .875rem;
  --type-label: .75rem;
  --type-action: .875rem;
  --weight-body: 400;
  --weight-heading: 500;
  --weight-strong: 650;
  --weight-action: 750;
  --leading-title: 1.08;
  --leading-section: 1.12;
  --leading-card: 1.4;
  --leading-body: 1.75;
  --leading-label: 1.5;
  --tracking-title: -.04em;
  --tracking-card: -.02em;
  --tracking-label: .13em;
  --text-measure: 65ch;
}
body { font-family: var(--font-family); font-weight: var(--weight-body); }
button, input, select, textarea { font-family: var(--font-family); }
h1, h2, h3 { font-family: var(--font-family); }
h1, h2 { font-weight: var(--weight-heading); letter-spacing: var(--tracking-title); }
p { line-height: var(--leading-body); }
::selection { background: var(--brand-accent); color: var(--brand-text); }
:is(.about-page, .service-page, .contact-page) h1,
.catalog-page-title, .references-title {
  font-size: var(--type-page-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-transform: none;
  color: var(--brand-primary);
  text-wrap: balance;
}
:is(.about-page, .service-page, .contact-page) h2,
.about-next h2, .section-heading h2, .about-grid h2 {
  font-size: var(--type-section-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-title);
}
:is(.about-page, .service-page) h3, .service-checklist dt,
.product-title h3, .values h3, .contact-details h2 {
  font-size: var(--type-card-title);
  font-weight: var(--weight-strong);
  line-height: var(--leading-card);
  letter-spacing: var(--tracking-card);
  color: var(--brand-primary);
}
.eyebrow {
  font-size: var(--type-label);
  font-weight: var(--weight-strong);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
}
.button, .text-link {
  font-size: var(--type-action);
  font-weight: var(--weight-action);
  line-height: var(--leading-label);
}
.about-lead, .service-lead, .contact-lead {
  font-size: var(--type-lead);
  line-height: var(--leading-body);
  max-width: var(--text-measure);
}
.catalog-intro { background: var(--brand-soft); }
.catalog-intro .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 32px; color: var(--brand-muted); font-size: var(--type-meta); line-height: var(--leading-label); }
.catalog-intro .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
  :root {
    --type-page-title: clamp(2.375rem, 10vw, 3.375rem);
    --type-section-title: 2.125rem;
    --type-lead: 1rem;
    --type-action: .8125rem;
  }
}