/* ═══ SECTION 9 — PROCESS ═══ */
.process{position:relative;background:var(--bg);
  padding:clamp(80px,13vh,150px) var(--gut);
  --rail-gap:clamp(30px,5vw,74px);   /* distance from rail to step content */}

.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:clamp(34px,6vh,64px)}
.proc-head h2{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em;max-width:15ch}
.proc-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:25ch;
  text-align:right;flex-shrink:0}
@media(max-width:760px){
  .proc-head{flex-direction:column;align-items:flex-start}
  .proc-head .aside{text-align:left}
}

.proc-list{position:relative;padding-left:var(--rail-gap)}

/* the rail */
.proc-rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--border)}
.proc-rail i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--cut)}
.proc-dot{position:absolute;left:50%;top:0;width:11px;height:11px;background:var(--cut);
  border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(200,255,0,.13);
  opacity:0;transition:opacity .4s ease}
.proc-rail.is-live .proc-dot{opacity:1}

.step{position:relative;padding:clamp(24px,4vh,42px) 0;
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,48px);align-items:start;
  opacity:.34;transition:opacity .6s ease}
.step:first-child{border-top:1px solid var(--border)}
.step.is-on{opacity:1}

/* tick joining each step to the rail — aligned to the step name's cap height */
.step::before{content:"";position:absolute;
  left:calc(var(--rail-gap) * -1);
  top:calc(clamp(24px,4vh,42px) + .52em);
  width:var(--rail-gap);height:1px;background:var(--border);
  transition:background .5s ease}
.step.is-on::before{background:var(--cut)}
@media(max-width:640px){.step::before{display:none}}

.step-num{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--dim);
  padding-top:.5em;transition:color .5s ease}
.step.is-on .step-num{color:var(--cut)}

.step-name{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1.15rem,2.6vw,2.1rem);line-height:1.04;letter-spacing:-.028em}

.step-body{font-size:clamp(.92rem,1.02vw,1.04rem);line-height:1.62;color:var(--muted);
  max-width:52ch;padding-top:.28em}

@media(max-width:840px){
  .step{grid-template-columns:auto minmax(0,1fr);gap:12px 20px}
  .step .step-body{grid-column:2}
}

.proc-foot{margin-top:clamp(38px,6vh,70px);display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.proc-foot .line{font-size:clamp(.95rem,1.3vw,1.15rem);font-weight:600;
  letter-spacing:-.01em;max-width:34ch}
@media(max-width:640px){.proc-foot{flex-direction:column;align-items:flex-start}}

@media(prefers-reduced-motion:reduce){
  .step{opacity:1}
  .step::before{background:var(--cut)}
  .step-num{color:var(--cut)}
  .proc-rail i{height:100%!important}
  .proc-dot{display:none}
}