/* Keep every page hero full width while centering the remaining page content. */
:root {
  --content-max: 1200px;
}

main > :not(.fulltype-hero):not(.page-hero),
.site-footer {
  --gutter: max(clamp(24px, 4.4vw, 84px), calc((100vw - var(--content-max)) / 2));
}

/* These two sections have their own horizontal layout rules. */
#why.why {
  padding-inline: var(--gutter);
}

.concept-page .concept-content {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--gutter);
}

/* Keep the PEOPLE backdrop tied to the capped stage, including its final dot. */
.v34 #about .people-stage {
  container-type: inline-size;
  min-height: 0;
}

.v34 #about .people-word {
  left: 50%;
  width: max-content;
  padding-inline-end: .09em;
  font-size: min(23vw, 324px);
  font-size: min(27cqw, 324px);
  translate: -50% 0;
  transform: none;
  animation: none;
}

/* The same composition fits on both sides of the former 1200px breakpoint. */
@media (min-width: 851px) {
  .v34 #about .people-intro {
    grid-template-columns: .45fr 1fr;
  }

  .v34 #about .people-intro > div {
    grid-template-columns: 1fr;
  }

  .v34 #about .people-intro h2 {
    font-size: clamp(36px, 4.3vw, 52px);
  }

  .v34 #about .people-intro p:not(.section-label) {
    margin-top: 0;
  }

  .v34 #about .people-word {
    top: min(4cqw, 48px);
  }

  .v34 #about .person-cut {
    width: 43%;
  }

  .v34 #about .person-credit strong {
    font-size: clamp(25px, 2.7vw, 34px);
  }
}

/* Match desktop type to the capped content width instead of the viewport. */
@media (min-width: 1500px) {
  .v32 .services > .section-heading h2 {
    font-size: 100px;
  }

  .v34 .service-link-tiles strong {
    font-size: 40px;
  }

  .works-index .portfolio-caption h3 {
    font-size: 23px;
  }
}