/* ==========================================================================
   TYPOGRAPHY - responsive type scale
   --------------------------------------------------------------------------
   Heading desktop sizes live with their components; paragraph, button and
   menu sizes for ALL breakpoints are set here. Loaded LAST on every page,
   so it is the one place to retune them.

     Paragraphs, buttons, menu ...  16px  /  15px  /  15px
     Section headings ............  40px  /  35px  /  30px
     Small card headings .........  18px  /  17px  /  16px
     Hero + display headings .....  per selector, whole pixels

   Breakpoints: tablet <= 1080px, mobile <= 560px. Every value is a whole
   pixel - no decimals, no rem, no clamp().
   ========================================================================== */

/* DESKTOP (footer address + country pill stay at Figma 14px) */
/* DESKTOP - paragraphs, buttons and menu all run at 16px (overrides the
   per-component desktop sizes; loaded last so it wins on order) */
  .ab-add-foot p,
  .ab-adds-head p,
  .ab-gravity-lede,
  .ab-hero-lede,
  .ab-intro-actions .btn,
  .ab-phil-body p,
  .ab-phil-date,
  .ab-phil-head p,
  .ab-solve-copy p,
  .ab-solve-link,
  .ab-stat p,
  .ab-team-person b,
  .ab-team-side p,
  .apr-hero-lede,
  .apr-phil-card p,
  .apr-phil-copy p,
  .apr-proven-card p,
  .bento-b p,
  .bento-card p,
  .bento-e p,
  .btn,
  .challenge-left p,
  .choose-body p,
  .choose-cols li,
  .choose-more,
  .ct-email span,
  .ct-field input, .ct-field textarea, .ct-field select,
  .ct-field label,
  .ct-form-head p,
  .ct-form-note,
  .ct-hero p,
  .ct-lead > p,
  .ct-office b,
  .ct-office-addr,
  .ct-office-head,
  .ct-offices > .container > p,
  .ct-phone select,
  .ct-step p,
  .cta p,
  .footer-links a,
  .gap-head p,
  .gap-list li,
  .hero-sub,
  .id-challenge p,
  .id-offerings-head p,
  .id-points li,
  .ind-card p,
  .insight-excerpt,
  .insights-all,
  .iw-card-body p,
  .iw-card-link,
  .link-more,
  .news-form .btn,
  .news-form input,
  .news-label,
  .offer-cta,
  .offer-list li,
      .office-line strong,
  .page-lede,
  .phil-list li,
  .process-intro p,
  .proof .section-head p,
  .section-head p,
  .sibling-grid a,
  .system-list li,
  .tl-card p,
  .whatwedo .section-head p,
  .why-cell p,
  .wwd-tab,
  .wwd-text p {
  font-size: 16px;
}
.nav-cta,
.nav-label,
.nav-menu a,
.nav-pill a {
  font-size: 16px;
}

/* Figma: the two slim bento cards (Enterprise-grade delivery, 8+ countries)
   use 14px descriptions so each stays on one line inside its 118 / 98px box */
.bento-b p,
.bento-e p {
  font-size: 14px;
}

/* TABLET */
@media (max-width: 1080px) {
  /* Section headings */
  .ab-adds-head h2,
  .ab-gravity h2,
  .ab-phil-head h2,
  .ab-solve-copy h2,
  .ab-team h2,
  .apr-phil-copy h2,
  .brands-title,
  .challenge h2,
  .choose-nav h2,
  .ct-form-head h2,
  .ct-lead h2,
  .ct-offices h2,
  .cta h2,
  .gap-head h2,
  .id-challenges h2,
  .id-offerings-head h2,
  .ind-title,
  .insights-head h2,
  .iw-expertise-title,
  .process-intro h2,
  .proof .section-head h2,
  .section-head h2,
  .whatwedo .section-head h2,
  .why-head h2 {
    font-size: 35px;
  }

  /* Hero / page display headings */
  .ab-hero h1 {
    font-size: 51px;
  }
  .apr-hero h1 {
    font-size: 55px;
  }
  .ct-hero h1 {
    font-size: 51px;
  }
  .hero-title {
    font-size: 56px;
  }
  .id-hero h1 {
    font-size: 47px;
  }
  .iw-hero h1 {
    font-size: 51px;
  }
  .page-title {
    font-size: 51px;
  }
  .svc-hero h1 {
    font-size: 40px;
  }
  .ab-together p {
    font-size: 34px;
  }
  .offer-body h3 {
    font-size: 23px;
  }

  /* Small card headings */
  .ab-stat h3,
  .apr-proven-card h3,
  .ct-step h3,
  .why-cell h3 {
    font-size: 17px;
  }

  /* Paragraphs, sub-content, list items, links, buttons, form fields */
  .ab-add-foot p,
  .ab-adds-head p,
  .ab-gravity-lede,
  .ab-hero-lede,
  .ab-intro-actions .btn,
  .ab-phil-body p,
  .ab-phil-date,
  .ab-phil-head p,
  .ab-solve-copy p,
  .ab-solve-link,
  .ab-stat p,
  .ab-team-person b,
  .ab-team-side p,
  .apr-hero-lede,
  .apr-phil-card p,
  .apr-phil-copy p,
  .apr-proven-card p,
  .bento-b p,
  .bento-card p,
  .bento-e p,
  .btn,
  .challenge-left p,
  .choose-body p,
  .choose-cols li,
  .choose-more,
  .ct-email span,
  .ct-field input, .ct-field textarea, .ct-field select,
  .ct-field label,
  .ct-form-head p,
  .ct-form-note,
  .ct-hero p,
  .ct-lead > p,
  .ct-office b,
  .ct-office-addr,
  .ct-office-head,
  .ct-offices > .container > p,
  .ct-phone select,
  .ct-step p,
  .cta p,
  .footer-links a,
  .gap-head p,
  .gap-list li,
  .hero-sub,
  .id-challenge p,
  .id-offerings-head p,
  .id-points li,
  .ind-card p,
  .insight-excerpt,
  .insights-all,
  .iw-card-body p,
  .iw-card-link,
  .link-more,
  .news-form .btn,
  .news-form input,
  .news-label,
  .offer-cta,
  .offer-list li,
  .office-flag,
  .office-line,
  .office-line strong,
  .page-lede,
  .phil-list li,
  .process-intro p,
  .proof .section-head p,
  .section-head p,
  .sibling-grid a,
  .system-list li,
  .tl-card p,
  .whatwedo .section-head p,
  .why-cell p,
  .why-head p,
  .wwd-tab,
  .wwd-text p {
    font-size: 15px;
  }
}

/* MOBILE */
@media (max-width: 560px) {
  /* Section headings */
  .ab-adds-head h2,
  .ab-gravity h2,
  .ab-phil-head h2,
  .ab-solve-copy h2,
  .ab-team h2,
  .apr-phil-copy h2,
  .brands-title,
  .challenge h2,
  .choose-nav h2,
  .ct-form-head h2,
  .ct-lead h2,
  .ct-offices h2,
  .cta h2,
  .gap-head h2,
  .id-challenges h2,
  .id-offerings-head h2,
  .ind-title,
  .insights-head h2,
  .iw-expertise-title,
  .process-intro h2,
  .proof .section-head h2,
  .section-head h2,
  .whatwedo .section-head h2,
  .why-head h2 {
    font-size: 30px;
  }

  /* Hero / page display headings */
  .ab-hero h1 {
    font-size: 41px;
  }
  .apr-hero h1 {
    font-size: 41px;
  }
  .ct-hero h1 {
    font-size: 37px;
  }
  .hero-title {
    font-size: 40px;
  }
  .id-hero h1 {
    font-size: 34px;
  }
  .iw-hero h1 {
    font-size: 37px;
  }
  .page-title {
    font-size: 32px;
  }
  .svc-hero h1 {
    font-size: 31px;
  }
  .ab-together p {
    font-size: 24px;
  }
  .offer-body h3 {
    font-size: 20px;
  }

  /* Small card headings */
  .ab-stat h3,
  .apr-proven-card h3,
  .ct-step h3,
  .why-cell h3 {
    font-size: 16px;
  }

  /* Paragraphs, sub-content, list items, links, buttons, form fields */
  .ab-add-foot p,
  .ab-adds-head p,
  .ab-gravity-lede,
  .ab-hero-lede,
  .ab-intro-actions .btn,
  .ab-phil-body p,
  .ab-phil-date,
  .ab-phil-head p,
  .ab-solve-copy p,
  .ab-solve-link,
  .ab-stat p,
  .ab-team-person b,
  .ab-team-side p,
  .apr-hero-lede,
  .apr-phil-card p,
  .apr-phil-copy p,
  .apr-proven-card p,
  .bento-b p,
  .bento-card p,
  .bento-e p,
  .btn,
  .challenge-left p,
  .choose-body p,
  .choose-cols li,
  .choose-more,
  .ct-email span,
  .ct-field input, .ct-field textarea, .ct-field select,
  .ct-field label,
  .ct-form-head p,
  .ct-form-note,
  .ct-hero p,
  .ct-lead > p,
  .ct-office b,
  .ct-office-addr,
  .ct-office-head,
  .ct-offices > .container > p,
  .ct-phone select,
  .ct-step p,
  .cta p,
  .footer-links a,
  .gap-head p,
  .gap-list li,
  .hero-sub,
  .id-challenge p,
  .id-offerings-head p,
  .id-points li,
  .ind-card p,
  .insight-excerpt,
  .insights-all,
  .iw-card-body p,
  .iw-card-link,
  .link-more,
  .news-form .btn,
  .news-form input,
  .news-label,
  .offer-cta,
  .offer-list li,
  .office-flag,
  .office-line,
  .office-line strong,
  .page-lede,
  .phil-list li,
  .process-intro p,
  .proof .section-head p,
  .section-head p,
  .sibling-grid a,
  .system-list li,
  .tl-card p,
  .whatwedo .section-head p,
  .why-cell p,
  .why-head p,
  .wwd-tab,
  .wwd-text p {
    font-size: 15px;
  }
}

/* ==========================================================================
   HEADER TYPE
   Menu matches body copy: 16px desktop (DESKTOP block above), 15px on
   tablet and mobile.
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-cta,
  .nav-label,
  .nav-menu a,
  .nav-pill a,
  .nav-pill.open .nav-menu a {
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  .nav-cta,
  .nav-label,
  .nav-menu a,
  .nav-pill a,
  .nav-pill.open .nav-menu a {
    font-size: 15px;
  }
}

/* Choose lead: small copy under the big "Choose" heading (Figma) */
@media (max-width: 1080px) {
  .choose-lead {
    font-size: 16px;
  }
}