/* Heading and portraits share a row; the introduction spans the whole page. */
.hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"heading portrait" "description description";align-items:center;gap:24px 32px;min-height:0;padding:44px 0 30px;direction:ltr}
.hero .hero-copy{grid-area:heading;max-width:none;min-width:0;padding:0}
.hero .hero-copy .eyebrow{margin:0 0 16px}
.hero h1{margin:0;font-size:clamp(24px,3.55vw,56px);line-height:1.16}
.hero h1:after{margin-top:15px}
.hero .hero-photo{grid-area:portrait;position:relative;align-self:center;width:100%;max-width:none;min-width:0;min-height:0;height:auto;margin:0;display:block}
.hero .photo-frame.person-only{display:block;position:relative;width:100%;height:auto;aspect-ratio:auto;overflow:visible}
.hero .person-only img{display:block;width:100%;max-width:100%;height:auto;max-height:none;object-fit:contain;filter:none;mask-image:none;-webkit-mask-image:none}
.hero .photo-frame.person-only:after{display:none}
.hero-description{grid-area:description;min-width:0;position:relative;z-index:2}
.hero .hero-description .intro{display:block;width:100%;max-width:none;margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.7}
.hero-description .hero-link{margin-top:16px}
[dir=rtl] .hero-copy,[dir=rtl] .hero-description{direction:rtl;text-align:right}
@media(max-width:960px){.hero{gap:24px;padding-top:32px}.hero .hero-copy .eyebrow{font-size:8px;letter-spacing:1.1px}}
@media(max-width:640px){.hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "portrait" "description";gap:18px;padding-top:28px}.hero h1{font-size:clamp(26px,6.7vw,42px)}.hero h1:after{width:75%;max-width:350px}.hero .hero-photo{width:100%;max-width:600px;margin:0 auto}.hero .hero-description .intro{font-size:16px;line-height:1.65}}