/* Type scale (conversion version). Loaded last so it replaces the scattered sizes in the
   older stylesheets. The hero keeps its own sizes (composition), and so do the display
   numbers (stats, approach step numbers) and the "My approach" perspective title.

   Epilogue (text), 3 sizes, never below 14px:
   - small ..... 14  labels, eyebrows, meta, chips, footer, captions
   - body ...... 16  paragraphs, links, buttons
   - lead ...... 18 desktop / 16 phones  section intros and card ledes

   Francois One (titles), 4 levels, fluid between 375px and 1440px:
   - h2 ........ 36 -> 54  section titles
   - h3 ........ 28 -> 40  sub-block and CTA card titles
   - h4 ........ 24 -> 28  card titles (projects, approach steps, services, reviews)
   - h5 ........ 20 -> 22  small titles inside lists */

:root{
  --fs-small:14px;--fs-body:16px;--fs-lead:18px;
  --fs-h2:clamp(36px,29.7px + 1.69vw,54px);
  --fs-h3:clamp(28px,23.8px + 1.127vw,40px);
  --fs-h4:clamp(24px,22.6px + .376vw,28px);
  --fs-h5:clamp(20px,19.3px + .188vw,22px);
}
@media (max-width:800px){:root{--fs-lead:16px}}

/* Body */
html body :is(.details-body p,.project-info p,.work-more-text,.testimonial-card blockquote p,.approach-grid p,
  .handoff-points p,.about-copy>p,.contact-note,.contact-email,.hero-actions .text-link,.work-more-link,
  .mid-cta-link,.contact-actions .button,.contact-actions .button-label){font-size:var(--fs-body)}
html body :is(.details-body p,.project-info p,.work-more-text,.approach-grid p,.about-copy>p){line-height:1.6}

/* Lead */
html body :is(.expertise-intro>p,.testimonials-heading>p,.approach-section .section-heading>p,.handoff-lede,
  .ns-copy>p,.mid-cta-text,.contact-copy>p:not(.contact-note)){font-size:var(--fs-lead);line-height:1.55}

/* Titles */
html body :is(#expertise-title,#work-title,#testimonials-title,#about-title,#contact-title){font-size:var(--fs-h2)}
html body :is(.handoff-title,.ns-copy h4,.mid-cta-title,.work-more-title){font-size:var(--fs-h3)}
html body :is(.project-info h3,.approach-grid h3,.testimonial-card h3,.expertise-list h3,.about-copy blockquote){font-size:var(--fs-h4)}
html body .handoff-points h4{font-size:var(--fs-h5)}

/* Small (last, and stronger: several labels sit inside paragraphs that get body/lead sizes) */
:root:root:root body :is(.brand-role,.motion-label,.bar-label,.project-type,.eyebrow,.reviews-note,.reviews-note a,
  .testimonial-meta,.testimonial-source,.help-label,.filters button,.bar-list li,.project-link,.fp-path,.fp-note,
  .photo-caption,.interests li,.footer-role,.site-footer p,.footer-links a,.footer-profiles a,.footer-bottom,
  .footer-bottom a,.ns-control label,.ns-output,.ns-note,.slice-sample figcaption,.handoff-eyebrow,.mid-cta-alt,
  .skip-link){font-size:var(--fs-small)}
:root:root:root body .nav-pill-wrap a{font-size:var(--fs-body)}
:root:root:root body .site-footer p{line-height:1.5}