/* =========================================================
   process.css — numbered step flow, reused by both the
   "How We Work" (services) section and the "New Business /
   ODM" section (where steps also carry a circular photo).
   Used by: index.html
   ========================================================= */

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.process::before{
  content:"";position:absolute;top:22px;left:12%;right:12%;height:2px;background:#e2e6ec;z-index:0;
}
.process .step{position:relative;z-index:1;text-align:center;padding:0 12px;}
.process .step .n{
  width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:16px;
}
.process .step .photo-wrap{position:relative;width:88px;height:88px;margin:0 auto 14px;}
.process .step .photo-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid #fff;box-shadow:0 3px 10px rgba(18,35,63,.18);}
.process .step .photo-wrap .n{position:absolute;bottom:-4px;right:-4px;width:28px;height:28px;font-size:12px;margin:0;border:2px solid #fff;}
.process .step h4{font-size:14.5px;color:var(--blue-800);margin:0 0 6px;font-weight:800;}
.process .step p{font-size:12.5px;color:var(--gray-400);margin:0;}