/* Shared step roadmap. Taken from the Family Wealth Assessment form.
   Every multi-step intake page links this file and does not restyle it. */

.progress{
  position:sticky;
  top:80px;
  z-index:30;
  background:rgba(244,245,241,.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding:22px 16px 18px;
  border-bottom:1px solid var(--neutral);
  margin-bottom:30px;
}
.stepper-wrap{max-width:1100px;margin:0 auto;position:relative}
.stepper-line{position:absolute;top:14px;left:14px;right:14px;height:2px;background:var(--neutral);z-index:1}
.stepper-line-fill{height:100%;background:var(--eucalyptus);width:0%;transition:width .35s cubic-bezier(.25,.46,.45,.94)}
.stepper{display:flex;list-style:none;padding:0;margin:0;position:relative;z-index:2;justify-content:space-between;gap:4px}
.step-item{flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;min-width:0;background:none;border:0;padding:0;color:inherit;font:inherit}
.step-item .dot{
  width:30px;height:30px;border-radius:50%;background:var(--white);
  border:2px solid var(--neutral);display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:500;color:var(--muted);
  transition:all .25s ease;
}
.step-item .label{
  font-family:'Montserrat',sans-serif;font-size:.62rem;margin-top:9px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  font-weight:500;text-align:center;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;
}
.step-item:hover .dot{border-color:var(--eucalyptus);color:var(--eucalyptus)}
.step-item:hover .label{color:var(--eucalyptus)}
.step-item.done .dot{background:var(--eucalyptus);border-color:var(--eucalyptus);color:var(--white)}
.step-item.done .dot::before{content:"✓";font-size:.9rem}
.step-item.done .dot .num{display:none}
.step-item.active .dot{background:var(--white);border-color:var(--eucalyptus);color:var(--eucalyptus);box-shadow:0 0 0 4px rgba(94,120,117,.18);transform:scale(1.08)}
.step-item.active .label{color:var(--deep-base);font-weight:600}
.mobile-step-label{display:none}
@media (max-width:760px){
  .progress{padding:14px 8px 10px;top:72px}
  .step-item .label{display:none}
  .step-item .dot{width:24px;height:24px;font-size:.7rem}
  .stepper-line{top:11px;left:12px;right:12px}
  .mobile-step-label{display:block;text-align:center;margin-top:10px;font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--deep-base);font-weight:500}
}