/* ==========================================================================
   CONTACT — assets/css/pages/contact.css
   Form on the left, the Clerk's details boxed alongside. The plugin form is
   styled in components.css under "Plugin output".
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: start;
}

.contact__main { min-width: 0; }

.contact__fallback { font-size: 15px; color: var(--ink-body); margin: 0 0 20px; max-width: 52ch; }

.contact__h { font-size: 17px; margin: 0 0 14px; }
.contact__h--sub {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-cream);
}

.contact__line { font-size: 15.5px; margin: 0 0 8px; }
.contact__line a { color: var(--navy-link); text-decoration: underline; text-underline-offset: 3px; }
.contact__line a:hover { color: var(--navy); }

.contact__addr { font-size: 14.5px; line-height: 1.65; color: var(--ink-body); margin: 0 0 12px; }
.contact__note { font-size: 14px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 10px; }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 34px; }
}