/* Page-specific additions for /about — built on top of tokens/base/components/layout. */

.about-hero{
  --glow: var(--violet);
  padding: 130px var(--side) 110px;
  min-height: 560px;
  display: flex; align-items: center;
}
.about-hero .hero-content{ max-width: 680px; }
.about-hero h1{ font-size: 50px; line-height: 1.12; }
.about-hero p{ font-size: 17px; line-height: 1.6; color: var(--paper-soft); max-width: 680px; }
.about-hero .statement{ font-size: 20px; line-height: 1.5; color: var(--text); font-weight: 500; max-width: 640px; }

.big-statement{
  text-align: center; max-width: 640px; margin: 8px auto 0;
  font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.45; color: var(--text);
}

/* Pillar cards (Connecture IQ / Products / Academy) */
.pillar-card{ justify-content: space-between; min-height: 260px; }
.pillar-card h3{ font-size: 22px; }
.card-link{
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  border-top: 1px solid var(--line); padding-top: 16px; display: block; margin-top: auto;
}
.card-link:hover{ color: var(--turquoise); }

/* Closing statement before final CTA */
.closing-statement{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  max-width: 640px; margin: 0 auto;
}
.closing-statement h2{ font-size: 32px; color: var(--text); }
.closing-statement p{ font-size: 17px; line-height: 1.6; color: var(--paper-soft); }
.closing-statement .brand-line{ font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--turquoise); margin-top: 8px; }

/* Short cause list (Strategy / Technology / Training without ...) */
.cause-list{ display: flex; flex-direction: column; gap: 10px; max-width: 600px; }
.cause-list p{ font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 640px){
  .about-hero h1{ font-size: 32px; }
  .about-hero .statement{ font-size: 17px; }
  .closing-statement h2{ font-size: 24px; }
}