/*
 * Services page (port of Services.dc.html).
 * Helmet keyframes + style-hover rules (the runtime made every hover
 * declaration !important so it beats the inline style).
 */

@keyframes vmHeroIn { from { opacity: 0; transform: translateY(70px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes vmOrbit { to { transform: rotate(360deg); } }
@keyframes vmOrbitR { to { transform: rotate(-360deg); } }
@keyframes vmStretch { from { font-stretch: 62%; opacity: 0; } to { font-stretch: 100%; opacity: 1; } }
@keyframes vmGlow { 50% { box-shadow: 0 0 120px 40px rgba(225, 232, 255, .14); } }

/* style-hover */
.vms-ghost:hover { border-color: #edf0ea !important; }
.vms-pill:hover { background: #c1ed00 !important; color: #0e0f11 !important; }
.vms-add:hover { background: #c1ed00 !important; color: #0e0f11 !important; }
.vms-explore:hover { color: #c1ed00 !important; }

/* <sc-if> blocks toggled from JS (inline display:flex would otherwise win over [hidden]). */
.vms-index[hidden] { display: none !important; }

/*
 * First paint before JS: the logic class derives `wide = innerWidth >= 1000`
 * on mount — below that the sticky index is removed and the details grid is a
 * single column (detailCols = 'minmax(0,1fr)').
 */
@media screen and (max-width: 999.98px) {
	.vms-index { display: none !important; }
	.vms-grid { grid-template-columns: minmax(0, 1fr) !important; }
}