.roof-repair{--service-image:url('/assets/images/service-repair.webp')}
.roof-replacement{--service-image:url('/assets/images/service-replacement.webp')}
.roof-installation{--service-image:url('/assets/images/service-installation.webp')}
.roof-inspection{--service-image:url('/assets/images/service-inspection.webp')}
.storm-damage-roofing{--service-image:url('/assets/images/service-storm.webp')}
.commercial-roofing{--service-image:url('/assets/images/service-commercial.webp')}
.service-page main>.hero{min-height:560px;background-image:linear-gradient(90deg,#111a20ed,#111a2080 60%,#111a2020),var(--service-image);background-position:center;justify-content:flex-start}
.service-page .hero-copy{width:65%;max-width:730px}.service-page .hero h1{font-size:clamp(44px,5.2vw,74px);line-height:1.1;margin-bottom:26px}.service-page .hero p{font-size:18px;max-width:640px}.service-page .hero .eyebrow{color:#fff}
.service-page main>section:not(.hero){max-width:1440px;padding:90px max(5%,calc((1440px - 1300px)/2));scroll-margin-top:30px}
.service-jumpbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px max(5%,calc((100vw - 1300px)/2));background:#eef1ed;border-bottom:1px solid #dce0dd;font-size:14px}.service-jumpbar>span{display:flex;align-items:center;gap:12px}.service-jumpbar>span .icon{color:#ba4600}.service-jumpbar nav{display:flex;gap:28px}
.service-overview{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.service-page figure{margin:0;min-width:0}.service-overview figure{position:relative;padding-bottom:34px}.service-overview img{width:100%;height:520px;object-fit:cover}.service-overview figcaption{position:absolute;bottom:0;left:24px;right:24px;display:flex;align-items:center;gap:16px;padding:22px 26px;background:var(--orange);color:var(--ink);font-size:14px;line-height:1.5}.service-overview h2{font-size:39px;line-height:1.2}.service-text-link{display:inline-flex;gap:18px;align-items:center;font-weight:600;border-bottom:1px solid var(--orange);padding-bottom:8px;margin-top:8px}
.service-page main>.service-scope{background:var(--ink);max-width:none;color:white;padding-inline:max(5%,calc((100vw - 1300px)/2))}.service-scope .eyebrow{color:white}.service-scope h2{max-width:780px;margin-bottom:40px}.service-scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.service-scope-grid article{padding:32px;border:1px solid #ffffff24;border-top:3px solid var(--orange);background:linear-gradient(135deg,#ffffff08,transparent)}.service-icon{display:grid;place-items:center;width:60px;height:60px;background:#ffffff08;color:#ff8438;border:1px solid #ffffff25;margin-bottom:26px}.service-icon .icon{width:30px;height:30px}.service-scope h3{font-size:26px;line-height:1.3}.service-scope article p{font-size:15px;color:#d3d9d8;margin:0;line-height:1.85}
.service-preparation{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.service-preparation h2{font-size:39px}.service-preparation figure{position:relative}.service-preparation img{width:100%;height:530px;object-fit:cover}.service-preparation figcaption{padding:12px 16px;border-left:3px solid var(--orange);background:#f0f2ef;color:var(--muted);font-size:12px}.service-checklist{list-style:none;padding:0;margin:28px 0 0}.service-checklist li{display:flex;align-items:flex-start;gap:15px;padding:16px 0;margin:0;border-bottom:1px solid #dce0dd;font-size:15px;line-height:1.7}.service-checklist .icon{color:#bb4700;width:21px;height:21px;margin-top:3px}
.service-page main>.service-process{background:#f0f2ef;max-width:none;padding-inline:max(5%,calc((100vw - 1300px)/2))}.service-process ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;list-style:none;padding:0;margin:45px 0 0}.service-process li{position:relative;margin:0;border-top:1px solid #b9c1bb;padding-top:25px}.service-process li:before{content:'';width:9px;height:9px;background:var(--orange);position:absolute;top:-5px;left:0}.service-process li>span{display:block;color:#99a49f;font-size:60px;line-height:1;margin-bottom:25px;letter-spacing:-.06em}.service-process h3{font-size:26px}.service-process li p{font-size:15px;margin:0;line-height:1.85}
.service-review{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.service-review h2{font-size:39px}.service-review ul{list-style:none;padding:8px 30px;margin:0;border-left:3px solid var(--orange);background:#fff4eb}.service-review li{padding:22px 0;border-bottom:1px solid #e4d9ce;margin:0;font-size:15px;line-height:1.8}.service-review li:last-child{border:0}
.service-page main>.service-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding-top:20px}.service-faq h2{font-size:39px}.service-faq>div:first-child>p:not(.eyebrow){font-size:15px}.service-faq .button{margin:18px 0}.service-faq details{padding:25px 28px;margin:0 0 16px;background:#f0f2ef}.service-faq summary{font-size:21px}.service-faq-list{min-width:0}
.service-page main>.service-next{max-width:none;display:flex;justify-content:space-between;align-items:center;gap:60px;background:var(--orange);padding:65px max(5%,calc((100vw - 1300px)/2))}.service-next>div{max-width:790px}.service-next .eyebrow{border-color:var(--ink);margin-bottom:20px}.service-next h2{font-size:42px;margin-bottom:18px}.service-next p{color:var(--ink);margin-bottom:0}.service-next .button{background:var(--ink);color:white;flex-shrink:0}.service-next .button:before,.service-next .button:after{border-color:var(--ink)}.service-next .button:hover{background:white;color:var(--ink)}
.service-page main>.service-related{padding-top:60px;padding-bottom:65px}.service-related h2{font-size:29px}.service-related>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.service-related a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px;border:1px solid #dce0dd;font-size:18px}.service-related a:hover{border-color:var(--orange);background:#fff5ed}
@media(max-width:1050px){.service-page main>section:not(.hero){padding:70px 5%}.service-overview,.service-preparation,.service-review{gap:35px}.service-overview img,.service-preparation img{height:480px}.service-overview h2,.service-preparation h2,.service-review h2,.service-faq h2{font-size:34px}.service-scope-grid{gap:18px}.service-scope-grid article{padding:25px}.service-jumpbar{flex-wrap:wrap}.service-page main>.service-faq{gap:35px}.service-process ol{gap:25px}.service-next h2{font-size:34px}.service-page main>.service-next{gap:35px}}
@media(max-width:800px){.service-page .hero-copy{width:90%}.service-overview,.service-preparation,.service-review,.service-page main>.service-faq{grid-template-columns:1fr;gap:38px}.service-overview figure{max-width:650px}.service-overview img{height:420px}.service-preparation img{height:430px}.service-scope-grid{grid-template-columns:1fr}.service-scope-grid article{display:grid;grid-template-columns:60px 1fr;gap:0 25px}.service-icon{grid-row:span 2;margin-bottom:0}.service-scope-grid h3,.service-scope-grid p{grid-column:2}.service-process ol{grid-template-columns:1fr;gap:32px}.service-process li{padding-left:90px;min-height:125px}.service-process li>span{position:absolute;left:0;top:28px;font-size:52px}.service-page main>.service-next{display:block}.service-next .button{margin-top:30px}.service-related>div{grid-template-columns:1fr}}
@media(max-width:600px){.service-page main>.hero{padding:65px 22px;min-height:540px;background-image:linear-gradient(#111a2099,#111a20dd),var(--service-image)}.service-page .hero-copy{width:100%}.service-page .hero h1{font-size:44px}.service-page .hero p{font-size:16px}.service-page main>section:not(.hero){padding:60px 22px}.service-jumpbar{padding:22px;font-size:12px;gap:18px}.service-jumpbar nav{flex-wrap:wrap;gap:14px 22px}.service-overview img{height:340px}.service-overview figcaption{left:14px;right:14px;padding:18px;font-size:13px}.service-overview h2,.service-preparation h2,.service-review h2,.service-faq h2,.service-next h2{font-size:33px}.service-scope-grid article{display:block;padding:26px}.service-icon{margin-bottom:22px}.service-preparation img{height:340px}.service-process li{padding-left:65px}.service-process li>span{font-size:43px}.service-process h3{font-size:24px}.service-review ul{padding:0 24px}.service-faq details{padding:22px 20px}.service-related a{font-size:17px;padding:20px}}

@media(max-width:600px){
.roof-repair{--service-image:url('/assets/images/service-repair-960.webp')}
.roof-replacement{--service-image:url('/assets/images/service-replacement-960.webp')}
.roof-installation{--service-image:url('/assets/images/service-installation-960.webp')}
.roof-inspection{--service-image:url('/assets/images/service-inspection-960.webp')}
.storm-damage-roofing{--service-image:url('/assets/images/service-storm-960.webp')}
.commercial-roofing{--service-image:url('/assets/images/service-commercial-960.webp')}
}