.about-wrap {width:min(var(--page-max),90%);margin-inline:auto}
.about-hero {padding:clamp(70px,8vw,112px) 0 var(--space-section)}
.about-hero-grid {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(50px,8vw,110px);align-items:center}
.page-about .eyebrow {margin:0 0 var(--space-4);color:var(--color-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.page-about h1,.page-about h2,.page-about h3 {font-family:var(--font-display)}
.page-about h1 {max-width:760px;margin:0;font-size:var(--text-h1);line-height:var(--leading-display);letter-spacing:-.04em}
.page-about h1 em {display:block;color:var(--color-accent);font-style:normal}
.about-lead {max-width:660px;margin:var(--space-5) 0 0;color:var(--color-muted);font-size:var(--text-lead);line-height:1.7}
.about-portrait {margin:0;padding:18px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-accent-soft)}
.about-portrait img {width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:calc(var(--radius-lg) - 10px);background:#f4f2fa}
.about-portrait figcaption {display:flex;justify-content:space-between;gap:20px;padding:18px 4px 2px;font-size:12px}
.about-portrait figcaption span {color:var(--color-muted)}
.section-heading {display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:end}
.section-heading h2 {margin:0;font-size:var(--text-h2);line-height:1.07;letter-spacing:-.04em}
.section-heading>p {max-width:580px;margin:0;color:var(--color-muted);font-size:17px;line-height:1.75}
.site-footer {padding:28px 5%;display:flex;justify-content:space-between;border-top:1px solid var(--color-line);color:var(--color-muted);font-size:12px}
@media(max-width:850px) {
  .about-hero-grid,.section-heading {grid-template-columns:1fr}
  .about-portrait {max-width:480px}
}
@media(max-width:700px) {
  .about-wrap {width:88%}
  .about-hero {padding-top:58px}
  .page-about h1 {font-size:clamp(46px,13vw,64px)}
  .about-portrait {padding:12px}
  .about-portrait figcaption {display:block}
  .about-portrait figcaption span {display:block;margin-top:5px}
  .site-footer {display:block}
  .site-footer span {display:block;margin-top:6px}
}
@media(min-width:901px) {
  .page-about h1,.section-heading h2 {letter-spacing:-.02em}
}
.about-portrait img[src*="sona-photo"] {height:auto;object-position:center}
/* About page in the case-study article layout: the hero spans the full width above the reading column. */
.case-article.page-about main {padding-top:0}
.case-article main > .about-hero {grid-column:1 / -1}
.case-article.page-about main > .article-meta {margin-top:0}