/* Services-only polish; preserve headline scales, columns, surfaces and buttons. */
body[data-page=services] #main .services-intro{padding-block:calc(var(--services-space) * .7)}
body[data-page=services] #main .services-intro h1{margin-bottom:20px}
body[data-page=services] #main .service-row{padding-block:clamp(31px,3vw,43px)}
body[data-page=services] #main .service-row>div>p{font-size:calc(var(--type-body) * .95)!important;line-height:1.75;margin-bottom:15px}
body[data-page=services] #main .service-row .rendering-scope-note{font-size:14px!important;line-height:1.65;margin:0;padding:0 0 20px;color:var(--color-espresso-brand);max-width:54ch}
body[data-page=services] #main .team-note{padding-block:26px}
body[data-page=services] #main .team-note h3{font-size:26px!important;margin-bottom:14px}
body[data-page=services] #main .team-note p:last-child{max-width:72ch}
body[data-page=services] #main .level-service>.two-col{margin-top:28px}
body[data-page=services] #main .level-service .ordering-details{margin-block:20px 16px}
@media(max-width:850px){body[data-page=services] #main .service-row{padding-block:31px}}

/* Compact Services hero, scoped independently from service content. */
body[data-page=services] #main .services-intro{padding-block:40px;min-height:0;align-items:center}
body[data-page=services] #main .services-intro .eyebrow{margin-bottom:18px}
body[data-page=services] #main .services-intro h1{font-size:clamp(36px,3.47vw,49.84px)!important;line-height:1.12!important;font-weight:400;margin:0;text-wrap:balance}
body[data-page=services] #main .services-intro-photo{width:100%;max-width:none;margin:0;justify-self:stretch}
body[data-page=services] #main .services-intro-photo img{display:block;width:100%;height:270px;aspect-ratio:auto;object-fit:cover;object-position:50% 50%}
@media(min-width:851px){
 body[data-page=services] #main .services-intro{grid-template-columns:minmax(0,56fr) minmax(0,44fr);column-gap:5%}
}
@media(min-width:851px) and (max-width:1100px){
 body[data-page=services] #main .services-intro{padding-block:32px}
 body[data-page=services] #main .services-intro-photo img{height:250px}
}
@media(max-width:850px){
 body[data-page=services] #main .services-intro{padding-block:30px;row-gap:26px}
 body[data-page=services] #main .services-intro h1{font-size:clamp(32px,5vw,40px)!important}
 body[data-page=services] #main .services-intro .eyebrow{margin-bottom:16px}
 body[data-page=services] #main .services-intro-photo{max-width:none}
 body[data-page=services] #main .services-intro-photo img{height:auto;aspect-ratio:1.8;max-height:270px}
}

/* Slightly more restrained service title scale. */
body[data-page=services] #main .service-row h2{font-size:calc(var(--type-h2) * .893)!important}

/* Bring the hero photograph closer to the heading. */
@media(min-width:851px){
 body[data-page=services] #main .services-intro{grid-template-columns:minmax(0,52fr) minmax(0,48fr);column-gap:3%}
}

/* Share the hero photograph's right boundary without shifting text starts. */
body[data-page=services] #main .service-row>div:last-child{width:100%;max-width:none;min-width:0}
body[data-page=services] #main .service-row>div:last-child>p{max-width:65ch}
body[data-page=services] #main .service-row .deliverables{width:100%;max-width:none}
body[data-page=services] #main .service-row .deliverables summary::after{right:0}

/* Small desktop adjustment to the hero photograph position. */
@media(min-width:851px){
 body[data-page=services] #main .services-intro-photo{position:relative;left:-12px}
}

/* Final vertical rhythm; retain image dimensions and column starting positions. */
body[data-page=services] #main .services-intro{padding-block:24px}
body[data-page=services] #main .service-row{padding-block:clamp(28.5px,2.76vw,39.56px)}
body[data-page=services] #main .service-row>div:last-child>p{max-width:70ch}
@media(min-width:851px){
 body[data-page=services] #main .service-row>div:last-child{width:calc(100% - 12px)}
}
@media(min-width:851px) and (max-width:1100px){
 body[data-page=services] #main .services-intro{padding-block:17px}
}
@media(max-width:850px){
 body[data-page=services] #main .services-intro{padding-block:27px}
 body[data-page=services] #main .service-row{padding-block:28.5px}
}

/* Five percent reduction to the Services hero headline only. */
body[data-page=services] #main .services-intro h1{font-size:clamp(32.49px,3.131675vw,44.9806px)!important}
@media(max-width:850px){
 body[data-page=services] #main .services-intro h1{font-size:clamp(28.88px,4.5125vw,36.1px)!important}
}

/* Five percent reduction to the Services hero label only. */
body[data-page=services] #main .services-intro .eyebrow{font-size:calc(var(--type-label) * .95)!important}

/* Uniform scale for every service heading, including custom line-break titles. */
body[data-page=services] #main .service-row>div:first-child h2,
body[data-page=services] #main .service-row>div:first-child h2.kitchen-service-title,
body[data-page=services] #main .service-row>div:first-child h2.whole-home-title{font-size:calc(var(--type-h2) * .857375)!important}

/* Supporting collaboration note and balanced service options. */
body[data-page=services] #main .team-note{padding-block:20px}
body[data-page=services] #main .team-note>*{margin-left:0;margin-right:0}
body[data-page=services] #main .team-note .eyebrow{margin-bottom:14px}
body[data-page=services] #main .team-note h3{font-size:24px!important;margin-bottom:14px}
body[data-page=services] #main .team-note p:last-child{max-width:72ch;margin-bottom:0}
body[data-page=services] #main .level-service{padding-block:clamp(40px,4vw,58px)}
body[data-page=services] #main .level-service h2{margin-bottom:18px}
body[data-page=services] #main .level-service>.two-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:24px;align-items:start}
body[data-page=services] #main .level-service .two-col>div{padding:22px 32px 0 0}
body[data-page=services] #main .level-service .two-col>div+div{padding:22px 0 0 32px}
body[data-page=services] #main .level-service .two-col h3{margin-top:0;margin-bottom:16px}
body[data-page=services] #main .level-service .two-col p{margin-bottom:0}
body[data-page=services] #main .level-service>.ordering-details{width:100%;margin:26px 0 16px}
body[data-page=services] #main .level-service>.ordering-note{font-size:15px!important;line-height:1.7;max-width:75ch;margin:0}
@media(max-width:850px){
 body[data-page=services] #main .level-service>.two-col{grid-template-columns:1fr;gap:24px}
 body[data-page=services] #main .level-service .two-col>div,
 body[data-page=services] #main .level-service .two-col>div+div{padding:20px 0 0;border-left:0}
}

/* Discreet collaboration note following the complete service comparison. */
body[data-page=services] #main .team-note{background:var(--color-ivory);border-top:1px solid var(--line);padding-block:44px}
body[data-page=services] #main .team-note h3{font-size:18px!important;line-height:1.35;margin:0 0 14px}
body[data-page=services] #main .team-note p:last-child{font-size:16px!important;line-height:1.75;max-width:780px;margin:0}
@media(max-width:850px){
 body[data-page=services] #main .team-note{padding-block:32px}
}

/* Restrained tonal transitions at the end of the Services content. */
body[data-page=services] #main .level-service{background:#E2D9CE;padding-block:60px;border-top:0}
body[data-page=services] #main .team-note{background:#F5F1EA;padding-block:44px;border-top:0}
@media(max-width:850px){
 body[data-page=services] #main .level-service{padding-block:38px}
 body[data-page=services] #main .team-note{padding-block:32px}
}

/* Ordering details belong beneath the Design + Ordering option. */
body[data-page=services] #main .level-service .two-col .ordering-details{width:100%;margin:24px 0 0}
body[data-page=services] #main .level-service>.ordering-note{margin-top:18px}

/* Match the closing heading to the inquiry button's army green. */
body[data-page=services] #main .cta h2{color:#4B5335}

/* Five percent less vertical padding in the Services CTA band. */
body[data-page=services] #main .cta{padding-block:25.65px;min-height:103.3px}
@media(max-width:850px){body[data-page=services] #main .cta{padding-block:27.36px;min-height:0}}

/* Slightly smaller Level of Service introductory sentence. */
body[data-page=services] #main .level-service>p:not(.eyebrow):not(.ordering-note){font-size:calc(var(--type-body) * .95)!important}

/* Shared size for the service introduction and collaboration note. */
body[data-page=services] #main .level-service>p:not(.eyebrow):not(.ordering-note),
body[data-page=services] #main .team-note h3,
body[data-page=services] #main .team-note p:last-child{font-size:15px!important}

/* Give the collaboration heading stronger emphasis at its existing size. */
body[data-page=services] #main .team-note h3{font-weight:600!important}

/* Services hero follows the established Process hero composition. */
body[data-page=services] #main .services-intro{padding-block:clamp(36px,4vw,56px);background-color:var(--color-stone-light);background-image:url('/assets/hmk-paper-grain.svg');background-repeat:repeat;align-items:center}
body[data-page=services] #main .services-intro .eyebrow{margin-bottom:20px}
body[data-page=services] #main .services-intro-photo{left:auto;min-width:0;max-width:none;margin:0}
@media(min-width:851px){
 body[data-page=services] #main .services-intro{grid-template-columns:48px minmax(0,.9fr) minmax(0,1.5fr);column-gap:4%;row-gap:0}
 body[data-page=services] #main .services-intro>div{grid-column:1/3;grid-row:1;min-width:0}
 body[data-page=services] #main .services-intro-photo{grid-column:3;grid-row:1;align-self:center;justify-self:stretch;width:100%;height:240px;position:relative}
 body[data-page=services] #main .services-intro-photo img{position:absolute;inset:0;top:-5.125%;bottom:auto;width:100%;height:110.25%;aspect-ratio:auto;object-fit:cover;object-position:center}
}
@media(max-width:850px){
 body[data-page=services] #main .services-intro{grid-template-columns:1fr;gap:32px}
 body[data-page=services] #main .services-intro-photo img{position:static;display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:cover}
}

/* Match the service-level label to the option heading scale. */
body[data-page=services] #main .level-service>.eyebrow{font-size:var(--type-h3)!important}
body[data-page=services] #main .level-service>.eyebrow::before{display:none}

/* Refined lower Services hierarchy, scoped away from all other content. */
body[data-page=services] #main .level-service{padding-block:50px}
body[data-page=services] #main .level-intro{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);column-gap:5%;align-items:start}
body[data-page=services] #main .level-intro h2{font-size:calc(var(--type-h2) * .893)!important;line-height:1.16;margin:0;font-weight:400}
body[data-page=services] #main .level-intro p{font-size:15px!important;line-height:1.7;margin:0;max-width:70ch}
body[data-page=services] #main .level-service .two-col{margin-top:28px}
body[data-page=services] #main .level-service .two-col .ordering-note{font-size:14px!important;line-height:1.7;max-width:54ch;margin:16px 0 0}
body[data-page=services] #main .team-note{padding-block:36px}
body[data-page=services] #main .team-note h3{font-size:15px!important;font-weight:400!important;margin-bottom:12px}
body[data-page=services] #main .team-note p:last-child{font-size:14px!important;max-width:800px}
body[data-page=services] #main .cta h2{color:var(--color-espresso-brand)}
@media(max-width:850px){
 body[data-page=services] #main .level-service{padding-block:32px}
 body[data-page=services] #main .level-intro{grid-template-columns:1fr;gap:18px}
 body[data-page=services] #main .team-note{padding-block:27px}
}
body[data-page=services] #main .level-service .two-col>div,
body[data-page=services] #main .level-service .ordering-details{border-color:color-mix(in srgb,var(--color-brass) 45%,transparent)}

/* Cohesive, stacked Level of Service introduction. */
body[data-page=services] #main .level-intro{grid-template-columns:minmax(0,1fr);gap:18px}
body[data-page=services] #main .level-intro p{max-width:700px}

/* Slightly tighter closing space in Level of Service. */
body[data-page=services] #main .level-service{padding-bottom:44px}
@media(max-width:850px){body[data-page=services] #main .level-service{padding-bottom:28.16px}}

/* Five percent smaller service option headings. */
body[data-page=services] #main .level-service .two-col h3{font-size:calc(var(--type-h3) * .95)!important}

/* Minimal Services introduction using the Process page title scale. */
body[data-page=services] #main .services-intro h1{font-size:calc(var(--type-page-h1) * .95)!important;line-height:1.12!important;margin:0 0 22px;text-wrap:pretty}
body[data-page=services] #main .services-intro .page-intro{font-size:var(--type-body)!important;line-height:1.7;max-width:40ch;margin:0}

/* Fifteen percent tighter title-section padding; site header stays unchanged. */
body[data-page=services] #main .services-intro{padding-block:clamp(30.6px,3.4vw,47.6px)}