/* The contact page: the words beside the enquiry stepper (.enquire-grid,
   site.css), no hero. The h1 sits one notch under the site's so it holds one
   line beside the form; the lede says "to the right" beside the form and
   "below" once the grid stacks (the same 820px as .enquire-grid). The contact
   rows link with their icon inline; their labels are one word, so the label
   column is a fixed 4.5rem (Email, the widest, fits) and the values line up. */

.contact { padding-top: clamp(3rem, 8vw, 6rem); }
.contact h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 1rem; }
.contact .stacked { display: none; }
@media (max-width: 820px) {
  .contact .beside { display: none; }
  .contact .stacked { display: inline; }
  .contact .stepper { border: 0; padding: 0; }   /* stacked, the card's edge and padding only steal width */
}
.contact-words .hairlines { margin-top: var(--lg); }
.contact-words .hairlines a { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (min-width: 421px) {   /* above this hairlines.css stacks the rows */
  .contact-words .hairlines li { grid-template-columns: 4.5rem 1fr; }
}