@layer components {
  /* ============================================================================
     CONTACT PAGE
     ============================================================================ */

  .lp-section {
    padding-block: var(--space-2xl);
  }

  .contact-card {
    background-color: var(--color-canvas);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .contact-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .contact-card__title {
    font-size: var(--text-x-large);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-tight);
  }

  .contact-card__subtitle {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin: 0;
  }

  .form-field[type="email"].is-invalid {
    border-color: var(--color-negative);
    background-color: oklch(var(--lch-error-lightest));
  }

  .form-hint {
    font-size: var(--text-small);
    color: var(--color-negative);
    margin-block-start: var(--space-xs);
  }

  /* Responsive: adjust padding on small screens */
  @media (max-width: 640px) {
    .contact-card {
      padding: var(--space-lg);
    }
  }
}