/* The curve and its round nodes share one responsive coordinate plane. */
.company-route {
  --route-top: -25px;
  --route-height: 175px;
  padding-top: 45px
}

.company-route>svg,
.company-route>.company-route-markers {
  position: absolute;
  inset: var(--route-top) -10% auto;
  width: 120%;
  height: var(--route-height);
  pointer-events: none
}

.company-route>.company-route-markers>i {
  position: absolute;
  display: block;
  left: var(--route-x);
  top: var(--route-y);
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background: #287bff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #f5faff
}

@media(max-width:760px) {
  .company-route {
    --route-top: -19px;
    --route-height: 120px;
    padding-top: 38px
  }

  .company-route>.company-route-markers>i {
    width: 7px;
    height: 7px
  }
}

/* Boundary curves use the same ellipse coordinates as their round nodes. */
.portfolio-route,
.technology-route {
  border: 0;
  border-radius: 0
}

.portfolio-route>.boundary-curve,
.technology-route>.boundary-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #4d91ff;
  stroke-width: 1;
  pointer-events: none
}

.boundary-curve>path {
  vector-effect: non-scaling-stroke
}

.portfolio-route>i[data-curve-node],
.technology-route>i[data-curve-node] {
  position: absolute;
  left: var(--route-x);
  top: var(--route-y);
  right: auto;
  bottom: auto;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border: 2px solid #3d85ff;
  border-radius: 50%;
  background: var(--route-fill, #fff)
}

/* Keep the round nodes clear of the section clipping edge. */
.technology-development>.technology-route {
  top: 8px
}

/* Remaining decorative SVG nodes stay round while sharing each curve's plane. */
.hero-route,
.hero-route-nodes {
  position: absolute;
  inset: 21% 0 auto;
  width: 100%;
  height: 62%;
  pointer-events: none
}

.hero-route-nodes {
  opacity: .65
}

.hero-right-variant .hero-route-nodes {
  transform: scaleX(-1)
}

.recruit-route,
.recruit-route-nodes {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 23%;
  pointer-events: none
}

.feedback-route,
.feedback-route-nodes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none
}

.hero-route-nodes>i,
.recruit-route-nodes>i,
.feedback-route-nodes>i {
  display: block;
  position: absolute;
  left: var(--route-x);
  top: var(--route-y);
  width: var(--node-size);
  height: var(--node-size);
  box-sizing: border-box;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

.hero-route-nodes>i {
  border: 1px solid #62a8ff;
  background: #fff
}

.recruit-route-nodes {
  --node-size: 13px
}

.recruit-route-nodes>i {
  border: 3px solid #fff;
  background: #2779ff
}

.feedback-route-nodes {
  --node-size: 15px
}

.feedback-route-nodes>i {
  border: 3px solid #3b88ff;
  background: #fff
}

@media(max-width:760px) {

  .hero-route,
  .hero-route-nodes {
    inset: 32% 0 auto;
    height: 42%
  }

  .recruit-route,
  .recruit-route-nodes {
    inset: auto 0 11px;
    height: 17%
  }

  .recruit-route-nodes {
    --node-size: 9px
  }

  .recruit-route-nodes>i {
    border-width: 2px
  }

  .feedback-route-nodes {
    --node-size: 11px
  }

  .feedback-route-nodes>i {
    border-width: 2px
  }
}