.service-detail-page { --service-accent: var(--orange); background: var(--paper); }
.service-detail-page .desktop-nav a.active { color: var(--orange); }
.service-detail-hero { min-height: 82svh; position: relative; overflow: hidden; padding: calc(var(--announcement-h) + 8.5rem) var(--pad) 4rem; color: white; background: var(--ink); isolation: isolate; }
.service-detail-hero::before { content: ""; position: absolute; z-index: -1; right: -12vw; top: -18vw; width: min(64vw, 900px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--service-accent) 45%, transparent); border-radius: 50%; box-shadow: 0 0 0 110px color-mix(in srgb, var(--service-accent) 7%, transparent); }
.service-detail-grid { position: absolute; inset: 0; z-index: -2; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size: 72px 72px; }
.service-detail-inner { max-width: var(--max); margin: 0 auto; }
.service-breadcrumb { color: rgba(255,255,255,.58); text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; font-weight: 800; }
.service-breadcrumb a:hover { color: var(--service-accent); }
.service-detail-hero h1 { max-width: 1100px; margin: 2rem 0; font-size: clamp(4.2rem, 9vw, 9.5rem); line-height: .84; letter-spacing: -.075em; }
.service-detail-hero h1 em { color: var(--service-accent); }
.service-detail-lead { width: min(700px, 62%); margin: 3rem 4% 0 auto; }
.service-detail-lead p { color: rgba(255,255,255,.68); font-size: clamp(1rem,1.5vw,1.25rem); line-height: 1.7; }
.service-detail-lead .button { margin-top: 1.25rem; background: var(--service-accent); border-color: var(--service-accent); }
.service-overview { background: white; }
.service-overview-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem,8vw,9rem); }
.service-overview h2,.service-method h2,.service-fit h2 { margin: 1rem 0; font-size: clamp(3rem,6vw,6.7rem); line-height: .9; letter-spacing: -.065em; }
.service-overview-copy > p { color: #685e6d; font-size: 1.05rem; line-height: 1.75; }
.service-deliverables { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.service-deliverables li { min-height: 86px; padding: 1.1rem 0; display: grid; grid-template-columns: 48px 1fr; align-items: center; border-bottom: 1px solid var(--line); font-size: clamp(1.1rem,1.8vw,1.55rem); font-weight: 650; }
.service-deliverables span { color: var(--service-accent); font-size: .63rem; font-weight: 900; }
.service-method { color: white; background: var(--ink); }
.service-method-head { max-width: var(--max); margin: 0 auto 5rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: end; }
.service-method-head > p { color: rgba(255,255,255,.62); line-height: 1.7; }
.service-steps { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.22); }
.service-steps article { min-height: 310px; padding: 1.6rem; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.22); }
.service-steps article:last-child { border-right: 0; }
.service-steps span { color: var(--service-accent); font-size: .63rem; font-weight: 900; }
.service-steps h3 { margin: auto 0 .8rem; font-size: clamp(1.8rem,3vw,3.1rem); letter-spacing: -.045em; }
.service-steps p { margin: 0; color: rgba(255,255,255,.58); line-height: 1.6; }
.service-fit { background: var(--service-accent); }
.service-fit em { color: var(--ink); }
.service-fit-grid { max-width: var(--max); margin: 4rem auto 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(18,5,31,.3); }
.service-fit-grid article { min-height: 240px; padding: 1.6rem; border-right: 1px solid rgba(18,5,31,.3); }
.service-fit-grid article:last-child { border-right: 0; }
.service-fit-grid span { font-size: .63rem; font-weight: 900; }
.service-fit-grid h3 { margin: 4rem 0 .8rem; font-size: clamp(1.6rem,2.7vw,2.8rem); letter-spacing: -.045em; }
.service-fit-grid p { line-height: 1.6; opacity: .7; }
.service-detail-cta { min-height: 620px; display: grid; place-items: center; text-align: center; color: white; background: var(--purple); }
.service-detail-cta h2 { max-width: 1050px; margin: 1rem auto 2rem; font-size: clamp(3.5rem,7vw,7.5rem); line-height: .88; letter-spacing: -.07em; }
.service-detail-cta .button { background: var(--orange); border-color: var(--orange); }
.service-branding { --service-accent: #ff6a00; }.service-logo { --service-accent: #ff9f43; }.service-graphic { --service-accent: #ff5f7e; }.service-cro { --service-accent: #72d6b9; }.service-web { --service-accent: #8b62ff; }.service-seo { --service-accent: #ffb72c; }.service-paid { --service-accent: #ff7852; }
.service-video { --service-accent: #ff714b; }.service-content { --service-accent: #ffb72c; }.service-ai-search { --service-accent: #68d6ff; }.service-performance { --service-accent: #ff895c; }.service-commerce { --service-accent: #7f5cff; }.service-ux { --service-accent: #9a75ff; }.service-automation { --service-accent: #4f9dff; }
@media(max-width:900px){.service-overview-grid,.service-method-head{grid-template-columns:1fr}.service-steps{grid-template-columns:1fr 1fr}.service-steps article:nth-child(2){border-right:0}.service-steps article{border-bottom:1px solid rgba(255,255,255,.22)}.service-detail-lead{width:min(100%,650px);margin-left:0}.service-fit-grid{grid-template-columns:1fr}.service-fit-grid article{min-height:190px;border-right:0;border-bottom:1px solid rgba(18,5,31,.3)}}
@media(max-width:600px){.service-detail-hero{min-height:740px;padding-top:calc(var(--announcement-h) + 6.8rem)}.service-detail-hero h1{font-size:clamp(3.5rem,17vw,5.2rem)}.service-steps{grid-template-columns:1fr}.service-steps article{min-height:230px;border-right:0}.service-overview h2,.service-method h2,.service-fit h2{font-size:clamp(2.8rem,13vw,4.2rem)}.service-detail-cta{min-height:560px}}