/* =========================================================
   ABOUT.CSS – clean version for current about.html
   Works with:
   <div class="container page-about">
   ========================================================= */

.page-about {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* Hero */
.about-hero {
  padding: 0;
  margin-bottom: 2rem;
}

.about-hero__grid,
.about-hero__grid--single {
  display: block;
  max-width: 900px;
}

.about-hero__text {
  max-width: 900px;
}

.about-hero__text h1,
.about-hero h1 {
  font-family: Roboto, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  margin: 0 0 1rem 0;
}

.about-hero__subtitle {
  max-width: 850px;
  font-family: Roboto, sans-serif !important;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.about-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* Prose */
.prose {
  max-width: 900px;
}

.prose h2 {
  font-family: Roboto, sans-serif !important;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 2rem 0 1rem;
}

.prose p {
  font-family: Roboto, sans-serif !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.research-list {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.research-list li {
  font-family: Roboto, sans-serif !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .page-about {
    padding: 1.5rem 1rem 2.5rem;
  }

  .about-hero__text h1,
  .about-hero h1 {
    font-size: 42px !important;
  }

  .about-hero__subtitle,
  .prose p,
  .research-list li {
    font-size: 18px;
  }

  .prose h2 {
    font-size: 28px;
  }
}