/* A working studio beside the four concrete steps, in Digify's existing system. */
.site-process{color:var(--paper);overflow:clip}
.site-process .service-section-intro{align-items:end;margin-bottom:54px}
.site-process .service-section-intro>p{max-width:35ch;color:#d3d1ca}
.site-process-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-areas:'steps visual';align-items:start;gap:clamp(36px,5vw,88px)}
.site-process-copy{grid-area:steps;min-width:0}
.site-process-visual{grid-area:visual;position:sticky;top:28px;width:100%;max-width:560px;justify-self:end;margin:0}
.site-process-image{position:relative;aspect-ratio:1122/1402;overflow:hidden;clip-path:inset(0);transition:clip-path 1.1s var(--motion-arrive)}
.site-process-image>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1);transition:transform 1.4s var(--motion-arrive)}
.site-process-image:after{content:'';position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(90deg,var(--ink),transparent 7%,transparent 96%,var(--ink)),linear-gradient(180deg,var(--ink),transparent 6%,transparent 78%,var(--ink))}
.site-process-image.is-pending{clip-path:inset(0 0 12% 0)}
.site-process-image.is-pending>img{transform:scale(1.045)}
.site-process-visual>figcaption{margin:8px 0 0;font-size:11px;line-height:1.5;color:#bdbcb5;text-align:right}
.site-process-steps{margin:0;padding:0;list-style:none;counter-reset:site-step}
.site-process-steps>li{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:22px;border-top:1px solid var(--dark-line);padding:26px 0 30px}
.site-process-steps>li:before{content:'';position:absolute;top:-1px;left:0;width:54px;height:1px;background:var(--orange);transform-origin:left;transition:transform .7s var(--motion-arrive) calc(var(--i,0)*120ms + 160ms)}
.site-process-steps.is-pending>li:before{transform:scaleX(0)}
.site-process-number{display:block;color:var(--orange);font-size:34px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.site-process-steps h3{font-size:clamp(21px,1.8vw,27px);line-height:1.2;font-weight:600;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance}
.site-process-steps p{color:#d3d1ca;font-size:16px;line-height:1.65;max-width:53ch;margin:0}
.site-process-action{padding-top:8px;margin-left:76px}
.site-process-action .button{min-height:44px;white-space:normal;text-align:left}
.site-process-action>p{margin:16px 0 0;color:#bdbcb5;font-size:12px;line-height:1.5}
@media(max-width:1100px){.site-process-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px}.site-process-steps>li{grid-template-columns:38px minmax(0,1fr);gap:16px;padding-block:22px 26px}.site-process-number{font-size:29px}.site-process-steps>li:before{width:38px}.site-process-steps p{font-size:15px}.site-process-action{margin-left:54px}.site-process-action .button{font-size:12px;padding-inline:18px}}
@media(max-width:820px){.site-process-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'visual' 'steps';gap:32px}.site-process .service-section-intro{gap:20px;margin-bottom:28px}.site-process .service-section-intro>p{max-width:50ch}.site-process-visual{position:static;max-width:none;justify-self:stretch}.site-process-image{aspect-ratio:16/11}.site-process-image>img{object-position:50% 15%}.site-process-visual>figcaption{text-align:left}.site-process-steps>li{grid-template-columns:46px minmax(0,1fr);gap:20px;padding-block:24px 28px}.site-process-number{font-size:32px}.site-process-steps h3{font-size:24px}.site-process-steps p{font-size:16px;max-width:60ch}.site-process-action{margin-left:66px}.site-process-action .button{font-size:14px}}
@media(max-width:540px){.site-process .service-section-intro{margin-bottom:22px}.site-process-grid{gap:26px}.site-process-image{aspect-ratio:4/3}.site-process-visual>figcaption{font-size:10px;margin-top:5px}.site-process-steps>li{grid-template-columns:34px minmax(0,1fr);gap:16px;padding-block:23px 27px}.site-process-number{font-size:27px}.site-process-steps>li:before{width:34px}.site-process-steps h3{font-size:22px;margin-bottom:10px}.site-process-steps p{font-size:15px;line-height:1.65}.site-process-action{margin-left:0;padding-top:4px}.site-process-action .button{font-size:13px}.site-process-action>p{font-size:12px}}
.motion-paused .site-process-image,.motion-paused .site-process-image>img,.motion-paused .site-process-steps>li,.motion-paused .site-process-steps>li:before{transition:none!important}
.motion-paused .site-process-image{clip-path:inset(0)}
.motion-paused .site-process-image>img,.motion-paused .site-process-steps>li,.motion-paused .site-process-steps>li:before{transform:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){.site-process-image,.site-process-image>img,.site-process-steps>li,.site-process-steps>li:before{transition:none!important}.site-process-image{clip-path:inset(0)!important}.site-process-image>img,.site-process-steps>li,.site-process-steps>li:before{transform:none!important;opacity:1!important}}
