/* Service pages reuse the site's typography, colours and editorial components. */
.service-detail-page :where(a):focus-visible{outline-width:2px;outline-style:solid;outline-offset:5px}
.sd-hero{padding:40px var(--pad-x) 64px}
.sd-hero .crumb{margin-bottom:32px}
.sd-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.sd-hero h1{font:400 clamp(2.5rem,calc(4.4vw * var(--text-scale,1)),4.5rem)/1.05 var(--serif);letter-spacing:-.02em;margin:20px 0 24px;max-width:17ch}
.sd-hero h1 em{font-weight:400}
.sd-lede{font-size:1.125rem;line-height:1.8;color:var(--body-ink);max-width:48ch;margin-bottom:28px}
.sd-intro-aside{border-left:1px solid var(--hairline);padding-left:40px}
.sd-intro-aside p{font-size:1.0625rem;line-height:1.8;max-width:42ch;color:var(--body-ink);margin-bottom:24px}
.sd-page-nav{position:sticky;top:77px;z-index:10;background:var(--light);border-block:1px solid var(--hairline);padding-inline:var(--pad-x)}
.sd-page-nav>.container{display:flex;gap:32px;align-items:center;overflow-x:auto;scrollbar-width:thin}
.sd-page-nav a{display:inline-flex;align-items:center;white-space:nowrap;gap:12px;min-height:64px;border-bottom:2px solid transparent;font-size:.8125rem;color:var(--grey);text-decoration:none}
.sd-page-nav a:last-child{margin-left:auto;color:var(--link)}
.sd-page-nav a[aria-current]{color:var(--link);border-color:var(--link)}
.sd-section{padding:80px var(--pad-x);scroll-margin-top:164px}
.sd-split{display:grid;grid-template-columns:1fr 1.5fr;gap:96px}
.sd-section h2{font:400 clamp(2rem,calc(3vw * var(--text-scale,1)),3rem)/1.12 var(--serif);margin:16px 0 24px;max-width:22ch}
.sd-section header>p{font-size:1rem;line-height:1.8;color:var(--body-ink);max-width:40ch}
.sd-prose p{font-size:1.0625rem;line-height:1.85;color:var(--body-ink);margin-bottom:24px;max-width:65ch}
.sd-prose h3{font:400 1.625rem/1.2 var(--serif);margin:28px 0 16px}
.sd-tint{background:var(--code-bg)}
.sd-scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px;align-content:start}
.sd-scope dt{font:500 1rem/1.5 var(--sans);margin-bottom:12px;color:var(--ink)}
.sd-scope dd{font-size:1rem;line-height:1.8;color:var(--body-ink);margin:0}
.sd-section-heading{max-width:760px;margin-bottom:40px}
.sd-section-heading>p{max-width:60ch!important}
.sd-phases{list-style:none;margin:0;padding:0}
.sd-phases>li{display:grid;grid-template-columns:64px 1.4fr 1fr;gap:36px;padding:32px 0;border-top:1px solid var(--hairline);position:relative}
.sd-phase-number{font:400 1.5rem/1.4 var(--mono);color:var(--link)}
.sd-phases h3{font:400 1.75rem/1.2 var(--serif);margin-bottom:16px}
.sd-phases p{font-size:1rem;line-height:1.85;color:var(--body-ink);max-width:62ch}
.sd-phase-output{border-left:1px solid var(--hairline);padding-left:32px}
.sd-phase-output .eyebrow{font-size:.625rem;letter-spacing:.08em;display:block;margin-bottom:16px}
.sd-phase-output p{color:var(--link);max-width:32ch}
.sd-outcome-band{border-block:1px solid var(--link)}
.sd-outcome-band .sd-section-heading{margin-bottom:32px}
.sd-outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;margin:0;padding:0}
.sd-outcomes li{font:400 1.75rem/1.25 var(--serif);color:var(--link);padding-left:24px;border-left:1px solid var(--hairline)}
.sd-boundary{font-size:.875rem;line-height:1.8;color:var(--grey);margin-top:32px;max-width:80ch}
.sd-example>div{border-top:1px solid var(--hairline);padding:24px 0}
.sd-example>div:first-child{border-color:var(--link)}
.sd-example h3{font:400 1.625rem/1.2 var(--serif);margin-bottom:12px}
.sd-example p{font-size:1rem;line-height:1.8;color:var(--body-ink)}
.sd-note{font-size:.8125rem!important;color:var(--grey)!important;margin-top:24px}
.sd-related{padding:48px var(--pad-x)}
.sd-related .container>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:16px}
.sd-related a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;text-decoration:none;color:var(--link);border-bottom:1px solid var(--hairline);font-size:.9375rem;line-height:1.6}
/* Explanatory diagrams are HTML so their labels reflow and remain accessible. */
.sd-diagram{border-radius:var(--radius-panel);margin:0;background:var(--code-bg);padding:32px}
.sd-diagram figcaption{font:.6875rem/1.8 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-bottom:28px}
.sd-diagram ol{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.sd-diagram li{border-radius:var(--radius-control);position:relative;padding:16px;border:1px solid var(--hairline);background:var(--light);text-align:center}
.sd-diagram strong{display:block;font:500 .9375rem/1.5 var(--sans);color:var(--ink)}
.sd-diagram li span{display:block;font:.75rem/1.7 var(--sans);margin-top:6px;color:var(--grey)}
.sd-diagram li:first-child{border-top:2px solid var(--link)}
.sd-diagram li+li::before{content:'';height:24px;width:1px;background:var(--hairline);position:absolute;bottom:100%;left:50%}
.sd-diagram--leadership ol{grid-template-columns:repeat(3,minmax(0,1fr))}
.sd-diagram--leadership li:nth-child(-n+2){grid-column:1/-1}
.sd-diagram--leadership li:nth-child(n+3){padding:16px 8px}
.sd-diagram--options ol{grid-template-columns:repeat(3,minmax(0,1fr))}
.sd-diagram--options li:first-child{grid-column:1/-1}
.sd-diagram--options li:not(:first-child){padding:16px 8px}
.sd-diagram--deal ol{gap:32px;counter-reset:deal}
.sd-diagram--deal li{text-align:left;padding-left:60px;counter-increment:deal}
.sd-diagram--deal li:after{content:'0' counter(deal);position:absolute;left:20px;top:19px;font:.75rem var(--mono);color:var(--link)}
.sd-diagram--deal li+li:before{height:32px;left:28px}
.sd-diagram--cycle ol{grid-template-columns:1fr 1fr;gap:24px}
.sd-diagram--cycle li::before{display:none}
.sd-diagram--cycle li:nth-child(4){grid-column:1;grid-row:2}
.sd-diagram--cycle li:nth-child(2)::after{content:'→';position:absolute;right:100%;width:24px;top:32px;color:var(--link)}
.sd-diagram--cycle li:nth-child(3)::after{content:'↓';position:absolute;bottom:100%;height:24px;left:50%;color:var(--link)}
.sd-diagram--cycle li:nth-child(4)::after{content:'←';position:absolute;left:100%;width:24px;top:32px;color:var(--link)}
.sd-diagram--cycle li:first-child::after{content:'↑';position:absolute;top:100%;height:24px;left:50%;color:var(--link)}
.sd-diagram--funnel li:nth-child(2){margin-inline:16px}
.sd-diagram--funnel li:nth-child(3){margin-inline:32px}
.sd-diagram--funnel li:nth-child(4){margin-inline:48px}
.sd-diagram--connected ol{grid-template-columns:1fr 1fr}
.sd-diagram--connected li:first-child,.sd-diagram--connected li:last-child{grid-column:1/-1}
.sd-directory{padding:0 var(--pad-x) 64px;scroll-margin-top:110px}
.sd-directory-group{display:grid;grid-template-columns:1fr 2fr;gap:72px;border-top:1px solid var(--hairline);padding-block:32px 40px}
.sd-directory-group:first-child{border-color:var(--link)}
.sd-directory-group>h2{font:400 2rem/1.15 var(--serif);max-width:15ch}
.sd-service-link{display:grid;grid-template-columns:1fr auto;gap:12px 32px;padding-block:28px;border-bottom:1px solid var(--hairline);text-decoration:none;scroll-margin-top:112px}
.sd-service-link:first-child{padding-top:0}
.sd-service-link h3{font:400 1.875rem/1.2 var(--serif);color:var(--ink)}
.sd-service-link p{grid-column:1;max-width:55ch;font-size:1rem;line-height:1.8;color:var(--body-ink)}
.sd-read{grid-row:1/3;grid-column:2;align-self:center;display:flex;gap:12px;color:var(--link);font-size:.75rem}
.sd-engagement-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:0}
.sd-engagement-flow li{border-top:1px solid var(--hairline);padding-top:20px}
.sd-engagement-flow li>span{font:.75rem var(--mono);color:var(--link)}
.sd-engagement-flow h3{font:400 1.625rem/1.2 var(--serif);margin:20px 0 16px}
.sd-engagement-flow p{font-size:1rem;line-height:1.8;color:var(--body-ink)}
.sd-engagement-terms>div{display:grid;grid-template-columns:110px 1fr;gap:24px;border-top:1px solid var(--hairline);padding:24px 0}
.sd-engagement-terms dt{font:400 1.75rem/1.2 var(--serif)}
.sd-engagement-terms dd{font-size:1rem;line-height:1.8;color:var(--body-ink)}
@media(hover:hover){.sd-service-link:hover h3,.sd-page-nav a:hover{color:var(--link)}.sd-service-link:hover{border-color:var(--link)}.sd-related a:hover{border-color:var(--link)}}
@media(max-width:1100px){.sd-hero-grid{gap:40px}.sd-split{gap:48px}.sd-diagram{padding:24px}.sd-directory-group{gap:40px}.sd-read{font-size:0;gap:0}.sd-read>span{font-size:1.25rem}}
@media(max-width:980px){
 .sd-page-nav{top:0}
 .sd-page-nav>.container{gap:24px}
 .sd-page-nav a{min-height:52px}
 .sd-section{scroll-margin-top:76px;padding-block:56px}
 .sd-hero{padding-block:24px 48px}
 .sd-hero-grid{grid-template-columns:1fr;gap:32px}
 .sd-hero h1{max-width:24ch;font-size:3rem}
 .sd-hero .crumb{margin-bottom:24px}
 .sd-diagram{max-width:600px;width:100%}
 .sd-intro-aside{padding-left:0;border-left:0;border-top:1px solid var(--hairline);padding-top:24px}
 .sd-intro-aside p{max-width:60ch}
 .sd-split{grid-template-columns:1fr;gap:24px}
 .sd-section header>p{max-width:60ch}
 .sd-section h2{max-width:28ch}
 .sd-phases>li{grid-template-columns:48px 1fr;gap:24px}
 .sd-phase-output{grid-column:2;padding-left:0;border-left:0}
 .sd-phase-output .eyebrow{margin-bottom:8px}
 .sd-phase-output p{max-width:55ch}
 .sd-directory-group{grid-template-columns:1fr;gap:28px}
 .sd-directory-group>h2{max-width:none}
 .sd-engagement-flow{grid-template-columns:1fr 1fr}
 .sd-directory,.sd-service-link{scroll-margin-top:24px}
}
@media(max-width:600px){
 .sd-hero h1{font-size:2.5rem}
 .sd-lede{font-size:1rem}
 .sd-page-nav>.container{gap:24px}
 .sd-page-nav a{font-size:.75rem}
 .sd-page-nav a:last-child{margin-left:0}
 .sd-diagram{padding:20px}
 .sd-diagram figcaption{font-size:.625rem}
 .sd-diagram strong{font-size:.8125rem}
 .sd-diagram li span{font-size:.6875rem}
 .sd-diagram ol{gap:20px}
 .sd-diagram li+li::before{height:20px}
 .sd-diagram--deal li+li::before{height:32px}
 .sd-diagram--cycle ol{gap:24px}
 .sd-diagram--funnel li:nth-child(2){margin-inline:8px}
 .sd-diagram--funnel li:nth-child(3){margin-inline:16px}
 .sd-diagram--funnel li:nth-child(4){margin-inline:24px}
 .sd-diagram--leadership ol,.sd-diagram--options ol{grid-template-columns:1fr}
 .sd-scope{grid-template-columns:1fr;gap:28px}
 .sd-phases>li{grid-template-columns:28px 1fr;gap:16px;padding-block:28px}
 .sd-phase-number{font-size:1rem}
 .sd-phases h3{font-size:1.625rem}
 .sd-outcomes{grid-template-columns:1fr;gap:24px}
 .sd-outcomes li{font-size:1.625rem}
 .sd-related .container>div{grid-template-columns:1fr;gap:8px}
 .sd-service-link{gap:12px 20px}
 .sd-service-link h3{font-size:1.75rem}
 .sd-engagement-flow{grid-template-columns:1fr}
 .sd-engagement-flow li{padding-left:40px;position:relative}
 .sd-engagement-flow li>span{position:absolute;left:0;top:26px}
 .sd-engagement-flow h3{margin-top:0}
 .sd-engagement-terms>div{grid-template-columns:1fr;gap:12px}
}
html:not([data-text-size="100"])[data-text-size] :is(.sd-hero-grid,.sd-split,.sd-scope,.sd-outcomes,.sd-directory-group,.sd-engagement-flow,.sd-related .container>div){grid-template-columns:1fr}
html:not([data-text-size="100"])[data-text-size] .sd-page-nav{position:static}
html:not([data-text-size="100"])[data-text-size] .sd-diagram{max-width:none}
@media(prefers-reduced-motion:reduce){.service-detail-page{scroll-behavior:auto}}

.service-detail-page .link-mono{gap:12px}
.sd-directory-group{scroll-margin-top:112px}
@media(max-width:600px){
 .sd-diagram--options li:not(:first-child),.sd-diagram--leadership li:nth-child(n+3){border-left:2px solid var(--link)}
 .sd-diagram--options li:not(:first-child)::before,.sd-diagram--leadership li:nth-child(n+3)::before{display:none}
}

/* Keep intrinsic label widths from expanding grids at larger reading sizes. */
.sd-hero-grid>*,.sd-split>*,.sd-phases>li>*,.sd-diagram li{min-width:0}
.sd-diagram li{overflow-wrap:anywhere}
html:not([data-text-size="100"])[data-text-size] :is(.sd-hero-grid,.sd-split,.sd-scope,.sd-outcomes,.sd-directory-group,.sd-engagement-flow,.sd-related .container>div){grid-template-columns:minmax(0,1fr)}
html:not([data-text-size="100"])[data-text-size] .sd-diagram ol{grid-template-columns:minmax(0,1fr)}
html:not([data-text-size="100"])[data-text-size] .sd-diagram li{grid-column:auto;grid-row:auto;margin-inline:0}
html:not([data-text-size="100"])[data-text-size] .sd-diagram--cycle li::after{display:none}
html:not([data-text-size="100"])[data-text-size] .sd-page-nav>.container{flex-wrap:wrap;gap:0 24px;overflow:visible}
html:not([data-text-size="100"])[data-text-size] .sd-page-nav a{white-space:normal}
