/* ============================================================================================
   One type scale for tablets and phones (up to 991px), the same on every page.
   Desktop keeps its own sizes. Every size is fluid: it follows the screen width, so a
   folded phone (280px), a small phone (320px), a big phone (430px), a foldable (540-853px)
   and a tablet all get a matching, proportional step between the levels.
       H1  page title        H2  section title       H3  sub-title / card title
       H4  small title       Lead  intro paragraph   Body  paragraph      Small  note
   This file is loaded last on every page, so a level changes in one place only.
   ============================================================================================ */
:root {
  --fs-h1: clamp(32px, 9.8vw, 52px);   --lh-h1: 1.14;
  --fs-h2: clamp(28px, 8vw, 42px);     --lh-h2: 1.2;
  --fs-h3: clamp(22px, 6vw, 30px);     --lh-h3: 1.25;
  --fs-h4: clamp(18px, 4.8vw, 22px);   --lh-h4: 1.3;
  --fs-lead: clamp(16px, 4.3vw, 20px); --lh-lead: 1.6;
  --fs-body: clamp(15px, 4vw, 17px);   --lh-body: 1.6;
  --fs-small: clamp(13px, 3.4vw, 14px); --lh-small: 1.45;
}

@media (max-width: 991px) {
  /* ---- H1: the title of a page ---- */
  .m-title, .ct-hero__title, .contact-hero__title, .blog-title, .post-title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .m-title em, .ct-hero__title em, .contact-hero__title em, .blog-title em, .post-title em { font-size: 1.1em; line-height: 1; }

  /* about page title: a grey line and a bold line, like the two-tone headings elsewhere */
  .about-hero__muted { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .about-hero__strong { font-size: var(--fs-h1); line-height: var(--lh-h1); }

  /* ---- H2: the title of a section ---- */
  .features__title, .features__title em,
  .impact__title, .impact__sub, .about-numbers .impact__title, .about-numbers .impact__sub,
  .compare__title,
  .testimonials__title, .testimonials__title strong,
  .cta__title, .cta-section .cta__title,
  .services__lines h4,
  .about-h,
  .hero__eyebrow, .hero__word,
  .h2, .ct-how__h2, .ct-proof__h2, .ct-faq__h2, .fd-head__h2,
  .c-h2, .contact-faq__title,
  .blog-stories__title, .blog-stories > .blog-wrap > h2,
  .post-article .post-sns__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .post-sns__still { font-size: var(--fs-h2); }
  .features__title em { font-size: 1em; }

  /* ---- H3: a sub-title or the title of a big card ---- */
  .clients__title, .clients__title em,
  .feature-card__heading, .feature-card--purple .feature-card__heading,
  .svc-panel__title, .vc-panel__title,
  .belief-row__title, .team__lead,
  .name.ct-display,
  .c-card__title, .c-step__title, .c-steps h3,
  .blog-slide__title,
  .post-article h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

  /* ---- H4: a small title (cards, names) ---- */
  .feature-card__label h5,
  .testimonial-card__title, .testimonial-card__name,
  .team__name,
  .blog-card__title,
  .post-article h3, .post-rel h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

  /* ---- Lead: the paragraph right under a title ---- */
  .hero__lead, .ct-hero__lead, .c-hero__lead, .m-lead, .blog-lead, .fd-head__lead, .post-sub,
  .compare__sub, .services__desc, .team__sub, .ct-faq__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

  /* ---- Body: reading text ---- */
  .feature-card__lead, .feature-card__text, .stat__text,
  .portfolio-card__desc, .vc-panel__text,
  .testimonial-card__quote, .cta__text,
  .belief-row__text, .team__bio, .about-endorsed__text, .quote-card__text,
  .ct-proof__body, .faq-aside__text, .blog-slide__excerpt, .blog-card__excerpt,
  .post-article { font-size: var(--fs-body); line-height: var(--lh-body); }

  /* ---- Small: notes, roles, meta ---- */
  .testimonial-card__role, .form-note, .item__desc, .post-crumb, .post-date { font-size: var(--fs-small); line-height: var(--lh-small); }
}