/* ==========================================================
   ABOUT AND TEAM
   Company story, values list and team grid.
   ========================================================== */

.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start;}
.about-grid h2{font-size:clamp(30px,4vw,46px);font-weight:600;max-width:15ch;margin-bottom:22px;}
.about-grid .copy{display:grid;gap:16px;color:var(--muted);max-width:56ch;}
.values{display:grid;gap:0;border-top:1px solid var(--line);}
.value{padding:22px 0;border-bottom:1px solid var(--line);display:grid;gap:6px;}
.value h3{font-size:20px;font-weight:600;}
.value p{color:var(--muted);}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:clamp(48px,6vw,80px);}
.person{display:flex;flex-direction:column;gap:14px;}
.avatar{aspect-ratio:1/1;border-radius:var(--r-m);background:linear-gradient(150deg,var(--surface-2),var(--surface));border:1px solid var(--line);display:grid;place-items:end center;overflow:hidden;}
.avatar svg{width:62%;height:auto;color:var(--brand);opacity:.55;}
.person h3{font-size:19px;font-weight:600;}
.person p{color:var(--muted);font-size:16px;margin-top:2px;}

@media (max-width:1000px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .team{gap:20px;}
}