/* ══════════════════════════════════════════════════════════════════════════
   eStorePoint — Our Mission (about.php).
   Loaded only by about.php ($head_css = ['about']).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── "Why we exist" kicker ────────────────────────────────────────────────
   Replaces a 5-declaration inline style on a div. <p> rather than <div> so
   it reads as a label above the heading to assistive tech, not a sibling. */
.about-kicker{
  margin:0 0 .7rem;color:var(--green-600);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;
}

/* ── Pull quote ───────────────────────────────────────────────────────────
   Was a .cta-band div with inline text-align: left — a gradient banner
   pretending to be a quotation. This is a real blockquote: the mark is
   decorative and hidden from AT, the words sit in a <p>, the attribution in
   a <footer>. */
.about-quote{
  position:relative;margin:0;padding:2.2rem 2rem;
  background:linear-gradient(150deg,var(--green-700),var(--blue-600));
  color:#fff;border-radius:24px;overflow:hidden;
}
.about-quote::after{
  content:"";position:absolute;inset:auto -40px -70px auto;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.07);pointer-events:none;
}
.about-quote-mark{display:block;color:rgba(255,255,255,.32);line-height:1;margin-bottom:.7rem;}
.about-quote-text{
  position:relative;z-index:1;margin:0;
  font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;line-height:1.35;color:#fff;
}
.about-quote-sub{
  position:relative;z-index:1;display:flex;align-items:center;gap:.4rem;
  margin-top:1rem;opacity:.9;font-size:.9rem;color:rgba(255,255,255,.92);
}

/* The story photo and the quote stack; without the photo the quote would be
   a lone card, so give it a little more room to sit. */
.about-story-img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:20px;box-shadow:var(--shadow);margin-bottom:1.4rem;
}
.about-why > div:last-child{display:flex;flex-direction:column;}
.about-why > div:last-child > .about-quote{margin-top:auto;}

/* ── Impact strip ─────────────────────────────────────────────────────────
   The .impact band is dark green, so its labels have to be light. */
.impact-kicker{color:var(--green-400);}
.impact .section-head h2{color:#fff;}
.impact .section-head p{color:rgba(255,255,255,.82);}

/* Counts animate from 0 in main.js. Until it runs the markup says 0 — give
   the figures tabular numerals so the width never jitters as digits roll. */
.impact-item .num{font-variant-numeric:tabular-nums;}

/* ── Closing CTA ──────────────────────────────────────────────────────────
   Two halves: the pitch on the left, a proof strip on the right. On narrow
   screens they stack with the proof strip first — the numbers are the
   argument, the button is the ask. */
.about-cta{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2.4rem;align-items:center;}
.about-cta-inner{text-align:left;}
.about-cta-inner .kicker{color:rgba(255,255,255,.78);}
.about-cta-inner h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin:.4rem 0 .7rem;}
.about-cta-inner p{max-width:54ch;color:rgba(255,255,255,.9);margin:0;line-height:1.7;}
.about-cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem;}

/* The band's own outline button sits on a dark gradient, so the standard
   outline (dark text on transparent) would be nearly unreadable. */
.about-cta-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08);}
.about-cta-ghost:hover{background:#fff;color:var(--green-700);border-color:#fff;}

.about-trust{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;
}
.about-trust li{
  display:flex;align-items:flex-start;gap:.65rem;
  padding:.95rem 1rem;border-radius:16px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.about-trust li > svg{flex:none;color:var(--lime);margin-top:.15rem;}
.about-trust .t-body{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.about-trust b{color:#fff;font-size:.92rem;font-weight:700;}
.about-trust .t-sub{font-size:.85rem;color:rgba(255,255,255,.85);line-height:1.45;}

@media (max-width:960px){
  .about-cta{grid-template-columns:minmax(0,1fr);gap:1.8rem;}
  /* Proof first, ask second, once they stack. */
  .about-cta-inner{order:2;}
  .about-trust{order:1;}
}

@media (max-width:560px){
  .about-quote{padding:1.7rem 1.4rem;border-radius:18px;}
  .about-trust{grid-template-columns:minmax(0,1fr);}
  .about-cta-actions .btn{width:100%;justify-content:center;}
}