/* R10: each service opening shows its rendered scene on the same ink as the homepage studio. */
.r8-service .service-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.r8-service .service-render{position:relative;margin:0 -2% 0 0;padding:0;background:none;color:inherit}
.r8-service .service-render img{display:block;width:100%;height:auto}
.r8-service .service-render .exhibit-caption{margin:2px 0 0;max-width:none;font-size:12px;line-height:1.6;color:#8f9b94;text-align:right}
@media(max-width:900px){
 .r8-service .service-hero{grid-template-columns:1fr}
 .r8-service .service-render{width:auto;max-width:none;margin:0 -5%}
 .r8-service .service-render .exhibit-caption{padding:0 5%;text-align:left}
}
.r8-service .related-links>a{align-items:center}
.r8-service .related-links>a>div{flex:1;min-width:0}
.r8-service .related-thumb{width:144px;height:auto;flex-shrink:0;border-radius:2px;transition:transform 420ms cubic-bezier(.22,1,.36,1)}
.r8-service .related-links>a:hover .related-thumb{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.r8-service .related-thumb{transition:none}}
.reduced-motion .related-thumb{transition:none!important}
@media(max-width:600px){.r8-service .related-thumb{width:96px}}
/* Three related services read as an index: one row each, thumbnail, name, line, arrow. */
.r8-service .related-links{grid-template-columns:1fr;gap:0}
.r8-service .related-links>a{padding:20px 0;border-top:1px solid #dcdfd8;gap:30px}
.r8-service .related-links>a:last-child{border-bottom:1px solid #dcdfd8}
.r8-service .service-render picture{display:contents}