.about-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center}
.portrait{margin:0;min-width:0}
.portrait-frame{position:relative;overflow:hidden;background:#20211e;border:1px solid #45473d;aspect-ratio:3/4}
.portrait-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform 1.2s cubic-bezier(.2,.6,.3,1)}
.portrait-frame:hover img{transform:scale(1.025)}
.portrait-frame:after{content:"";position:absolute;inset:0;pointer-events:none;border:10px solid #1112100a}
.portrait figcaption{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:11px;line-height:1.6;margin-top:13px}
.portrait figcaption span:last-child{color:#888e7a;text-align:right}
.about-text .about-label{margin-bottom:30px}
.about-text .about-label h2{font-size:clamp(44px,5vw,66px);line-height:1.05;margin-top:20px}
.about-text .about-label .eyebrow{font-size:10px;letter-spacing:.12em}
.about-text>p{font-size:20px;line-height:1.6}
.about-text>p+p{font-size:15px;line-height:1.8}
.hero-person{display:flex;align-items:center;gap:12px;width:fit-content;margin-top:20px;text-align:left}
.hero-person .hero-avatar{display:block;flex-shrink:0;width:43px;height:43px;border-radius:50%;overflow:hidden;border:1px solid #e5dca966}
.hero-person img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 19%;transform:scale(1.2);transform-origin:50% 20%}
.hero-person>span:last-child{font-size:12px;color:#e3e4d8;line-height:1.5}
.hero-person small{display:block;font-size:10px;letter-spacing:.01em;color:#a9ae9b;margin-top:2px}
.hero-person:hover small{color:var(--yellow)}
@media(max-width:1000px){.about-grid{gap:35px}.about-text .about-label h2{font-size:48px}.about-text>p{font-size:18px}.about-text>p+p{font-size:14px}}
@media(max-width:800px){.about-grid{grid-template-columns:minmax(0,1fr);gap:32px}.portrait{max-width:550px;width:100%;margin:auto}.about-text .about-label h2{font-size:55px}.about-text>p{font-size:21px}.about-text>p+p{font-size:16px}.about-text .about-label{margin-bottom:26px}}
@media(max-width:560px){.portrait figcaption{font-size:10px;gap:10px}.about-text .about-label h2{font-size:48px}.about-text>p{font-size:20px}.about-text>p+p{font-size:15px}.hero-person{margin-top:17px;gap:10px}.hero-person .hero-avatar{width:39px;height:39px}.hero-person>span:last-child{font-size:11px}.hero-person small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.portrait-frame img{transition:none}.portrait-frame:hover img{transform:none}}
.motion-off .portrait-frame:hover img{transform:none}
@media print{.about-grid{grid-template-columns:.6fr 1fr;gap:25px}.portrait-frame{max-height:450px}.hero-person{display:none}}

/* On small screens photos dissolve into the page; faces stay sharp. */
@media screen and (max-width:800px){
  .approach{background:var(--bg)}
  .portrait-frame{border:0;background:transparent}
  .portrait-frame:after,.approach-photo:after{display:none}
  .portrait-frame,.approach-photo{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.25) 4%,rgba(0,0,0,.75) 9%,#000 16%,#000 80%,rgba(0,0,0,.75) 89%,rgba(0,0,0,.25) 96%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.25) 4%,rgba(0,0,0,.75) 9%,#000 16%,#000 80%,rgba(0,0,0,.75) 89%,rgba(0,0,0,.25) 96%,transparent 100%);
  }
  .hero-art{
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent);
  }
}