.hero-services__mobile {
  display: none;
}

.hero-meta .hero-services > span {
  color: inherit;
}

@media (max-width: 767px) {
  :root {
    --mobile-grid-color: rgba(243, 239, 231, 0.075);
    --mobile-grid-lines:
      linear-gradient(to right, var(--mobile-grid-color) 1px, transparent 1px),
      linear-gradient(to bottom, var(--mobile-grid-color) 1px, transparent 1px);
  }

  html.light {
    --mobile-grid-color: rgba(10, 10, 10, 0.085);
  }

  .hero#top .hero-services {
    width: 100%;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }

  .hero-services__desktop {
    display: none;
  }

  .hero-services__mobile {
    display: inline-block;
    white-space: nowrap;
  }

  .hero#top .hero-bottom .cta-button {
    background: var(--paper);
    isolation: isolate;
  }

  /* The grid travels with each section, not with the browser viewport. */
  .bg-grid {
    display: none !important;
  }

  .hero#top,
  .commercial-preview .preview-featured-work,
  .work-draft:not(.project-template) main > section,
  .contact-preview main > section.contact-hero,
  .contact-preview main > section.contact-page,
  .contact-preview main > section.contact-channel {
    background-color: var(--paper);
    background-image: var(--mobile-grid-lines);
    background-size: 40px 40px;
    background-position: center top;
    background-attachment: scroll;
  }

  /* Keep the complete reading area opaque. Only the outer 16px retain
     a fading square-grid rail, clear of the 18px minimum text gutter. */
  main > section.motion-studies,
  main > section.statement,
  main > section.services,
  main > section.gallery,
  main > section.cta {
    background-color: var(--paper);
    background-image:
      linear-gradient(to right, transparent, var(--paper) 16px,
        var(--paper) calc(100% - 16px), transparent),
      var(--mobile-grid-lines);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    background-position: center top;
    background-repeat: no-repeat, repeat, repeat;
    background-attachment: scroll;
  }

  /* Replace the old narrow, fading side rails with an even square grid. */
  .commercial-preview main > section:not(#future-field)::before,
  .work-draft:not(.project-template) main > section::before,
  .contact-preview main > section::before {
    display: none;
  }

  .project-case-page main::after {
    background-image: var(--mobile-grid-lines);
    background-size: 40px 40px;
    background-position: center top;
    background-repeat: repeat;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #future-field:not(.has-reconstruction-motion) {
    background-image:
      var(--mobile-grid-lines),
      linear-gradient(rgba(10, 10, 10, 0.76), rgba(10, 10, 10, 0.76)),
      url('../images/optimized/adaptive-shell-1920.webp');
    background-size: 40px 40px, 40px 40px, auto, cover;
    background-position: center top, center top, center, center;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
  }

  /* Solid surfaces give banners, cards and the form a clear reading boundary. */
  #recent-clients,
  main > section.banner,
  .motion-studies__tile,
  .work-draft .featured-work-item,
  .services .service-card,
  .project-case-page .project-case-grid,
  .project-case-page .project-case-navigation,
  .contact-preview .contact-panel,
  footer {
    background-color: var(--paper);
    background-image: none;
  }
}