.roof-stories{padding:90px 0 100px;background:#171613;color:#f8f3eb;font-family:Inter,Arial,sans-serif}
.roof-stories-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:35px 42px;align-items:start}
.roof-stories-intro{padding:24px 30px 0 0}
.roof-stories-eyebrow{font:600 11px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#ff9545;margin:0 0 25px}
.roof-stories-intro h2{font:700 clamp(36px,4vw,60px)/1.05 Inter,Arial,sans-serif;letter-spacing:-.05em;margin:0;color:#fff8ef}
.roof-stories-intro h2 em{color:#ff7b20;font-style:normal}
.roof-stories-intro>p:not(.roof-stories-eyebrow){font-size:16px;line-height:1.65;color:#bdb8ae;max-width:440px;margin:25px 0}
.roof-stories-link{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:50px;background:#fb7218;color:#211910;text-decoration:none;font-weight:750;text-transform:uppercase;font-size:11px;padding:15px 20px;transition:background .2s}
.roof-stories-link:hover{background:#ff943e}
.roof-stories-link span{font-size:22px;font-weight:400}
.roof-stories-demo{display:block;color:#9b9488;max-width:360px;font:8px/1.7 var(--mono);letter-spacing:.5px;margin-top:23px}
.roof-story{background:#22201b;border:1px solid #494034;border-radius:0;overflow:hidden;min-width:0}
.roof-comparison{position:relative;height:280px;overflow:hidden;background:#3c3831;isolation:isolate}
.roof-story-feature .roof-comparison{height:315px}
.roof-comparison-image{position:absolute;inset:0;background-size:200% auto;background-repeat:no-repeat}
.roof-comparison-before{background-position:left center;clip-path:inset(0 calc(100% - var(--compare)) 0 0)}
.roof-comparison-after{background-position:right center}
.roof-comparison-replacement .roof-comparison-image{background-image:url('assets/story-replacement.png')}
.roof-comparison-repair .roof-comparison-image{background-image:url('assets/story-repair.png')}
.roof-comparison-storm .roof-comparison-image{background-image:url('assets/story-storm.png')}
.roof-comparison:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#100c0860);pointer-events:none;z-index:1}
.roof-compare-label{position:absolute;bottom:16px;z-index:2;background:#171613dd;color:#fff6e8;font-size:9px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;padding:8px 10px;pointer-events:none}
.roof-compare-before{left:16px}.roof-compare-after{right:16px}
.roof-compare-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--compare);width:2px;background:#fff4dc;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 5px #0003}
.roof-compare-divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:2px solid #fff3df;display:flex;align-items:center;justify-content:center;background:#ff7717;color:white;font-size:29px;font-weight:600;white-space:pre;box-shadow:0 4px 10px #0003}
.roof-comparison input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y}
.roof-comparison:focus-within{outline:3px solid #ffb573;outline-offset:-3px}
.roof-story-heading{display:flex;align-items:center;gap:18px;padding:21px 22px;border-bottom:1px solid #ffffff12}
.roof-story-heading>span{font:500 30px/1 var(--body);color:#ff8b36;border-right:1px solid #8e572d;padding-right:18px}
.roof-story-heading h3{font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.5px;text-transform:uppercase;margin:0 0 6px;color:#f8f1e6}
.roof-story-heading p{font-size:11px;line-height:1.5;color:#b6ad9e;margin:0}
.roof-story-heading button{margin-left:auto;padding:4px;background:none;border:0;color:#ff913e;font-size:27px;cursor:pointer;min-width:34px;min-height:40px;transition:transform .2s}
.roof-story-heading button:hover{transform:translate(3px,-3px)}
.roof-story-heading button:focus-visible,.roof-stories-link:focus-visible{outline:2px solid #ffad6a;outline-offset:4px}
.roof-story blockquote{margin:0;padding:22px 25px 24px}
.roof-story blockquote>p{font-size:13px;line-height:1.7;color:#d4cbbd;margin:0 0 17px}
.roof-story blockquote footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0;background:none;color:inherit;border:0}
.roof-story blockquote footer strong{font-size:11px;font-weight:650;color:#f0e7d9}
.roof-story blockquote footer span{font:7px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.5px;color:#a69b88;text-align:right}
@media(max-width:1100px){.roof-stories-grid{gap:30px}.roof-stories-intro{padding:15px 10px 0 0}.roof-story-heading{gap:13px;padding:18px}.roof-story-heading h3{font-size:15px}.roof-story-heading>span{font-size:26px;padding-right:13px}.roof-story blockquote{padding:20px}.roof-story-feature .roof-comparison{height:290px}}
@media(max-width:760px){.roof-stories{padding:55px 0 60px}.roof-stories-grid{grid-template-columns:1fr;gap:28px}.roof-stories-intro{padding:0 0 5px}.roof-stories-eyebrow{font-size:9px;margin-bottom:20px}.roof-stories-intro h2{font-size:clamp(36px,9vw,50px)}.roof-stories-intro h2 br:last-child{display:none}.roof-stories-intro>p:not(.roof-stories-eyebrow){font-size:14px;margin:20px 0}.roof-stories-demo{font-size:7px;max-width:300px;margin-top:18px}.roof-comparison,.roof-story-feature .roof-comparison{height:240px}.roof-story-heading{padding:18px 14px;gap:12px}.roof-story-heading h3{font-size:14px}.roof-story-heading>span{font-size:25px;padding-right:12px}.roof-story-heading p{font-size:10px}.roof-story blockquote{padding:20px 17px}.roof-story blockquote>p{font-size:12px}.roof-story-heading button{font-size:23px;min-width:28px}.roof-compare-label{font-size:8px;bottom:13px}.roof-compare-divider>span{height:42px;width:42px}}
@media(prefers-reduced-motion:reduce){.roof-stories *{transition:none!important;animation:none!important}}

/* Homeowner portrait marquee within the same dark section. */
.roof-review-marquee{margin-top:75px;overflow:hidden}
.roof-review-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:30px;padding-top:38px;border-top:1px solid #ffffff1a}
.roof-review-heading .roof-stories-eyebrow{margin-bottom:17px;font-size:9px}
.roof-review-heading h3{font:700 clamp(27px,3vw,44px)/1.07 Inter,Arial,sans-serif;letter-spacing:-.045em;color:#fff7eb;margin:0}
.roof-review-heading h3 em{font-style:normal;color:#ff842c}
.roof-review-heading>div>p:last-child{font-size:10px;color:#a69c8b;margin:15px 0 0}
.roof-review-pause{display:flex;gap:16px;align-items:center;padding:10px 14px;min-height:42px;border:1px solid #69533b;background:transparent;color:#e8d9c6;text-transform:uppercase;font:9px var(--mono);cursor:pointer}
.roof-review-pause:hover{background:#30271d}
.roof-review-pause:focus-visible,.roof-review-viewport:focus-visible{outline:2px solid #ffad60;outline-offset:4px}
.roof-review-viewport{overflow:hidden;padding:8px 0 12px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.roof-review-track{display:flex;width:max-content;animation:roofReviewScroll 65s linear infinite;will-change:transform}
.roof-review-group{display:flex;gap:20px;padding-right:20px}
.roof-review{width:370px;flex-shrink:0;padding:26px;background:#24211c;border:1px solid #4e4233;border-radius:0;color:#f1e9dc}
.roof-review-person{display:flex;align-items:center;gap:15px}
.roof-review-person img{width:62px;height:65px;object-fit:cover;object-position:center 25%;border-radius:0;filter:saturate(.65)}
.roof-review-person h4{font:650 14px Inter,Arial,sans-serif;margin:0 0 6px;color:#fff3e2}
.roof-review-person>div>span{display:block;font-size:10px;color:#ffab65}
.roof-review-person small{display:block;color:#9f9382;text-transform:uppercase;font:6px var(--mono);letter-spacing:.8px;margin-top:7px}
.roof-review-quote{font:65px/.8 Georgia,serif;color:#ff862e;margin-left:auto;align-self:flex-start}
.roof-review>p{font-size:13px;line-height:1.8;color:#d4c8b6;margin:22px 0;min-height:116px}
.roof-review-signoff{display:block;padding-top:15px;border-top:1px solid #ffffff12;font:6px/1.5 var(--mono);color:#a88b68;letter-spacing:.7px}
.roof-review-marquee.is-paused .roof-review-track,.roof-review-marquee.is-offscreen .roof-review-track,.roof-review-viewport:hover .roof-review-track,.roof-review-viewport:focus-within .roof-review-track{animation-play-state:paused}
@keyframes roofReviewScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.roof-review-marquee{margin-top:50px}.roof-review-heading{padding-top:28px;align-items:flex-start;gap:15px;margin-bottom:23px}.roof-review-heading h3{font-size:26px}.roof-review-heading .roof-stories-eyebrow{font-size:7px;max-width:220px;line-height:1.6}.roof-review-heading>div>p:last-child{font-size:9px;max-width:220px}.roof-review-pause{font-size:7px;padding:9px;gap:8px}.roof-review{width:300px;padding:22px}.roof-review-group{gap:14px;padding-right:14px}.roof-review>p{font-size:12px;min-height:130px}.roof-review-person img{width:55px;height:60px}.roof-review-heading h3 br{display:none}}
@media(prefers-reduced-motion:reduce){.roof-review-track{animation:none;transform:none}.roof-review-group-duplicate{display:none}.roof-review-viewport{overflow-x:auto;mask-image:none;padding-inline:20px}.roof-review-pause{display:none}}

/* Full-portrait testimonial cards with lower-edge text overlays. */
.roof-review-heading{border-top:0;padding-top:0}
.roof-review{position:relative;width:330px;height:480px;padding:0;background:#25201a;border:0;border-radius:0;overflow:hidden;isolation:isolate}
.roof-review-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2;filter:saturate(.8)}
.roof-review:after{content:'';position:absolute;inset:22% 0 0;z-index:-1;background:linear-gradient(0deg,#0b0a09fa 0%,#0b0a09c9 32%,#0b0a0933 75%,transparent 100%)}
.roof-review-overlay{position:absolute;inset:auto 0 0;padding:28px 25px}
.roof-review-overlay p{color:#fff5e5;font-size:14px;line-height:1.75;margin:0;font-weight:500}
.roof-review-group{gap:20px;padding-right:20px}
@media(max-width:760px){.roof-review{width:285px;height:440px;padding:0}.roof-review-overlay{padding:25px 21px}.roof-review-overlay p{font-size:13px;line-height:1.7}.roof-review-group{gap:14px;padding-right:14px}.roof-review-heading{padding-top:0}}

.roof-review-shortquote{display:block;color:#ff943e;font:700 19px/1.25 Inter,Arial,sans-serif;letter-spacing:-.5px;margin-bottom:11px}
.roof-review-name{font:650 12px/1.4 Inter,Arial,sans-serif;color:#fff5e5;margin:0 0 13px}
@media(max-width:760px){.roof-review-shortquote{font-size:18px}.roof-review-name{font-size:11px;margin-bottom:11px}}

/* Pause and lift individual portrait testimonials. */
.roof-review-viewport{padding-top:18px;padding-bottom:20px}
.roof-review{border:2px solid transparent;cursor:pointer;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;outline:none}
.roof-review:hover,.roof-review:focus-visible,.roof-review.is-selected{transform:translateY(-7px) scale(1.015);border-color:#ff842b;box-shadow:0 10px 26px #0004;z-index:2}
.roof-review-marquee.is-card-selected .roof-review-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.roof-review:hover,.roof-review:focus-visible,.roof-review.is-selected{transform:none;transition:none}}