/* Services: the scroll story. On larger screens the text scrolls past on the left while the figure stays pinned on the
   right and follows along; on tablets and phones nothing pins, and each service shows its own figure above its words. */
.svc-scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5vw;margin-top:56px}
.svc-scrolly h3{margin:0;font:200 clamp(34px,3.4vw,48px)/1.05 var(--serif);letter-spacing:-.03em}
.svc-scrolly p{margin:0}
.svc-scrolly .svc-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0;color:color-mix(in srgb,var(--deep-ink) 62%,transparent)}
.svc-scrolly .svc-figure{margin:0;max-width:none;width:100%}
.svc-scrolly .studio-ascii{height:auto;aspect-ratio:480/370}
.svc-scrolly p:not(.svc-eyebrow){font-size:18px;line-height:1.45;color:color-mix(in srgb,var(--deep-ink) 88%,transparent)}

.svc-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:20px;opacity:.35;transition:opacity .5s}
.svc-step.is-active{opacity:1}
.svc-step__art{display:none}
.svc-scrolly__art{position:sticky;top:calc(50vh - 21vw);align-self:start}

@media(max-width:900px){
  .svc-scrolly{grid-template-columns:1fr;gap:0;margin-top:36px}
  .svc-scrolly__art{display:none}
  .svc-step{min-height:0;opacity:1;gap:16px;padding:36px 0;border-top:1px solid var(--line)}
  .svc-step:first-child{border-top:0;padding-top:0}
  .svc-step .svc-step__art{display:block;max-width:360px;margin:0 auto 8px}
}
@media(max-width:650px){.svc-scrolly p:not(.svc-eyebrow){font-size:17px}.svc-step{padding:32px 0}}