.feature-process { display: grid; grid-template-columns: 1fr 1.05fr; gap: 8vw; align-items: start; padding: 132px 7vw; min-height: 760px; background: #ece9e5; }
.process-heading { align-self: start; position: sticky; top: 110px; }
.process-heading h2 { margin: 0; font: 600 clamp(50px, 6vw, 96px)/.92 'Manrope'; letter-spacing: -.085em; text-transform: uppercase; }
.process-heading h2 em { color: var(--wine); font-style: normal; }
.process-steps { display: block; min-width: 0; padding-bottom: 22vh; }
.process-step { position: sticky; top: 122px; min-height: 178px; margin-bottom: 48vh; padding: 36px 42px; display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: start; background: #fff; border: 1px solid #e1ddda; border-radius: 18px; transform-origin: top center; transform: perspective(900px) rotateX(-68deg) translate3d(0,32px,0); opacity: 0; transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .4s ease; box-shadow: 0 10px 25px #31101d12; }
.feature-process.is-visible .process-step { transform: perspective(850px) rotateX(0) translateY(0); opacity: 1; }
.feature-process.is-visible .process-step:nth-child(2) { transition-delay: .12s; }
.feature-process.is-visible .process-step:nth-child(3) { transition-delay: .24s; }
.feature-process.is-visible .process-step:nth-child(4) { transition-delay: .36s; }
.feature-process.is-visible .process-step.is-folding { transition: none; box-shadow: 0 3px 10px #31101d0d; }
.feature-process.is-process-active .process-step { will-change: transform, opacity; backface-visibility: hidden; }
.process-step:nth-child(1) { z-index: 1; }
.process-step:nth-child(2) { z-index: 2; }
.process-step:nth-child(3) { z-index: 3; }
.process-step:nth-child(4) { z-index: 4; margin-bottom: 0; }
.process-step b { color: var(--wine); font: 600 clamp(48px, 5vw, 76px)/.86 'Manrope'; letter-spacing: -.055em; white-space: nowrap; }
.process-step h3 { margin: 3px 0 14px; font: 600 clamp(27px, 2.6vw, 43px)/.95 'Manrope'; letter-spacing: -.07em; }
.process-step p { margin: 0; color: #686062; font-size: 14px; line-height: 1.6; max-width: 530px; }
@media(max-width:760px) { .feature-process { display: block; padding: 78px 24px; } .process-heading { position: static; margin-bottom: 48px; } .process-heading h2 { font-size: 52px; } .process-step { grid-template-columns: 60px 1fr; padding: 25px 20px; gap: 12px; } .process-step b { font-size: 43px; } .process-step h3 { font-size: 28px; margin-top: 0; } .process-step p { font-size: 12px; } }