/* Services page. Scoped to [data-pmg-page="services"]. */

@keyframes pmgFlow { from { background-position: 0 0; } to { background-position: 200px 0; } }

[data-pmg-page="services"] { overflow-x: clip; }
[data-pmg-page="services"] .pmg-services__flow { animation: pmgFlow 3s linear infinite; }
[data-pmg-page="services"] .pmg-services__btn:hover { color: inherit; }
[data-pmg-page="services"] .pmg-services__talk { transition: color .3s; }
[data-pmg-page="services"] .pmg-services__talk:hover, [data-pmg-page="services"] .pmg-services__talk:focus-visible { color: #F83900; }

/* Alternate stages mirror their columns; each column resets to ltr inline. */
[data-pmg-page="services"] .pmg-services__stage.is-flip .pmg-services__grid { direction: rtl; }

/* Chip strip in the hero. */
[data-pmg-page="services"] .pmg-services__chips::-webkit-scrollbar { display: none; }
[data-pmg-page="services"] .pmg-services__chip-n { color: rgba(255, 255, 255, .35); transition: color .3s; }
[data-pmg-page="services"] .pmg-services__chip-name { color: #AEA7A6; transition: color .3s; }
[data-pmg-page="services"] .pmg-services__chip.is-on .pmg-services__chip-n { color: #F83900; }
[data-pmg-page="services"] .pmg-services__chip.is-on .pmg-services__chip-name,
[data-pmg-page="services"] .pmg-services__chip:hover .pmg-services__chip-name { color: #fff; }

/* Sticky dot rail: desktop only. Under 960px it is removed so it never covers content; the chip strip above stays. */
[data-pmg-page="services"] .pmg-services__rail {
	position: fixed; right: clamp(16px, 2vw, 32px); top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: 14px; justify-items: center;
}
[data-pmg-page="services"] .pmg-services__dot { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0; }
[data-pmg-page="services"] .pmg-services__dot span {
	width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); box-shadow: none;
	transition: background .4s, box-shadow .4s, width .4s, height .4s;
}
[data-pmg-page="services"] .pmg-services__dot:hover span { background: #fff; }
[data-pmg-page="services"] .pmg-services__dot.is-on span { width: 10px; height: 10px; background: #F83900; box-shadow: 0 0 14px #F83900; }
@media (max-width: 959px) {
	[data-pmg-page="services"] .pmg-services__rail { display: none; }
}

/* Phones: stages follow content height instead of filling the screen. */
@media (max-width: 759px) {
	[data-pmg-page="services"] .pmg-services__stage { min-height: 0 !important; }
}