:root { --service-accent: var(--accent); --service-glow: rgba(201,162,39,.14); }
.service-page--marketing { --service-accent: #72b9e8; --service-glow: rgba(114,185,232,.16); }
.service-page--integrations { --service-accent: #a78bfa; --service-glow: rgba(167,139,250,.18); }
.service-page { min-height: 100vh; background: var(--bg); }
.service-hero {
  position: relative;
  overflow: hidden;
  padding: 10rem 0 5rem;
  border-bottom: 1px solid var(--border);
}
.service-hero::after {
  content: "";
  position: absolute;
  width: 58rem; height: 58rem;
  border-radius: 50%;
  right: -22rem; top: -28rem;
  background: radial-gradient(circle, var(--service-glow), transparent 68%);
  pointer-events: none;
}
.service-hero .container { position: relative; z-index: 1; }
.service-eyebrow { color: var(--service-accent); font: 500 .75rem/1 var(--font-sans); letter-spacing: .18em; }
.service-hero h1 { margin-top: 1rem; max-width: 18ch; font: 300 clamp(2.5rem, 6vw, 4.5rem)/1.02 var(--font-serif); }
.service-lede { max-width: 44rem; margin-top: 1.25rem; font: 300 clamp(1.35rem, 2.5vw, 1.85rem)/1.2 var(--font-serif); }
.service-desc { max-width: 42rem; margin-top: 1.25rem; color: var(--text-muted); line-height: 1.75; font-size: .9375rem; }
.service-pillars { display: grid; gap: 1px; margin-top: 2.5rem; border: 1px solid var(--border); background: var(--border); }
.service-pillars article { padding: 1.5rem; background: var(--bg); }
.service-pillars h3 { font: 400 1.15rem/1.35 var(--font-serif); }
.service-pillars p { margin-top: .65rem; color: var(--text-muted); font-size: .875rem; line-height: 1.65; }
.service-section { padding: 5rem 0; }
.service-section--alt { background: var(--bg-elevated); border-top: 1px solid var(--border); }
.service-section h2 { margin-top: .75rem; font: 300 clamp(2rem, 4vw, 3.25rem)/1.05 var(--font-serif); }
.service-section > .container > p.lead { max-width: 42rem; margin-top: 1rem; color: var(--text-muted); line-height: 1.75; }
.service-grid { display: grid; gap: 1px; margin-top: 2.5rem; border: 1px solid var(--border); background: var(--border); }
.service-grid article { padding: 1.75rem; background: var(--bg); }
.service-section--alt .service-grid article { background: var(--bg-elevated); }
.service-grid span { color: var(--service-accent); font: 500 .72rem var(--font-sans); letter-spacing: .1em; }
.service-grid h3 { margin-top: .85rem; font: 400 1.2rem/1.35 var(--font-serif); }
.service-grid p { margin-top: .65rem; color: var(--text-muted); font-size: .875rem; line-height: 1.65; }
.service-steps { display: grid; gap: 1px; margin-top: 2rem; border: 1px solid var(--border); background: var(--border); }
.service-steps article { padding: 1.5rem; background: var(--bg-elevated); }
.service-steps span { color: var(--service-accent); font: 500 .72rem var(--font-sans); }
.service-steps h3 { margin-top: .75rem; font-size: 1rem; font-weight: 500; }
.service-steps p { margin-top: .5rem; color: var(--text-muted); font-size: .875rem; line-height: 1.6; }
.service-outcomes { margin-top: 2rem; padding: 1.75rem; border: 1px solid color-mix(in srgb, var(--service-accent) 35%, var(--border)); background: color-mix(in srgb, var(--service-glow) 40%, var(--bg)); }
.service-outcomes h3 { font: 400 1.25rem/1.3 var(--font-serif); }
.service-outcomes p { margin-top: .75rem; color: var(--text-muted); font-size: .875rem; line-height: 1.7; }
.service-outcomes a { color: var(--service-accent); }
.service-cta { padding: 5rem 0; border-top: 1px solid var(--border); }
.service-cta h2 { font: 300 clamp(2rem, 4vw, 3.25rem)/1.05 var(--font-serif); }
.service-cta__note { margin-top: 1rem; color: var(--text-muted); font-size: .9375rem; }
.service-cta__note a { color: var(--service-accent); }
.service-cta__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.service-cta__links a { color: var(--service-accent); font-size: .875rem; }
.service-cta__links a.is-muted { color: var(--text-muted); }
@media (min-width: 768px) {
  .service-pillars { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-steps { grid-template-columns: repeat(4, 1fr); }
}