/* ===================================================================
   ABOUT US PAGE
   Styles for the about page header section. The rest of the page
   reuses shared landing partials styled in landing-sections.css.
   Uses design system variables from design-system.css.
   =================================================================== */


/* ===== PAGE WRAPPER ===== */

.about-page {
  min-height: 100vh;
  background-color: var(--color-white);
}


/* ===== HEADER SECTION ===== */

.about-page__header {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) var(--space-12);
  text-align: center;
}

.about-page__header h1 {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-gray-825);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-6);
  letter-spacing: var(--letter-spacing-tight, -0.02em);
}

.about-page__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-425);
  line-height: var(--line-height-relaxed);
  max-width: 800px;
  margin: 0 auto;
}


/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* ----- Tablet / Mobile: max-width 768px ----- */
@media (max-width: 768px) {
  .about-page__header {
    padding: var(--space-12) var(--space-4) var(--space-8);
  }

  .about-page__header h1 {
    font-size: var(--font-size-4xl);
  }

  .about-page__subtitle {
    font-size: var(--font-size-base);
  }
}