.service-page { background: var(--paper); }
.service-page .site-header { position: absolute; }
.service-hero { min-height: 720px; padding: 175px max(24px, calc((100vw - var(--max))/2)) 90px; background: var(--ink); color: white; display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; position: relative; overflow: hidden; }
.service-hero::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 84px 84px; }
.service-hero-copy, .service-hero-image { position: relative; z-index: 1; }
.service-hero h1 { font-size: clamp(50px,6.2vw,90px); }
.service-hero p { max-width: 650px; color: rgba(255,255,255,.68); font-size: 18px; }
.service-hero .button { margin-top: 26px; }
.service-hero-image { min-height: 430px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.18); }
.service-hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(18,19,18,.6)); }
.survey-image { background-image: url('./surveying.jpg'); }
.design-image { background-image: url('./hero-architecture.jpg'); }
.service-content { display: grid; grid-template-columns: .72fr 1.28fr; gap: 100px; }
.service-intro h2, .service-deliverables h2, .service-faq h2 { font-size: clamp(38px,4.5vw,66px); line-height: 1.07; letter-spacing: -.045em; }
.service-intro > p:not(.section-label) { color: var(--muted); font-size: 18px; }
.service-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.service-list li { display: grid; grid-template-columns: 45px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.service-list span { color: var(--yellow); font-weight: 800; }
.service-list h3 { margin: 0 0 6px; font-size: 21px; }
.service-list p { margin: 0; color: var(--muted); }
.service-deliverables { background: var(--paper-2); }
.deliverable-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 45px; }
.deliverable-card { min-height: 250px; padding: 26px; border: 1px solid var(--line); background: var(--paper); }
.deliverable-card strong { display: block; margin-bottom: 55px; color: var(--yellow); font: 800 12px "Manrope"; }
.deliverable-card h3 { font-size: 23px; }
.deliverable-card p { color: var(--muted); }
.service-faq { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.faq-grid details { padding: 20px 0; border-top: 1px solid var(--line); }
.faq-grid summary { cursor: pointer; font-weight: 800; }
.faq-grid p { color: var(--muted); }
.service-cta { background: var(--yellow); text-align: left; }
.service-cta h2 { max-width: 900px; font-size: clamp(44px,5.5vw,82px); line-height: 1.02; letter-spacing: -.05em; }
.service-cta p { max-width: 650px; color: rgba(18,19,18,.68); font-size: 18px; }
.service-cta .button { margin-top: 24px; background: var(--ink); color: white; }
.related-services { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.related-services a { padding: 10px 14px; border: 1px solid rgba(18,19,18,.35); font-size: 13px; font-weight: 700; }
.faq-page-hero { min-height: 590px; padding: 175px max(24px, calc((100vw - var(--max))/2)) 75px; background: var(--yellow); display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; position: relative; overflow: hidden; }
.faq-page-hero::after { content: "?"; position: absolute; right: 4vw; bottom: -18vw; color: rgba(18,19,18,.08); font: 800 min(52vw,700px)/1 "Manrope"; pointer-events: none; }
.faq-page-hero > * { position: relative; z-index: 1; }
.faq-page-hero h1 { max-width: 920px; margin: 12px 0 0; font-size: clamp(50px,7vw,102px); line-height: .98; letter-spacing: -.06em; }
.faq-page-hero p:not(.section-label) { max-width: 620px; color: rgba(18,19,18,.7); font-size: 18px; }
.business-facts { display: grid; border-top: 1px solid rgba(18,19,18,.3); }
.business-facts div { padding: 18px 0; border-bottom: 1px solid rgba(18,19,18,.3); }
.business-facts small { display: block; margin-bottom: 6px; font-weight: 800; letter-spacing: .14em; }
.business-facts strong { font-size: 18px; }
.faq-directory { display: grid; grid-template-columns: .42fr 1.58fr; gap: 85px; }
.faq-directory h2 { margin-top: 0; font-size: clamp(38px,4.7vw,70px); line-height: 1.02; letter-spacing: -.05em; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 24px 52px 24px 0; cursor: pointer; list-style: none; font: 700 clamp(18px,2vw,24px) "Manrope"; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--yellow); font-size: 28px; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { max-width: 820px; margin: 0; padding: 0 52px 24px 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
@media (max-width: 900px) { .service-hero,.service-content { grid-template-columns: 1fr; } .service-hero { gap: 45px; } .service-hero-image { min-height: 360px; } .deliverable-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .faq-page-hero,.faq-directory { grid-template-columns: 1fr; } .faq-page-hero { gap: 50px; } .faq-directory { gap: 35px; } }
@media (max-width: 760px) { .service-hero { padding: 125px 18px 65px; } .service-hero-image { min-height: 290px; } .service-content { gap: 55px; } .deliverable-grid,.faq-grid { grid-template-columns: 1fr; } .faq-page-hero { min-height: auto; padding: 125px 18px 60px; } .faq-page-hero::after { bottom: -12vw; } .faq-list summary { padding-right: 38px; } .faq-list details p { padding-right: 20px; } }