/* Shared outer grid. Reading measures and internal columns remain independent. */
:root{--site-content-width:1152px;--site-gutter:clamp(24px,5vw,64px);--site-container:1280px}
html body .wrap:not(.wrap .wrap),
html body .hero-image,
html body .testimonial-section .testimonial-inner{
 box-sizing:border-box;
 width:100%;max-width:var(--site-container);
 margin-left:auto;margin-right:auto;
 padding-left:var(--site-gutter);padding-right:var(--site-gutter);
}
html body .testimonial-section{padding-left:0;padding-right:0}
/* Nested related-services content already sits inside the opening grid. */
html body .opening>.related>.wrap{width:100%;max-width:none;margin-inline:0}

/* One section-heading hierarchy; the hero and closing invitation retain their scale. */
html body :is(#services-title,#about-title,#approach-title,#testimonials-title,#work .poster-intro){
 font-family:Manrope,Arial,sans-serif;font-weight:400;
 font-size:clamp(36px,4.4vw,58px);line-height:1.16;letter-spacing:-.035em;
 margin:0;
}
html body :is(.service-introduction,.about-editorial,.values,.testimonial-head) .section-label,
html body #work .head .label{
 font-family:Inter,Arial,sans-serif;font-weight:400;font-size:11px;line-height:1.65;
 letter-spacing:.14em;text-transform:uppercase;margin:0 0 24px;
}
@media(min-width:761px){
 html body .service-introduction{row-gap:24px}
 html body .service-introduction .section-label{margin:0}
}

/* Group each label with its heading; separate the heading from card content. */
html body :is(.service-introduction,.about-editorial,.values,.testimonial-head) .section-label,
html body #work .head .label{margin-bottom:12px}
@media(min-width:761px){
 html body .service-introduction{row-gap:12px}
 html body .service-introduction .section-label{margin-bottom:0}
}
html body #work .head,
html body .testimonial-head{margin-bottom:40px}
@media(max-width:760px){
 html body #work .head,
 html body .testimonial-head{margin-bottom:30px}
}

/* Apply the same grouped-heading rhythm to the remaining section structures. */
html body .relationship-heading .section-label,
html body .contact-spread .spread-heading .section-label{
 font:400 11px/1.65 Inter,Arial,sans-serif;letter-spacing:.14em;
 text-transform:uppercase;margin:0 0 12px;
}
html body .contact-spread #contact-title{margin-top:0}
html body .about-opening-body{margin-top:40px}
html body .relationship-principles{margin-top:40px}
html body .service-introduction{padding-bottom:40px}
@media(max-width:760px){
 html body .about-opening-body,html body .relationship-principles{margin-top:30px}
 html body .service-introduction{padding-bottom:30px}
}

/* Desktop Lenis rails interpolate freely; native touch retains snapping. */
@media(hover:hover) and (pointer:fine){.smooth-rail{scroll-snap-type:none!important;scroll-behavior:auto!important}}