/* Steps — numbered step grid */

.sec__steps .steps__step-number {
  font-family: var(--heading-font);
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: var(--heading-weight, 500);
  line-height: 1;
  letter-spacing: var(--heading-letter-spacing);
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.sec__steps .steps__step-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-muted, #f6f6f4);
}

.sec__steps .steps__step-placeholder {
  width: 100%;
  height: 100%;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-muted, #f6f6f4));
}

.sec__steps .steps__step-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.75;
}

.sec__steps .steps__step-title {
  color: var(--color-heading);
}