/* Helvetica Neue Regular is the only face on the site: no Light, no bold. */
@font-face {
  font-family: "Helvetica Neue";
  src: url("./public/fonts/HelveticaNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Single source for site-wide typography. Adjust these tokens once.
   Native headings and paragraphs receive the shared styles automatically.
   Use type-h1…type-h6 only when visual size differs from semantic heading level. */
:root {
  --font-primary: "Helvetica Neue", sans-serif;
  --font-heading: var(--font-primary);
  --font-body: var(--font-primary);
  --font-numerals: var(--font-primary);
  --weight-heading: 400;
  --weight-body: 400;
  --weight-numerals: 400;

  --type-h1-size: clamp(3rem, 7vw, 7rem);
  --type-founders-title-size: calc(var(--type-h1-size) * .9);
  --type-founders-title-leading: var(--type-h1-leading);
  --type-founders-summary-size: var(--type-h2-size);
  --type-founders-summary-leading: var(--type-h2-leading);
  --type-h1-leading: 1.04;
  --type-h1-tracking: -0.045em;
  /* Company name XL: independent of heading styles, capped to fit its container. */
  --type-company-name-xl-family: var(--font-primary);
  --type-company-name-xl-weight: 400;
  --type-company-name-xl-size: min(clamp(6rem, 14vw, 14rem), 28cqw);
  --type-company-name-xl-leading: 1.04;
  --type-company-name-xl-tracking: -0.045em;
  /* Paragraph XL: large introductory copy, independent of headings and company name. */
  --type-paragraph-xl-size: min(clamp(2.9846475rem, 6.9641775vw, 6.9641775rem), 13.928355cqw);
  --type-paragraph-xl-leading: 1.04;
  --type-paragraph-xl-tracking: -0.045em;
  --type-h2-size: clamp(2.25rem, 5vw, 4.5rem);
  --type-h2-leading: 1.1;
  --type-h2-tracking: -0.035em;
  --type-h3-size: clamp(1.25rem, 2.2vw, 1.75rem);
  --type-h3-leading: 1.4;
  --type-h3-tracking: -0.015em;
  --type-h4-size: clamp(1.125rem, 1.8vw, 1.5rem);
  --type-h4-leading: 1.4;
  --type-h4-tracking: -0.01em;
  --type-h5-size: clamp(1rem, 1.5vw, 1.25rem);
  --type-h5-leading: 1.4;
  --type-h5-tracking: 0;
  --type-h6-size: 1rem;
  --type-h6-leading: 1.4;
  --type-h6-tracking: 0;
  --type-section-title-size: clamp(.75rem, 1.5vw, 1.75rem);
  --type-why-us-number-size: calc(var(--type-h3-size) * 3);

  --type-body-size: clamp(1rem, 1.3vw, 1.125rem);
  --type-body-large-size: clamp(1.125rem, 1.7vw, 1.375rem);
  --type-body-small-size: 0.875rem;
  --type-body-xs-size: 0.75rem;
  --type-body-lead-size: clamp(1.5rem, 2.857vw, 2.5rem);
  --type-body-lead-leading: 1.15;
  --type-body-lead-tracking: -0.03em;
  --type-body-leading: 1.6;
  --type-body-tracking: 0;
  --space-paragraph: 1em;
  --space-heading-subtitle: clamp(1.25rem, 3vw, 2rem);
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  font-synthesis: none;
}

.type-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--type-section-title-size);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-style: normal;
}

:where(h1, h2, h3, h4, h5, h6, .type-h1, .type-h2, .type-h3, .type-h4, .type-h5, .type-h6) {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: normal;
  color: inherit;
  overflow-wrap: break-word;
}

h1, .type-h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
}
.type-company-name-xl {
  margin: 0;
  font-family: var(--type-company-name-xl-family);
  font-weight: var(--type-company-name-xl-weight);
  font-style: normal;
  font-size: var(--type-company-name-xl-size);
  line-height: var(--type-company-name-xl-leading);
  letter-spacing: var(--type-company-name-xl-tracking);
  color: inherit;
  overflow-wrap: break-word;
}
h2, .type-h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
}
h3, .type-h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
}
h4, .type-h4 {
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-leading);
  letter-spacing: var(--type-h4-tracking);
}
/* Bold markup (article **bold**, table headers) stays Regular too. */
b, strong, th { font-weight: var(--weight-body); }
h5, .type-h5 {
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-leading);
  letter-spacing: var(--type-h5-tracking);
}
h6, .type-h6 {
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-tracking);
}

p, .text-body, .text-large, .text-small, .text-xs, .text-lead, .text-xl {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-style: normal;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  overflow-wrap: break-word;
}
.text-large { font-size: var(--type-body-large-size); }
.text-small { font-size: var(--type-body-small-size); }
.text-xs { font-size: var(--type-body-xs-size); }
.text-lead {
  font-size: var(--type-body-lead-size);
  line-height: var(--type-body-lead-leading);
  letter-spacing: var(--type-body-lead-tracking);
}
p + p { margin-top: var(--space-paragraph); }

/* Wrap numeric runs in this class; leave surrounding copy in its own role. */
.type-number {
  font-family: var(--font-numerals);
  font-weight: var(--weight-numerals);
  font-style: normal;
  letter-spacing: 0;
}

button, input, select, textarea { font: inherit; }

/* Paragraph XL: shared Helvetica Neue body family and light weight. */
.text-xl {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--type-paragraph-xl-size);
  line-height: var(--type-paragraph-xl-leading);
  letter-spacing: var(--type-paragraph-xl-tracking);
}

/* Service title: a shared display role with its parenthesised hover counterpart. */
:root {
  --type-service-size: clamp(2.25rem, 5.8vw, 6.5rem);
  --type-service-leading: 1.12;
  --type-service-tracking: -0.045em;
}
.type-service-title, .type-service-title-alternate {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-service-size);
  line-height: var(--type-service-leading);
  letter-spacing: var(--type-service-tracking);
}
.type-service-title-alternate {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
}

/* Shared category and row typography for service tables. */
:root {
  --type-service-table-size: clamp(1.125rem, 2vw, 1.75rem);
  --type-service-table-leading: 1.3;
  --type-service-table-tracking: -0.025em;
}
.type-service-table {
  font-family: var(--font-primary);
  font-weight: var(--weight-heading);
  font-size: var(--type-service-table-size);
  line-height: var(--type-service-table-leading);
  letter-spacing: var(--type-service-table-tracking);
}

/* One responsive role for all three parts of the centered partnership pairing. */
:root { --type-partnership-name-size: clamp(1.25rem, 7vw, 7rem); }
.type-partnership-name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--type-partnership-name-size);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
}

/* Phone type ramp (spec docs/specs/2026-10-08-mobile-pass.md): every phone, portrait or
   landscape, gets the same fixed steps instead of sizes that grow with the screen.
   H1 40, H2 32, Lead 24, Heading (H3-H5) 20, Body 16 (Large and the blog rows join it),
   Small 14, XS 12. Company name XL and the founders story keep their roles. */
@media (max-width: 600px), (max-width: 950px) and (max-height: 550px) and (orientation: landscape) {
  :root {
    --type-h1-size: 2.5rem;
    --type-h2-size: 2rem;
    --type-body-lead-size: 1.5rem;
    --type-h3-size: 1.25rem;
    --type-h4-size: 1.25rem;
    --type-h5-size: 1.25rem;
    --type-body-size: 1rem;
    --type-body-large-size: 1rem;
    --type-service-table-size: 1rem;
    --type-paragraph-xl-size: min(var(--type-h1-size), 13.928355cqw);
    --type-why-us-number-size: var(--type-h1-size);
  }
}

/* Founders story on phones: scales with its column, so every phone keeps the same breaks. */
@media (max-width: 600px) {
  :root {
    /* Founders story scales with its column (11.2em wide, 18em for the summary),
       so every phone keeps the same line breaks. Open leading holds the portraits. */
    --type-founders-title-size: calc((100vw - 2 * var(--page-gutter)) / 11.2);
    --type-founders-title-leading: 1.2;
    --type-founders-summary-size: calc((100vw - 2 * var(--page-gutter)) / 18);
    --type-founders-summary-leading: 1.32;
  }
}
/* Landscape phones: the hero statement follows the screen height so the hero fits. */
@media (max-width: 950px) and (max-height: 550px) and (orientation: landscape) {
  :root {
    --type-paragraph-xl-size: clamp(1.5rem, 6svh, 2.5rem);
  }
}

/* Temporary wordmarks in the centered company-logo row. */
:root { --type-background-logo-size: clamp(1.125rem, 2vw, 2rem); }
.type-background-logo {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--type-background-logo-size);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* Partner lockup on case study pages: the Telemyr mark and name beside the client's wordmark,
   which is sized in em of this role (case-studies/case-study.css). */
:root { --type-lockup-size: clamp(1.75rem, 3.2vw, 3rem); }
.type-lockup {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--type-lockup-size);
  line-height: 1;
  letter-spacing: -0.045em;
}

/* Founders narrative: 90% of the responsive H1 size; other H1s stay unchanged. */
.type-founders-title { font-size: var(--type-founders-title-size); line-height: var(--type-founders-title-leading); }
.type-founders-summary { font-size: var(--type-founders-summary-size); line-height: var(--type-founders-summary-leading); }

/* Why Us cards: a plain H3-sized number, then a regular-weight title over light grey copy. */
.type-card-title { font-weight: var(--weight-heading); }

/* Why Us reels draw their labels in the body face with aligned figures. */
.why-us-reel svg { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* Why Us card numbers: three times the card heading size, tight in the top corner; on phones
   the H1 size, so no number is larger than the page's titles (the phone ramp above). */
.why-us-slider-number { font-size: var(--type-why-us-number-size); line-height: 1; letter-spacing: -0.04em; }