/* Review at 100% browser zoom. Keep the established mobile layout intact. */
@supports (zoom: 0.8) {
  @media screen and (min-width: 901px) {
    .site {
      zoom: 0.8;
      min-height: 125vh;
    }

    /* CSS zoom does not enlarge viewport units as browser zoom does.
       Compensate these lengths so the fluid proportions remain familiar. */
    .variant-object .hero h1 {
      font-size: clamp(3.2rem, 6.25vw, 4.3rem);
    }

    .section-heading {
      column-gap: 8.75vw;
    }

    .section-heading h2 {
      font-size: clamp(3rem, 6.25vw, 5.2rem);
    }

    .section-heading.compact h2 {
      font-size: clamp(2.8rem, 5.375vw, 4.6rem);
    }

    .approach-section {
      gap: 10vw;
      padding-inline: max(40px, 62.5vw - 680px);
    }

    .approach-copy h2 {
      font-size: clamp(3rem, 6vw, 5rem);
    }

    .contact-section,
    .site-footer {
      padding-inline: max(40px, 62.5vw - 680px);
    }

    .contact-section h2 {
      font-size: clamp(3.5rem, 8vw, 7rem);
    }

    .contact-actions a {
      font-size: clamp(1.4rem, 3.75vw, 3rem);
    }
  }

  /* The original 1180px desktop breakpoint, viewed at an 80% scale. */
  @media screen and (width > 944px) {
    .site-header {
      grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr);
      padding-inline: 40px;
    }

    .brand {
      width: 230px;
    }

    .main-nav {
      justify-self: stretch;
      gap: clamp(24px, 3.75vw, 48px);
    }

    .header-actions .phone-link {
      display: inline;
    }

    .variant-object .hero {
      grid-template-columns: minmax(430px, 0.84fr) minmax(620px, 1.16fr);
    }

    .variant-object .hero h1 {
      font-size: clamp(3.5rem, 6.875vw, 5.8rem);
    }

    .capability-layout {
      grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
    }

    .capability-detail {
      min-height: 324px;
    }

    .industry-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .industry-grid article {
      min-height: 330px;
    }
  }
}