/* ============================================================
   ABOUT PAGE — /about/ institutional story
   Works alongside components.css + research.css + tools.css.
   Uses a neutral navy-on-cream palette — no pillar accent —
   because About is the institutional level, above the pillars.
   ============================================================ */

.about-page {
  --about-accent: var(--ls-navy-900);
  --about-accent-soft: rgba(6, 36, 59, 0.06);
}

/* ---------- Hero ---------- */
.about-hero {
  background: linear-gradient(135deg, var(--ls-navy-900) 0%, #1a2f4a 100%);
  color: var(--color-text-inverse);
  padding-block: calc(var(--section-y) * 0.9) var(--section-y);
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 600px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px solid rgba(127, 225, 212, 0.12);
  pointer-events: none;
}
.about-hero .breadcrumb { color: var(--color-text-inverse-muted); }
.about-hero .breadcrumb a { color: var(--color-text-inverse-muted); }
.about-hero .breadcrumb a:hover { color: var(--ls-teal-300); }
.about-hero .breadcrumb [aria-current] { color: var(--ls-teal-300); }
.about-hero__eyebrow {
  color: var(--ls-teal-300);
  margin-bottom: var(--space-4);
}
.about-hero h1 {
  color: var(--ls-white);
  max-width: 28ch;
  margin-top: var(--space-3);
}
.about-hero .lead {
  color: var(--color-text-inverse-muted);
  max-width: 62ch;
  margin-top: var(--space-5);
}
.about-hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

/* ---------- Mission ---------- */
.about-mission {
  padding-block: var(--section-y);
  background: var(--ls-white);
}
.about-mission__heading {
  margin-top: var(--space-3);
  max-width: 30ch;
}
.about-mission__body {
  margin-top: var(--space-6);
  max-width: 62ch;
}
.about-mission__body p + p { margin-top: var(--space-5); }

/* ---------- Approach (three pillars) ---------- */
.about-approach {
  padding-block: var(--section-y);
  background: var(--ls-cream-50, var(--ls-neutral-50, #f8f6f1));
  border-top: 1px solid var(--ls-neutral-200, rgba(0, 0, 0, 0.06));
  border-bottom: 1px solid var(--ls-neutral-200, rgba(0, 0, 0, 0.06));
}
.about-approach__header {
  max-width: none;
  margin-bottom: var(--space-9);
}
.about-approach__header h2 {
  margin-top: var(--space-3);
  max-width: 26ch;
}
.about-approach__header .lead {
  margin-top: var(--space-5);
  max-width: none;
  text-align: justify;
  hyphens: auto;
}
.about-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 900px) {
  .about-approach__grid { grid-template-columns: 1fr; }
}
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--ls-white);
  border: 1px solid var(--ls-neutral-200, rgba(0, 0, 0, 0.08));
  border-top: 4px solid var(--ls-navy-900);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(6, 36, 59, 0.25);
  text-decoration: none;
  color: inherit;
}
.pillar-card:nth-child(1) { border-top-color: var(--pillar-research, var(--ls-navy-900)); }
.pillar-card:nth-child(2) { border-top-color: var(--pillar-technology, var(--ls-teal-500)); }
.pillar-card:nth-child(3) { border-top-color: var(--pillar-initiatives, #E8A94B); }

.pillar-card__num {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.pillar-card__tag {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ls-navy-900);
}
/* Pillar tag text stays navy for readability; color cue comes from
   the top border stripe and the section number. */
.pillar-card:nth-child(1) .pillar-card__tag { color: var(--ls-navy-900); }
.pillar-card:nth-child(2) .pillar-card__tag { color: var(--ls-navy-900); }
.pillar-card:nth-child(3) .pillar-card__tag { color: var(--ls-navy-900); }

.pillar-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xl, 1.375rem);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  line-height: var(--lh-snug);
  margin: var(--space-3) 0 var(--space-4);
}
.pillar-card__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  flex-grow: 1;
}
.pillar-card__cta {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
}

/* ---------- Theory of change ---------- */
.about-theory {
  padding-block: var(--section-y);
  background: var(--ls-white);
}
.about-theory__heading {
  margin-top: var(--space-3);
  max-width: 30ch;
}
.about-theory__body {
  margin-top: var(--space-6);
  max-width: 62ch;
}
.about-theory__body p + p { margin-top: var(--space-5); }

/* ---------- Leadership ---------- */
.about-leadership {
  padding-block: var(--section-y);
  background: var(--ls-cream-50, var(--ls-neutral-50, #f8f6f1));
}
.about-leadership__header {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-9);
}
.about-leadership__header h2 {
  margin-top: var(--space-3);
  max-width: 22ch;
}
.about-leadership__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 1100px) {
  .about-leadership__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .about-leadership__grid { grid-template-columns: 1fr; }
}
.leader-card {
  padding: var(--space-6);
  background: var(--ls-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--ls-neutral-200, rgba(0, 0, 0, 0.06));
}
.leader-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full, 9999px);
  background: linear-gradient(135deg, var(--ls-navy-900), #1a2f4a);
  margin-bottom: var(--space-4);
  opacity: 0.85;
}
.leader-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}
.leader-card__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.leader-card__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
.about-leadership__footer {
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
}

/* ---------- Board ---------- */
.about-board {
  padding-block: var(--section-y);
  background: var(--ls-white);
}
.about-board__header {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-9);
}
.about-board__header h2 {
  margin-top: var(--space-3);
  max-width: 30ch;
}
.about-board__header .lead {
  margin-top: var(--space-5);
  max-width: 62ch;
}
.about-board__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1100px) {
  .about-board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .about-board__grid { grid-template-columns: 1fr; }
}
.board-card {
  padding: var(--space-5);
  background: var(--ls-cream-50, var(--ls-neutral-50, #f8f6f1));
  border-left: 3px solid var(--ls-navy-900);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.board-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  margin: 0 0 var(--space-2);
}
.board-card__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.board-card__affiliation {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-body);
  line-height: var(--lh-snug);
}
.about-board__footer {
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
}

/* ---------- Funders & transparency ---------- */
.about-funders {
  padding-block: var(--section-y);
  background: var(--ls-cream-50, var(--ls-neutral-50, #f8f6f1));
}
.about-funders__header {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-9);
}
.about-funders__header h2 {
  margin-top: var(--space-3);
  max-width: 30ch;
}
.about-funders__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .about-funders__grid { grid-template-columns: 1fr; }
}
.funder-panel {
  padding: var(--space-6);
  background: var(--ls-white);
  border: 1px solid var(--ls-neutral-200, rgba(0, 0, 0, 0.06));
  border-top: 3px solid var(--ls-navy-900);
  border-radius: var(--radius-md);
}
.funder-panel__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  margin: 0 0 var(--space-3);
  line-height: var(--lh-snug);
}
.funder-panel__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
.funder-panel__links {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ls-neutral-200, rgba(0, 0, 0, 0.06));
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------- Contact ---------- */
.about-contact {
  padding-block: var(--section-y);
  background: var(--ls-white);
}
.about-contact__header {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-9);
}
.about-contact__header h2 {
  margin-top: var(--space-3);
  max-width: 22ch;
}
.about-contact__eyebrow {
  margin-bottom: var(--space-5);
}
.about-contact h2 {
  margin-top: var(--space-4);
}
.about-contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 700px) {
  .about-contact__grid { grid-template-columns: 1fr; }
}
.contact-card {
  padding: var(--space-6);
  background: var(--ls-cream-50, var(--ls-neutral-50, #f8f6f1));
  border-radius: var(--radius-md);
  border-left: 3px solid var(--ls-teal-500);
  display: flex;
  flex-direction: column;
}
.contact-card__tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ls-teal-500);
}
.contact-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  line-height: var(--lh-snug);
  margin: var(--space-3) 0 var(--space-3);
}
.contact-card__body {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  flex-grow: 1;
}
.contact-card__email {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ls-navy-900);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.contact-card__email:hover { color: var(--ls-teal-700, var(--ls-teal-500)); }
.about-contact__address {
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.about-contact__address a { color: var(--ls-navy-900); }

/* ---------- CTA variant ---------- */
.cta-block--about {
  background: var(--ls-navy-900);
  color: var(--color-text-inverse);
}
.cta-block--about .eyebrow { color: var(--ls-teal-300); }
.cta-block--about h2 { color: var(--ls-white); }
.cta-block--about .lead { color: var(--color-text-inverse-muted); }