.services-page { background: var(--bone); color: var(--ink); }
.services-hero { padding-bottom: clamp(42px, 6vw, 84px); }
.services-hero .heading { max-width: 760px; }
.services-intro { max-width: 620px; margin: 24px 0 0; font: 400 clamp(19px, 1.65vw, 24px)/1.45 var(--sans); letter-spacing: -.03em; }
.services-wide { max-width: 1180px; }
.services-jump { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--color-ink-15); border-bottom: 1px solid var(--color-ink-15); }
.services-jump a { padding: 13px 18px; border-right: 1px solid var(--color-ink-15); font: 400 12px/1 var(--mono); text-transform: uppercase; }
.services-jump a:hover { background: var(--ink); color: var(--color-white); }
.services-list { display: grid; gap: clamp(18px, 2.2vw, 30px); padding: clamp(38px, 5vw, 74px) max(24px, calc((100vw - 1180px) / 2)); }
.service-detail { padding: 0; border: 0; background: transparent; color: var(--ink); }
.service-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "visual copy"; gap: 0; max-width: 1180px; margin: auto; padding: 0; min-height: 390px; background: var(--color-white); }
.service-detail:nth-child(even) .service-detail__grid { grid-template-areas: "copy visual"; }
.service-detail__meta { container-type: inline-size; grid-area: visual; position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 100%; padding: clamp(28px, 3vw, 40px); background: var(--ink); color: var(--color-white); overflow: hidden; }
.service-detail__meta::after { content: ''; position: absolute; top: calc(50% - 30px); left: 50%; width: min(80cqw, 360px); aspect-ratio: 1; transform: translate(-50%, -50%); background: center / contain no-repeat url('/assets/localpixel/generated/service-symbols/strategy-pixel.svg'); filter: brightness(0) invert(1); pointer-events: none; }
.service-detail__meta > * { position: relative; z-index: 1; }
.service-detail__number { margin: 0; font: 400 12px/1 var(--mono); color: var(--orchid); }
.service-detail__visual-caption { position: absolute; top: calc(50% - 30px + min(40cqw, 180px) + 24px); left: 50%; width: min(80%, 250px); margin: 0; transform: translateX(-50%); font: 400 18px/1.2 var(--sans); letter-spacing: -.025em; text-align: center; }
.service-detail__main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(30px, 3vw, 40px); }
.service-detail__main { grid-area: copy; min-width: 0; overflow-wrap: anywhere; }
.service-detail__main .section-label { --label-background: var(--color-surface-soft); --label-color: var(--ink); --label-marker: var(--color-ink); }
.service-detail h2 { max-width: 510px; margin: 16px 0 14px; font: 400 var(--type-section)/1.06 var(--sans); letter-spacing: -.045em; }
.service-detail__intro { max-width: 500px; margin: 0; font: 400 18px/1.48 var(--sans); }
.service-detail__deliverables { width: 100%; max-width: 540px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--color-ink-15); }
.service-detail__deliverables-label { margin: 0 0 12px; }
.service-detail__deliverables ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.service-detail__deliverables li { display: flex; gap: 10px; align-items: flex-start; font: 400 18px/1.42 var(--sans); }
.service-detail__deliverables svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; }
.service-detail__primary { margin: 27px 0 16px; }
.service-detail__links { margin: 0; }
.service-detail__links > a:not(.lp-action) { font: 400 12px/1.4 var(--mono); text-decoration: underline; text-underline-offset: 5px; }
.service-detail__links > .lp-action[data-lp-variant="tertiary"] { margin: 0; }
.service-detail#automation .service-detail__meta { background: var(--color-white); color: var(--ink); }
.service-detail#automation .service-detail__number, .service-detail#ai-enabled-systems .service-detail__number, .service-detail#micro-app-development .service-detail__number { color: var(--ink); }
.service-detail#automation .service-detail__meta::after { background-image: url('/assets/localpixel/generated/service-symbols/automation-pixel.svg'); filter: none; }
.service-detail#micro-app-development .service-detail__meta { background: var(--orchid); color: var(--ink); }
.service-detail#micro-app-development .service-detail__meta::after { background-image: url('/assets/localpixel/generated/service-symbols/improve-pixel.svg'); filter: none; }
.service-detail#websites-landing-pages .service-detail__meta { background: var(--ink); }
.service-detail#websites-landing-pages .service-detail__meta::after { background-image: url('/assets/localpixel/generated/service-symbols/build-light-pixel.svg'); }
.service-detail#ai-enabled-systems .service-detail__meta { background: var(--color-white); color: var(--ink); }
.service-detail#ai-enabled-systems .service-detail__meta::after { background-image: url('/assets/localpixel/generated/service-symbols/ai-systems-pixel.svg'); filter: none; }
.services-process, .services-resources, .services-faq { padding: var(--space-section) 0; }
.services-process { background: var(--color-white); }
.services-process__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .74fr); gap: clamp(28px, 6vw, 80px); align-items: end; margin-bottom: 42px; }
.services-process__intro h2 { margin-bottom: 0; }
.services-process__photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.services-process__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.services-process h2, .services-resources h2, .services-faq h2 { max-width: 720px; margin: 14px 0 42px; font: 400 var(--type-display)/1.08 var(--sans); letter-spacing: -.04em; }
.services-process ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.services-process li { padding-top: 18px; border-top: 1px solid var(--ink); counter-increment: step; }
.services-process li::before { content: '0' counter(step); display: block; margin-bottom: 34px; font: 400 11px var(--mono); }.services-process strong { display:block; margin-bottom:8px; font:400 24px/1.08 var(--sans); letter-spacing:-.04em; }.services-process span {font:400 15px/1.48 var(--sans);}
.services-resources { background: var(--ink); color: var(--color-white); }.services-resources__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-white-27); border:1px solid var(--color-white-27); }.services-resources__grid a { min-height:190px; padding:24px; background:var(--ink); }.services-resources__grid a:hover { background:var(--orchid); color:var(--ink); }.services-resources__grid span {display:block; margin-bottom:44px; font:400 11px var(--mono); text-transform:uppercase;}.services-resources__grid strong {display:block; font:400 25px/1 var(--sans); letter-spacing:-.04em;}
.services-faq { background:var(--bone); }.services-faq details {max-width:790px;padding:22px 0;border-bottom:1px solid var(--color-ink-15);}.services-faq summary {cursor:pointer;font:400 clamp(21px,2.5vw,30px)/1.1 var(--sans);letter-spacing:-.04em;}.services-faq details p {max-width:650px;margin:16px 0 0;font:400 17px/1.5 var(--sans);}
@media (max-width:900px) { .services-hero{padding-top:150px}.services-jump{width:auto;margin-inline:24px;padding-inline:0;overflow-x:auto;flex-wrap:nowrap}.services-jump a{white-space:nowrap}.services-list{padding:24px;gap:18px}.service-detail__grid,.service-detail:nth-child(even) .service-detail__grid,.services-process__intro{grid-template-columns:1fr;grid-template-areas:"visual" "copy";min-height:0}.service-detail__meta{min-height:clamp(320px,100vw,380px);padding:28px}.service-detail__meta::after{top:calc(50% - 24px);width:min(100cqw,270px)}.service-detail__visual-caption{top:calc(50% + min(50cqw,135px));left:50%;right:auto;bottom:auto;width:min(80%,210px);transform:translateX(-50%);max-width:none;font-size:17px}.service-detail__main{padding:32px 28px}.service-detail h2{font-size:34px}.service-detail__deliverables li{font-size:17px}.services-process ol,.services-resources__grid{grid-template-columns:1fr}.services-process li{padding-bottom:28px}.services-resources__grid a{min-height:160px}.services-resources__grid span{margin-bottom:30px} }

.service-detail__links{display:flex;flex-wrap:wrap;gap:16px 28px}.service-detail__links>a:not(.lp-action){padding:10px 0}
/* Phones: the symbol panel is a compact band above the copy. */
@media (max-width: 640px) {
  html body .service-detail__meta { min-height: 0; height: 170px; }
  html body .service-detail__meta::after { width: 120px; top: 50%; left: auto; right: 24px; transform: translateY(-50%); }
}