/* contact-steps block */
.contact-steps {
  position: relative;
  isolation: isolate;
  padding: 0;
  /* CSS counter for the auto-numbered feature steps */
  counter-reset: item;
}

/* section--boxed: rounded, inset, clipped container */
.contact-steps.section--boxed {
  margin-left: var(--space-s);
  margin-right: var(--space-s);
  width: initial;
  overflow: hidden;
  border-radius: var(--radius);
}

/* no_steps variant adds bottom spacing */
.contact-steps.padding-bottom--m {
  margin-bottom: var(--section-space-m);
}

.contact-steps__container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* --- Feature step list (steps variant) --- */
.contact-steps__list {
  list-style: none;
  margin: 0;
  padding: var(--space-l);
  display: grid;
  grid-template-columns: var(--grid-3);
  grid-template-rows: var(--grid-1);
  gap: var(--content-gap);
  background-color: var(--white);
}

@media (max-width: 1024px) {
  .contact-steps__list {
    grid-template-columns: var(--grid-1);
  }
}

.contact-steps__feature-element {
  counter-increment: item;
  display: flex;
  flex-direction: row;
  column-gap: var(--content-gap);
  flex-wrap: nowrap;
  align-items: flex-start;
}

@media (max-width: 640px) {
  .contact-steps__feature-element {
    flex-direction: column;
    row-gap: var(--content-gap);
  }
}

/* Counter badge — number rendered via ::before pseudo-element */
.contact-steps__feature-count {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-s);
  background-color: var(--secondary);
  border-radius: var(--radius-m);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  height: clamp(4.5rem, 3.6217rem + 1.8375vw, 6.4rem);
}

.contact-steps__feature-element .contact-steps__feature-count::before {
  content: counter(item);
  font-size: var(--text-l);
  line-height: 100%;
  font-weight: 700;
  color: var(--neutral);
}

.contact-steps__feature-element-container {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
}

.contact-steps__feature-heading {
  font-size: var(--text-xl);
  font-family: swear-display, serif;
  font-weight: 700;
}

.contact-steps__feature-description {
  max-width: var(--width-40);
  color: var(--primary-trans-90);
}

/* --- Contact info panel --- */
.contact-steps__container-info {
  position: relative;
  overflow: hidden;
  padding: var(--section-space-m) var(--section-space-s);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Inner content column */
.contact-steps__inner-container-info {
  display: flex;
  flex-direction: column;
  row-gap: var(--content-gap);
  margin-left: auto;
  margin-right: auto;
  width: var(--content-width);
  max-width: 100%;
}

.contact-steps__heading {
  font-size: var(--h1);
  text-align: left;
}

.contact-steps__description {
  max-width: 65ch;
  font-size: var(--text-l);
  color: var(--primary-trans-90);
  text-align: left;
}

.contact-steps__btn {
  align-self: flex-start;
}

/* Background image — absolutely positioned behind content */
.contact-steps__img {
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -2;
}

.contact-steps__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50%;
}

/* Tint overlay above the image, below the content */
.contact-steps__overlay {
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: color-mix(in oklch, var(--secondary-light) 80%, transparent);
}