/*
  Site-wide visual integrity layer.
  Loaded last so every case study and editorial template keeps readable type,
  stable grids and recoverable horizontal overflow.
*/

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-padding-top: 104px;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

:where(img, video, canvas, svg, iframe) {
  max-width: 100%;
}

:where(h1, h2, h3) {
  max-inline-size: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

:where(main, section, article, aside, header, footer, nav, figure, div) {
  min-width: 0;
}

:where(pre, table, .editorial-table, .audit-table-wrap, .cluster-code, .code-block) {
  max-width: 100%;
}

:where(pre, .editorial-table, .audit-table-wrap, .cluster-code, .code-block) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* Display headlines remain expressive without becoming layout-breaking objects. */
:is(
  .im-hero h1,
  .ex-hero-copy h1,
  .cluster-hero h1,
  .cluster-hub-head h1,
  .ap-hero h1,
  .approval-page .ap-hero h1,
  .audit-hero h1,
  .raduga-hero h1,
  .sc-hero h1,
  .editorial-hero h1,
  .blog-hub-hero h1,
  .blog-article-hero h1
) {
  font-size: clamp(48px, 5.3vw, 82px) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}

:is(
  .im-section-head h2,
  .im-problem h2,
  .im-catalog h2,
  .im-final h2,
  .ex-tool-head h2,
  .ex-story h2,
  .ex-metrics h2,
  .ex-cta h2,
  .ex-related h2,
  .ex-hub-head h2,
  .cluster-section h2,
  .cluster-semantic-box h2,
  .cluster-cta h2,
  .ap-copy-body h2,
  .ap-lede .ap-copy-body h2,
  .ap-signature-head h2,
  .ap-final-cta h2,
  .audit-section-head h2,
  .audit-final h2,
  .raduga-intro h2,
  .raduga-screen h2,
  .raduga-cta h2,
  .sc-section-head h2,
  .related-projects > h2,
  .projects-clients-head h2,
  .blog-feature-intro h2,
  .blog-archive h2,
  .blog-hub-cta h2
) {
  font-size: clamp(42px, 4.7vw, 76px) !important;
  line-height: .96 !important;
  letter-spacing: -.052em !important;
}

.related-card--impulse-am h3 {
  max-width: 14ch !important;
  font-size: clamp(42px, 4.3vw, 68px) !important;
  line-height: .95 !important;
}

/* Very long button labels should wrap as a deliberate two-line label. */
:where(.button, .button-primary, .button-secondary, button, [role="button"]) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  html { scroll-padding-top: 82px; }

  :is(
    .im-hero h1,
    .ex-hero-copy h1,
    .cluster-hero h1,
    .cluster-hub-head h1,
    .ap-hero h1,
    .approval-page .ap-hero h1,
    .audit-hero h1,
    .raduga-hero h1,
    .sc-hero h1,
    .editorial-hero h1,
    .blog-hub-hero h1,
    .blog-article-hero h1
  ) {
    font-size: clamp(40px, 11vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
  }

  :is(
    .im-section-head h2,
    .im-problem h2,
    .im-catalog h2,
    .im-final h2,
    .ex-tool-head h2,
    .ex-story h2,
    .ex-metrics h2,
    .ex-cta h2,
    .ex-related h2,
    .ex-hub-head h2,
    .cluster-section h2,
    .cluster-semantic-box h2,
    .cluster-cta h2,
    .ap-copy-body h2,
    .ap-lede .ap-copy-body h2,
    .ap-signature-head h2,
    .ap-final-cta h2,
    .audit-section-head h2,
    .audit-final h2,
    .raduga-intro h2,
    .raduga-screen h2,
    .raduga-cta h2,
    .sc-section-head h2,
    .related-projects > h2,
    .projects-clients-head h2,
    .blog-feature-intro h2,
    .blog-archive h2,
    .blog-hub-cta h2
  ) {
    font-size: clamp(34px, 9.5vw, 50px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }

  .related-card--impulse-am h3 {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: .98 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}