/* ════════════════════════════════════════════════════════════════════════
   CONNECT — ABOUT PAGE · bespoke Layer-3 composition (namespaced .ab-*)
   Everything ABOVE this banner is byte-identical to connect-home.css (V13.37):
   locked tokens, atoms, nav + footer chrome are copied, never rebuilt.
   Only NEW .ab-* classes appear below. (@keyframes up is reused from above.)
   ════════════════════════════════════════════════════════════════════════ */
.ab-h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:.2rem}
.ab-narrow{max-width:780px}
.ab-sec-head{margin-bottom:2.6rem;max-width:680px}
.ab-hero{position:relative;overflow:hidden;padding:9.5rem 0 5rem;background:radial-gradient(110% 90% at 16% 0%,#FFFDF8 0%,var(--base) 62%)}
.ab-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.ab-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.7rem,6vw,5rem);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;margin:.1rem 0 1rem}
.ab-hero h1 .line{display:block;overflow:hidden}
.js .ab-hero h1 .ln{display:inline-block;transform:translateY(108%);animation:up .9s cubic-bezier(.16,1,.3,1) forwards}
.ab-hw{font-size:1.5rem;transform:rotate(-4deg);margin:.1rem 0 .6rem}
.ab-lead{color:var(--w70);font-size:1.1rem;max-width:520px}
.ab-photo-col{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.ab-photo-wrap{position:relative;width:100%;max-width:380px;border:var(--bd) solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--elev);transform:rotate(-1.4deg);transition:transform .5s cubic-bezier(.16,1,.3,1);box-shadow:0 18px 50px rgba(86,63,37,.10)}
.ab-photo-wrap:hover{transform:rotate(0)}
.ab-photo{width:100%;height:auto;display:block}
.ab-founder-id{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
.ab-founder-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:var(--w)}
.ab-founder-role{font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--w50)}
.ab-note{color:var(--w);font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.7;margin-top:.6rem}
.ab-what-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.ab-what-body p{color:var(--w70);font-size:1.05rem;line-height:1.75}
.ab-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ab-why-card{padding:1.9rem 1.7rem}
.ab-why-ic{width:48px;height:48px;border-radius:12px;background:var(--neon-dim);display:flex;align-items:center;justify-content:center;color:var(--neon);margin-bottom:1.2rem}
.ab-why-ic svg{width:22px;height:22px}
.ab-why-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:-.01em;margin-bottom:.5rem}
.ab-why-card p{color:var(--w70);font-size:.95rem;line-height:1.65}
.ab-count-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.ab-count-text p{color:var(--w70);font-size:1.05rem;line-height:1.75;margin-top:1rem;max-width:460px}
.ab-steps{list-style:none;display:flex;flex-direction:column;gap:1.1rem;margin:0;padding:0}
.ab-step{padding:1.5rem 1.7rem;display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.2rem;align-items:start}
.ab-step-n{grid-row:span 2;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem;color:var(--neon)}
.ab-step h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;margin-bottom:.25rem}
.ab-step p{color:var(--w70);font-size:.94rem;line-height:1.6}
.ab-open-inner p{color:var(--w);font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.7;margin-top:.6rem}
.ab-cta-inner{max-width:720px;margin:0 auto;text-align:center}
.ab-cta-hw{font-size:1.4rem;transform:rotate(-4deg);margin-bottom:.6rem}
.ab-cta-inner p{color:var(--w70);font-size:1.08rem;margin-top:.8rem}
.ab-cta-actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:1.9rem}
@media(max-width:920px){
  .ab-hero{padding:8rem 0 3.5rem}
  .ab-hero-inner{grid-template-columns:1fr;gap:2.6rem}
  .ab-photo-col{order:-1}
  .ab-what-grid{grid-template-columns:1fr;gap:1.4rem}
  .ab-why-grid{grid-template-columns:1fr 1fr}
  .ab-count-grid{grid-template-columns:1fr;gap:2.2rem}
  .ab-count-text p{max-width:none}
}
@media(max-width:600px){ .ab-why-grid{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .js .ab-hero h1 .ln{transform:none!important} }