/* Keep the phone prominent without crowding navigation or the mobile menu. */
.header-inner { gap: 24px; }
.header-inner > nav { gap: 22px; }
.header-contact { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; }
.header-phone { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-size: 28px; font-weight: 720; line-height: 1.2; letter-spacing: -.035em; white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.header-phone:hover { color: var(--green-ink); }
.header-contact .button { min-height: 30px; padding: 5px 12px; gap: 12px; border-radius: 7px; font-size: 11px; }
.header-contact .button::after { font-size: 14px; }

@media (min-width:901px) and (max-width:1150px) {
  .header-inner { gap: 20px; }
  .header-inner > nav { gap: 17px; }
  .header-phone { font-size: 24px; }
}

@media (max-width:900px) {
  .header-contact { margin-left: auto; }
  .header-inner > .menu-toggle { margin-left: 0; }
}

@media (max-width:640px) {
  :root { --header-height: 112px; }
  .header-inner { display: grid; grid-template-columns: minmax(0,1fr) 44px; grid-template-rows: 48px 44px; gap: 4px 16px; padding-block: 8px; }
  .header-inner > .brand { grid-column: 1; grid-row: 1; width: 64px; }
  .header-inner > .menu-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
  .header-contact { grid-column: 1/-1; grid-row: 2; margin: 0; align-items: center; }
  .header-phone { font-size: 28px; }
  .header-contact .button { display: none; }
}