/* AHR adaptation of the local NDR numbered route and illustrated vehicle layout. */
.ahr-process {
  --process-paper: var(--white);
  padding-block: clamp(3.75rem, 7vw, 6.25rem);
  background: var(--process-paper);
  text-align: left;
}
.ahr-process.section--cream { --process-paper: var(--cream); }
.ahr-process__grid {
  display: grid;
  grid-template-columns: .9fr 2.4fr;
  gap: 5%;
  align-items: center;
}
.ahr-process__intro { min-width: 0; }
.ahr-process .ahr-process__heading {
  margin: 0;
  font-size: clamp(2.3rem, 3.5vw, 3rem);
  line-height: 1.12;
}
.ahr-process__heading em { color: var(--taupe-dark); }
.ahr-process__vehicle { width: 100%; max-width: 350px; height: auto; margin-top: 1.5rem; }
.ahr-process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ahr-process__steps::before {
  content: "";
  position: absolute;
  left: 23px;
  right: calc((100% - 4.5rem) / 4 - 23px);
  top: 23px;
  border-top: 2px dashed color-mix(in srgb, var(--taupe) 65%, transparent);
  pointer-events: none;
}
.ahr-process__steps > li { position: relative; min-width: 0; z-index: 1; }
.ahr-process__number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: var(--taupe-dark);
  color: var(--white);
  font: 600 1.65rem / 1 var(--font-display);
  box-shadow: 0 0 0 6px var(--process-paper);
}
.ahr-process__number::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -7px;
  width: 14px;
  height: 10px;
  background: var(--taupe-dark);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ahr-process .ahr-process__copy h3 { margin: 0 0 .75rem; font-size: 1.4rem; line-height: 1.2; }
.ahr-process__copy p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.ahr-process .section-cta { margin-top: 2.5rem; }
@media (max-width: 1100px) {
  .ahr-process__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .ahr-process__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
  .ahr-process__vehicle { margin-top: 0; justify-self: end; }
}
@media (max-width: 550px) {
  .ahr-process__grid { gap: 2rem; }
  .ahr-process__intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .ahr-process__vehicle { max-width: 280px; justify-self: center; }
  .ahr-process__steps { grid-template-columns: 1fr; gap: 2rem; }
  .ahr-process__steps::before { content: none; }
  .ahr-process__steps > li { padding-left: 62px; }
  .ahr-process__steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 23px;
    bottom: calc(-2rem - 23px);
    border-left: 2px dashed color-mix(in srgb, var(--taupe) 65%, transparent);
    pointer-events: none;
  }
  .ahr-process__number { position: absolute; left: 0; top: 0; margin: 0; }
  .ahr-process .ahr-process__copy h3 { font-size: 1.5rem; margin-bottom: .5rem; }
  .ahr-process__copy p { font-size: 1rem; }
}