/* ==========================================================================
   Service pages (Design D). Loaded after home.css on services/*.html, whose
   <body> carries `home svc`, so the homepage components (hero, eyebrow,
   sec-title, steps, faq, ticks, buttons) apply as-is. This file only adds
   what the service pages need on top of them.
   ========================================================================== */

.svc .d-hero { padding-bottom: clamp(48px, 7vw, 80px); }
.svc .hero-head { margin-bottom: 0; }
.svc .hero-head h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
.svc .crumbs { display: flex; justify-content: center; gap: .5rem; font-size: .82rem; color: var(--d-text-faint); margin-bottom: 1.1rem; }
.svc .crumbs a { color: var(--d-text-dim); }
.svc .crumbs a:hover { color: var(--d-text); }

/* ---------- Icon tile ---------- */
.svc .tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--d-accent-soft); border: 1px solid rgba(139, 124, 255, .3); color: var(--d-accent-strong); flex-shrink: 0; }
.svc .tile svg { width: 22px; height: 22px; }

/* ---------- Service cards (hub) ---------- */
.svc .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.svc .svc-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.75rem; background: var(--d-surface); border: 1px solid var(--d-border); border-radius: var(--d-r-lg); color: inherit; overflow: hidden; transition: border-color .2s, transform .2s; }
.svc .svc-card::before { content: ''; position: absolute; width: 320px; height: 320px; right: -160px; top: -160px; background: radial-gradient(closest-side, rgba(139, 124, 255, .18), transparent); pointer-events: none; }
.svc .svc-card:hover { border-color: rgba(139, 124, 255, .45); transform: translateY(-3px); }
.svc .svc-card:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 3px; }
.svc .svc-card h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.svc .svc-card p { color: var(--d-text-dim); font-size: .95rem; }
.svc .svc-card .fit { color: var(--d-text); font-size: .9rem; padding: .8rem .95rem; border-radius: var(--d-r-sm); background: var(--d-surface-2); border: 1px solid var(--d-border); }
.svc .svc-card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; margin-top: auto; border-top: 1px solid var(--d-border); font-size: .8rem; color: var(--d-text-faint); }
.svc .svc-card .meta b { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--d-text); }
.svc .svc-card .link-arrow svg { transition: transform .2s; }
.svc .svc-card:hover .link-arrow svg { transform: translateX(3px); }

/* ---------- Reading / related cards ---------- */
.svc .read-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.svc .read-card { display: flex; flex-direction: column; gap: .65rem; padding: 1.5rem; background: var(--d-surface); border: 1px solid var(--d-border); border-radius: var(--d-r-lg); color: inherit; transition: border-color .2s, transform .2s; }
.svc .read-card:hover { border-color: rgba(139, 124, 255, .45); transform: translateY(-3px); }
.svc .read-card:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 3px; }
.svc .read-card .kind { font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--d-accent-strong); }
.svc .read-card h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.svc .read-card p { color: var(--d-text-dim); font-size: .9rem; flex: 1; }
.svc .read-card .link-arrow { font-size: .88rem; }

/* ---------- CTA band ---------- */
.svc .cta-band { text-align: center; padding: clamp(2.25rem, 5vw, 3.5rem) 1.5rem; border: 1px solid var(--d-border-strong); border-radius: 28px; background: radial-gradient(circle at 50% 0%, rgba(139, 124, 255, .24), transparent 70%), var(--d-surface); }
.svc .cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 600; margin-bottom: .75rem; }
.svc .cta-band p { color: var(--d-text-dim); max-width: 56ch; margin: 0 auto 1.75rem; }
.svc .cta-band .hero-ctas { justify-content: center; }

@media (max-width: 960px) {
    .svc .svc-grid { grid-template-columns: 1fr; }
}