/* Phone header, shared by Home / Services / Work.
   Problem: the logo is height:26px / width:auto inside a flex row that also holds the nav pills. On a phone the
   pills need more room than is left, so flexbox squeezes the logo sideways and it looks squished.
   Fix: keep the logo's proportions (object-fit: contain), keep the pills on one line, and on phones drop the
   "Contact" pill (Start a Project reaches the same place; Contact stays in the footer and on wider screens). */
@media (max-width: 480px) {
  header nav a[href$="#contact"] { display: none !important; }
  header nav { gap: 2px !important; padding: 4px !important; flex-shrink: 0; }
  header nav a { white-space: nowrap; padding: 10px 13px !important; font-size: 13.5px !important; }
  header > a:first-child { flex: 1 1 auto; min-width: 0; }
  header > a:first-child img { max-width: 100%; object-fit: contain; object-position: left center; }
}
@media (max-width: 400px) {
  header { gap: 10px !important; }
  header nav a { padding: 9px 9px !important; font-size: 12.5px !important; }
}