.service-rail {
  --rail-card-width: min(32vw, 490px);
  --rail-gap: 40px;
  --rail-inset: 10vw;
  --rail-photo-height: min(49vh, 500px);
  position: relative;
  padding-bottom: 40px;
}
.service-rail__heading {max-width: 1160px; padding-block: 112px 48px;}
.service-rail__heading h2 {max-width: 940px;}
.service-rail__intro {max-width: 460px; margin-top: 20px; font-size: 16px;}
.service-rail__runway {min-height: 0;}
.service-rail__pin {display: flex; flex-direction: column; min-width: 0;}
.service-rail__viewport {
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-inset);
  scrollbar-width: thin;
  scrollbar-color: var(--caramel) var(--night);
}
.service-rail__viewport:focus-visible {outline-offset: -5px;}
.service-rail__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--rail-gap);
  width: max-content;
  padding: 24px var(--rail-inset);
}
.service-rail__card {
  flex: 0 0 var(--rail-card-width);
  width: var(--rail-card-width);
  min-width: 0;
  color: var(--night);
  background: var(--ivory);
  scroll-snap-align: center;
  transform: rotate(var(--rail-angle, -2deg));
  transform-origin: center;
}
.service-rail__card:nth-child(4n + 2) {--rail-angle: 2deg;}
.service-rail__card:nth-child(4n + 3) {--rail-angle: -1deg;}
.service-rail__card:nth-child(4n + 4) {--rail-angle: 1deg;}
.service-rail__image {height: var(--rail-photo-height);}
.service-rail__image picture {display: block; width: 100%; height: 100%;}
.service-rail__body {padding: 40px;}
.service-rail__number {display: block; margin-bottom: 12px; font-family: var(--body); font-size: 11px; line-height: 1.5; letter-spacing: .16em;}
.service-rail__body h3 {font-family: var(--heading); font-size: 32px; line-height: 1.12;}
.service-rail__body p {margin-top: 14px; font-size: 14px; line-height: 1.6;}
.service-rail__body .text-link {max-width: 100%; margin-top: 18px;}
.service-rail__body .text-link::after {flex: 0 0 auto;}
.service-rail__controls {display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-block: 12px 24px;}
.service-rail__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--caramel);
  border-radius: 50%;
  color: var(--caramel);
  background: transparent;
  transition: color .25s, background .25s, opacity .25s;
}
.service-rail__arrow:hover:not(:disabled) {color: var(--night); background: var(--caramel);}
.service-rail__arrow:disabled {opacity: .3; cursor: default;}
.service-rail__counter {min-width: 40px; font-size: 11px; letter-spacing: .12em; text-align: center; color: var(--caramel);}
.service-rail.is-pinned {display: flex; flex-direction: column; height: 330vh; padding-bottom: 0;}
.service-rail.is-pinned .service-rail__heading {flex: 0 0 auto;}
.service-rail.is-pinned .service-rail__runway {flex: 1;}
.service-rail.is-pinned .service-rail__pin {position: sticky; top: var(--header, 98px); height: calc(100vh - var(--header, 98px));}
.service-rail.is-pinned .service-rail__viewport {flex: 1; overflow: clip; scroll-snap-type: none;}
.service-rail.is-pinned .service-rail__track {will-change: transform;}
.service-rail.is-pinned .service-rail__controls {flex: 0 0 auto;}
@media (min-width: 768px) and (max-width: 991px) {
  .service-rail {--rail-card-width: 46vw; --rail-gap: 28px;}
}
@media (max-width: 767px) {
  .service-rail {--rail-card-width: 82vw; --rail-gap: 20px; --rail-photo-height: 360px; padding-bottom: 32px;}
  .service-rail__heading {padding-block: 76px 32px;}
  .service-rail__body {padding: 24px;}
  .service-rail__controls {justify-content: center;}
}
@media (prefers-reduced-motion: reduce) {
  .service-rail__card {transform: none;}
  .service-rail__track {will-change: auto;}
  .service-rail__viewport {scroll-behavior: auto;}
}