/* v18 content layout; retain the existing typography, motion and background. */
:root {
    --section-gap: clamp(7rem, 12vw, 10rem);
    --heading-gap: clamp(2rem, 4vw, 3rem);
    --group-gap: clamp(5rem, 9vw, 8rem);
}
.section { margin-bottom: 0; }
.section.section--group { padding-top: var(--section-gap); margin-bottom: 0; }
.section-title { scroll-margin-top: 120px; }
.section--group > .section-title { margin-bottom: var(--heading-gap); }
.intro { max-width: 880px; text-align: center; padding-top: 1rem; padding-bottom: 0; }
.areas-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; text-align: center; }
.area { border-top: 1px solid var(--hairline); padding-top: 2rem; }
.area h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 500; letter-spacing: -.025em; margin: 0 0 1rem; }
.area p { max-width: 360px; margin: 0 auto; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.area ul { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; font-size: .8rem; color: var(--text); }
#areas, #process, #about { scroll-margin-top: 120px; }
#process .offering { padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
#process .offering-reveal-content { padding-top: 0; }
#process .process-intro { margin-bottom: 2.5rem; }
.bridge-approach { --rd: 0.85s; max-width: 780px; margin: 0 auto; text-align: center; }
.approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; padding: 0; margin: 2.5rem 0 0; }
.approach-grid div { margin: 0; }
.approach-grid h3 { font-size: 1rem; font-weight: 500; margin: 0 0 .6rem; text-wrap: balance; }
.approach-grid p { margin: 0 auto; max-width: 300px; font-size: .9rem; line-height: 1.7; color: var(--muted); }
#work .projects { margin-top: 0; padding-top: 0; padding-bottom: 0; }
#work .clients-label { margin: 0; }
#work .projects .phase + .phase { margin-top: var(--group-gap); }
.contact { padding-top: calc(var(--section-gap) + var(--heading-gap)); padding-bottom: var(--group-gap); }
.contact .contact-line { margin: 0.8rem 0 0; color: var(--muted); }
@media (max-width: 760px) {
    .areas-grid { gap: 2rem; }
}
@media (max-width: 520px) {
    .intro { padding: 1rem 1.5rem 0; }
    .areas-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .area { padding-top: 1.75rem; }
    .approach-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}