.about-page {}

.about-hero-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: var(--space-xl);
  align-items: center;
}
.about-hero-text {
  max-width: 520px;
}
.about-hero-image img {
  width: 100%;
  height: auto;
}

.about-story-inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.about-mission-box {
  background: var(--color-surface-contrast);
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.about-mission-lead {
  font-size: 18px;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--space-lg);
}

.about-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-lg);
}
.about-process-step {
  min-width: 0;
}

.about-focus-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-xl);
  align-items: center;
}
.about-focus-text {
  max-width: 420px;
}

.about-usp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-lg);
}

.about-cta-box {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  background: var(--color-surface-secondary);
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 1000px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
  }
  .about-focus-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .about-process-grid {
    grid-template-columns: 1fr;
  }
  .about-usp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }
}