/* One type system: five roles, nothing in between.
   Display  — section titles (unchanged, --okto-display).
   Statement — intro statements and product promises.
   Title    — item titles: services, cases, deliverables.
   Body     — all running text: one size, one weight, always ink.
   Label    — eyebrows and numbers, caps.
   Loaded last; it only sets size, weight, line height and colour. */
:root {
  --type-statement: clamp(32px, 3.333vw, 48px);
  --type-title: clamp(24px, 2.222vw, 32px);
  --type-body: clamp(19px, 1.528vw, 22px);
  --type-label: 14px;
  --type-product: clamp(64px, 7.778vw, 112px);
}

/* Statement */
html body :is(.intro.section-pad > h2, .home-clarity .okto-product-title) {
  font-size: var(--type-statement); font-weight: 300; line-height: 1.12; letter-spacing: -.03em;
}

/* Title */
html body :is(
  .services .service-copy > h3,
  .ado-content > h3,
  .ado-proof-title,
  .home-clarity .okto-lead
) {
  font-size: var(--type-title); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-transform: none;
}

/* Body */
html body :is(
  .work .project-description,
  .services-intro > p,
  .services .service-delivery,
  .services-engagement,
  .ado-lead,
  .ado-content li p,
  .home-clarity .okto-product-descriptor,
  .home-clarity .okto-copy-lead,
  .home-clarity .okto-deliverable p,
  .home-clarity .home-clarity-scope,
  .contact-bottom > p,
  .contact-email
) {
  font-size: var(--type-body); font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}

/* Label */
html body :is(
  .section-label,
  .work .project-disciplines,
  .services .service-number,
  .ado-story ol > li > span:first-child,
  .home-clarity-eyebrow
) {
  font-size: var(--type-label); font-weight: 400; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--okto-muted, #62665f);
}

/* Names inside a list read as body text set in bold, so tight grids never hyphenate. */
html body .home-clarity .okto-deliverable h4 {
  font-size: var(--type-body); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; hyphens: manual;
}
/* An eyebrow is one line. */
html body .home-clarity .home-clarity-eyebrow { max-width: none; width: max-content; white-space: nowrap; }

/* Case text sits on photographs and keeps its white. */
html body .work .project .project-description,
html body .work .project .project-disciplines { color: inherit; }

/* Product blocks: the shared system and scene styles set these with doubled
   classes, so the roles repeat that weight here. */
html body .home-clarity .okto-product-name.okto-product-name--teaser.okto-product-name--teaser { font-size: var(--type-product); line-height: .95; }
html body .home-pod-scene .home-product-identity .okto-product-descriptor.okto-product-descriptor,
html body .home-pod-scene .home-product-footer .home-clarity-scope.okto-type-caption.okto-type-caption {
  font-size: var(--type-body); font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}

/* ── Other pages ─────────────────────────────────────────────────────────
   The shared content classes carry the roles; page classes fill the gaps.
   Text on ink or photographs keeps its own colour (see the last rule).
   Page styles here use deep selectors (and #about-main), so these roles add
   one ID step with :not(#type-roles), an ID no element carries. */

/* Statement */
html body:not(#type-roles) :is(.offering-lead, .clarity-feature-title, .brandpod-feature-title) {
  font-size: var(--type-statement); font-weight: 300; line-height: 1.12; letter-spacing: -.03em;
}

/* Title */
html body:not(#type-roles) :is(
  .okto-type-subsection.okto-type-subsection,
  .okto-lead.okto-lead,
  .about-brand-point-heading,
  .engagement-item-title
) {
  font-size: var(--type-title); font-weight: 700; line-height: 1.15; letter-spacing: -.025em;
}

/* Body */
html body:not(#type-roles) :is(
  .okto-type-body.okto-type-body,
  .okto-copy-lead.okto-copy-lead,
  .okto-type-supporting.okto-type-supporting,
  .okto-product-descriptor.okto-product-descriptor,
  .about-brand-intro-copy,
  .about-brand-point-body,
  .about-heart-descriptor,
  .about-heart-copy,
  .about-brand-transformation-bottom,
  .SkillsRows_content__Eos_9 p,
  .engagement-item-body,
  .offering-body,
  .case-description,
  .okto-deliverable p,
  .bp-plain-list li,
  .bp-closing-line,
  .contact-intro
) {
  font-size: var(--type-body); font-weight: 300; line-height: 1.45; letter-spacing: -.01em; color: var(--okto-ink, #181b18);
}
/* Names inside lists: body size, bold. */
html body:not(#type-roles) .okto-deliverable h4.product-output-title {
  font-size: var(--type-body); font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}

/* Label */
html body:not(#type-roles) :is(
  .okto-type-label.okto-type-label,
  .about-brand-team-label,
  .case-client,
  .bp-hero-index,
  .bp-section-word
) {
  font-size: var(--type-label); font-weight: 400; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--okto-muted, #62665f);
}

/* Ink sections and photographs keep their own text colour. */
html body:not(#type-roles) :is(.bp-section-ink, .offering-hero, .work .project) :is(p, span, a, h2, h3, h4) { color: inherit; }