/* ==========================================================================
   About Page — philosophy pillars, leadership, founding partners' quote,
   core values
   ========================================================================== */

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.approach-card {
  padding: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
}

.approach-card__title {
  font-size: 1.55rem;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
}

.approach-card__title em {
  display: block;
  font-style: normal;
  color: var(--accent);
}

.approach-card__desc {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.identity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-lg);
}

.identity-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

/* ---- Team ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

.team-member {
  text-align: center;
}

.team-member__photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--color-navy-800);
  margin-bottom: var(--space-xs);
}

.team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Placeholder card for a not-yet-filled seat: same photo box, a
   generic silhouette instead of a real photo, and deliberately generic
   copy so it's obvious this is a stand-in, not a real, unnamed person. ---- */
.team-member__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--ghost-rgb), 0.35);
  border-style: dashed;
}

.team-member__photo--placeholder svg {
  width: 42%;
  height: 42%;
}

.team-member__name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
}

.team-member__role {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.15rem;
}

/* ---- Founding Partners — reuses .pull-quote (article.css) verbatim, the
   same treatment used inside Thought Leadership articles, so this reads
   as the same component rather than a new one. Only the two-line
   attribution (name row + role row) is specific to this placement.

   The section itself carries an atmospheric background video, same
   grid + video-overlay language as the page-heroes (see page-hero.css),
   introduced fresh here since this section previously had no such
   treatment. Kept deliberately subtle/dark: .pull-quote already sits in
   its own solid navy-900 box (opaque, not transparent), so the quote text
   stays fully legible regardless of what the video is doing behind it —
   the video mainly reads in the margins around the box. ---- */
.founders {
  position: relative;
  overflow: hidden;
}

.founders__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: saturate(0.8) contrast(1.05);
  pointer-events: none;
}

.founders__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 15, 34, 0.55) 0%, rgba(6, 15, 34, 0.75) 100%);
  pointer-events: none;
}

.founders__grid {
  position: absolute;
  inset: -10% -10%;
  background-image: url('../images/blueprint-grid.svg');
  background-size: 96px 96px;
  opacity: 0.18;
  pointer-events: none;
}

.founders__inner {
  position: relative;
  z-index: 1;
}

.founders__quote {
  margin-top: var(--space-lg);
}

.founders__quote cite span {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- Core Values ---- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.value-card {
  padding: var(--space-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
}

.value-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-md);
  color: var(--accent);
}

.value-card__icon svg {
  width: 100%;
  height: 100%;
}

.value-card__title {
  font-size: 1.55rem;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
}

.value-card__desc {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

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

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .values-grid {
    grid-template-columns: 1fr;
  }
}