/* Tablet layout: the desktop header and four-column footer need more room than 800 px. */
@media (min-width: 801px) and (max-width: 1100px) {
  .header { height: 98px; }

  .header .nav,
  .header .header-cta { display: none; }

  .header .menu-button {
    margin-left: auto;
    display: flex;
    width: 44px;
    height: 38px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    background: none;
    border: 0;
  }

  .header .menu-button i { display: block; width: 34px; height: 2px; background: var(--light); }

  .header .nav.is-open {
    position: absolute;
    z-index: 5;
    top: 98px;
    left: 0;
    display: flex;
    width: 100%;
    padding: 30px 5vw;
    flex-direction: column;
    gap: 18px;
    background: var(--dark);
    font-size: 16px;
  }

  .about-grid { grid-template-columns: 55% 45%; }
  .stats { grid-column: 1 / -1; width: 72%; }
  .stairs-about { width: 78vw; right: -14%; }

  .services-grid { grid-template-columns: 28% 72%; }
  .service-list { padding-top: 120px; }
  .service-list summary { grid-template-columns: 72px 1fr 40px; }
  .service-list summary b { font-size: 66px; }

  .audit-grid { grid-template-columns: 44% 56%; }
  .audit-slogan { display: none; }
  .form > p { white-space: normal; }

  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer-actions { grid-column: 2; grid-row: 2; }
  .legal { grid-row: 3; }
  .legal-company { grid-column: 2; grid-row: 3; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 34px; }
  .hero-slogan { font-size: 8px; padding-left: 17px; }
  .stats strong { font-size: 37px; }
  .stats span { font-size: 9px; }
  .audit h2 { font-size: 39px; }
}