@layer components {
  /* ==========================================================================
     Contact Page Styles
     Page-specific overrides for the contact page
     ========================================================================== */

  /* Contact hero: solid background, centered text (same pattern as about hero) */
  .contact-hero {
    background: var(--color-lab-50);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    text-align: center;
  }

  .contact-hero h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    color: var(--color-lab-900);
  }

  .contact-hero .hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    max-width: 42rem;
    margin: 1rem auto 0;
  }

  /* Form section */
  .contact-form-section {
    padding: var(--spacing-lg) 0 var(--spacing-xl);
  }

  /* Centered, narrower form for readability */
  .contact-form {
    max-width: 36rem;
    margin: 0 auto;
  }

  /* Responsive adjustments */
  @media (min-width: 48rem) {
    .contact-hero h1 {
      font-size: var(--font-size-4xl);
    }
  }
}