/* About page — institutional narrative layout */

.about-hero-lead {
  max-width: 42rem;
  margin: 0.75rem auto 0;
  font-size: 1.15rem;
  line-height: 1.7;
  opacity: 0.92;
}

.about-story-block {
  max-width: 48rem;
}

.about-story-block p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary, #64748b);
}

.about-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
}

.about-stat {
  min-width: 140px;
}

.about-stat strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--teal-500, #0e9e76);
  line-height: 1.2;
}

.about-stat span {
  font-size: 0.9rem;
  color: var(--text-secondary, #64748b);
}

.about-principle-card {
  height: 100%;
}

.about-problem-card {
  border-inline-start: 4px solid #e74c3c;
  height: 100%;
}

.about-solution-card {
  border-inline-start: 4px solid var(--mg-secondary, #0e9e76);
  height: 100%;
}

.about-quote {
  border-inline-start: 4px solid var(--teal-500, #0e9e76);
  padding-inline-start: 1.25rem;
  margin: 2rem 0;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--navy-800, #0d2137);
  line-height: 1.65;
}

[dir="rtl"] .about-quote {
  border-inline-start: none;
  border-inline-end: 4px solid var(--teal-500, #0e9e76);
  padding-inline-start: 0;
  padding-inline-end: 1.25rem;
}