/* Problem section: source handoff animation and belief typography. */
.roof-problems{background:var(--canvas)!important;--problem-orange:var(--blue-dark);padding:0!important;overflow:hidden}
.roof-problems .roof-problems-grid{width:100%;max-width:none;margin:0;grid-template-columns:1.06fr 1fr!important;gap:0!important;align-items:stretch}
.roof-problems .roof-problems-copy{padding:48px clamp(32px,4.4vw,70px);padding-right:80px}
.roof-problems .roof-problems-eyebrow{font:600 11px/1 var(--mono);letter-spacing:.13em;margin:0 0 20px;color:var(--blue-dark)!important}
.roof-problems .roof-problems-copy h2{font-family:var(--display)!important;font-weight:600;font-size:clamp(46px,5vw,78px)!important;line-height:.94;letter-spacing:-.066em;color:var(--ink);max-width:680px}
.roof-problems .roof-problems-copy h2 em{color:var(--blue-dark)}
.roof-problems .roof-problems-intro{max-width:570px;margin:22px 0!important;color:#66707c;font-size:16px!important;line-height:1.65}
.roof-problems .roof-problems-visual{height:100%!important;min-height:520px;align-self:stretch!important;border-radius:0;box-shadow:none}
.roof-problems .roof-damage-photo{width:100%;height:100%;object-fit:cover}
.roof-problems .roof-problem-panel{max-width:390px;padding:14px;border-radius:12px;background:#100e0a;border-color:#614427;--nc-blue:var(--blue-light);--nc-good:#ffb36d;container-type:inline-size}
.roof-problems .roof-problem-panel-header{margin-bottom:10px;padding-bottom:10px}
.roof-problems .roof-problem-panel-header>span{height:34px;width:40px}
.roof-problems .roof-problem-panel .roof-problem-option{min-height:36px!important;padding:8px 11px!important;animation:ncChip 8s linear infinite var(--d)!important;translate:none!important;border-color:#66523866!important;background:#16120c!important}
.roof-problems .roof-problem-panel .roof-problem-option:before{animation:ncChipDot 8s linear infinite var(--d);background:var(--blue-light)}
.roof-problems .roof-problem-panel .roof-problem-option:focus-visible{outline:2px solid #ffb36d;outline-offset:3px}
.roof-problems .roof-problem-panel .roof-problem-option strong{font:500 10px/1.5 var(--mono);color:#eee0c9}
.roof-problems .roof-problem-panel-footer{padding-top:10px;margin-top:10px}
.roof-problems .roof-problems-cta{margin-top:20px;color:var(--blue-dark);font-size:12px}
.roof-problems .roof-diagnostic-card{position:absolute;left:31%!important;right:24px!important;bottom:auto;transform:translateY(-50%)!important;min-height:120px!important;padding:20px!important;background:#100e0aee;animation:ncSeatFill 8s ease-in-out infinite var(--d);--nc-edge:#7d5b3699}
.roof-problems .roof-diagnostic-0{top:24%!important}
.roof-problems .roof-diagnostic-1{top:50%!important}
.roof-problems .roof-diagnostic-2{top:76%!important}
.roof-problems .roof-diagnostic-card h3{font:600 16px/1.3 var(--display)!important;margin:8px 0 6px}
.roof-problems .roof-diagnostic-card p{font-size:11px!important;line-height:1.5}
.roof-problems .roof-diagnostic-card small{font-size:6px!important;letter-spacing:.2px;margin-top:10px}
.roof-problems .roof-diagnostic-card>span{font-size:7px!important;color:var(--blue-light)}
.roof-problems .roof-branch-spot-0{top:24%!important}.roof-problems .roof-branch-spot-1{top:50%!important}.roof-problems .roof-branch-spot-2{top:76%!important}
.roof-problems .roof-selected-hotspot{left:20%!important;animation:statusBlink 1.8s ease-in-out infinite}
.roof-problems .roof-branch-tracks path{stroke:rgba(var(--blue-light-rgb),.5);stroke-width:1;stroke-dasharray:2 4}
.roof-problems .roof-branch-trails path{stroke:var(--blue-light);stroke-width:2!important;stroke-dasharray:6 100;opacity:1;animation:ncComet 3.2s linear infinite;filter:drop-shadow(0 0 3px rgba(var(--blue-rgb),.9))}
.roof-problems .roof-branch-trails path:nth-child(2){animation-delay:-1.05s}.roof-problems .roof-branch-trails path:nth-child(3){animation-delay:-2.1s}
.roof-problems .roof-visual-topline{left:24px;right:24px;top:25px}
.roof-problems .roof-visual-caption{bottom:20px}.roof-problems .roof-visual-caption strong{font-size:18px!important}
@media(max-width:1050px) and (min-width:761px){.roof-problems .roof-problems-copy{padding:38px 32px}.roof-problems .roof-diagnostic-card{left:23%!important;right:15px!important;padding:15px!important}.roof-problems .roof-diagnostic-card h3{font-size:14px!important}.roof-problems .roof-selected-hotspot{left:12%!important}}
@media(max-width:760px){.roof-problems .roof-problems-grid{grid-template-columns:1fr!important;gap:0!important}.roof-problems .roof-problems-copy{padding:45px 20px 30px}.roof-problems .roof-problems-copy h2{font-size:clamp(46px,5vw,78px)!important}.roof-problems .roof-problems-intro{font-size:14px!important}.roof-problems .roof-problems-visual{height:510px!important;min-height:510px}.roof-problems .roof-diagnostic-card{left:28%!important;right:16px!important;padding:16px!important;min-height:115px!important}.roof-problems .roof-diagnostic-card h3{font-size:14px!important}.roof-problems .roof-problem-panel{max-width:none}.roof-problems .roof-visual-caption strong{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){.roof-problems .roof-problem-panel .roof-problem-option,.roof-problems *,.roof-problems *:before{animation:none!important;opacity:1;transform:none}.roof-problems .roof-diagnostic-card{transform:translateY(-50%)!important}}

@media(min-width:1051px){.roof-problems .roof-problems-grid{grid-template-columns:1.2fr 1fr!important}.roof-problems .roof-problems-copy{padding:34px 40px 34px clamp(32px,4.4vw,70px)}}

/* Reference handoff: one origin, three branches, rows escaping the panel. */
.roof-problems .roof-problem-panel{overflow:visible}
.roof-problems .roof-problem-panel .roof-problem-options{overflow:visible}
.roof-problems .roof-problem-panel .roof-problem-option{position:relative;z-index:4;overflow:hidden;animation:roofConcernHandoff 8s linear infinite var(--d)!important;will-change:transform,opacity;box-shadow:none!important}
.roof-problems .roof-problem-panel .roof-problem-option:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 15%,#ffbf7955 50%,transparent 85%);transform:translateX(-130%);animation:roofConcernShine 8s linear infinite var(--d)}
.roof-problems .roof-problem-panel .roof-problem-option:before{animation:roofConcernDot 8s linear infinite var(--d)}
.roof-problems .roof-branch-tracks path{stroke:rgba(var(--blue-light-rgb),.45);stroke-dasharray:2 4;stroke-width:1}
.roof-problems .roof-branch-trails path{stroke-dasharray:6 100;animation:ncComet 3.2s linear infinite;stroke-width:2!important;filter:drop-shadow(0 0 3px rgba(var(--blue-rgb),.9))}
.roof-problems .roof-selected-hotspot{display:none}
@keyframes roofConcernHandoff{0%,7%{opacity:.8;transform:none;border-color:#76604b55;background:#16120c;box-shadow:none}12%{opacity:1;transform:translateX(14px);border-color:#ffb36d; outline:1px solid #ffb36d;filter:drop-shadow(0 0 6px #ff842c70); background:#392413;box-shadow:0 0 17px #ff842c45}18%{opacity:0;transform:translateX(62px);border-color:#ffb36d;box-shadow:0 0 24px #ff842c55}19%,100%{opacity:.3;transform:none;border-color:#76604b55;background:#16120c;box-shadow:none}}
@keyframes roofConcernShine{0%,7%{transform:translateX(-130%);opacity:0}9%{opacity:1}16%{transform:translateX(130%);opacity:1}18%,100%{transform:translateX(130%);opacity:0}}
@keyframes roofConcernDot{0%,7%{background:#a87b43;box-shadow:none}10%,18%{background:#ffb86e;box-shadow:0 0 10px #ff8c35}19%,100%{background:#a87b43;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.roof-problems .roof-problem-panel .roof-problem-option,.roof-problems .roof-problem-panel .roof-problem-option:before,.roof-problems .roof-problem-panel .roof-problem-option:after{animation:none!important;transform:none;opacity:1}.roof-problems .roof-problem-panel .roof-problem-option:after{display:none}}

.roof-problems .roof-problem-panel .roof-problem-option{border-color:transparent!important;box-shadow:none!important}

/* Selection clock: left row first, then a 260ms delayed photo/card response. */
.roof-problems .roof-problem-panel .roof-problem-option{animation:none!important;opacity:.5;transform:none}
.roof-problems .roof-problem-panel .roof-problem-option.is-active{opacity:1;animation:roofConcernCycle 4.2s linear 1!important}
.roof-problems .roof-problem-panel .roof-problem-option:after{animation:none;opacity:0}
.roof-problems .roof-problem-panel .roof-problem-option.is-active:after{animation:roofConcernShine 2s linear 1}
.roof-problems .roof-problem-panel .roof-problem-option:before{animation:none}
.roof-problems .roof-problem-panel .roof-problem-option.is-active:before{background:#ffb86e;box-shadow:0 0 10px #ff8c35}
.roof-problems .roof-diagnostic-card{animation:none}
.roof-problems .roof-response-enter .roof-damage-photo{animation:roofPhotoResponse .45s ease-out both}
.roof-problems .roof-response-enter .roof-diagnostic-card{animation:roofCardResponse .38s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--response-delay)}
@keyframes roofConcernCycle{0%{transform:none;filter:none}5%{transform:translateX(14px);outline:1px solid #ffb36d;filter:drop-shadow(0 0 6px #ff842c70)}11%{transform:translateX(45px);opacity:.15;filter:drop-shadow(0 0 7px #ff842c70)}12%{transform:none;opacity:.35}22%,100%{transform:none;opacity:1;filter:none}}
@keyframes roofPhotoResponse{from{opacity:.45;filter:brightness(.8)}to{opacity:1;filter:brightness(1)}}
@keyframes roofCardResponse{from{opacity:.15;translate:12px 0;filter:brightness(1.4)}to{opacity:1;translate:0;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.roof-problems .roof-problem-panel .roof-problem-option.is-active,.roof-problems .roof-response-enter .roof-damage-photo,.roof-problems .roof-response-enter .roof-diagnostic-card,.roof-problems .roof-problem-panel .roof-problem-option.is-active:after{animation:none!important;opacity:1;transform:none;translate:0;filter:none}.roof-problems .roof-problem-panel .roof-problem-option{opacity:1}}

/* Fixed-size light flecks, not path-length-scaled glowing bars. */
.roof-problems .roof-branch-tracks path{stroke:#cc7029;stroke-opacity:.7;opacity:1;stroke-width:1.25;stroke-dasharray:2 5;stroke-linecap:round;filter:drop-shadow(0 1px 1px #24140855);vector-effect:non-scaling-stroke}
.roof-problems .roof-branch-trails path{stroke:#ffab55;stroke-width:2!important;stroke-linecap:round;filter:drop-shadow(0 0 2px #ff751acc);animation:roofRouteFleck 3.2s linear infinite;vector-effect:non-scaling-stroke}
.roof-problems .roof-branch-trails path:nth-child(2){animation-delay:-1.05s}.roof-problems .roof-branch-trails path:nth-child(3){animation-delay:-2.1s}
@keyframes roofRouteFleck{from{stroke-dashoffset:var(--route-length)}to{stroke-dashoffset:-4}}
.roof-problems .roof-problem-panel .roof-problem-option.is-active:hover{animation:roofConcernCycle 4.2s linear 1!important}
.roof-problems.is-motion-paused .roof-problem-option,.roof-problems.is-motion-paused .roof-problem-option:after,.roof-problems.is-motion-paused .roof-branch-trails path{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.roof-problems .roof-branch-trails path{animation:none!important;opacity:0}}

/* Several short, luminous flecks per branch, spaced across the whole route. */
.roof-problems .roof-branch-trails{display:none}
.roof-problems .roof-route-flecks path{fill:none;stroke:#ffb65f;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #ff8a25) drop-shadow(0 0 4px #ff9d4566);animation:roofRouteFleck 3.2s linear infinite;opacity:.95}
.roof-problems.is-motion-paused .roof-route-flecks path{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.roof-problems .roof-route-flecks path{animation:none!important;opacity:0}}

/* Breathing room between the hero and the next section's left copy. */
.roof-problems .roof-problems-copy{padding-top:76px}
@media(max-width:760px){.roof-problems .roof-problems-copy{padding-top:64px}}

/* Exact original nc-handoff trail settings; no cloned particle stream. */
.roof-problems .roof-branch-trails{display:initial}
.roof-problems .roof-branch-tracks path{stroke:rgba(var(--blue-light-rgb),.22);stroke-opacity:1;stroke-width:1;stroke-dasharray:2 4;stroke-linecap:butt;filter:none;opacity:1;vector-effect:non-scaling-stroke}
.roof-problems .roof-branch-trails path{stroke:var(--blue-light);stroke-width:2!important;stroke-linecap:round;stroke-dasharray:6 100;filter:drop-shadow(0 0 3px rgba(var(--blue-rgb),.9));animation:ncComet 3.2s linear infinite;opacity:1;vector-effect:non-scaling-stroke}
.roof-problems .roof-branch-trails path:nth-child(2){animation-delay:-1.05s}.roof-problems .roof-branch-trails path:nth-child(3){animation-delay:-2.1s}
@media(prefers-reduced-motion:reduce){.roof-problems .roof-branch-trails path{animation:none!important;opacity:0}}

/* Hero typography treatment; retain the section's existing size and spacing. */
.roof-problems .roof-problems-copy h2{font-family:Inter,Arial,sans-serif!important;text-transform:uppercase}

/* Visible guide paths across the warm background and roof photograph. */
.roof-problems .roof-branch-tracks path{stroke:#d87320;stroke-opacity:.85;opacity:1;stroke-width:1.5;stroke-dasharray:2 4;filter:drop-shadow(0 1px 1px #311a0b66)}

/* Mobile photo callouts flow naturally: no absolute-card collisions. */
@media(max-width:760px){
 .roof-problems .roof-problems-visual{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:14px;height:auto!important;min-height:590px;padding:70px 16px 65px;overflow:hidden}
 .roof-problems .roof-problems-visual .roof-diagnostic-card{position:relative;inset:auto!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;transform:none!important;translate:none;margin-left:32px;min-height:0!important;padding:18px 15px!important;width:auto}
 .roof-problems .roof-problems-visual .roof-diagnostic-card h3{font-size:15px!important;line-height:1.35!important}
 .roof-problems .roof-problems-visual .roof-diagnostic-card p{font-size:11px!important;line-height:1.6}
 .roof-problems .roof-problems-visual .roof-diagnostic-card small{font-size:6px!important;line-height:1.5;margin-top:11px}
 .roof-problems .roof-problems-visual .roof-diagnostic-card>span{font-size:7px!important;line-height:1.6}
 .roof-problems .roof-visual-caption strong{display:none}
 .roof-problems .roof-visual-caption{bottom:18px;left:18px;right:18px;justify-content:flex-end}
 .roof-problems .roof-response-enter .roof-diagnostic-card{animation:roofMobileCardResponse .38s ease-out both;animation-delay:var(--response-delay)}
}
@keyframes roofMobileCardResponse{from{opacity:.25}to{opacity:1}}