/* Shared marketing hierarchy. Demo documents retain their original typography. */
:root{--type-section:clamp(36px,3.8vw,56px);--type-label:22px;--type-card:clamp(24px,2.4vw,34px);--type-body:20px;--type-small:17px}
body .section-label{font:600 var(--type-label)/1.45 Assistant,Arial;letter-spacing:0;margin-bottom:16px;color:var(--fg)}
body .process .section-label,body .contact .section-label{color:#465140}
body :is(.section-heading h2,.audience-heading h2),body .compact-audience .audience-heading h2,body .websites .section-heading h2{font-size:var(--type-section);line-height:1.24;font-weight:450;letter-spacing:-.03em;max-width:26ch;text-wrap:balance}
body .compact-audience{grid-template-columns:minmax(250px,.8fr) minmax(0,1.5fr);gap:5vw}
body .compact-audience .audience-heading h2{max-width:17ch}
body .audience-kind{font:500 var(--type-small)/1.45 Assistant,Arial;color:var(--muted)}
body .audience-card h3{font-size:24px;line-height:1.4;font-weight:500;margin:10px 0}
body .audience-card p{font-size:19px;line-height:1.6}
body .other-systems .cost-project h3{font-size:var(--type-card);line-height:1.3;font-weight:500;letter-spacing:-.02em}
body .other-systems .cost-project p,body .other-systems .cost-project p:first-of-type{font-size:var(--type-body);line-height:1.7;max-width:43ch}
body .process .process-steps h3{font-size:26px;line-height:1.35}
body .process .process-steps p,body .service-details p,body .about p{font-size:var(--type-body);line-height:1.7}
body .service-details summary{font-size:22px;line-height:1.4}
body .contact h2,body .about h2{font-size:var(--type-section);line-height:1.25;letter-spacing:-.03em}
body .contact>div>p{font-size:var(--type-body);line-height:1.65}
body :is(.case-intro,.catalog-intro)>span,body .catalog-category,body .case-context article>span{font:500 var(--type-small)/1.5 Assistant,Arial}
body .case-summary h2,body .case-context h2{font-size:var(--type-card);line-height:1.35}
body :is(.case-summary,.case-context,.case-flow-grid) p{font-size:var(--type-body);line-height:1.75}
body .catalog-copy h2{font-size:var(--type-card);line-height:1.3}
body .catalog-copy p{font-size:var(--type-body);line-height:1.65}
@media(max-width:760px){
 :root{--type-section:clamp(30px,7.7vw,36px);--type-label:20px;--type-card:26px;--type-body:18px;--type-small:16px}
 body .section-label{margin-bottom:12px}
 body .compact-audience{display:block}
 body .compact-audience .audience-heading h2{max-width:24ch}
 body .compact-audience .audience-heading h2 br{display:none}
 body .audience-grid{gap:0 20px}
 body .audience-kind{font-size:16px;line-height:1.4}
 body .audience-card h3{font-size:20px;line-height:1.4;margin:9px 0}
 body .audience-card p{font-size:17px;line-height:1.55}
 body .process .process-steps h3{font-size:23px}
 body .service-details summary{font-size:20px}
 body .case-context h2{font-size:26px}
 body .catalog-copy h2{max-width:none}
}
@media(max-width:350px){body .audience-grid{gap:0 14px}body .audience-card h3{font-size:19px}}

/* The project band reaches the viewport edges, including beyond the large-screen content cap. */
body #systems.work{padding-inline:0}
body #systems>.section-heading{margin-inline:5%}
body #systems .other-systems.lead-systems{margin-inline:0;width:100%;padding-inline:5%;box-sizing:border-box}

/* A distinct forest band separates the light project demos from the charcoal website gallery. */
body #process.process{background:#303b32;color:var(--fg);border-block:1px solid #ffffff14}
body #process .section-label{color:var(--accent)}
body #process .process-steps p,body #process .service-details p{color:#d0d6cc}
body #process .step-icon{stroke:var(--fg)}
body #process .step-icon .pulse,body #process .step-icon .flow{stroke:var(--accent)}
body #process .service-details,body #process .service-details details,body #process .process-steps article{border-color:#ffffff30}
body #process .service-details summary:focus-visible{outline-color:var(--accent)}

/* One shared content edge; section backgrounds remain full bleed. */
:root{--page-gutter:max(5%,calc((100% - 1680px)/2))}
body :is(.site-nav,.hero,.compact-audience,.process,.websites,.about,.contact,footer,.all-projects-link){padding-inline:var(--page-gutter)}
body #systems.work{padding-inline:0}
body #systems>.section-heading{margin-inline:var(--page-gutter)}
body #systems .other-systems.lead-systems{padding-inline:var(--page-gutter)}
@media(max-width:760px){:root{--page-gutter:5%}}

body #process .process-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
@media(min-width:761px) and (max-width:1100px){body #process .process-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media(max-width:760px){body #process .process-steps{grid-template-columns:1fr;gap:0}}

body .audience-card h3{font-weight:400;line-height:1.45;margin:0 0 12px}
body .audience-card h3 strong{font-weight:650}