/* About page — layout additions only.
   All design tokens, utilities, and animations come from front-page.css (loaded globally). */

/* ---- Hero ---- */
.about-hero{ padding-top:clamp(7rem,20vw,11rem); text-align:center; }
.about-hero .display-xl{ max-width:20ch; margin-inline:auto; margin-bottom:1.25rem; }
.about-hero .lede{ max-width:52ch; margin-inline:auto; }

/* ---- Founder ---- */
.founder-grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(2rem,7vw,4rem); align-items:center;
}
.founder-photo-wrap{ display:flex; justify-content:center; }
.founder-photo{
  width:min(240px,80vw); aspect-ratio:3/4;
  border-radius:120px; object-fit:cover; object-position:center top;
  display:block; background:var(--surface);
}
/* Placeholder until real photo is swapped in */
.founder-placeholder{
  width:min(240px,80vw); aspect-ratio:3/4;
  border-radius:120px;
  background:linear-gradient(150deg,var(--grad-1),var(--grad-2));
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(3.5rem,12vw,5.5rem); color:#fff; letter-spacing:-.025em;
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
.founder-label{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--label); font-weight:600; margin:0 0 .45rem; display:block;
}
.founder-copy h2{ margin:.1rem 0 1.25rem; }
.founder-copy .lede{ margin:0; color:var(--text-muted); }

/* ---- Story ---- */
.story-grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.75rem,5vw,3rem);
}
.story-head h2{ margin-top:.5rem; }
.story-body p{
  color:var(--text-muted); font-size:clamp(1rem,2.4vw,1.08rem);
  line-height:1.75; margin:0 0 1.1rem;
}
.story-body p:last-child{ margin-bottom:0; }

/* ---- Differentiators ---- */
.diff-card{ padding:1.6rem; height:100%; }
@media (hover:hover){ .diff-card:hover{ background:var(--glass-bg-2); transform:translateY(-4px); } }
.diff-icon{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); border:1px solid var(--glass-border);
  display:grid; place-items:center; color:var(--accent); margin-bottom:1.1rem;
  flex:none;
}
.diff-icon svg{ width:22px; height:22px; }
.diff-card h3{ font-size:1.05rem; margin-bottom:.55rem; }
.diff-card p{ color:var(--text-muted); margin:0; font-size:.95rem; line-height:1.6; }

/* ---- Stats ---- */
.stats-row{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--gap); margin-bottom:clamp(2rem,6vw,3rem);
}
.stat-item{ text-align:center; padding:1.5rem 1rem; }
.stat-num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,8vw,3.5rem); line-height:1;
  letter-spacing:-.025em; margin-bottom:.4rem; display:block;
}
.stat-label{ font-size:.88rem; color:var(--text-muted); font-weight:500; }
.reach-note{
  text-align:center; color:var(--text-muted);
  font-size:clamp(.95rem,2.4vw,1.05rem);
  max-width:52ch; margin-inline:auto; line-height:1.65;
}

/* ---- Closing CTA ---- */
.about-cta-inner{ text-align:center; max-width:560px; margin-inline:auto; }
.about-cta-inner h2{ margin-bottom:1rem; }
.about-cta-inner .lede{ margin-bottom:2rem; }
.about-cta-inner .btn{ width:100%; justify-content:center; }

/* ---- Responsive ---- */
@media (min-width:768px){
  .stats-row{ grid-template-columns:repeat(4,1fr); }
  .about-cta-inner .btn{ width:auto; }
}

@media (min-width:1100px){
  .founder-grid{ grid-template-columns:auto 1fr; }
  .story-grid{ grid-template-columns:1fr 1.55fr; align-items:start; }
}

/* ── Team page grid ──────────────────────────────────────────── */
.team-page-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,4vw,2rem);
}
.team-member-card{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:1.75rem 1.5rem; gap:1rem;
  transition:background-color .3s, transform var(--dur) var(--ease);
}
@media (hover:hover){ .team-member-card:hover{ background:var(--glass-bg-2); transform:translateY(-4px); } }

.team-member-photo{
  width:110px; height:110px; border-radius:50%;
  object-fit:cover; object-position:center top;
  display:block; flex:none;
  border:2px solid var(--glass-border);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.team-member-initials{
  width:110px; height:110px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,var(--grad-1),var(--grad-2));
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700;
  font-size:2rem; color:#fff; letter-spacing:-.02em;
  border:2px solid var(--glass-border);
}
.team-member-name{
  font-family:var(--font-display); font-weight:700;
  font-size:1.1rem; color:var(--text); margin:0;
}
.team-member-title{
  font-family:var(--font-body); font-size:.85rem;
  font-weight:600; color:var(--accent); margin:0;
}
.team-member-bio{
  font-size:.92rem; color:var(--text-muted);
  line-height:1.65; margin:0;
}

@media (min-width:640px){
  .team-page-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1100px){
  .team-page-grid{ grid-template-columns:repeat(3,1fr); }
}