/* Natural road treatment for the load journey. */
.reference-layout .brand,
.reference-layout .nav-links > a.active {
  color: var(--green);
}

.site-header .brand-mark {
  display: block;
  width: 68px;
  height: 54px;
  overflow: hidden;
  flex: 0 0 auto;
}

.site-header .brand-mark img {
  width: 78px;
  height: auto;
  max-width: none;
  transform: translateX(-5px);
}

.reference-hero {
  background-image: url("images/highway-haulage.png");
}

.route-track {
  background: #f4f5f8;
}

.route-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.route-road path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.road-shadow {
  stroke: rgba(4, 24, 21, 0.18);
  stroke-width: 190;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(8px);
}

.road-surface {
  stroke: #3f4549;
  stroke-width: 176;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road-edge {
  stroke: #f7f7f2;
  stroke-width: 160;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road-centre {
  stroke: #f2c94c;
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-dasharray: 34 24;
}

.route-step {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.step-1 { left: 16%; top: 72px; }
.step-2 { right: 21%; top: 72px; }
.step-3 { right: 9%; top: 304px; }
.step-4 { left: 18%; top: 391px; }
.step-5 { left: 27%; bottom: 27px; }
.step-6 { right: 12%; bottom: 27px; }

.route-truck {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.truck-a { right: 8%; top: 170px; transform: rotate(78deg); }
.truck-b { left: 8%; top: 398px; transform: rotate(-6deg); }
.truck-c { right: 4%; bottom: 49px; transform: rotate(0); }

@media (max-width: 900px) {
  .reference-layout .brand,
  .reference-layout .nav-links > a.active {
    color: #fff;
  }

  .site-header .brand-mark {
    width: 54px;
    height: 46px;
  }

  .site-header .brand-mark img {
    width: 62px;
    transform: translateX(-4px);
  }

  .route-road { display: none; }
}