/* ==========================================================
   ebmnt1 — How We Work (numbered smart timeline, fills as you scroll)
   ========================================================== */
:root {
  --ebmnt1-steps-background-color: var(--ebmnt1-color-helper-white);
  --ebmnt1-steps-line-color: var(--ebmnt1-color-helper-border);
  --ebmnt1-steps-line-active-color: var(--ebmnt1-color-primary);
  --ebmnt1-steps-line-thickness: 2px;
  --ebmnt1-step-circle-size: 4.25rem;
  --ebmnt1-step-circle-border-color: var(--ebmnt1-color-helper-border);
  --ebmnt1-step-circle-active-border-color: var(--ebmnt1-color-primary);
  --ebmnt1-step-circle-background-color: var(--ebmnt1-color-helper-white);
  --ebmnt1-step-circle-active-background-color: var(--ebmnt1-color-primary);
  --ebmnt1-step-icon-color: var(--ebmnt1-color-helper-muted);
  --ebmnt1-step-icon-active-color: var(--ebmnt1-color-helper-white);
  --ebmnt1-step-icon-font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --ebmnt1-step-number-stroke-color: var(--ebmnt1-color-primary);
  --ebmnt1-step-number-font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem);
  --ebmnt1-step-title-color: var(--ebmnt1-color-secondary);
  --ebmnt1-step-title-font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --ebmnt1-step-text-color: var(--ebmnt1-color-secondary-soft);
  --ebmnt1-step-text-font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --ebmnt1-step-card-background-color: var(--ebmnt1-color-helper-surface);
  --ebmnt1-step-card-active-shadow-color: var(--ebmnt1-color-helper-shadow-medium);
}

.ebmnt1-steps {
  background-color: var(--ebmnt1-steps-background-color);
}

.ebmnt1-steps__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ebmnt1-step {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.1rem;
  text-align: start;
}

.ebmnt1-step__marker {
  flex: 0 0 var(--ebmnt1-step-circle-size);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ebmnt1-step__line {
  flex: 1;
  width: var(--ebmnt1-steps-line-thickness);
  background-color: var(--ebmnt1-steps-line-color);
  transition: background-color 0.6s ease;
}

.ebmnt1-step:first-child .ebmnt1-step__line--before,
.ebmnt1-step:last-child .ebmnt1-step__line--after {
  background-color: transparent;
}

.ebmnt1-step__circle {
  flex: 0 0 var(--ebmnt1-step-circle-size);
  width: var(--ebmnt1-step-circle-size);
  height: var(--ebmnt1-step-circle-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ebmnt1-step-icon-font-size);
  color: var(--ebmnt1-step-icon-color);
  background-color: var(--ebmnt1-step-circle-background-color);
  border: 2px solid var(--ebmnt1-step-circle-border-color);
  border-radius: 50%;
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, transform 0.5s ease;
}

.ebmnt1-step__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block: 0.75rem;
  padding: 1.1rem 1.25rem;
  background-color: var(--ebmnt1-step-card-background-color);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.ebmnt1-step__number {
  font-size: var(--ebmnt1-step-number-font-size);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ebmnt1-step-number-stroke-color);
}

.ebmnt1-step__title {
  font-size: var(--ebmnt1-step-title-font-size);
  font-weight: 600;
  color: var(--ebmnt1-step-title-color);
}

.ebmnt1-step__text {
  font-size: var(--ebmnt1-step-text-font-size);
  line-height: 1.8;
  color: var(--ebmnt1-step-text-color);
}

/* active state (set by JS while scrolling) */
.ebmnt1-step.ebmnt1-is-active .ebmnt1-step__circle {
  color: var(--ebmnt1-step-icon-active-color);
  background-color: var(--ebmnt1-step-circle-active-background-color);
  border-color: var(--ebmnt1-step-circle-active-border-color);
  transform: scale(1.08);
}

.ebmnt1-step.ebmnt1-is-active .ebmnt1-step__line--before,
.ebmnt1-step.ebmnt1-is-active .ebmnt1-step__line--after {
  background-color: var(--ebmnt1-steps-line-active-color);
}

.ebmnt1-step:first-child .ebmnt1-step__line--before,
.ebmnt1-step:last-child .ebmnt1-step__line--after {
  background-color: transparent;
}

.ebmnt1-step.ebmnt1-is-active .ebmnt1-step__content {
  box-shadow: 0 0.5rem 1.75rem var(--ebmnt1-step-card-active-shadow-color);
}

.ebmnt1-step.ebmnt1-is-active .ebmnt1-step__number {
  color: var(--ebmnt1-step-number-stroke-color);
}

@media (min-width: 1024px) {
  .ebmnt1-steps__list {
    flex-direction: row;
    gap: 0;
  }

  .ebmnt1-step {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    text-align: center;
  }

  .ebmnt1-step__marker {
    flex: 0 0 auto;
    flex-direction: row;
  }

  .ebmnt1-step__line {
    flex: 1;
    width: auto;
    height: var(--ebmnt1-steps-line-thickness);
  }

  .ebmnt1-step__content {
    flex: 1;
    align-items: center;
    margin-block: 0.5rem;
    margin-inline: 0.5rem;
  }
}