/* ============================================================
   Proces (h2g/over) — tijdlijn met stappen + aside-foto met quote
   ============================================================ */

.process { background: var(--navy); }

.proc-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }

.timeline { position: relative; padding-left: 42px; counter-reset: step; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--teal-300), var(--teal-700));
}

.step { position: relative; padding-bottom: 46px; counter-increment: step; }
.step:last-of-type { padding-bottom: 0; }
.step .dot {
  position: absolute; left: -42px; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--teal-300); display: grid; place-items: center;
}
.step .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-300); }
.step .s-num {
  font-family: var(--font-h); font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--gold-500); text-transform: uppercase; display: block;
}
.step .s-num::before { content: "Stap " counter(step, decimal-leading-zero); }
.step h3 { font-size: 26px; margin: 8px 0 10px; }
.step p  { color: var(--nile-300); font-weight: 300; max-width: 42ch; margin: 0; }

.proc-btns { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.proc-aside { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
.proc-aside img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.7) contrast(1.05); }
.proc-aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,13,23,.7), transparent 55%); }
.proc-quote {
  position: absolute; bottom: 26px; left: 26px; right: 26px; z-index: 2;
  font-family: var(--font-h); font-weight: 600; font-size: 19px; line-height: 1.3;
}
.proc-quote em, .proc-quote span { font-style: normal; color: var(--teal-300); }

@media (max-width: 880px) {
  .proc-layout { grid-template-columns: 1fr; gap: 40px; }
  .proc-aside { aspect-ratio: 16/10; }
}