/* ==========================================================================
   PRISM — About page (page-specific; shared components live in
   components.css / sections.css and are reused here, not redefined)
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* About hero — centered, text-only. Deliberately distinct from the        */
/* homepage's split hero (no two-column layout, no floating glass cards)   */
/* so this page doesn't read as a re-skin of the homepage.                 */
/* ---------------------------------------------------------------------- */
.about-hero {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--space-8);
  position: relative;
  overflow: clip;
  text-align: center;
}
.about-hero__inner { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; }
.about-hero__badge { margin-bottom: var(--space-5); }
.about-hero__title { margin-bottom: var(--space-5); }
.about-hero__title em {
  font-style: normal;
  font-weight: inherit;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-hero__sub { font-size: var(--fs-lead); color: var(--ink-500); max-width: 62ch; margin-inline: auto; margin-bottom: var(--space-6); }
.about-hero__list { text-align: left; max-width: 480px; margin-inline: auto; }
.about-hero__ctas { justify-content: center; }

/* This hero is shorter than the homepage hero, so full-size hero blobs
   read as a harsh wash here — scale them down specifically for this
   section (same treatment as the portfolio hero). */
.about-hero .bg-mesh__blob--1 { width: 380px; height: 380px; top: -120px; right: -80px; opacity: 0.32; }
.about-hero .bg-mesh__blob--2 { width: 320px; height: 320px; bottom: -140px; left: -100px; opacity: 0.26; }
[data-theme="dark"] .about-hero .bg-mesh__blob--1 { opacity: 0.22; }
[data-theme="dark"] .about-hero .bg-mesh__blob--2 { opacity: 0.18; }
@media (max-width: 640px) {
  .about-hero .bg-mesh__blob--1 { width: 240px; height: 240px; top: -70px; right: -60px; opacity: 0.28; }
  .about-hero .bg-mesh__blob--2 { width: 200px; height: 200px; bottom: -90px; left: -70px; opacity: 0.22; }
}

/* ---------------------------------------------------------------------- */
/* Our Story — narrative text beside a vertical milestones timeline        */
/* ---------------------------------------------------------------------- */
.story__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-8); }
.story__text { color: var(--ink-500); margin-top: var(--space-5); }
.story__text + .story__text { margin-top: var(--space-4); }
.story__callout {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--brand-gradient-soft);
  border-left: 3px solid var(--brand-indigo);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font-size: 1.0625rem;
}
[data-theme="dark"] .story__callout { border-left-color: var(--brand-aqua); }
.story__callout strong { font-weight: 700; }

.story__timeline { padding: var(--space-6); }
.timeline-item {
  position: relative;
  margin-left: 10px;
  padding: 0 0 var(--space-6) var(--space-6);
  border-left: 2px solid var(--border-strong);
}
@media screen and (max-width: 768px){ .story__timeline{padding:1rem;} }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 0 0 4px var(--glass-bg-solid);
}
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item__year {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-indigo);
  margin-bottom: var(--space-2);
}
[data-theme="dark"] .timeline-item__year { color: var(--brand-aqua); }
.timeline-item__title { font-size: 1.125rem; margin-bottom: var(--space-2); }
.timeline-item__desc { color: var(--ink-500); font-size: 0.9375rem; }

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* What We Believe — calm, single-accent principle cards (deliberately     */
/* flatter than the homepage's per-card-colored Why-Prism grid, so this    */
/* page reads distinct rather than repeating that exact treatment)         */
/* ---------------------------------------------------------------------- */
.principles__grid { grid-template-columns: repeat(2, 1fr); }
.principle-card { display: flex; flex-direction: column; }
.principle-card__icon { margin-bottom: var(--space-5); }
.principle-card__title { margin-bottom: var(--space-3); }
.principle-card__desc { color: var(--ink-500); }

@media (max-width: 640px) { .principles__grid { grid-template-columns: 1fr; } }