body #process{align-items:start;position:relative}
body #process .process-illustration{position:sticky;top:110px}
body #process .assembly-diagram{position:relative;height:min(72vh,760px);width:100%;margin:24px 0 0;isolation:isolate;mix-blend-mode:multiply;--assembly:0}
body #process .assembly-diagram .assembly-layer{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;mix-blend-mode:multiply;transform:translateY(calc(var(--assembly) * var(--shift)));will-change:transform}
.assembly-layer.shell{clip-path:inset(0 0 73.5%);--shift:45%}
.assembly-layer.insulation{clip-path:inset(26.5% 0 49%);--shift:22%}
.assembly-layer.frame{clip-path:inset(51% 0 24%);--shift:-3%}
.assembly-layer.fitout{clip-path:inset(76% 0 0);--shift:-24%}
body #process .steps{padding-top:30px}
body #process .steps article{min-height:38vh}
@media(max-width:760px){body #process .process-illustration{position:relative;top:auto}body #process .assembly-diagram{height:65vh}body #process .steps article{min-height:0}}
@media(prefers-reduced-motion:reduce){body #process .assembly-diagram .assembly-layer{transform:none;will-change:auto}body #process .steps article{min-height:0}body #process .process-illustration{position:relative;top:auto}}
body #process .assembly-diagram{background:#f4f2eb;isolation:isolate;mix-blend-mode:normal}
body #process .assembly-layer:not(.shell){opacity:calc(1 - var(--finish,0))}
body #process .assembly-layer.shell{opacity:1}

body #process .process-illustration h1{font-family:var(--serif);font-size:13px;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;margin:0 0 24px}
body #process .process-introduction-copy{max-width:440px;margin:0 0 24px}
body #process .process-introduction-copy p{font-size:12px;line-height:1.85}
body #process .assembly-diagram{height:min(55vh,600px)}
/* Larger assembly illustration, retaining the original proportions. */
body #process .assembly-diagram{height:min(80vh,900px)}
@media(max-width:760px){body #process .assembly-diagram{height:min(85vh,800px)}}