/* Keep phone controls available in the header without covering page content. */
.mobile-call-label { display: none; }
@media (max-width: 800px) {
  header .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-rows: 44px 44px;
    grid-template-areas: "brand call" "brand menu";
    gap: 4px 12px;
    align-content: center;
  }
  header .nav > a:first-child {
    grid-area: brand;
    min-width: 0;
    align-self: center;
  }
  header .logo { max-width: 100%; }
  header .nav > .btn {
    grid-area: call;
    display: inline-flex;
    width: 84px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.2;
  }
  .desktop-call-label { display: none; }
  .mobile-call-label { display: inline; }
  header .menu {
    grid-area: menu;
    width: 84px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.2;
  }
  .mobile-call { display: none; }
  footer { padding-bottom: 25px; }
}