/* ==========================================================================
   About page — editorial layout: pillars, story timeline, team, principles,
   recognitions and offices. Shared tokens from main.css only. No hard-coded
   palette values that already exist as tokens.
   ========================================================================== */

/* ---- Page hero extras ---- */
.about-hero .orb { z-index: -1; }
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-8);
}
.hero-chips .chip { cursor: default; }
.hero-chips .chip svg { width: 15px; height: 15px; color: var(--emerald-bright); }

/* ---- Mission / Vision / Values pillars ---- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  overflow: hidden;
}
.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-emerald);
  opacity: 0.9;
}
.pillar-card.is-blue::before { background: linear-gradient(135deg, var(--blue-bright), var(--blue-deep)); }
.pillar-card.is-gold::before { background: var(--grad-gold); }
.pillar-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pillar-card h3 { font-size: var(--fs-h4); }
.pillar-card p { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.pillar-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-2);
}
.pillar-values li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-1);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

/* ---- Our story: split narrative + timeline ---- */
.story-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.story-aside { position: sticky; top: calc(var(--nav-h) + 32px); }
.story-aside .lead { color: var(--text-2); }
.story-quote {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(16,185,129,0.1), transparent 60%),
    var(--glass);
}
.story-quote blockquote {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.story-quote blockquote::before {
  content: '“';
  color: var(--emerald);
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 0;
  vertical-align: -0.32em;
  margin-right: 4px;
}
.story-quote .q-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-5);
}
.story-quote .q-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #04120c;
  background: var(--grad-brand);
}
.story-quote .q-name { color: var(--text-0); font-weight: 600; font-size: 0.9rem; }
.story-quote .q-role { color: var(--text-2); font-size: 0.8rem; }

.story-timeline .timeline-item:last-child { padding-bottom: 0; }
.story-timeline .timeline-item.is-now::before {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(245,184,61,0.16);
}
.story-timeline .timeline-item.is-now .year { color: var(--emerald-bright); }

/* ---- Stats band ---- */
.about-stats .stat-bar { padding: 0; }
.about-stats .stat .num .suffix { color: var(--emerald-bright); }

/* ---- Leadership team ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}
.team-top { display: flex; align-items: center; gap: var(--sp-4); }
.team-avatar {
  width: 66px; height: 66px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: #04120c;
  background: var(--grad-brand);
  box-shadow: 0 10px 26px -12px rgba(16,185,129,0.55);
}
.team-avatar.is-blue { background: linear-gradient(135deg, var(--blue-bright), var(--blue-deep)); color: #051022; }
.team-avatar.is-gold { background: var(--grad-gold); color: #1a1204; }
.team-name { font-family: var(--font-display); font-weight: 700; color: var(--text-0); font-size: 1.08rem; letter-spacing: -0.015em; }
.team-role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emerald-bright);
  margin-top: 3px;
}
.team-card p { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.team-social { display: flex; gap: 8px; margin-top: auto; }
.team-social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-xs); border: 1px solid var(--glass-border);
  background: var(--glass); color: var(--text-2);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.team-social a:hover { color: var(--text-0); border-color: var(--emerald); transform: translateY(-2px); }
.team-social svg { width: 15px; height: 15px; }

/* ---- Methodology principles ---- */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.principle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  overflow: hidden;
}
.principle-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.principle-card .icon-chip { margin-bottom: var(--sp-1); }
.principle-card h3 { font-size: var(--fs-h4); }
.principle-card p { color: var(--text-2); font-size: var(--fs-sm); }

/* ---- Recognitions ---- */
.awards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.award-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-6);
}
.award-ico {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(245,184,61,0.12);
  border: 1px solid var(--glass-border);
  color: var(--gold-bright);
}
.award-ico svg { width: 22px; height: 22px; }
.award-year {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
}
.award-card h3 { font-size: 1rem; margin-top: 4px; }
.award-card p { color: var(--text-2); font-size: 0.82rem; margin-top: 4px; }

/* ---- Culture / offices ---- */
.culture-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.culture-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-6); }
.office-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.office-head { display: flex; align-items: center; gap: 12px; }
.office-pin {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--grad-brand-soft);
  border: 1px solid var(--glass-border);
  color: var(--emerald-bright);
}
.office-pin svg { width: 22px; height: 22px; }
.office-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.office-card address {
  font-style: normal;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.office-meta { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-2); }
.office-meta a, .office-meta span {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-1); font-size: 0.86rem; font-family: var(--font-mono);
  transition: color var(--t-fast);
}
.office-meta a:hover { color: var(--emerald-bright); }
.office-meta svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .pillars { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .story-layout { grid-template-columns: 1fr; gap: var(--sp-12); }
  .story-aside { position: static; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .awards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .team-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .awards { grid-template-columns: 1fr; }
  .culture-layout { grid-template-columns: 1fr; }
}