/* Portrait photography belongs alongside the introduction, at its natural ratio. */
.article-head.service-hero{
  width:100%;max-width:1568px;margin-inline:auto;
  padding:32px var(--pad) 72px;
}
.service-hero>.breadcrumbs{margin:0 0 32px}
.service-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);
  align-items:center;gap:clamp(32px,6vw,104px);
}
.service-hero-copy{min-width:0;padding-block:18px}
.service-hero-copy .eyebrow{margin:0}
.article-head.service-hero h1{
  font-size:clamp(42px,5.1vw,80px);line-height:1.02;letter-spacing:-.055em;
  font-weight:500;max-width:none;margin:28px 0;
}
.article-head.service-hero .lead{
  font-size:clamp(18px,1.45vw,22px);line-height:1.55;max-width:36ch;margin:0;
}
.service-hero-copy .button{
  margin-top:30px;max-width:100%;white-space:normal;gap:24px;
  font-size:14px;line-height:1.4;
}
.service-hero-photo{
  width:100%;max-width:min(var(--photo-width),calc(max(440px,100svh - 240px) * var(--photo-ratio)));
  min-width:0;justify-self:end;margin:0;
}
.service-hero-photo img{
  display:block;width:100%;height:auto;object-fit:contain;border-radius:12px;
}
.service-hero-photo figcaption{margin-top:14px}
.service-hero-photo figcaption a{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:12px;line-height:1.5;color:#575757;
}
.service-hero-photo figcaption a:hover{color:var(--ink)}
.service-hero-photo figcaption span{font-size:20px;line-height:1}
.service-hero+.article-layout{border-top:1px solid var(--line)}
@media(min-width:761px) and (max-width:1000px){
  .service-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:28px}
  .article-head.service-hero h1{font-size:clamp(37px,4.7vw,47px)}
  .article-head.service-hero .lead{font-size:17px}
  .service-hero-copy .button{font-size:12px;padding:17px 20px;gap:16px}
}
@media(max-width:760px){
  .article-head.service-hero{padding:28px 22px 44px}
  .service-hero>.breadcrumbs{margin-bottom:30px}
  .service-hero-grid{grid-template-columns:1fr;gap:32px}
  .service-hero-copy{padding:0}
  .article-head.service-hero h1{font-size:clamp(39px,8.5vw,62px);margin:22px 0}
  .article-head.service-hero .lead{font-size:18px;line-height:1.55;max-width:none}
  .service-hero-copy .button{margin-top:24px;font-size:13px}
  .service-hero-photo{max-width:none;justify-self:stretch}
  .service-hero-photo img{border-radius:9px}
  .service-hero-photo figcaption{margin-top:11px}
  .service-hero+.article-layout{margin-inline:22px;padding-inline:0}
}
