/* ==========================================================================
   Contact Page — Section-specific layouts
   ========================================================================== */

/* ---- Contact 2-Column Layout ---- */

.contact-section {
  padding-block: var(--space-section-y);
}

.contact-section__inner {
  display: grid;
  grid-template-columns: 1fr clamp(16rem, 12.84rem + 13.52vw, 23.75rem);
  gap: var(--space-content-gap);
  align-items: start;
}

@media (max-width: 60rem) {
  .contact-section__inner {
    grid-template-columns: 1fr;
  }
}

/* ---- Success State Section ---- */

.success-section {
  background-color: var(--color-bg-success-section);
  padding-block: var(--space-section-y);
}

.success-section .section-header {
  margin-bottom: var(--space-content-gap);
}

.success-section .section-header h2 {
  margin-bottom: 0.5rem;
}

.success-section .section-header p {
  max-width: 36rem;
}