.hdl-visit {
  --hdl-text: #4b4234;
  --hdl-muted: rgba(75, 66, 52, .78);
  --hdl-accent: #8c7b66;
  --hdl-rule: rgba(77, 67, 55, .30);
  --hdl-stem: rgba(140, 123, 102, .72);
  --hdl-band: 220px;
  --hdl-stem-h: 34px;
  --hdl-dot: 10px;
  background: var(--primary-light, #c0b5a5);
  border-top: 1px solid rgba(77, 67, 55, .16);
  border-bottom: 1px solid rgba(77, 67, 55, .16);
  color: var(--hdl-text);
  padding: clamp(72px, 7vw, 96px) 0;
}

.hdl-visit *,
.hdl-visit *::before,
.hdl-visit *::after {
  box-sizing: border-box;
}

.hdl-visit__inner {
  width: min(calc(100% - 48px), var(--content-width, 1280px));
  margin-inline: auto;
}

.hdl-visit__eyebrow {
  margin: 0 0 16px;
  font-family: Jost, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #000;
}

.hdl-visit__head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
  padding-bottom: clamp(56px, 6vw, 76px);
}

.hdl-visit__title {
  max-width: 560px;
  margin: 0;
  font-family: Raleway, sans-serif;
  font-size: var(--h2, 48px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hdl-text);
}

.hdl-visit__lead {
  max-width: 650px;
  margin: 0;
  font-family: Jost, sans-serif;
  font-size: var(--text-m, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--hdl-text);
  text-wrap: pretty;
}

.hdl-visit__steps,
.hdl-visit__axis {
  list-style: none;
}

.hdl-visit__steps {
  margin: 0;
  padding: 0;
}

.hdl-visit__step {
  position: relative;
}

.hdl-visit__label {
  margin-bottom: 12px;
  font-family: Jost, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hdl-accent);
}

.hdl-visit__name {
  max-width: 14ch;
  margin: 0 0 12px;
  font-family: Raleway, sans-serif;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.16;
  color: var(--hdl-text);
}

.hdl-visit__copy {
  max-width: 31ch;
  margin: 0;
  font-family: Jost, sans-serif;
  font-size: var(--text-s, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--hdl-muted);
  text-wrap: pretty;
}

.hdl-visit__step::after {
  content: "";
  position: absolute;
  width: var(--hdl-dot);
  height: var(--hdl-dot);
  border-radius: 999px;
  background: var(--hdl-accent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .20);
}

.hdl-visit__step::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: var(--hdl-stem-h);
  background: var(--hdl-stem);
}

.hdl-visit__builder-notice {
  margin-top: 32px;
  color: var(--hdl-text);
}

@media (min-width: 1100px) {
  .hdl-visit__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(var(--hdl-band), auto) 1px minmax(var(--hdl-band), auto);
    column-gap: clamp(32px, 4vw, 56px);
  }

  .hdl-visit__axis {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    height: 1px;
    background: var(--hdl-rule);
  }

  .hdl-visit__axis::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--hdl-accent);
    border-right: 1px solid var(--hdl-accent);
    transform: rotate(45deg);
  }

  .hdl-visit__step:nth-child(1) { grid-column: 1; grid-row: 1; }
  .hdl-visit__step:nth-child(2) { grid-column: 2; grid-row: 3; }
  .hdl-visit__step:nth-child(3) { grid-column: 3; grid-row: 1; }
  .hdl-visit__step:nth-child(4) { grid-column: 4; grid-row: 3; }

  .hdl-visit__step:nth-child(odd) {
    align-self: end;
    padding-bottom: var(--hdl-stem-h);
  }

  .hdl-visit__step:nth-child(odd)::before { bottom: 0; }
  .hdl-visit__step:nth-child(odd)::after {
    left: 0;
    bottom: calc(var(--hdl-dot) / -2);
  }

  .hdl-visit__step:nth-child(even) {
    align-self: start;
    padding-top: var(--hdl-stem-h);
  }

  .hdl-visit__step:nth-child(even)::before { top: 0; }
  .hdl-visit__step:nth-child(even)::after {
    left: 0;
    top: calc(var(--hdl-dot) / -2 + 1px);
  }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  .hdl-visit {
    --hdl-band: 236px;
  }
}

@media (max-width: 1099px) {
  .hdl-visit__inner {
    width: min(calc(100% - 36px), var(--content-width, 1280px));
  }

  .hdl-visit__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-bottom: 48px;
  }

  .hdl-visit__axis {
    display: none;
  }

  .hdl-visit__steps {
    border-left: 1px solid var(--hdl-rule);
  }

  .hdl-visit__step {
    padding: 0 0 42px 30px;
  }

  .hdl-visit__step:last-of-type {
    padding-bottom: 0;
  }

  .hdl-visit__step::before {
    display: none;
  }

  .hdl-visit__step::after {
    left: calc(var(--hdl-dot) / -2 - .5px);
    top: 5px;
  }

  .hdl-visit__name,
  .hdl-visit__copy {
    max-width: 620px;
  }
}

@media (max-width: 560px) {
  .hdl-visit {
    --hdl-dot: 9px;
    padding: 60px 0 64px;
  }

  .hdl-visit__inner {
    width: min(calc(100% - 32px), var(--content-width, 1280px));
  }

  .hdl-visit__eyebrow {
    font-size: 12px;
    letter-spacing: .18em;
  }

  .hdl-visit__step {
    padding-left: 24px;
    padding-bottom: 36px;
  }
}