/* ============================================================
   COMPONENT — Process track
   Dark section, four numbered steps connected by a dashed line.
   ============================================================ */
.process{padding:96px 0; background:var(--navy-950); color:var(--paper); position:relative; overflow:hidden;}
.process .eyebrow{color:var(--orange-300);}
.process .eyebrow::before{background:var(--orange-300);}
.process .section-head h2{color:var(--paper);}
.process .section-head p{color:rgba(247,245,241,0.62);}

.process-track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.process-track::before{
  content:""; position:absolute; top:27px; left:6%; right:6%; height:1px;
  background:repeating-linear-gradient(90deg, rgba(247,245,241,0.25) 0 8px, transparent 8px 16px);
}

.step{position:relative;}
.step .num{
  width:54px; height:54px; border-radius:50%; background:var(--navy-800); border:1px solid rgba(247,245,241,0.16);
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-weight:600; font-size:15px;
  color:var(--orange-300); margin-bottom:20px; position:relative; z-index:2;
}
.step h4{font-size:17.5px; margin-bottom:8px;}
.step p{font-size:14px; color:rgba(247,245,241,0.6); line-height:1.6;}

/* ---- responsive ---- */
@media (max-width:980px){
  .process-track{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .process-track::before{display:none;}
}
@media (max-width:720px){
  .process{padding:72px 0;}
  .process-track{grid-template-columns:1fr;}
}