/* About page */

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }
.story-grid p { color: var(--mist); margin-bottom: 18px; line-height: 1.8; }

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-card {
  padding: 36px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.mv-card h3 { font-size: 1.3rem; margin-bottom: 14px; }
.mv-card p { color: var(--mist); line-height: 1.7; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
.value-card {
  text-align: center;
  padding: 28px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  transition: transform 0.4s var(--ease), border-color 0.3s ease;
}
.value-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.value-card svg { width: 26px; height: 26px; color: var(--blue-soft); margin: 0 auto 14px; }
.value-card h4 { font-size: 0.92rem; }

.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 32px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--blue), var(--green), var(--purple));
  opacity: 0.4;
}
.timeline-item {
  position: relative;
  padding-bottom: 48px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--blue-soft);
}
.timeline-item .t-year {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--blue-soft);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.timeline-item h4 { font-size: 1.1rem; margin-bottom: 8px; }
.timeline-item p { color: var(--mist); font-size: 0.92rem; max-width: 520px; }