/* ==========================================================================
   SPEARPOINT ADVISORS — Contact Page Stylesheet
   ==========================================================================
   Page-specific rules only. Loaded after style.css, so it can rely on all
   design tokens (--color-*, --space-*, --fs-*, --radius-*, --shadow-*,
   --transition-*) and shared components already defined there.

   Reuses as-is (no rules needed here): .hero-decor + orbs, .eyebrow,
   .section-decor + glows, .container, .btn, .reveal.
   ========================================================================== */

/* --- Form section — heading + form together, no separate hero --- */
.contact-form-section {
  padding-top: calc(var(--nav-height) + var(--space-12));
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
}

.contact-form-section__header {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.contact-card {
  max-width: 720px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-10);
}

@media (max-width: 640px) {
  /* Centered by design on tablet/desktop (see base rule above);
     left-aligned on phones only. */
  .contact-form-section__header {
    text-align: left;
  }

  .contact-card {
    padding: var(--space-6);
  }
}