/* ==========================================================================
   COMPONENT — How We Work (process)
   Markup:  components/process.html   (section.process)
   Anchor:  #experience  (the nav "Experience" link points here)
   ========================================================================== */

.process{padding:120px 0}
.process-intro{
  display:flex;
  justify-content:space-between;
  gap:50px;
  margin-bottom:65px;
}
.process-intro .section-title{margin-top:15px}

.process-list{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px;
  position:relative;
}
.process-list::before{
  content:"";
  position:absolute;
  top:48px;
  left:9%;
  right:9%;
  height:1px;
  background:#bcd4c9;
}
.process-item{
  position:relative;
  z-index:1;
  text-align:center;
}
/* Step icon — every step gets the same box (96x96 desktop, 76x76 on mobile),
   so the five icons always render the same width and height.
   assets/{understand,research,strategize,engage,implement}.png are already
   square, opaque circular badges, so no background or border is needed, and
   nothing has to be clipped: the artwork's own alpha edge does the work. */
.process-circle{
  width:96px;height:96px;
  margin:0 auto 20px;
}
.process-circle img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.process-number{
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--green);
  margin-bottom:5px;
}
.process-item h3{font-size:14px}
.process-item p{font-size:12px;color:var(--muted);margin-top:3px}

/* ---------- Responsive ---------- */

@media(max-width:800px){
  .process-intro{display:block}
  .process-intro .section-copy{margin-top:20px}
  .process{padding:90px 0}
  .process-list{grid-template-columns:1fr;gap:28px}
  .process-list::before{display:none}
  .process-item{
    text-align:left;
    display:grid;
    grid-template-columns:76px 1fr;
    column-gap:18px;
    align-items:center;
  }
  .process-circle{
    width:76px;height:76px;
    grid-row:1/3;
    margin:0;
  }
}