.process-section{position:relative;pointer-events:auto;color:var(--ink);padding:0 var(--gutter) clamp(90px,10vw,160px);scroll-margin-top:100px}
.process-label{display:block;border:0;padding:0;margin:0 0 24px}
.process-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:start}
.process-intro{grid-column:1/span 5;position:sticky;top:130px;align-self:start}
.process-intro h2{font-family:SuisseBPIntl,Helvetica,Arial,sans-serif;font-size:clamp(44px,4.5vw,76px);font-weight:700;line-height:.95;letter-spacing:-.035em;text-wrap:balance;margin:0 0 28px;max-width:630px}
.process-intro>p{font-size:clamp(17px,1.4vw,21px);line-height:1.3;letter-spacing:-.02em;max-width:400px}



.process-steps{grid-column:7/span 6;display:grid;row-gap:clamp(48px,4.5vw,72px);list-style:none;margin:0;padding:0}
.process-step{display:grid;grid-template-columns:42px minmax(0,1fr);gap:20px;border-top:0;padding:0;min-height:0;scroll-margin-top:125px}
.process-step:last-child{padding-bottom:0;min-height:0}
.process-step-number{padding-top:6px;opacity:.55}
.process-step h3{font-family:SuisseBPIntl,Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(28px,2.65vw,44px);line-height:1;letter-spacing:-.03em;margin:0 0 18px;text-wrap:balance}
.process-step p{max-width:490px;font-size:clamp(17px,1.4vw,21px);line-height:1.3;letter-spacing:-.02em;margin:0;text-wrap:pretty}
.process-section.has-process-motion .process-step h3{opacity:.4;transition:opacity .4s}
.process-section.has-process-motion .process-step.is-current h3,.process-section.has-process-motion .process-step:focus-within h3{opacity:1}
@media(max-width:991px){.process-layout{grid-template-columns:1fr;gap:56px}.process-intro{position:static;grid-column:1}.process-intro h2{max-width:620px;font-size:clamp(44px,7vw,64px)}.process-intro>p{max-width:500px}.process-steps{grid-column:1;row-gap:44px}.process-step{min-height:0;padding:0}.process-step:last-child{min-height:0}.process-section.has-process-motion .process-step h3{opacity:1}}
@media(max-width:639px){.process-step{grid-template-columns:28px minmax(0,1fr);gap:14px}.process-step h3{font-size:30px}.process-step p{font-size:17px}}
@media(prefers-reduced-motion:reduce){.process-section.has-process-motion .process-step h3{opacity:1;transition:none}}

.process-contact{display:flex;flex-direction:column;gap:16px;margin-top:52px;width:170px;max-width:100%}
.process-portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 28%;border-radius:0}
.process-call{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;border:1px solid #1a1c1c55;border-radius:4px;background:transparent;color:var(--ink);white-space:nowrap}
.process-call:hover{border-color:#1a1c1c}
@media(max-width:639px){.process-contact{width:170px}}


.process-portrait-swap{position:relative;aspect-ratio:1;overflow:hidden}
.process-portrait-swap .process-portrait{height:100%}
.process-portrait-hover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .16s ease;pointer-events:none}
@media(hover:hover){.process-portrait-swap:hover .process-portrait-hover{opacity:1}}
.process-contact:focus-within .process-portrait-hover{opacity:1}
@media(prefers-reduced-motion:reduce){.process-portrait-hover{transition:none}}

/* Each panel scrolls into a stack, retaining its STEP label above the next panel. */
.process-section{--process-stack-top:calc(130px + var(--process-heading-offset,42px));--process-label-height:44px;--process-step-height:clamp(340px,42svh,480px);padding-bottom:max(120px,calc(100svh - 262px - var(--process-step-height)))}
.process-layout{min-height:0}
.process-steps{display:block;position:relative;align-self:start;isolation:isolate}
.process-step{display:block;position:sticky;top:calc(var(--process-stack-top) + var(--step-index)*var(--process-label-height));min-height:var(--process-step-height);padding:0;opacity:1;transform:none;isolation:isolate;z-index:calc(var(--step-index) + 1)}
.process-step:last-child{min-height:var(--process-step-height)}
.process-step::before{content:'';position:absolute;inset:0;z-index:-1;background:#e8e8e3 var(--process-surface,none) repeat;background-position:var(--process-grain-x,0px) var(--process-grain-y,0px);pointer-events:none}
.process-trigger{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;height:var(--process-label-height);border-top:1px solid #1a1c1c55;padding:0;background:none;color:var(--ink);text-align:left;cursor:pointer;letter-spacing:-.02em}
.process-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.process-toggle-mark{position:relative;width:12px;height:12px;opacity:0;transition:opacity .2s}
.process-toggle-mark::before,.process-toggle-mark::after{content:'';position:absolute;background:currentColor;left:0;top:5px;width:12px;height:1px}
.process-toggle-mark::after{transform:rotate(90deg)}
.process-trigger[aria-expanded=true] .process-toggle-mark::after{transform:rotate(0deg)}
.process-trigger:hover .process-toggle-mark,.process-trigger:focus-visible .process-toggle-mark{opacity:1}
.process-panel-inner{padding:22px 0 60px}
.process-step h3{margin:0 0 22px}
.process-section.has-process-motion .process-step h3{opacity:1;transition:none}
.process-step p{max-width:490px}
.process-step.is-folded .process-step-content{visibility:hidden}
@media(max-width:991px){
 .process-section{padding-bottom:90px}
 .process-steps{display:grid;row-gap:24px}
 .process-step,.process-step:last-child{position:relative;top:auto;min-height:0}
 .process-toggle-mark{opacity:1}
 .process-step-content{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1),opacity .3s,visibility 0s .5s}
 .process-panel-inner{min-height:0;overflow:hidden;padding:0}
 .process-step h3{padding-top:18px}
 .process-step p{padding-bottom:28px}
 .process-step.is-current .process-step-content{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1),opacity .4s,visibility 0s}
}
@media(prefers-reduced-motion:reduce){.process-step-content,.process-step.is-current .process-step-content,.process-toggle-mark{transition:none}}

.process-contact .process-call{min-height:46px;padding-left:22px;padding-right:22px}

@media(min-width:992px){.process-steps{margin-top:var(--process-heading-offset,42px)}}

/* The stack shares the page’s grain and pixel transition; clip covered copy instead of painting opaque panels. */
.process-step::before{content:none}