/* Process steps — ported from design/mockup.html (.process, .step).
   Numbers come from a CSS counter, so reordering steps renumbers them. */

.section--process .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);padding:30px 26px;position:relative;counter-increment:step}
.step::before{content:"0" counter(step);font-family:var(--display);font-weight:700;font-size:54px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--navy);opacity:.55;display:block;margin-bottom:18px}
.step h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--steel);font-size:14.5px}
.step::after{content:"";position:absolute;top:56px;right:-22px;width:22px;height:2px;background-image:linear-gradient(90deg,var(--steel) 0 5px,transparent 5px 9px);background-size:9px 2px;opacity:.6}
.step:last-child::after{display:none}

@media(max-width:1020px){
  .section--process .steps{grid-template-columns:1fr 1fr}
  .step::after{display:none}
}
@media(max-width:720px){.section--process .steps{grid-template-columns:1fr}}