/* service-rail breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  /* The mobile curves are the design's own 414x267 artwork. In the design it starts
     217px above the card images, so with the cards 51px below this section's top
     edge it sits at 51 - 217 = -166px, centred on the 414 frame. The team photo is
     a cut-out PNG, so anything drawn above this section would show through its
     transparent areas (over the heads); the clip keeps the curves below the photo. */
  .service-rail__curves { top: -166px; left: 50%; width: 414px; height: 267px; margin-left: 0; clip-path: inset(166px 0 0); transform: translateX(-50%); }
  .service-rail__curves img { width: 414px; max-width: none; height: 267px; }
  /* overflow-x: clip crops the 414px curves at the screen edge, as the design frame does,
     without making the section a scroller (overflow-y stays visible for the curves above it). */
  .service-rail { order: 3; padding: 51px 0 23px; overflow-x: clip; }
  .service-rail__viewport { overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .service-rail__track { grid-template-columns: repeat(7, 102px); gap: 8px; min-width: max-content; padding-inline: 16px; }
  .service-card { width: 102px; gap: 12px; }
  .service-card h3 { order: 2; min-height: 42px; font-size: 16px; line-height: 18px; }
  .service-card img { order: 1; width: 102px; height: 102px; }
}