/* ==========================================================================
   Contact Us: contact-main (intro + LexHost form card) · contact-help
   Form components are global (styles/components.css).
   ========================================================================== */

/* ---------- Intro + form ---------- */
.contact-main__layout { display: grid; gap: var(--space-10); align-items: start; }
.contact-main__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.contact-main__intro > * { max-width: var(--measure); }
.contact-main h1 { font-size: var(--text-4xl); margin-bottom: calc(var(--space-1) * var(--title-gap-scale)); }
.contact-main__form h2 { font-size: var(--text-2xl); margin-bottom: calc(var(--space-5) * var(--title-gap-scale)); }
.contact-main__form .btn { align-self: flex-start; }

.contact-points { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-4); }
.contact-point { display: flex; align-items: flex-start; gap: var(--space-4); }
.contact-point p { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; line-height: var(--leading-snug); }
.contact-point strong { font-weight: var(--weight-semibold); color: var(--color-heading); }
.contact-point span { font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-point .icon-circle { flex-shrink: 0; }

@media (min-width: 1024px) {
  .contact-main__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); }
}

/* ---------- Quick answers ---------- */
.contact-help h2 { font-size: var(--text-3xl); margin-bottom: calc(var(--space-6) * var(--title-gap-scale)); }
.contact-help__grid { display: grid; gap: var(--grid-gap); }
.help-card .card__body { gap: var(--space-3); }
@media (min-width: 768px) { .contact-help__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }