/* Shared page typography. Page styles own layout and animation wrappers. */
:root {
  --page-heading-weight: 500;
  --page-heading-mobile-size: clamp(2.25rem, 12vw, 3.5rem);
  --page-heading-mobile-leading: 0.94;
  --page-heading-mobile-tracking: -0.055em;
}

h1.page-heading {
  font-family: var(--font-sans);
  font-weight: var(--page-heading-weight);
}

@media (max-width: 620px) {
  [data-barba="container"] h1.page-heading {
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: var(--page-heading-mobile-size);
    line-height: var(--page-heading-mobile-leading);
    letter-spacing: var(--page-heading-mobile-tracking);
    text-wrap: balance;
  }

  h1.page-heading :is(.work-page-title-line, .pricing-page-title-line) {
    display: inline;
    white-space: normal;
  }

  /* Let the long home headline use the viewport with a small edge gutter. */
  .hero--simplified .hero-primary-copy {
    width: calc(100% + 1rem);
    margin-inline: -0.5rem;
  }

  h1.page-heading.about-page-title .reviews-page-title-line {
    display: inline;
    white-space: normal;
    text-align: left;
    margin-left: 0;
  }

  /* Keep the homepage on the shared mobile H1 scale and allow wrapping. */
  h1.page-heading.hero-primary-title > span {
    display: block;
    white-space: normal;
  }
}