.ebmnt1-how-we-work {
  background-color: var(--ebmnt1-background-how-we-work);
  overflow: hidden;
}

/* Blueprint drawing at 5% opacity */
.ebmnt1-how-we-work__shape {
  inset-block-start: 0;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: -1.25rem;
  width: auto;
  opacity: var(--ebmnt1-opacity-process-shape);
}

.ebmnt1-how-we-work__shape-image {
  width: auto;
  max-width: none;
  height: auto;
}

/* Giant faded word, rotated */
.ebmnt1-how-we-work__big-text {
  position: absolute;
  inset-block-start: 17.5rem;
  inset-inline-start: -5rem;
  z-index: 0;
  display: none;
  color: var(--ebmnt1-text-process-big);
  font-family: var(--ebmnt1-font-family-heading);
  font-size: var(--ebmnt1-font-size-process-big);
  font-weight: var(--ebmnt1-font-weight-extrabold);
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  transform: rotate(90deg);
}

.ebmnt1-how-we-work__inner {
  background-color: var(--ebmnt1-background-how-we-work-inner);
}

.ebmnt1-how-we-work__band {
  gap: 2.875rem;
  padding-block-end: 3.125rem;
}

.ebmnt1-how-we-work__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0;
  width: 100%;
}

/* Wrapper: holds the orange back-shape and the orange count bar */
.ebmnt1-process-card {
  position: relative;
  isolation: isolate;
  flex: 1 1 100%;
  max-width: 24rem;
  padding-inline: 1.25rem;
  margin-block-end: 1.875rem;
}

/* Orange shape peeking out behind the white card (mirrored for RTL) */
.ebmnt1-process-card__shape {
  position: absolute;
  inset-block: -1.3125rem 2.9375rem;
  inset-inline: 0;
  z-index: -1;
  background-color: var(--ebmnt1-background-process-shape);
  clip-path: polygon(0 0, 0 0, 0 100%, 100% 100%);
  border-start-start-radius: 4.3125rem;
  border-end-end-radius: 0.3125rem;
}

.ebmnt1-process-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.875rem 1.25rem 5.625rem;
  border: 1px solid var(--ebmnt1-border-process-card);
  border-start-start-radius: var(--ebmnt1-radius-process-corner);
  background-color: var(--ebmnt1-background-process-card);
}

.ebmnt1-process-card__icon {
  font-size: var(--ebmnt1-size-process-icon);
  color: var(--ebmnt1-icon-process);
}

.ebmnt1-process-card:hover .ebmnt1-process-card__icon {
  animation: ebmnt1-wobble-horizontal 1s ease-in-out 1;
}

.ebmnt1-process-card__title {
  margin-block: 0.9375rem 0.5rem;
  color: var(--ebmnt1-text-process-title);
  font-size: var(--ebmnt1-font-size-process-title);
  font-weight: var(--ebmnt1-font-weight-bold);
  line-height: 1.4;
}

.ebmnt1-process-card__text {
  color: var(--ebmnt1-text-process-body);
  font-size: var(--ebmnt1-font-size-body-small);
}

/* Orange bar at the bottom carrying the white numbered circle */
.ebmnt1-process-card__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3.125rem;
  background-color: var(--ebmnt1-background-process-bar);
  border-end-start-radius: 2.1875rem;
  border-end-end-radius: 2.1875rem;
  border-start-end-radius: 0.3125rem;
}

.ebmnt1-process-card__count {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ebmnt1-size-process-count);
  height: var(--ebmnt1-size-process-count);
  margin: -2.5rem auto 0;
  border: 8px solid var(--ebmnt1-border-process-count);
  border-radius: var(--ebmnt1-radius-circle);
  background-color: var(--ebmnt1-background-process-count);
  color: var(--ebmnt1-text-process-count);
  font-family: var(--ebmnt1-font-family-heading);
  font-size: var(--ebmnt1-font-size-process-count);
  font-weight: var(--ebmnt1-font-weight-bold);
}

@media (min-width: 425px) {
  .ebmnt1-process-card {
    flex-basis: 50%;
    max-width: none;
  }
}

@media (min-width: 768px) {
  .ebmnt1-how-we-work__big-text {
    display: block;
  }
}

@media (min-width: 1024px) {
  .ebmnt1-how-we-work__band {
    padding-block-end: 5.625rem;
  }

  .ebmnt1-process-card {
    flex-basis: 25%;
  }
}