/* Process-only editorial hierarchy. Image hero can use the same content grid. */
[data-page=process] main{background:var(--color-ivory);color:var(--color-espresso)}
[data-page=process] .page-title{padding:clamp(48px,5.5vw,80px) var(--page-gutter) clamp(36px,4vw,56px)}
[data-page=process] .page-title h1{font-size:clamp(34px,4vw,58px);font-weight:400;line-height:1.13;margin-bottom:24px}
[data-page=process] .page-intro{font-size:18px;line-height:1.7;max-width:58ch;margin-bottom:0}
[data-page=process] .process-row{display:grid;grid-template-columns:48px minmax(0,.9fr) minmax(0,1.5fr);gap:4%;padding:clamp(36px,3.8vw,54px) var(--page-gutter);border-top:1px solid var(--color-stone);align-items:start}
[data-page=process] .process-num{background:transparent;color:var(--color-brass);font:400 24px/1.3 var(--sans);padding:0}
[data-page=process] .process-row h2{font-size:clamp(27px,2.5vw,36px);font-weight:400;line-height:1.2;color:var(--color-espresso);margin:0}
[data-page=process] .process-row>div,[data-page=process] .process-row:nth-of-type(3)>div{padding:0;background:transparent;border:0;max-width:65ch;color:var(--color-espresso)}
[data-page=process] .process-row p{font-size:16px;line-height:1.75;margin:0}
[data-page=process] .cta{background:var(--color-stone);padding:clamp(36px,4vw,56px) var(--page-gutter);align-items:center;gap:40px}
[data-page=process] .cta h2{font-size:clamp(28px,3vw,42px);line-height:1.2;max-width:680px;margin:0}
[data-page=process] .cta .button{flex-shrink:0}
@media(max-width:850px){
 [data-page=process] .process-row{grid-template-columns:36px minmax(0,1fr);gap:18px 20px}
 [data-page=process] .process-row>div{grid-column:2}
 [data-page=process] .process-row h2{font-size:28px}
 [data-page=process] .cta{align-items:flex-start;gap:24px}
}
@media(min-width:851px){[data-page=process] .process-row h2{margin-top:calc(8px - .22em)}}

/* Selected editorial photograph completes the balanced process introduction. */
[data-page=process] .process-intro{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:6%;align-items:center}
.process-intro-photo{margin:0;min-width:0}
.process-intro-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}
@media(max-width:850px){[data-page=process] .process-intro{grid-template-columns:1fr;gap:32px}}

/* Align the photograph to the headline and introductory paragraph. */
@media(min-width:851px){
 [data-page=process] .process-intro{align-items:start;row-gap:0}
 [data-page=process] .process-intro>div{display:contents}
 [data-page=process] .process-intro .eyebrow{grid-column:1;grid-row:1}
 [data-page=process] .process-intro h1{grid-column:1;grid-row:2}
 [data-page=process] .process-intro .page-intro{grid-column:1;grid-row:3}
 [data-page=process] .process-intro-photo{grid-column:2;grid-row:2/4;align-self:stretch;justify-self:end;width:94%;position:relative}
 [data-page=process] .process-intro-photo img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
}

/* Slightly larger photograph, still aligned to the introductory copy. */
@media(min-width:851px){
 [data-page=process] .process-intro{grid-template-columns:minmax(0,52fr) minmax(0,48fr);column-gap:5%}
 [data-page=process] .process-intro-photo{width:100%}
}
@media(max-width:850px){.process-intro-break{display:none}}


/* Taller hero frame anchored to the headline and the final line of intro copy. */
@media(min-width:851px){
 [data-page=process] .process-intro-photo{min-height:clamp(260px,21vw,310px);align-self:stretch}
 [data-page=process] .process-intro h1{align-self:start}
 [data-page=process] .process-intro .page-intro{align-self:end}
 [data-page=process] .process-intro-photo img{object-fit:cover;object-position:center 60%}
}
@media(max-width:850px){
 [data-page=process] .process-intro-photo img{position:static;height:auto;aspect-ratio:auto;object-fit:cover}
}

/* Compact hero using the existing process description column. */
@media(min-width:851px){
 [data-page=process] .process-intro{grid-template-columns:48px minmax(0,.9fr) minmax(0,1.5fr);column-gap:4%;row-gap:0;align-items:center}
 [data-page=process] .process-intro>div{display:block;grid-column:1/3;grid-row:1;min-width:0}
 [data-page=process] .process-intro h1{margin-bottom:24px}
 [data-page=process] .process-intro .page-intro{max-width:58ch}
 [data-page=process] .process-intro-photo{grid-column:3;grid-row:1;align-self:center;justify-self:stretch;width:100%;height:240px;min-height:0;margin:0;position:relative}
 [data-page=process] .process-intro-photo img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 70%}
 [data-page=process] .process-row>div,[data-page=process] .process-row:nth-of-type(3)>div{max-width:none}
}


/* Bring desktop phase titles closer to the number column. */
@media(min-width:851px){body[data-page=process] .process-row h2{position:relative;left:-41px}}

@media(min-width:851px){body[data-page=process] .process-row .process-num{align-self:start;position:relative;top:3px}}

/* Phase titles share the hero's left margin; descriptions retain their grid column. */
@media(min-width:851px){
 body[data-page=process] .process-row h2{grid-column:1/3;position:static;left:auto}
 body[data-page=process] .process-row>div{grid-column:3}
}

/* Inline editorial numbering; existing section grid and description columns stay intact. */
body[data-page=process] .process-row .numbered-stage{display:flex;align-items:baseline;gap:18px}
body[data-page=process] .process-row .stage-number{flex:0 0 26px;font-family:var(--sans);font-size:20px;font-weight:400;line-height:1.2;color:#79523C}
body[data-page=process] .numbered-stage>span:last-child{min-width:0}
@media(max-width:850px){body[data-page=process] .process-row .numbered-stage{gap:14px}body[data-page=process] .process-row .stage-number{font-size:18px;flex-basis:24px}}

/* Five percent smaller main Process heading and five stage titles. */
body[data-page=process] #main h1{font-size:calc(var(--type-page-h1) * .95)!important}
body[data-page=process] #main .process-row h2{font-size:calc(var(--type-h2) * .95)!important}

/* Five percent smaller titles for the first four process stages. */
body[data-page=process] #main .process-row h2{font-size:calc(var(--type-h2) * .81450625)!important}

/* Grow only the image vertically without changing the hero's layout footprint. */
@media(min-width:851px){
 body[data-page=process] #main .process-intro-photo img{height:110.25%;top:-5.125%;bottom:auto}
}

/* Equal top and bottom padding around the Process hero composition. */
body[data-page=process] #main .process-intro{padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}

/* Match the refined Services hero without changing process stages. */
body[data-page=process] #main .process-intro{padding-block:clamp(30.6px,3.4vw,47.6px);background-color:var(--color-stone-light);background-image:url('/assets/hmk-paper-grain.svg');background-repeat:repeat;align-items:center}
body[data-page=process] #main .process-intro h1{font-size:calc(var(--type-page-h1) * .95)!important;line-height:1.12!important;font-weight:400!important;margin:0 0 22px;text-wrap:pretty}
body[data-page=process] #main .process-intro .page-intro{font-size:var(--type-body)!important;line-height:1.7;max-width:40ch;margin:0}
@media(max-width:850px){
 body[data-page=process] #main .process-intro{grid-template-columns:1fr;gap:32px}
 body[data-page=process] #main .process-intro-photo img{position:static;display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:cover}
}

/* Match the About hero's letter spacing. */
body[data-page=process] #main .process-intro h1{letter-spacing:.01em}

/* Subtle tonal rhythm matching the service-section backgrounds. */
body[data-page=process] #main .process-row{background:var(--color-ivory)}
body[data-page=process] #main .process-row:nth-of-type(odd){background:color-mix(in srgb,var(--color-ivory) 88%,var(--color-stone))}