/* ============================================================
   08 · PROCESS  (4 numbered steps on a connecting rail) — on --mist
   ============================================================ */
.proc{padding:clamp(72px,9vw,116px) 0}
.proc h2{margin-bottom:clamp(40px,5vw,78px)}

.proc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,32px);position:relative}
/* horizontal rail behind the dots */
.proc-grid::before{content:'';position:absolute;left:0;right:0;top:22px;height:1px;
  background:var(--line)}

.step{position:relative}
.sdot{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:'Geist Mono',monospace;font-size:11px;
  letter-spacing:.1em;position:relative;z-index:1;
  transition:transform .3s var(--ease),background .3s}
.step:hover .sdot{transform:scale(1.12);background:var(--b500)}
.step h3{font-family:Archivo;font-weight:600;font-size:clamp(17px,1.7vw,22px);
  letter-spacing:-.01em;color:var(--ink900);margin:26px 0 12px}
.step p{font-size:14px;color:var(--ink500);line-height:1.55}
.sdur{display:inline-block;margin-top:20px;font-family:'Geist Mono',monospace;
  font-size:11px;letter-spacing:.12em;color:var(--b500)}

@media(max-width:1100px){
  .proc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 26px}
  .proc-grid::before{display:none}
}
@media(max-width:720px){
  .proc-grid{grid-template-columns:1fr}
}