/**
 * About Us page.
 *
 * A verbatim port of sections/about-story.liquid.
 *
 * The hero is in page-hero.css, shared with the Contact page. The
 * certifications and CTA banner further down are homepage sections whose CSS
 * already ships in style.css, so neither is repeated here.
 *
 * Loaded only on this page, per the per-page CSS rule.
 * Depends on tokens.css and base.css.
 *
 * @package maaz-dev
 */


.about-story { padding: 64px 0; background: #FFFFFF; }
.about-story__inner { max-width: 900px; margin: 0 auto; padding: 0 32px; }

.about-story__content {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #444444;
  line-height: 1.85;
  margin-bottom: 56px;
}
.about-story__content p { margin: 0 0 20px; }
.about-story__content h2 { font-size: 22px; font-weight: 700; color: #111111; margin: 32px 0 14px; }
.about-story__content img { border-radius: 12px; margin: 24px 0; }

.about-company { margin-bottom: 56px; padding: 28px 32px; background: #FAFAFA; border: 1px solid #EEEEEE; border-radius: 12px; font-family: 'Inter', sans-serif; }
.about-company__title { font-size: 22px; font-weight: 700; color: #111111; margin: 0 0 8px; }
.about-company__text { font-size: 16px; color: #444444; line-height: 1.6; margin: 0 0 20px; }
.about-company__list { display: grid; gap: 12px; margin: 0; }
.about-company__list dt { font-size: 13px; font-weight: 600; color: #666666; margin: 0 0 2px; }
.about-company__list dd { font-size: 15px; color: #111111; margin: 0; }
.about-company__list a { color: #8B0000; text-decoration: underline; text-underline-offset: 3px; }

.about-story__header { text-align: center; margin-bottom: 32px; }
.about-story__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: #111111;
  margin: 0;
}

.about-story__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-value { text-align: center; padding: 20px; }
.about-value__icon { font-size: 32px; display: block; margin-bottom: 14px; }
.about-value__title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: #111111; margin: 0 0 8px; }
.about-value__text { font-family: 'Inter', sans-serif; font-size: 14px; color: #666666; line-height: 1.6; margin: 0; }

@media screen and (max-width: 768px) {
  .about-story { padding: 44px 0; }
  .about-story__inner { padding: 0 20px; }
  .about-story__grid { grid-template-columns: 1fr; gap: 20px; }
}