/* /services page. Builds on motion.css, pricing.css, components.css and the subpage header in cleanos-startup.css. */
.services-hero { position: relative; overflow: clip; padding-block: clamp(64px, 9vw, 128px) clamp(48px, 6vw, 88px); background: linear-gradient(180deg, #26363d, #1b2225 72%, #181818); }
.services-hero .wrap { position: relative; }
.services-hero h1 { margin: 12px 0 20px; font-size: clamp(44px, 7vw, 104px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.services-lede { max-width: 620px; margin: 0 0 28px; color: #c6c9c6; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; }
.services-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.services-hero-lane { position: absolute; inset: 12% 0 auto; width: 100%; height: 60%; fill: none; stroke: #8ea3aa; stroke-opacity: .35; stroke-width: 1.4; stroke-dasharray: 1 8; stroke-linecap: round; pointer-events: none; }

/* Pricing cards: the 21st.dev "Pricing Cards" pattern (tick rows, price first, one clear action), in MYK tokens. */
.services-page .pricing-grid { align-items: stretch; }
.services-page .price-card { border-radius: 20px; border-color: #3a4a50; background: linear-gradient(180deg, #202b30, #1a2226 60%); box-shadow: inset 0 1px 0 #ffffff14; transition: border-color .3s ease; }
@media (hover: hover) and (pointer: fine) { .services-page .price-card:hover { border-color: #ff8e57; } }
.services-page .package-price { color: var(--paper); }
.services-page .pricing-section .price-card ul { list-style: none; padding: 0; }
.services-page .pricing-section .price-card li { position: relative; padding-left: 30px; }
.services-page .pricing-section .price-card li::before { content: ''; display: block; position: absolute; left: 0; top: .62em; width: 18px; height: 18px; border-radius: 50%; background: #ff8e571f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.7 2.6L13 6.4' fill='none' stroke='%23ff8e57' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.services-page .contact { background: linear-gradient(180deg, #181818, #1b2225); }
@media (max-width: 760px) { .subpage-nav a:nth-child(2) { display: none; } .services-hero-lane { display: none; } }
@media (max-width: 420px) { .subpage-nav a:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .services-page .price-card { transition: none; } }

.services-page .eyebrow { color: var(--orange); }

.services-page .text-link, .services-page .work-enquiry { display: inline-flex; align-items: center; min-height: 44px; }
.services-page .eyebrow, .services-page .package-category, .services-page .pause-button, .services-page .project-caption p:not(.project-story) { font-size: 12px; }