/* ═══════════════════════════════════════════════════════════════
   ABOUT — Seyi Kayode Foundation
   Brand: Navy #0D2C4B | Green #629926 | Font: Montserrat
   ═══════════════════════════════════════════════════════════════ */

/* ── PAGE HERO (about variant) ────────────────────────────────── */
.page-hero::before {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 500px; height: 500px;
  border-radius: 50%; background: rgba(98,153,38,0.07);
}

/* ── WHO WE ARE ───────────────────────────────────────────────── */
.who-section {
  background: #FEFEFE; padding: 112px 72px;
  display: flex; align-items: center; gap: 88px;
}
.who-text { flex: 1; max-width: 580px; }
.who-img-area { flex: 0 0 380px; position: relative; padding-bottom: 64px; }
.who-img-main {
  border-radius: 6px; overflow: hidden;
  transform: rotate(2.5deg);
  box-shadow: 0 22px 60px rgba(0,0,0,0.13);
}
.who-img-main img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; object-position: center; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.who-img-main:hover img { transform: scale(1.08); }
.who-img-inset {
  position: absolute; bottom: 0; left: -32px; width: 50%;
  border-radius: 6px; overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  border: 5px solid #FEFEFE;
}
.who-img-inset img { width: 100%; display: block; aspect-ratio: 1/1; object-fit: cover; object-position: center top; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.who-img-inset:hover img { transform: scale(1.08); }

/* ── MISSION & VISION ─────────────────────────────────────────── */
.mv-section { background: #EEF2F7; padding: 100px 72px; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
.mv-card { background: #FEFEFE; padding: 48px 44px; border-radius: 6px; }
.mv-card-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 56px; font-weight: 800; color: rgba(98,153,38,0.18); line-height: 1; margin-bottom: 20px;
}
.mv-card-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px; font-weight: 700; color: #0D2C4B; margin-bottom: 16px;
}
.mv-card-text { font-size: 15px; color: #4A6280; line-height: 1.85; }

/* ── VALUES ───────────────────────────────────────────────────── */
.values-section { background: #0D2C4B; padding: 100px 72px; }
.values-section .display-h2 { color: #FEFEFE; max-width: 520px; }
.values-section .display-h2 em { color: #629926; }
.values-section .section-tag { color: rgba(254,254,254,0.5); }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #1A3A5C; margin-top: 56px; }
.value-cell { background: #0D2C4B; padding: 44px 36px; }
.value-icon {
  font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 800;
  color: #629926; margin-bottom: 18px; line-height: 1;
}
.value-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px; font-weight: 700; color: #FEFEFE; margin-bottom: 12px;
}
.value-text { font-size: 14px; color: rgba(254,254,254,0.55); line-height: 1.8; }

/* ── APPROACH ─────────────────────────────────────────────────── */
.approach-section { background: #FEFEFE; padding: 100px 72px; }
.approach-list { margin-top: 48px; display: flex; flex-direction: column; gap: 0; }
.approach-item {
  display: flex; align-items: flex-start; gap: 40px;
  padding: 40px 0; border-bottom: 1px solid rgba(13,44,75,0.08);
}
.approach-item:last-child { border-bottom: none; }
.approach-num {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 48px; color: rgba(13,44,75,0.1); line-height: 1; flex-shrink: 0; width: 64px;
}
.approach-content { flex: 1; }
.approach-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px; font-weight: 700; color: #0D2C4B; margin-bottom: 12px;
}
.approach-text { font-size: 15px; color: #4A6280; line-height: 1.85; }

/* ── PARTNERS (about version) ─────────────────────────────────── */
.partners-section { background: #EEF2F7; padding: 100px 72px; }
.partners-inner { margin-top: 56px; }
.partners-intro { font-size: 15.5px; color: #4A6280; line-height: 1.9; max-width: 640px; margin-bottom: 56px; }
.partners-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.partner-card {
  background: #FEFEFE; padding: 44px 40px; border-radius: 6px;
  display: flex; align-items: flex-start; gap: 24px;
}
.partner-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #EEF2F7;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800;
  color: #0D2C4B; flex-shrink: 0;
}
.partner-info { flex: 1; }
.partner-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px; font-weight: 700; color: #0D2C4B; margin-bottom: 10px;
}
.partner-desc { font-size: 14px; color: #4A6280; line-height: 1.75; }
.partner-cta-box {
  margin-top: 48px; padding: 40px; background: #FEFEFE; border-radius: 6px; text-align: center;
}
.partner-cta-box h3 {
  font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700;
  color: #0D2C4B; margin-bottom: 12px; line-height: 1.3;
}
.partner-cta-box p {
  font-size: 14.5px; color: #4A6280; line-height: 1.75; max-width: 480px; margin: 0 auto 28px;
}

/* ── MEET THE TEAM ────────────────────────────────────────────── */
.team-section { background: #FEFEFE; padding: 100px 72px; }
.team-inner { max-width: 1200px; }
.team-intro {
  font-size: 15.5px; color: #4A6280; line-height: 1.9;
  max-width: 580px; margin-top: -8px; margin-bottom: 64px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.team-card { display: flex; flex-direction: column; }
.team-photo {
  border-radius: 6px; overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 8px 28px rgba(13,44,75,0.08);
}
.team-photo img {
  width: 100%; display: block;
  aspect-ratio: 5/6; object-fit: cover; object-position: top center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.team-card:hover .team-photo img { transform: scale(1.06); }
.team-info { padding: 0 4px; }
.team-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 700; color: #0D2C4B;
  margin-bottom: 5px; line-height: 1.3;
}
.team-role {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #629926; display: block;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .page-hero { padding: 80px 48px 68px; }
  .who-section { padding: 88px 48px; }
  .mv-section, .values-section, .approach-section, .team-section, .partners-section { padding-left: 48px; padding-right: 48px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .page-hero-h1 { font-size: 48px; }
  .who-section { flex-direction: column; padding: 72px 32px; gap: 52px; }
  .who-img-area { flex: none; width: 100%; max-width: 460px; margin: 0 auto; }
  .mv-section, .values-section, .approach-section, .team-section, .partners-section { padding: 72px 32px; }
  .mv-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .partners-cards { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .page-hero-h1 { font-size: 36px; }
  .approach-item { flex-direction: column; gap: 16px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}