.roof-difference{padding:65px 0 100px;background:var(--canvas);font-family:Inter,Arial,sans-serif;color:var(--ink)}
.roof-difference-frame{background:#efeae1;border:1px solid #dfd5c6;border-radius:0;overflow:hidden}
.roof-difference-main{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1.08fr;gap:55px;padding:65px 46px;overflow:hidden}
.roof-difference-main:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/roofing-hero.png') center 47%/cover;opacity:.13}
.roof-difference-main:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f5f1e9 20%,#f5f1e9ef 45%,#f5f1e98c)}
.roof-difference-eyebrow{font:600 11px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-dark);margin:0 0 27px}
.roof-difference-copy h2{font:700 clamp(34px,3.45vw,52px)/1.06 Inter,Arial,sans-serif;letter-spacing:-.05em;margin:0}
.roof-difference-copy h2 em{font-style:normal;color:var(--blue-dark)}
.roof-difference-copy>p:not(.roof-difference-eyebrow){max-width:400px;font-size:16px;line-height:1.65;color:#66707c;margin:25px 0}
.roof-difference-signoff{display:block;font-size:11px;color:#817362;margin-top:35px}
.roof-difference-benefits{align-self:center;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.roof-difference-benefit{display:flex;align-items:center;gap:17px;min-height:113px;padding:22px 19px;border:1px solid #d6c8b5;background:#fbf8f1ee;border-radius:0;transition:border-color .25s,background .25s}
.roof-difference-benefit:hover{border-color:#d8844c;background:#fffaf2}
.roof-difference-benefit>div>span{font:500 7px var(--mono);letter-spacing:.8px;color:#a45d28}
.roof-difference-benefit h3{font:650 15px/1.45 Inter,Arial,sans-serif;letter-spacing:-.2px;color:#30291f;margin:8px 0 0}
.rd-icon{width:41px;height:44px;flex-shrink:0;stroke:#d95100;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.rd-hammer g{transform-origin:28px 18px;animation:rdHammer 4s ease-in-out infinite var(--icon-delay)}
.rd-estimate g path{stroke-dasharray:100;animation:rdDraw 4s ease-in-out infinite var(--icon-delay)}
.rd-home>path:first-child{stroke-dasharray:100;animation:rdRoofDraw 5s ease-in-out infinite var(--icon-delay)}
.rd-home-spark{animation:rdSpark 4s ease-in-out infinite var(--icon-delay);transform-origin:36px 9px}
.rd-check{stroke-dasharray:100;animation:rdDraw 4s ease-in-out infinite var(--icon-delay)}
.rd-cleanup g{transform-origin:25px 6px;animation:rdSweep 4s ease-in-out infinite var(--icon-delay)}
.rd-clean-spark{animation:rdSpark 4s ease-in-out infinite var(--icon-delay);transform-origin:center}
.rd-chat circle{fill:#d95100;stroke:none;animation:rdChat 3s ease-in-out infinite var(--icon-delay)}
.rd-chat circle:nth-of-type(2){animation-delay:calc(var(--icon-delay) + .18s)}
.rd-chat circle:nth-of-type(3){animation-delay:calc(var(--icon-delay) + .36s)}
.roof-difference-strip{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:27px 35px 27px 180px;background:#ff781e;overflow:hidden;border-radius:0}
.roof-difference-mark{position:absolute;left:20px;bottom:-9px;width:140px;height:105px;stroke:#783509;stroke-width:6;opacity:.3;z-index:-1}
.roof-difference-strip p{margin:0;color:#251e15;font-size:15px;line-height:1.45}
.roof-difference-strip strong{font-size:26px;font-weight:750;letter-spacing:-.8px}
.roof-difference-strip button{display:flex;align-items:center;justify-content:center;gap:22px;min-height:55px;padding:14px 20px;background:#24211b;color:#fff7ee;border:1px solid #24211b;border-radius:0;font-size:10px;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .2s}
.roof-difference-strip button>span{font-size:25px;font-weight:400;transition:transform .2s}
.roof-difference-strip button:hover{background:#403225}
.roof-difference-strip button:hover>span{transform:translateX(4px)}
.roof-difference-strip button:focus-visible{outline:3px solid #fff7ee;outline-offset:4px}
@keyframes rdHammer{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-16deg)}73%{transform:rotate(8deg)}82%{transform:rotate(-10deg)}90%{transform:rotate(0)}}
@keyframes rdDraw{0%,12%{stroke-dashoffset:100;opacity:.35}40%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.35}}
@keyframes rdRoofDraw{0%,8%{stroke-dashoffset:100}50%,100%{stroke-dashoffset:0}}
@keyframes rdSpark{0%,40%,100%{opacity:.2;transform:scale(.8)}60%,75%{opacity:1;transform:scale(1.12)}}
@keyframes rdSweep{0%,45%,100%{transform:rotate(0)}58%{transform:rotate(10deg)}73%{transform:rotate(-10deg)}86%{transform:rotate(5deg)}}
@keyframes rdChat{0%,30%,70%,100%{opacity:.4;translate:0}45%,55%{opacity:1;translate:0 -3px}}
@media(max-width:1150px){.roof-difference-main{gap:30px;padding:45px 30px}.roof-difference-benefit{padding:18px 13px;gap:12px;min-height:105px}.rd-icon{width:33px}.roof-difference-benefit h3{font-size:13px}.roof-difference-strip{padding-left:140px}.roof-difference-strip strong{font-size:23px}.roof-difference-mark{width:105px}}
@media(max-width:900px){.roof-difference-main{grid-template-columns:1fr;gap:30px}.roof-difference-copy h2 br:last-child{display:none}.roof-difference-copy>p:not(.roof-difference-eyebrow){max-width:550px}.roof-difference-signoff{margin-top:20px}.roof-difference-benefit{min-height:95px;padding:20px}.roof-difference-benefit h3{font-size:15px}.roof-difference-strip{padding:25px 25px 25px 110px;gap:20px}.roof-difference-strip strong{font-size:20px}.roof-difference-strip button{font-size:9px;padding:12px 15px;gap:15px}.roof-difference-mark{left:10px;width:85px}}
@media(max-width:760px){.roof-difference{padding:40px 0 60px}.roof-difference-main{padding:32px 22px}.roof-difference-copy h2{font-size:clamp(30px,7.5vw,46px)}.roof-difference-eyebrow{font-size:9px;margin-bottom:22px}.roof-difference-copy>p:not(.roof-difference-eyebrow){font-size:14px;margin:20px 0}.roof-difference-signoff{font-size:10px}.roof-difference-benefits{gap:10px}.roof-difference-benefit{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 13px;min-height:157px}.rd-icon{width:35px;height:39px}.roof-difference-benefit h3{font-size:12px;margin-top:6px}.roof-difference-benefit>div>span{font-size:6px;letter-spacing:.4px}.roof-difference-strip{flex-direction:column;align-items:flex-start;padding:25px 22px;gap:20px}.roof-difference-strip p{font-size:14px}.roof-difference-strip strong{font-size:22px}.roof-difference-strip button{width:100%;font-size:10px;justify-content:space-between}.roof-difference-mark{left:auto;right:-10px;top:0;bottom:auto;width:110px;opacity:.13}}
@media(prefers-reduced-motion:reduce){.roof-difference *{animation:none!important;transition:none!important;translate:none!important}.rd-estimate g path,.rd-home>path:first-child,.rd-check{stroke-dashoffset:0;opacity:1}.rd-chat circle,.rd-home-spark,.rd-clean-spark{opacity:1}}

/* Reference treatment: photo-led dark inset panel on the warm page. */
.roof-difference-frame{border:0;border-radius:18px;box-shadow:0 22px 45px #241a1115;background:#1b2325}
.roof-difference-main{padding:85px 55px 75px;gap:45px;grid-template-columns:1.02fr 1fr;min-height:480px}
.roof-difference-main:before{opacity:1;background-position:center 45%}
.roof-difference-main:after{background:linear-gradient(90deg,#10191cf2 0%,#10191cda 35%,#10191c65 65%,#10191c24),linear-gradient(0deg,#10191c66,transparent 60%)}
.roof-difference-eyebrow{color:#ff741c;margin-bottom:35px}
.roof-difference-copy h2{color:#fff;font-size:clamp(34px,3.45vw,52px);font-weight:750;letter-spacing:-.035em;line-height:1.08;text-transform:none}
.roof-difference-copy h2 em{color:#ff7510}
.roof-difference-copy>p:not(.roof-difference-eyebrow){color:#d5d5d2;max-width:440px;font-size:18px;line-height:1.55;margin-top:27px}
.roof-difference-signoff{display:none}
.roof-difference-benefits{gap:12px;align-self:center}
.roof-difference-benefit{background:linear-gradient(120deg,#202a2deB,#252a2aeF);border:1px solid #7b838077;border-radius:16px;padding:19px 18px;gap:17px;min-height:102px;box-shadow:0 5px 12px #0002;backdrop-filter:blur(9px)}
.roof-difference-benefit:hover{background:#293235ee;border-color:#ff883f99}
.roof-difference-benefit>div>span{display:none}
.roof-difference-benefit h3{color:#fff;font-size:15px;line-height:1.4;margin:0;font-weight:700}
.rd-icon{width:51px;height:51px;padding:9px;border:2px solid #fb6c09;border-radius:50%;stroke:#ff741c;stroke-width:1.9}
.rd-chat circle{fill:#ff741c}
.roof-difference-strip{background:linear-gradient(110deg,#ff6e0b,#ff780d);min-height:112px;padding:24px 28px 24px 230px;gap:30px;isolation:auto;overflow:visible}
.roof-difference-strip:before{content:'';position:absolute;left:0;top:-34px;width:300px;height:35px;background:#ff700b;clip-path:polygon(0 100%,100% 0,100% 100%)}
.roof-difference-mark{width:195px;height:145px;left:0;bottom:0;stroke:#ff7010;stroke-width:7;opacity:1;z-index:0;transform:translateY(-35px)}
.roof-difference-strip p{position:relative;z-index:1;color:#172123;font-size:clamp(20px,2.3vw,34px);font-weight:700;line-height:1.25;letter-spacing:-1px;white-space:nowrap}
.roof-difference-strip p br{display:none}
.roof-difference-strip strong{font:inherit}
.roof-difference-strip button{position:relative;z-index:1;min-height:62px;border-radius:40px;padding:9px 10px 9px 25px;background:#142123;border-color:#142123;font-size:11px;gap:18px;white-space:nowrap}
.roof-difference-strip button>span{display:grid;place-items:center;background:#ff7914;color:#142123;border-radius:50%;height:43px;width:43px;font-size:28px}
@media(max-width:1150px){.roof-difference-main{padding:60px 35px;gap:30px}.roof-difference-copy>p:not(.roof-difference-eyebrow){font-size:16px}.roof-difference-benefit{padding:17px 13px;gap:12px}.rd-icon{width:44px;height:44px;padding:8px}.roof-difference-benefit h3{font-size:13px}.roof-difference-strip{padding-left:160px}.roof-difference-mark{width:145px}.roof-difference-strip p{font-size:24px}.roof-difference-strip button{font-size:9px;padding-left:18px}}
@media(max-width:900px){.roof-difference-main{grid-template-columns:1fr;padding:45px 32px;gap:30px}.roof-difference-copy h2 br:last-child{display:none}.roof-difference-copy>p:not(.roof-difference-eyebrow){max-width:550px}.roof-difference-benefit{min-height:95px;padding:20px}.roof-difference-benefit h3{font-size:15px}.roof-difference-strip{padding:24px 25px 24px 125px;gap:20px}.roof-difference-strip p{font-size:21px;white-space:normal}.roof-difference-mark{width:110px;transform:translateY(-25px)}}
@media(max-width:760px){.roof-difference-frame{border-radius:14px}.roof-difference-main{padding:36px 22px 40px;gap:28px}.roof-difference-main:after{background:linear-gradient(90deg,#10191cf0,#10191c91),linear-gradient(0deg,#10191ce0,transparent)}.roof-difference-main:before{background-position:65% center}.roof-difference-copy h2{font-size:clamp(29px,7.5vw,45px)}.roof-difference-eyebrow{font-size:9px;margin-bottom:24px}.roof-difference-copy>p:not(.roof-difference-eyebrow){font-size:14px;margin:20px 0 0}.roof-difference-benefits{gap:10px}.roof-difference-benefit{padding:17px 12px;min-height:138px;flex-direction:column;align-items:flex-start;border-radius:11px;gap:13px}.roof-difference-benefit h3{font-size:12px}.rd-icon{width:43px;height:43px;padding:8px}.roof-difference-strip{padding:25px 22px;gap:22px;flex-direction:column;align-items:flex-start;min-height:0;overflow:hidden}.roof-difference-strip:before{display:none}.roof-difference-strip p{font-size:23px;line-height:1.3;letter-spacing:-.7px}.roof-difference-strip p br{display:block}.roof-difference-strip button{width:100%;min-height:57px;font-size:9px;justify-content:space-between}.roof-difference-strip button>span{height:38px;width:38px}.roof-difference-mark{left:auto;right:-15px;top:0;bottom:auto;width:125px;stroke:#a73e00;opacity:.2;transform:none}}

.roof-difference-strip:before{width:100%;background:#ff710c;clip-path:polygon(0 100%,27% 0,100% 0,100% 100%)}

/* Reference roof silhouette, revealed above a single diagonal orange strip. */
.roof-difference-copy h2{text-transform:uppercase}
.roof-difference-strip{background:none;isolation:isolate;overflow:visible}
.roof-difference-strip:before{left:0;right:0;top:-42px;bottom:0;width:100%;height:auto;background:linear-gradient(110deg,#ff6a08,#ff7810);clip-path:polygon(0 100%,28% 0,100% 0,100% 100%);z-index:1}
.roof-difference-mark{left:0;right:auto;top:auto;bottom:0;transform:none;width:260px;height:190px;stroke:#ff7010;stroke-width:16;stroke-linejoin:miter;stroke-linecap:square;opacity:1;z-index:0}
.roof-mark-chimney{fill:#ff7010;stroke:none}
.roof-difference-strip p,.roof-difference-strip button{z-index:2}
@media(max-width:1150px){.roof-difference-mark{width:215px;height:170px}.roof-difference-strip:before{clip-path:polygon(0 100%,24% 0,100% 0,100% 100%)}}
@media(max-width:900px){.roof-difference-mark{width:170px;height:145px}}
@media(max-width:760px){.roof-difference-strip{background:#ff7410;overflow:hidden}.roof-difference-strip:before{display:none}.roof-difference-mark{left:auto;right:-15px;top:0;bottom:auto;width:140px;height:130px;opacity:.18;stroke:#8a3508}.roof-mark-chimney{fill:#8a3508}}

.roof-difference-benefit h3{text-transform:uppercase}