.roof-faq{padding:110px 0;background:var(--canvas);color:var(--ink);font-family:Inter,Arial,sans-serif}
.roof-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}
.roof-faq-copy{position:sticky;top:35px}
.roof-faq-eyebrow{font:600 10px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-dark);margin:0 0 25px}
.roof-faq-copy h2{font:700 clamp(35px,3.8vw,58px)/1.05 Inter,Arial,sans-serif;letter-spacing:-.05em;margin:0}
.roof-faq-copy h2 em{font-style:normal;color:var(--blue-dark)}
.roof-faq-copy>p:not(.roof-faq-eyebrow){max-width:380px;font-size:15px;line-height:1.7;color:#66707c;margin:25px 0}
.roof-faq-copy>button{min-height:44px;display:inline-flex;align-items:center;gap:25px;padding:0;background:none;border:0;border-bottom:1px solid #cda17d;color:var(--blue-dark);font-size:12px;font-weight:700;cursor:pointer}
.roof-faq-copy>button span{font-size:20px;transition:transform .2s}
.roof-faq-copy>button:hover span{transform:translate(3px,-3px)}
.roof-faq-list{border-top:1px solid #cfc6b9}
.roof-faq-item{border-bottom:1px solid #cfc6b9}
.roof-faq-item summary{display:flex;align-items:center;gap:18px;min-height:87px;list-style:none;padding:22px 0;cursor:pointer}
.roof-faq-item summary::-webkit-details-marker{display:none}
.roof-faq-number{font:500 9px var(--mono);color:#b87c4a;flex-shrink:0}
.roof-faq-item h3{font:650 16px/1.45 Inter,Arial,sans-serif;letter-spacing:-.3px;color:#30291f;margin:0}
.roof-faq-toggle{margin-left:auto;color:#c7570c;font-size:24px;font-weight:400;flex-shrink:0;transition:rotate .22s}
.roof-faq-item[open] .roof-faq-toggle{rotate:45deg}
.roof-faq-item[open] h3{color:#b94700}
.roof-faq-answer{padding:0 32px 24px 33px}
.roof-faq-answer p{font-size:13px;line-height:1.8;color:#6d655a;margin:0;max-width:580px}
.roof-faq-copy>button:focus-visible,.roof-faq-item summary:focus-visible{outline:2px solid #b94700;outline-offset:4px}
@media(max-width:1050px){.roof-faq{padding:80px 0}.roof-faq-grid{gap:45px}.roof-faq-item h3{font-size:14px}}
@media(max-width:760px){.roof-faq{padding:65px 0}.roof-faq-grid{grid-template-columns:1fr;gap:35px}.roof-faq-copy{position:static}.roof-faq-eyebrow{font-size:8px;margin-bottom:20px}.roof-faq-copy h2{font-size:clamp(35px,9vw,49px)}.roof-faq-copy>p:not(.roof-faq-eyebrow){font-size:14px;margin:20px 0;max-width:none}.roof-faq-item summary{min-height:80px;gap:13px;padding:20px 0}.roof-faq-item h3{font-size:14px}.roof-faq-answer{padding:0 20px 24px 27px}.roof-faq-answer p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.roof-faq *{transition:none!important}}

/* Compact the right-side FAQ list. */
.roof-faq-item summary{min-height:65px;padding:16px 0}
.roof-faq-answer{padding-bottom:18px}
.roof-faq-answer p{line-height:1.65}
@media(max-width:760px){.roof-faq-item summary{min-height:64px;padding:15px 0}.roof-faq-answer{padding-bottom:18px}}