.about-intro {
  background: #fff;
}

.history-text {
  max-width: 760px;
  color: var(--ink-soft);
}

.history-text p + p {
  margin-top: 16px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.value-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(147, 20, 81, 0.06);
}

.value-card h3 {
  margin-bottom: 12px;
}

.value-card p {
  color: var(--ink-soft);
}

.value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  list-style: none;
}

.value-list li {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--pink-tint);
  color: var(--primary-deep);
  font-size: 0.9rem;
  font-weight: 700;
}

.milestone-section {
  background: var(--pink-tint);
}

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

.milestone {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.milestone img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.milestone-content {
  padding: 20px;
}

.milestone-year {
  color: var(--primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
}

.milestone h3 {
  margin-top: 6px;
  font-size: 1.05rem;
}

@media (max-width: 860px) {
  .value-grid,
  .milestones {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .value-list {
    grid-template-columns: 1fr;
  }
}