.about-hero{display:grid;grid-template-columns:minmax(0,1fr) 224px;align-items:center;gap:80px;padding:16px 0 12px}
.about-hero h1{margin:0;font-size:clamp(40px,4vw,56px);font-weight:700;line-height:1.5;animation:none}
.about-hero h1 span{color:var(--blue)}
.about-role{margin:12px 0 0;color:var(--action);font-size:21px;font-weight:600;line-height:1.8}
.about-lead{max-width:68ch;margin:20px 0 0;color:var(--muted);font-size:19px;line-height:2}
.about-portrait{display:block;width:224px;height:224px;max-width:100%;object-fit:cover;border-radius:16px}
.about-content{max-width:1264px;margin-inline:auto;padding:12px 24px 64px}
.about-section{display:grid;grid-template-columns:minmax(180px,280px) minmax(0,740px);justify-content:space-between;gap:48px;padding-block:48px;border-bottom:1px solid var(--line)}
.about-section:last-child{border-bottom:0;padding-bottom:0}
.about-section h2{margin:0;font-size:26px;font-weight:600;line-height:1.7;text-wrap:balance}
.about-section__body p{max-width:70ch;margin:0;color:var(--muted);font-size:18px;line-height:2.05;text-wrap:pretty}
.about-section__body p+p{margin-top:20px}
.about-section__body .button{margin-top:24px;min-height:48px}
@media(max-width:800px){
  .about-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:0}
  .about-hero h1{font-size:40px}
  .about-role{font-size:18px;margin-top:8px}
  .about-lead{font-size:17px;margin-top:16px}
  .about-portrait{width:160px;height:160px}
  .about-content{padding:0 20px 40px}
  .about-section{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:32px}
  .about-section h2{font-size:24px}
  .about-section__body p{font-size:17px}
}