.mf-work-section { 
    padding: 60px 8%; 
    background: #fff; 
}
.mf-work-container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 70px;
  position: relative;
}
@media (max-width: 920px) {
  .mf-work-container { flex-direction: column; gap: 36px; }
  .mf-work-container::before { display: none; }
}

.mf-work-container::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--mf-extra) 0, var(--mf-extra) 8px,
    transparent 8px, transparent 16px
  );
  z-index: 1;
}

.mf-work-step {
  position: relative;
  text-align: center;
  flex: 1;
  z-index: 2;
}
@media (max-width: 920px) { 
  .mf-work-step { 
    display: flex; align-items: center; 
    gap: 20px; text-align: left; 
  } 
}

.mf-step-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--mf-primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  margin: auto;
  font-size: 26px;
  box-shadow: 0 8px 22px rgba(165,42,42,0.22);
  flex-shrink: 0;
  position: relative;
}
.mf-step-icon::after {
  content: attr(data-step);
  position: absolute;
  top: -6px; right: -6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mf-extra);
  color: white;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
}
@media (max-width: 920px) { .mf-step-icon { margin: 0; } }

.mf-work-step h3 { 
    margin-top: 18px; 
    margin-bottom: 8px; 
    color: var(--mf-ink); 
    font-size: 16px; 
    font-weight: 600; 
}
.mf-work-step p { 
    color: #777; 
    line-height: 1.7; 
    font-size: 13px; 
}