/* One shared rail follows the columns of the existing service grid. */
.service-hoist-rail {
  position: relative;
  height: 124px;
  margin-bottom: 18px;
  pointer-events: none;
}
.service-hoist-beam {
  position: absolute;
  inset: 20px 0 auto;
  height: 18px;
  border-block: 2px solid #7b9b9f;
  background: repeating-linear-gradient(135deg, transparent 0 24px, #b5cdcf 24px 25px, transparent 25px 49px);
}
.service-hoist-beam::before,
.service-hoist-beam::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 5px;
  height: 28px;
  border: 1px solid #7b9b9f;
  background: var(--paper);
}
.service-hoist-beam::before { left: 0; }
.service-hoist-beam::after { right: 0; }
.service-hoist-trolley {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 112px;
  overflow: visible;
  transform: translateX(var(--service-hoist-x, calc((100cqw - 48px) / 6 - 40px)));
  color: var(--teal);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-trolley-body { fill: var(--paper); }
.service-trolley-body > rect { fill: #e2eff0; }
.service-trolley-light { fill: var(--teal); stroke: none; }
.service-travelling-hook { stroke-width: 2.5; }
.page-services #services > .container { container-type: inline-size; }
@media (max-width: 860px) {
  .service-hoist-trolley { transform: translateX(var(--service-hoist-x, calc((100cqw - 24px) / 4 - 40px))); }
}
@media (max-width: 650px) {
  .service-hoist-trolley { transform: translateX(var(--service-hoist-x, calc(50cqw - 40px))); }
  .service-hoist-rail { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .service-hoist-trolley { transition: transform 650ms cubic-bezier(.25, .8, .25, 1); }
  .service-hoist-hanging { transform-origin: 40px 61px; }
}