root. function Eyebrow({ children }) { return {children}; } function ServicePage() { const params = new URLSearchParams(window.location.search); const slug = params.get('slug') || (SERVICES[0] && SERVICES[0].slug); const svc = SERVICES.find((s) => s.slug === slug) || SERVICES[0]; const o = OUTCOMES[svc.outcome] || {}; const Ico = OUTCOME_ICONS[svc.outcome]; const accent = o.accent || 'var(--wc-emerald)'; const accentSoft = PILLAR_SOFT[svc.outcome] || 'var(--accent-2-soft)'; const accentDeep = PILLAR_DEEP[svc.outcome] || 'var(--wc-ink-900)'; const heroBg = PILLAR_BG[svc.outcome] || 'bg-04'; const siblings = SERVICES.filter((s) => s.outcome === svc.outcome && s.slug !== svc.slug); const relCase = svc.relatedCaseSlug ? CASES.find((c) => c.slug === svc.relatedCaseSlug && c.status === 'published') : null; React.useEffect(() => { document.title = 'Wired CIO · ' + svc.name; }, [svc.name]); return (

{/* Hero — pillar-tinted wash + brand texture + complementary glow */}

{o.label}

{Ico ? : null}

{svc.name}

{svc.summary}

{/* Overview + at a glance */}

Overview

{svc.overviewHead}

{svc.overviewBody.map((p, i) => (

{p}

))}

{/* What's included */}

What's included

Everything this service brings to the table.

{svc.included.map((it, i) => (

{it.title}

{it.body}

))}

{/* Related case study */} {relCase ? (

Case study

{relCase.client}

{relCase.descriptor}

{relCase.summary}

Read the case study

) : null} {/* More in this pillar */}

Explore the rest of the pillar.

{siblings.map((s) => ( { e.currentTarget.style.borderColor = accent; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; }}> {s.name} ))}

{/* CTA */}

{svc.ctaHead}

{svc.ctaSub}

); } window.WCKit = Object.assign(window.WCKit || {}, { ServicePage }); })();