/* Services page specific styles (keeps consistency with base.css) */
.hero {
  padding-block: clamp(var(--space-56), 8vw, var(--space-96));
}
.hero__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
.hero__media img { aspect-ratio: 16 / 10; object-fit: cover; }

.section--alt { background: var(--color-surface); }
.section--contact { background: linear-gradient(180deg, color-mix(in oklab, var(--color-elevated) 65%, transparent), transparent); }

/* Pricing */
.pricing-card__price { font-size: var(--fs-800); color: var(--color-white); }
.pricing-card ul { margin-top: var(--space-12); }

/* Process list */
.process-list { counter-reset: step; display: grid; gap: var(--space-16); padding-left: 0; list-style: none; }
.process-list li { position: relative; padding-left: 48px; background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 92%, transparent), var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding-block: 14px; padding-inline-end: 16px; }
.process-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-round); background: rgba(30,167,255,0.14); color: var(--color-primary); font-weight: 700; border: 1px solid color-mix(in oklab, var(--color-primary) 40%, transparent); }

/* Details/FAQ */
details { border-radius: var(--radius-md); }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary { padding: 6px 0; }
details[open] > summary { color: var(--color-primary); }

/* Small helpers */
.muted { color: var(--color-text-muted); }

@media (max-width: 900px) {
  .hero__media img { aspect-ratio: 16 / 9; }
}