/* ============================================================
   About page
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-height) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background: var(--gradient-hero);
  text-align: center;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: 1rem; }
.page-hero p { font-size: var(--fs-lead); color: var(--color-text-secondary); }
.page-hero .breadcrumb { justify-content: center; margin-bottom: 1.5rem; }

.about-story { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .about-story { grid-template-columns: 1.05fr 0.95fr; } }
.about-story__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-card-lg);
}
.about-story__media img { width: 100%; height: 100%; object-fit: cover; }
.about-story h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.about-story p { color: var(--color-text-secondary); line-height: var(--lh-relaxed); }
.about-story p + p { margin-top: 1rem; }

.value-card { text-align: left; }
.value-card .icon-badge { margin-bottom: 1rem; }

.mission-band {
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}
.mission-band blockquote {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  max-width: 720px;
  margin: 0 auto 1rem;
  color: var(--color-text-primary);
}
.mission-band cite { color: var(--color-accent); font-style: normal; font-size: var(--fs-sm); }

.trust-grid .icon-badge { background: linear-gradient(135deg, rgba(212,178,106,0.16), rgba(212,178,106,0.04)); border-color: rgba(212,178,106,0.35); color: var(--color-gold-bright); }

.timeline { max-width: 760px; margin-inline: auto; position: relative; padding-left: 2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--gradient-line);
}
.timeline__item { position: relative; padding-bottom: 2rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: -2rem;
  top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(0,199,118,0.15);
}
.timeline__year { color: var(--color-accent-bright); font-weight: var(--fw-bold); font-family: var(--font-display); font-size: var(--fs-sm); }
.timeline__item h3 { font-size: var(--fs-h4); margin: 0.35rem 0 0.4rem; }
.timeline__item p { color: var(--color-text-secondary); font-size: var(--fs-sm); }