/* About page */

.about-hero h1 { max-width: 20ch; }

.about-block { margin-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--ink); padding-top: 16px; }
.about-block__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.about-block__head h2 { font: 500 30px/1.2 var(--font-serif); }

.about-who { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); margin-top: clamp(48px, 6vw, 72px); }
.about-who .about-block__head { flex: 0 1 240px; margin: 0; }
.about-who__text { flex: 1 1 480px; min-width: 0; max-width: 70ch; font-size: 18px; line-height: 1.7; }
.about-who__text p + p { margin-top: 18px; }

.approach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.approach-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.approach-card__num { font: 400 40px/1 var(--font-serif); color: var(--accent); }
.approach-card h3 { font-size: 18px; font-weight: 600; }
.approach-card p { color: var(--muted); font-size: 15.5px; }

.about-why { gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.about-why .why-item { border-top: 2px solid var(--accent); padding-top: 16px; }
.about-why .why-item h3 { font: 500 22px var(--font-serif); margin-bottom: 8px; }
.about-why .why-item p { font-size: 16px; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.team-member { display: flex; flex-direction: column; gap: 12px; }
.team-member .img-ph, .team-member img { aspect-ratio: 1; border-radius: var(--radius); width: 100%; object-fit: cover; }
.team-member__name { font-weight: 600; }
.team-member__role { color: var(--muted); font-size: 15px; }