/* =========================================================================
   ABOUT PAGE — page-specific styles (loads only on page-about.php)
   --------------------------------------------------------------------
   Story grid (founder portrait split), three-rule values grid,
   team cards, and the closing dark CTA.
   --------------------------------------------------------------------
   The .faq item styles used by the homepage FAQ teaser live in
   home.css. The full /faq page uses its own faq.css.
   ========================================================================= */

/* TEAM CARDS */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.team-card {
  --stamp-bg: var(--parchment);
  padding: 32px 28px 30px;
  text-align: center;
}
.team-card::before { inset: 14px; }
.team-portrait {
  width: 110px; height: 110px;
  border-radius: 50%;
  margin: 0 auto 22px;
  background:
    linear-gradient(135deg, #4F7186, #2E4A5C),
    repeating-linear-gradient(135deg, rgba(244,237,225,.08) 0 2px, transparent 2px 6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--parchment);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 36px;
  font-weight: 500;
  border: 1px solid rgba(28,30,34,.08);
}
.team-card h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--lon-blue);
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
.team-card .role {
  font-family: var(--f-stamp);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--oxide-rust);
  margin-bottom: 14px;
}
.team-card .bio {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--basalt-ink);
  opacity: .82;
  margin-bottom: 14px;
  text-wrap: pretty;
}
.team-card .creds {
  font-family: var(--f-stamp);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--stone);
  border-top: 1px solid rgba(46,74,92,.15);
  padding-top: 12px;
  margin-top: 14px;
}

/* Story two-column */

/* STORY GRID (founder portrait split) */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.story-grid h3 {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--lon-blue);
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.story-grid h3 em { font-style: italic; font-weight: 700; }
.story-grid p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--basalt-ink);
  opacity: .85;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.story-grid p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-weight: 700;
  float: left;
  font-size: 58px;
  line-height: .9;
  margin: 4px 10px 0 0;
  color: var(--oxide-rust);
}
.story-portrait-img {
  height: 460px;
  border-radius: 2px;
}

/* Values list */

/* VALUES GRID — three rules */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 30px;
}
.value-item {
  text-align: left;
}
.value-item .v-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 56px;
  font-weight: 500;
  color: var(--oxide-rust);
  line-height: 1;
  margin-bottom: 14px;
}
.value-item h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--lon-blue);
  margin-bottom: 12px;
  letter-spacing: -.005em;
}
.value-item p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--basalt-ink);
  opacity: .85;
  text-wrap: pretty;
}


/* MOBILE — about-specific (site-wide rules in site.css) */
@media (max-width: 960px) {
  .story-grid, .values-grid, .team-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Eyebrow tone variants used by the About page (replaces inline styles
   from the prototype). */
.story-eyebrow,
.team-eyebrow {
  color: var(--stone);
  opacity: 1;
  margin-bottom: 14px;
}