/* ============================================================
   About page — bespoke sections (in addition to site.css)
   ============================================================ */

/* ============ ABOUT HERO ============ */
.ahero{ width:100%; background:var(--cream); padding:38px var(--sec-x); display:flex; align-items:center; gap:64px; }
.ahero__body{ flex:1; }
.ahero__eyebrow{ font-family:'Poppins',sans-serif; font-size:18px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0 0 12px; }
.ahero h1{ margin:0 0 16px; font-family:'Manrope',sans-serif; font-weight:700; font-size:62px; line-height:1.1; color:var(--head); letter-spacing:-.01em; }
.ahero p{ margin:0; font-size:19px; line-height:1.7; color:var(--ink-2); max-width:620px; }
.ahero__img{ flex:1 1 380px; width:100%; max-width:540px; min-width:0; height:auto; aspect-ratio:2/1; border-radius:24px; object-fit:cover; }

/* ============ VALUES ============ */
.values{ width:100%; background:#fff; padding:38px var(--sec-x); }
.values__head{ max-width:880px; margin:0 0 26px; }
.values__head h2{ margin:0 0 12px; font-family:'Manrope',sans-serif; font-weight:700; font-size:48px; line-height:1.1; color:var(--ink); }
.values__head p{ margin:0; font-size:18px; line-height:1.7; color:var(--ink); }
.values__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vcard{ background:var(--offwhite); border-radius:26px; padding:32px; border:1px solid #eef1f0; }
.vcard__ic{ width:54px; height:54px; border-radius:14px; background:var(--cream); color:var(--red); display:grid; place-items:center; margin-bottom:16px; }
.vcard__ic svg{ width:28px; height:28px; }
.vcard h3{ margin:0 0 10px; font-family:'Manrope',sans-serif; font-weight:700; font-size:28px; color:var(--ink); }
.vcard p{ margin:0; font-size:17px; line-height:1.7; color:var(--ink); }

/* ============ STATS ============ */
.stats{ width:100%; background:var(--red); color:#fff; padding:34px var(--sec-x); display:flex; justify-content:space-between; gap:40px; }
.stat{ text-align:center; flex:1; }
.stat__n{ font-family:'Manrope',sans-serif; font-weight:800; font-size:60px; line-height:1; }
.stat__l{ font-family:'Poppins',sans-serif; font-size:18px; margin-top:8px; color:rgba(255,255,255,.85); }
.stat__divider{ width:1px; background:rgba(255,255,255,.22); }

/* ============ TESTIMONIALS ============ */
.tst{ width:100%; background:var(--cream); padding:38px var(--sec-x); }
.tst__title{ margin:0 0 24px; font-family:'Manrope',sans-serif; font-weight:700; font-size:48px; color:var(--ink); }

/* ============ COMMUNITY PARTNERS ============ */
.partners{ width:100%; background:#fff; padding:38px var(--sec-x); }
.partners__title{ margin:0 0 22px; font-family:'Manrope',sans-serif; font-weight:700; font-size:48px; color:var(--ink); }

/* Featured partner card: when a real logo is set it replaces the gradient
   text mark, so drop the gradient and sit the logo on white instead. */
.pcard__mark--logo{
  background:#fff; border:1px solid #eef1f0; padding:20px;
}
.pcard__mark--logo img{
  width:100%; height:100%; object-fit:contain; display:block;
}

/* ---- accreditation / affiliation logo strip ---- */
.plogos__title{
  margin:36px 0 18px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:24px; color:var(--head);
}
.plogos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:stretch;
}
.plogo{
  background:#fff; border:1px solid #eef1f0; border-radius:16px;
  padding:18px; display:grid; place-items:center; min-height:104px;
}
.plogo img{
  max-width:100%; max-height:76px; width:auto; height:auto;
  object-fit:contain;
  /* Logos arrive as mixed JPEG (white box) and PNG (transparent); a white
     card behind them keeps both looking consistent. */
}
.plogo__link{ display:grid; place-items:center; width:100%; height:100%; }
.plogo__link:hover img{ opacity:.75; transition:opacity .18s ease; }

@media (max-width:1100px){
  .plogos{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .plogos{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .plogo{ min-height:100px; padding:16px; }
  .plogos__title{ font-size:21px; margin-top:28px; }
}

@media (max-width:980px){
  .nav, .ahero, .values, .stats, .tst, .partners, .cta, .footer{ width:100%; }

  .ahero{ flex-direction:column; align-items:stretch; padding:26px 28px; gap:20px; }
  .ahero h1{ font-size:clamp(34px,8vw,52px); }
  .ahero p{ font-size:16px; max-width:none; }
  .ahero__img{ flex:none; width:100%; max-width:none; height:auto;
    aspect-ratio:2/1; order:-1; }

  .values{ padding:28px 28px; }
  .values__head h2{ font-size:clamp(28px,6.5vw,40px); }
  .values__head p{ font-size:16px; }
  .values__grid{ grid-template-columns:1fr; gap:18px; }
  .vcard{ padding:26px; }
  .vcard h3{ font-size:24px; }
  .vcard p{ font-size:16px; }

  .stats{ flex-direction:column; padding:26px 28px; gap:20px; }
  .stat__divider{ display:none; }
  .stat__n{ font-size:48px; }

  .tst{ padding:28px 28px; }
  .tst__title{ font-size:clamp(28px,6.5vw,40px); margin-bottom:20px; }

  .partners{ padding:28px 28px; }
  .partners__title{ font-size:clamp(28px,6.5vw,40px); margin-bottom:20px; }
}
@media (max-width:560px){
  .ahero, .values, .stats, .tst, .partners{ padding-left:20px; padding-right:20px; }
}