.roof-section{padding-block:95px}.roof-heading{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:end;margin-bottom:42px}.roof-heading h2{margin-top:18px}.roof-heading p{font-size:19px;line-height:1.5;color:var(--muted);max-width:520px}.roof-explorer{display:grid;grid-template-columns:1.65fr 1fr;gap:0;background:#edf0e7;border-radius:24px;overflow:hidden}.roof-visual{position:relative;padding:48px 15px 32px;min-width:0}.roof-visual svg{width:100%;display:block}.diagram-caption{position:absolute;top:25px;left:28px;font-size:11px;letter-spacing:.12em;color:#65725a}.diagram-note{position:absolute;bottom:17px;left:28px;font-size:11px;letter-spacing:0;color:#6a7162}.roof-hotspot{position:absolute;width:32px;height:32px;border:2px solid #fff;border-radius:50%;background:#678c47;color:white;box-shadow:0 2px 12px #26381c40;font-size:13px;transform:translate(-50%,-50%);transition:transform .2s}.roof-hotspot[aria-pressed=true]{background:#273c21;transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 6px #678c472b}.roof-detail{padding:50px 40px;align-self:center}.part-count{font-size:13px;letter-spacing:.07em;color:#678c47}.roof-detail h3{font-size:34px;margin:20px 0}.roof-detail p{font-size:17px;line-height:1.55;color:#62685e;min-height:106px}.part-nav{display:flex;gap:8px;margin:25px 0}.part-nav button{border:1px solid #c0c8b5;border-radius:50%;width:40px;height:40px;font-size:22px}.part-nav button:hover{background:#dce4d3}.roof-detail>a{font-size:12px;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}.component-list{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:20px}.component-list button{text-align:left;font-size:13px;letter-spacing:-.015em;border-top:2px solid #dfe3d8;padding:15px 0;line-height:1.4}.component-list button span{display:block;font-size:11px;margin-bottom:6px;color:#7a826f}.component-list button[aria-pressed=true]{border-color:#678c47;color:#496535}.roofing-page .home-contact{margin-top:30px}.roofing-page .roof-features{padding-top:10px}.roof-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.roof-card{padding:32px;background:#edf0e7;border-radius:20px}.roof-card svg{width:32px;height:32px;color:#678c47;margin-bottom:24px}.roof-card h3{font-size:25px;margin-bottom:16px}.roof-card p{font-size:16px;line-height:1.5;color:#62685e}.roof-process{display:grid;grid-template-columns:1fr 1fr;gap:9%;border-top:1px solid #dce0d5}.roof-process h2{margin:18px 0 32px}.roof-process img{border-radius:22px;aspect-ratio:1.4;width:100%;height:auto;object-fit:cover;object-position:center}.roof-process .steps{margin-top:0}.roof-process .steps li{padding-bottom:18px}.roof-process .step-icon{font-size:15px;padding-top:3px}.roof-process .green{font-size:17px}.roof-faq{display:grid;grid-template-columns:1fr 1.2fr;gap:10%;padding-top:10px}.roof-faq h2{margin:18px 0 25px}.roof-faq>div>p{color:#62685e;line-height:1.5;font-size:17px;max-width:330px}.roof-faq details{border-bottom:1px solid #d8decf;padding:22px 0}.roof-faq details:first-child{padding-top:0}.roof-faq summary{cursor:pointer;list-style:none;font-size:21px;letter-spacing:-.035em;display:flex;justify-content:space-between;gap:20px;line-height:1.25}.roof-faq summary::after{content:'+';color:#678c47}.roof-faq details[open] summary::after{content:'−'}.roof-faq details p{font-size:16px;line-height:1.55;color:#62685e;padding:18px 30px 0 0}.roof-image-note{font-size:11px;color:#7a8073;margin-top:10px}.roof-layer{transition:opacity .2s}.roof-visual[data-active] .roof-layer{opacity:.58}.roof-visual .roof-layer.is-active{opacity:1;filter:drop-shadow(0 0 3px #678c47)}
@media(max-width:1000px){.roof-detail{padding:30px 25px}.roof-detail h3{font-size:28px}.roof-heading h2,.roof-process h2,.roof-faq h2{font-size:46px}.roof-card{padding:25px}.component-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.roof-section{padding-block:62px}.roof-heading,.roof-explorer,.roof-process,.roof-faq{grid-template-columns:1fr;gap:28px}.roof-heading h2,.roof-process h2,.roof-faq h2{font-size:42px}.roof-heading p{font-size:17px}.roof-detail{padding:5px 28px 30px}.roof-detail p{min-height:0}.roof-visual{padding-bottom:25px}.roof-card-grid{grid-template-columns:1fr}.roof-card{padding:28px}.roof-faq{padding-top:0}.roof-process .steps{margin-top:10px}.component-list{gap:10px}.component-list button{font-size:12px}.roof-visual .roof-hotspot{width:29px;height:29px}.roofing-page .home-contact{margin-top:0}}
@media(prefers-reduced-motion:reduce){.roof-hotspot,.roof-layer{transition:none}}

/* Compact service introduction and manufacturer roof-system explainer. */
.roof-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;align-items:center;padding-block:65px 80px}.roof-intro h2{margin:18px 0 22px;font-size:clamp(40px,4.4vw,58px)}.roof-intro-lead{font-size:18px;line-height:1.55;color:#62685e;max-width:440px}.roof-intro .roof-detail{padding:25px 0 0;margin-top:26px;border-top:1px solid #dce1d3}.roof-intro .roof-detail h3{font-size:26px;margin:12px 0}.roof-intro .roof-detail p{font-size:16px;min-height:100px}.roof-intro .part-nav{margin:12px 0 18px}.roof-diagram-column{min-width:0}.roof-intro .roof-visual{padding:0;aspect-ratio:800/650;background:transparent}.gaf-system-image{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.roof-intro .component-list{grid-template-columns:repeat(3,1fr);gap:8px 18px;margin-top:12px}.roof-source{font-size:11px;color:#727968;margin-top:10px;letter-spacing:0}.roof-intro .roof-hotspot{width:30px;height:30px;font-size:12px}
@media(max-width:760px){.roof-intro{grid-template-columns:1fr;padding-block:45px 60px;gap:28px}.roof-intro-copy{display:contents}.roof-intro-copy>.tag{justify-self:start}.roof-intro h2{margin:-12px 0 0}.roof-intro-lead{margin-top:-10px}.roof-diagram-column{grid-row:4}.roof-intro .roof-detail{margin-top:0;padding-top:22px}.roof-intro .roof-detail p{min-height:0}.roof-intro .roof-hotspot{width:28px;height:28px}.roof-intro .component-list{gap:8px 12px}}
.roof-intro .roof-hotspot{width:31%;height:6%;border:0;border-radius:4px;background:transparent;color:transparent;font-size:0;box-shadow:none;transform:translateY(-50%)}.roof-intro .roof-hotspot:hover{background:#678c471a}.roof-intro .roof-hotspot[aria-pressed=true]{background:#678c471c;box-shadow:0 0 0 1px #678c4770;transform:translateY(-50%)}

.roof-intro .color-cutaway{aspect-ratio:405/390;max-width:560px;margin-inline:auto}.color-cutaway svg{width:100%;height:100%;mix-blend-mode:multiply}.roof-intro .color-cutaway .roof-hotspot{width:32px;height:32px;border:2px solid white;border-radius:50%;background:#678c47;color:white;font-size:13px;box-shadow:0 2px 8px #161b1130;transform:translate(-50%,-50%)}.roof-intro .color-cutaway .roof-hotspot[aria-pressed=true]{background:#273c21;box-shadow:0 0 0 5px #678c4730}.roof-intro .color-cutaway .roof-hotspot:hover{background:#496535}
/* Compact roof-system section without hiding content. */
.roof-intro{padding-block:40px 45px;grid-template-columns:1fr 1fr;gap:7%}.roof-intro h2{font-size:44px;margin:12px 0 16px}.roof-intro-lead{font-size:16px;line-height:1.5;max-width:470px}.roof-intro .roof-detail{margin-top:18px;padding-top:17px;display:grid;grid-template-columns:auto 1fr;column-gap:18px}.roof-intro .part-count,.roof-intro .roof-detail h3,.roof-intro .roof-detail p{grid-column:1/-1}.roof-intro .roof-detail h3{font-size:24px;margin:9px 0}.roof-intro .roof-detail p{min-height:72px;font-size:16px;line-height:1.45}.roof-intro .part-nav{margin:12px 0 0}.roof-intro .part-nav button{width:34px;height:34px;font-size:19px}.roof-intro .roof-detail>a{align-self:center;margin-top:12px;justify-self:start}.roof-intro .color-cutaway{width:100%;max-width:405px}.roof-source{max-width:405px;margin:8px auto 0;font-size:10px;line-height:1.4}
@media(max-width:760px){.roof-intro{grid-template-columns:1fr;padding-block:35px 40px;gap:20px}.roof-intro h2{font-size:38px;margin:-5px 0 0}.roof-intro-lead{margin-top:0}.roof-intro .color-cutaway{max-width:320px}.roof-intro .roof-detail{margin-top:0}.roof-intro .roof-detail p{min-height:0}.roof-source{max-width:320px}.roof-intro .roof-detail>a{font-size:11px}}
/* Six product benefits, matched to the service page's neutral and sage palette. */
/* Reuse HOME-12 Our Promise card sizing and typography. */
.roof-features .promise-heading h2{font-size:44px;font-weight:500;margin-top:16px}
.roof-features .promise-heading>p{font-size:16px;line-height:1.45;letter-spacing:-.015em;color:#62685e;max-width:520px;margin-top:18px}
.roof-features .promise-tile p{letter-spacing:-.015em;color:#62685e}
@media(max-width:600px){.roof-features .promise-heading h2{font-size:36px}}

/* Page-wide scale: homepage typography with compact service-page sections. */
.roof-process .green{font-size:20px}
.roof-section{padding-block:60px}
.roofing-page .roof-features{padding-top:15px}
.roof-intro{padding-block:40px 45px}
.roof-intro h2,.roof-features .promise-heading h2,.roof-process h2,.roof-faq h2{font-size:44px;font-weight:500;line-height:1.02;letter-spacing:-.06em}
.roof-process h2{margin:16px 0 28px}
.roof-faq h2{margin:16px 0 22px}
.roof-faq>div>p{font-size:16px;line-height:1.5}
.roof-intro .roof-detail h3{font-size:23px;line-height:1.15;letter-spacing:-.045em}
.roof-faq summary{font-size:20px;line-height:1.25;letter-spacing:-.045em;font-weight:500}
.roof-process .steps li{padding-bottom:0}
.roof-process img{border-radius:20px}
.roof-source,.roof-image-note{font-size:12px;line-height:1.4;letter-spacing:0}
.roof-intro .roof-detail>a{font-size:14px;line-height:1.4}
.roof-intro .part-nav button{width:40px;height:40px;font-size:22px}
.roofing-page .home-contact{margin-top:0}
@media(max-width:1100px){.roof-process .green{font-size:16px}}
@media(max-width:760px){
 .roof-section{padding-block:45px}
 .roof-intro{padding-block:35px 40px}
 .roofing-page .roof-features{padding-top:15px}
 .roof-intro h2,.roof-features .promise-heading h2,.roof-process h2,.roof-faq h2{font-size:36px}
 .roof-process h2{margin-bottom:24px}
 .roof-faq summary{font-size:20px}
 .roof-intro .roof-detail>a{font-size:14px}
}

/* Roof system panel and centered benefits create a lighter visual rhythm. */
.roof-intro{background:#f0f1ed;border:1px solid #e3e4df;border-radius:24px;padding:36px 40px;margin-top:36px;gap:5%}
.roofing-page .roof-features{padding-top:44px;padding-bottom:48px}
.roof-features .promise-heading{text-align:center;margin-bottom:28px}
.roof-features .promise-heading>p{margin-inline:auto}
.roof-features .promise-tile{background:#fff;border-color:#e3e4df}
@media(max-width:1100px){.roof-intro{padding:30px;gap:4%}}
@media(max-width:760px){.roof-intro{padding:28px 24px;margin-top:24px;border-radius:20px;gap:20px}.roofing-page .roof-features{padding-top:36px;padding-bottom:40px}.roof-features .promise-heading{margin-bottom:24px}}

@media(max-width:760px){.roof-intro .roof-detail>a{grid-column:1/-1;margin-top:16px}.roof-intro .part-nav{grid-column:1/-1}}

/* Match homepage navigation button tracking on the service-page link. */
.roofing-page .hero nav .nav-right a{letter-spacing:-.015em}

/* Reuse HOME-02 layout and typography, including its responsive rules. */
.roofing-how .how-left>img{height:auto}
.roofing-how{padding-bottom:60px}
@media(max-width:760px){.roofing-how{padding-bottom:45px}}

/* Compact service rows contrast with benefit cards and the image-led process. */
.roof-services{padding-top:20px}
.roof-services-heading{margin-bottom:28px}
.roof-services-heading h2{font-size:44px;font-weight:500;margin:16px 0 18px}
.roof-services-heading p{max-width:540px;font-size:16px;line-height:1.5;color:var(--muted)}
.roof-service-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.roof-service-row{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:28px;padding:22px 24px;border-bottom:1px solid #e3e4df;border-radius:12px;background:#f0f1ed80;transition:background .2s}
.roof-service-row:hover{background:#e8eddf}
.roof-service-row svg{width:26px;height:26px;color:var(--green)}
.roof-service-row h3{font-size:23px;line-height:1.15;font-weight:500;letter-spacing:-.045em}
.roof-service-row p{font-size:16px;line-height:1.45;color:var(--muted)}
@media(max-width:760px){.roof-services{padding-top:12px}.roof-services-heading h2{font-size:36px}.roof-service-row{grid-template-columns:26px minmax(0,1fr);gap:10px 16px;padding:20px}.roof-service-row h3{font-size:22px}.roof-service-row p{grid-column:2}.roof-service-row svg{align-self:start}}
@media(prefers-reduced-motion:reduce){.roof-service-row{transition:none}}

/* Footer charcoal-green brings contrast to the service rows. */
.roof-service-row{background:#161b11;border-color:#ffffff26;color:#fff}
.roof-service-row h3{color:#fff}
.roof-service-row p{color:#d2d8ca}
.roof-service-row svg{color:var(--green)}
.roof-service-row:hover{background:#293522}

/* Split service introduction with revealing rows. */
.roof-services{display:grid;grid-template-columns:1.1fr .91fr;gap:10%;align-items:start;padding-bottom:64px}
.roof-services-heading{margin:0;max-width:460px}
.roof-services-heading h2{margin-bottom:24px}
.roof-service-row{display:block;padding:0;background:#293522;border-color:#ffffff20;overflow:hidden}
.roof-service-row:hover{background:#35462d}
.roof-service-detail summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:26px minmax(0,1fr) 16px;align-items:center;gap:16px;padding:22px 24px}
.roof-service-detail summary::-webkit-details-marker{display:none}
.roof-service-detail summary:focus-visible{outline:2px solid #c3d2b4;outline-offset:-5px;border-radius:12px}
.roof-service-detail h3{font-size:23px;line-height:1.15}
.roof-service-row svg{color:#a6bd93}
.service-toggle{font-size:21px;color:#d2d8ca}
.roof-service-detail[open] .service-toggle{transform:rotate(45deg)}
.service-reveal{padding:0 24px 22px 66px}
.service-reveal p{font-size:16px;line-height:1.45}
.roof-service-detail[open] .service-reveal{animation:service-rise .3s ease both}
@keyframes service-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.roof-service-detail:not([open])>.service-reveal{display:block;height:0;padding-block:0;overflow:hidden;opacity:0;transform:translateY(12px);transition:height .3s,padding .3s,opacity .3s,transform .3s}.roof-service-detail:not([open]):hover>.service-reveal,.roof-service-detail:not([open]):focus-within>.service-reveal{height:auto;padding-bottom:22px;opacity:1;transform:translateY(0)}}
.roof-panorama{position:relative;width:100%;height:clamp(260px,32vw,460px)}
.roof-panorama img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.roof-panorama figcaption{position:absolute;bottom:12px;left:6.93%;font-size:12px;letter-spacing:0;color:#fff;background:#161b11b3;padding:5px 9px;border-radius:5px;max-width:86%}
.roof-mid-cta{background:#161b11;color:#f9f9f5;text-align:center;padding:44px 0}
.roof-mid-cta h2{font-size:32px;font-weight:500;line-height:1.15;letter-spacing:-.045em}
.roof-mid-cta h2 span{color:#b8c1ad}
.roof-mid-cta .green{font-size:16px;padding:14px 24px;margin-top:24px;box-shadow:none}
@media(max-width:1100px){.roof-services{gap:7%}.roof-service-detail summary{padding:20px;gap:12px}.roof-service-detail h3{font-size:22px}.service-reveal{padding-left:58px;padding-right:20px}}
@media(max-width:760px){.roof-services{grid-template-columns:1fr;gap:28px;padding-bottom:40px}.roof-mid-cta{padding:34px 0}.roof-mid-cta h2{font-size:27px}.roof-panorama figcaption{left:6%}}
@media(prefers-reduced-motion:reduce){.service-reveal{animation:none!important;transition:none!important;transform:none!important}}

/* Restore the original full-width sage service rows. */
.roof-services{display:block;padding-bottom:48px}
.roof-services-heading{max-width:none;margin-bottom:28px}
.roof-service-row{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,.9fr);gap:28px;padding:22px 24px;background:var(--green);border-color:#ffffff26}
.roof-service-row svg,.roof-service-row h3,.roof-service-row p{color:#fff}
.roof-service-row:hover{background:#55783b}
@media(max-width:760px){.roof-service-row{grid-template-columns:26px minmax(0,1fr);gap:10px 16px;padding:20px}.roof-service-row p{grid-column:2}.roof-services{padding-bottom:40px}}

/* Outlined service rows and an accented section tagline. */
.roof-services-heading h2 span{color:var(--green)}
.roof-service-row,.roof-service-row:hover{background:transparent;border:1px solid #678c4770}
.roof-service-row h3{color:#000}
.roof-service-row svg{color:var(--green)}
.roof-service-row p{color:#62685e}

/* Supplied roof photograph under the charcoal statement treatment. */
.roof-mid-cta{background:linear-gradient(90deg,#161b11e8,#161b11cc 50%,#161b11e8),url("assets/urban-roof-cta-optimized.webp") center 65%/cover no-repeat;background-color:#161b11}

/* Compact service rows: approximately 20% shorter, same type scale. */
.roof-service-row{padding-block:14px}
@media(max-width:760px){.roof-service-row{padding-block:10px;row-gap:8px}}

/* Service link hover preview; destinations will be added with subservice pages. */
.roof-service-row{cursor:pointer;transition:background .2s,border-color .2s}
.roof-service-row h3,.roof-service-row p,.roof-service-row svg{transition:color .2s}
.roof-service-row:hover{background:var(--green);border-color:var(--green)}
.roof-service-row:hover h3,.roof-service-row:hover p,.roof-service-row:hover svg{color:#fff}
@media(prefers-reduced-motion:reduce){.roof-service-row,.roof-service-row h3,.roof-service-row p,.roof-service-row svg{transition:none}}

/* Crossfade descriptions into a stable Learn More affordance. */
.service-row-copy{display:grid;align-items:center;min-width:0}
.service-row-copy>p,.service-row-copy>.service-row-learn{grid-area:1/1;transition:opacity .2s,transform .2s}
.service-row-learn{display:flex;align-items:center;gap:12px;font-size:16px;color:#fff;opacity:0;transform:translateX(-6px);pointer-events:none}
.service-row-learn>span{font-size:22px;line-height:1}
@media(hover:hover){.roof-service-row:hover .service-row-copy>p{opacity:0}.roof-service-row:hover .service-row-learn{opacity:1;transform:none}}
.roof-service-row:focus-within{background:var(--green);border-color:var(--green)}
.roof-service-row:focus-within h3,.roof-service-row:focus-within svg{color:#fff}
.roof-service-row:focus-within .service-row-copy>p{opacity:0}
.roof-service-row:focus-within .service-row-learn{opacity:1;transform:none}
@media(max-width:760px){.service-row-copy{grid-column:2}.roof-service-row .service-row-copy>p{grid-column:1}}
@media(hover:none){.service-row-copy>.service-row-learn{grid-area:auto;opacity:1;transform:none;color:var(--green);margin-top:8px}.roof-service-row:hover .service-row-learn{color:#fff}}
@media(prefers-reduced-motion:reduce){.service-row-copy>p,.service-row-copy>.service-row-learn{transition:none;transform:none}}

/* Right-aligned hover action with a white circular arrow. */
.service-row-learn{justify-content:flex-end;text-align:right}
.service-row-learn>span{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border:1px solid #fff;border-radius:50%;background:#fff;color:var(--green);font-size:20px;line-height:1}

.service-row-learn>span{letter-spacing:0}
.roof-service-row .service-row-learn .service-arrow{display:block;width:18px;height:18px;color:var(--green);flex-shrink:0;align-self:center}

/* Homepage Support highlights above the roofing FAQs. */
.roofing-why{padding-top:20px;padding-bottom:15px}
.roofing-why .features-grid{margin-top:32px}
@media(max-width:760px){.roofing-why{padding-top:10px;padding-bottom:15px}}

/* Full-width rounded FAQs in the existing light palette. */
.roof-faq{display:block}
.roof-faq-heading{margin-bottom:28px}
.roof-faq .roof-faq-heading>p{max-width:560px}
.roof-faq-list{display:grid;gap:12px}
.roof-faq details,.roof-faq details:first-child{padding:0;border:1px solid #cbd2c3;border-radius:20px;background:transparent;overflow:hidden}
.roof-faq summary{padding:22px 26px;align-items:center;line-height:1.3}
.roof-faq summary::-webkit-details-marker{display:none}
.roof-faq summary::after{flex-shrink:0;font-size:24px}
.roof-faq details p{padding:0 60px 24px 26px;max-width:1100px}
.roof-faq summary:focus-visible{outline:2px solid var(--green);outline-offset:-5px;border-radius:18px}
@media(max-width:760px){.roof-faq summary{padding:20px;font-size:18px}.roof-faq details p{padding:0 20px 22px}.roof-faq details{border-radius:16px}}

/* Compact FAQ rows with a clear open state and readable answer measure. */
.roof-faq summary{padding:14px 24px;min-height:58px}
.roof-faq details[open]{background:#edf1e7;border-color:#678c47}
.roof-faq details p{box-sizing:content-box;max-width:75ch;padding:0 24px 20px;line-height:1.55}
@media(max-width:760px){.roof-faq summary{padding:10px 20px;min-height:50px}.roof-faq details p{padding:0 20px 18px}}

.roof-faq-heading{text-align:center}
.roof-faq .roof-faq-heading>p{margin-inline:auto}

/* Process heading matches HOME-02 and HOME-12 sizing. */
.roofing-page #process h2{font-size:44px}
@media(max-width:600px){.roofing-page #process h2{font-size:36px}}

/* Slightly smaller titles across all six roofing feature cards. */
.roof-features .promise-tile h3{font-size:21px}

/* Keep the expanded contact fields within the original compact form footprint. */
.roofing-page .home-contact label{margin:5px 0}
.roofing-page .home-contact input,.roofing-page .home-contact select{padding:8px 0}

/* Underline focus and an accessible dropdown styled to match the form. */
.roofing-page .home-contact input:focus-visible{outline:none;border-bottom-color:var(--green);box-shadow:0 1px 0 var(--green)}
.service-field{position:relative;margin:5px 0;font-size:14px;line-height:1.4;letter-spacing:-.015em}
.service-select{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 0;border:0;border-bottom:1px solid #bdc6b3;border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.service-select:focus-visible,.service-select[aria-expanded="true"]{outline:none;border-bottom-color:var(--green);box-shadow:0 1px 0 var(--green)}
.service-select svg{color:var(--green);transition:transform .2s}
.service-select[aria-expanded="true"] svg{transform:rotate(180deg)}
.service-options{position:absolute;top:100%;left:0;right:0;z-index:10;margin-top:6px;padding:6px;border:1px solid #d7ddcf;border-radius:12px;background:var(--paper);box-shadow:0 10px 24px #161b111a}
.service-options[hidden]{display:none}
.service-options button{display:block;width:100%;padding:9px 12px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.service-options button:hover,.service-options button:focus-visible{outline:none;background:#e7eddf}
.service-options button[aria-selected="true"]{color:#4e653a;background:#edf1e7}

.roofing-page .home-contact .consult-form>.green{display:flex;width:fit-content;max-width:100%;margin:16px auto 0;padding-inline:28px;justify-content:center;text-align:center}

.roof-faq details p{max-width:none;box-sizing:border-box}

/* Quiet trust strip, matched to the features canvas and roof-system panel. */
.roof-trust{background:var(--paper);padding:24px 0 0}.trust-filter{position:absolute;pointer-events:none}.trust-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;padding:14px 0}.trust-badge{display:flex;align-items:center;justify-content:center;min-width:0;height:88px;padding:0 24px}.trust-badge+.trust-badge{border-left:1px solid #f0f1ed}.trust-badge img{width:100%;max-width:200px;height:88px;object-fit:contain;filter:url(#trust-tone)}.trust-gaf img{max-width:110px}.trust-fortified img{max-width:160px}@media(max-width:600px){.trust-badges{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}.trust-badge{height:68px;padding:0 16px}.trust-badge img{height:68px}.trust-badge:nth-child(3){border-left:0}.roof-trust{padding-top:18px}}


.hero .nav-right .roofing-nav-cta{background:var(--green);border-color:var(--green);color:#f9f9f5}
.hero .nav-right .roofing-nav-cta:hover,.hero .nav-right .roofing-nav-cta:focus-visible{background:#739b50;border-color:#739b50;color:#f9f9f5}

/* Distinct finished-home Roofing hero. */
body.roofing-page:not(.windows-page):not(.siding-page):where(:not(.about-page)) .hero{background-image:url("assets/roofing-hero-gray.webp");background-position:center top}