/*
 * About — brand uplift (keeps structure)
 */

/* 0) Section shells (no solid backgrounds to keep global grid visible) */
.about-hero,
.about-philosophy,
.about-cta { padding: 4rem 0; }
.about-mission,
.about-founder { padding: 4rem 0; }

/* 1) Headings */
.about-hero h1,
.about-mission h2,
.about-philosophy h2,
.about-founder h2,
.about-cta h2 {
  font-family: var(--chai-font-heading);
  font-weight: 700;
  line-height: 1.2;
}

/* Subtle insight-gold underline for H2s */
.about-mission h2,
.about-philosophy h2,
.about-founder h2,
.about-cta h2 {
  position: relative;
  display: inline-block;
}
.about-mission h2::after,
.about-philosophy h2::after,
.about-founder h2::after,
.about-cta h2::after {
  content: "";
  display: block;
  height: 4px;
  width: 64px;
  margin: .4rem auto 0;
  background: linear-gradient(90deg, var(--chai-insight-gold), transparent);
  border-radius: 999px;
}

/* 2) Philosophy cards */
.about-philosophy .card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
}
.about-philosophy .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
}

/* 3) Founder card */
.founder-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
}
@media (min-width: 768px) {
  .founder-card .row { min-height: 450px; }
}
.founder-card .card-title {
  margin-bottom: .25rem;
}
.founder-card .btn.btn-outline-primary {
  border-radius: .6rem;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(74,134,232,.15);
}

/* 4) CTA */
.about-cta .btn.btn-primary {
  border-radius: .6rem;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(74,134,232,.25);
}