/* =========================================================================
   Services page - auto-scrolling service rail + process steps.
   Rail motion is driven by main.js ("Auto-scrolling rail"); it stops on
   hover / focus, and never auto-scrolls under prefers-reduced-motion.
   ========================================================================= */

.svc-rail-section { padding-bottom: clamp(3rem, 6vw, 4.5rem); overflow: hidden; }

/* Heading row with controls on the right */
.rail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.rail__controls { display: flex; gap: .5rem; }
.rail__btn {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
    transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease);
}
.rail__btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-2px); }
.rail__btn:active { transform: scale(.94); }
.rail__btn .icon { width: 20px; height: 20px; }
.rail__btn--play { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* Toggle shows "pause" while playing, "play" while paused (aria-pressed = paused) */
.rail__btn--play .rail__ico-pause, .rail__btn--play .rail__ico-play { place-items: center; }
.rail__btn--play .rail__ico-pause { display: grid; }
.rail__btn--play .rail__ico-play { display: none; }
.rail__btn--play[aria-pressed="true"] .rail__ico-pause { display: none; }
.rail__btn--play[aria-pressed="true"] .rail__ico-play { display: grid; }

/* The rail: full-bleed, fades at both edges */
.rail { position: relative; }
.rail__track {
    display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none;
    padding: .75rem max(1.25rem, calc((100vw - var(--container)) / 2)) 2rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    cursor: grab;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track:active { cursor: grabbing; }
.rail__track:focus-visible { outline-offset: -3px; }

/* Service card: full-colour gradient, same family as the Solutions panels */
.svc-slide {
    position: relative; isolation: isolate; overflow: hidden; flex: 0 0 clamp(270px, 28vw, 360px);
    display: flex; flex-direction: column; gap: .9rem; min-height: 300px;
    padding: clamp(1.4rem, 2.6vw, 1.9rem); border-radius: 22px; color: #fff;
    background: linear-gradient(135deg, var(--g1), var(--g2));
    box-shadow: 0 26px 50px -30px var(--g1);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc-slide::before, .svc-slide::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; transition: transform .6s var(--ease); }
.svc-slide::before { width: 220px; height: 220px; right: -80px; top: -90px; background: rgba(255, 255, 255, .12); }
.svc-slide::after { width: 110px; height: 110px; left: -30px; bottom: -50px; border: 14px solid rgba(255, 255, 255, .14); }
.svc-slide:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px var(--g1); }
.svc-slide:hover::before { transform: scale(1.2); }
.svc-slide:hover .tile__icon { transform: scale(1.06); }

.svc-slide__head { display: flex; align-items: center; gap: .85rem; }
.svc-slide__head h3 { color: #fff; font-size: 1.2rem; line-height: 1.2; }
.svc-slide .tile__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; }
.svc-slide .tile__icon .icon { width: 24px; height: 24px; }
.svc-slide > p { color: rgba(255, 255, 255, .92); font-size: .96rem; }
.svc-slide__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.svc-slide__tags li {
    font-size: .78rem; font-weight: 500; padding: .3rem .65rem; border-radius: 999px;
    background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

/* Without JS the rail is still a normal swipeable row */
@media (max-width: 640px) {
    .rail__head { align-items: flex-start; }
    .svc-slide { flex-basis: 82vw; min-height: 0; }
}