:root{
  --navy:#161616; --navy-2:#2b2b2b; --red:#c4161c; --red-2:#e02a30;
  --cream:#f6f1e7; --ink:#1a1a1a; --muted:#5b6472; --gold:#e8b53a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Open Sans",system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.5}
h1,h2,.brand strong,.eyebrow,.status strong{font-family:Oswald,Impact,sans-serif;letter-spacing:.02em}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#fff;color:var(--ink);border-bottom:4px solid var(--red);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.brand{display:flex;align-items:center}
.brand img{height:84px;width:auto;display:block}
@media (max-width:480px){.brand img{height:46px}}
.brand .mark{background:var(--red);font-family:Oswald;font-weight:700;padding:6px 9px;border-radius:4px}
.brand strong{display:block;font-size:1.15rem;line-height:1}
.brand small{letter-spacing:.35em;font-size:.7rem;opacity:.8}
.call,.btn{background:var(--red);color:#fff;text-decoration:none;padding:9px 18px;border-radius:4px;font-weight:600;border:0;cursor:pointer}
.call:hover,.btn:hover{background:var(--red-2)}
.btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
main{max-width:960px;margin:0 auto;padding:32px 16px}
.intro{text-align:center;margin-bottom:22px}
.eyebrow{color:var(--red);text-transform:uppercase;font-size:.9rem}
h1{color:var(--navy);font-size:clamp(1.7rem,4.5vw,2.8rem);line-height:1.1;margin:6px 0 10px}
.intro p:last-child{color:var(--muted)}

.stage{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(20,37,61,.15);overflow:hidden}
.scene{position:relative;cursor:pointer;user-select:none;outline:none}
.scene:focus-visible{box-shadow:inset 0 0 0 4px var(--gold)}
.scene svg{display:block;width:100%;height:auto}
.sky{fill:#cfe6f5}.sun{fill:var(--gold)}.ground{fill:#6b8f4e}
.wall{fill:#efe6d6;stroke:#c9b99c;stroke-width:2}
.door{fill:var(--navy-2)}.win{fill:#9cc7e4;stroke:#fff;stroke-width:4}
.deck{fill:#c99b62;stroke:#8a6338;stroke-width:3}
.rafter{stroke:#8a6338;stroke-width:4}
.underlay{fill:#3b3f46;opacity:0;transition:opacity .5s}
.old{fill:#7d7466;stroke:#5d564b;stroke-width:1;transition:transform .6s ease-in,opacity .6s}
.old.gone{opacity:0;transform:translateY(160px) rotate(25deg)}
.shingle{fill:var(--navy-2);stroke:#0d1a2b;stroke-width:1;opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .35s}
.shingle.on{opacity:1;transform:none}
.ridge{fill:var(--red);opacity:0;transition:opacity .5s}
.chimney{fill:#9b4a3a;stroke:#6e3328;stroke-width:2}
.ladder line{stroke:#b9bec6;stroke-width:4}
.worker{transition:transform .45s ease}
.skin{fill:#e0b38a}.hat{fill:var(--gold)}.shirt{fill:var(--red)}
.arm{stroke:#e0b38a;stroke-width:3;stroke-linecap:round}.hammer{fill:#555}
.swing #arm,.swing #hammer{animation:swing .25s ease-in-out 2;transform-box:fill-box}
@keyframes swing{50%{transform:rotate(35deg) translate(-2px,6px)}}
.scene.shake{animation:shake .2s}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;font-family:Oswald;font-weight:700;color:var(--red);font-size:1.3rem;animation:pop .8s ease-out forwards;text-shadow:0 1px 0 #fff}
@keyframes pop{to{transform:translateY(-50px);opacity:0}}
.debris{position:absolute;width:8px;height:5px;background:#7d7466;animation:fall 1s ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),160px) rotate(300deg);opacity:0}}
.tip{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:5px 14px;border-radius:20px;font-size:.9rem;animation:bob 1.4s infinite}
@keyframes bob{50%{transform:translate(-50%,4px)}}
.done-banner{position:absolute;inset:auto 0 0 0;background:rgba(20,37,61,.92);color:#fff;text-align:center;padding:12px;font-family:Oswald;font-size:1.3rem}

.progress{padding:16px 20px;display:grid;gap:10px}
.bar{height:14px;background:#e6e1d6;border-radius:8px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .4s}
.status{display:flex;justify-content:space-between;color:var(--navy)}
.progress .btn{justify-self:center}

.contact{margin-top:36px;text-align:center}
.contact h2{color:var(--navy);margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:var(--navy);color:#fff;text-decoration:none;padding:18px;border-radius:8px;display:grid;gap:4px;border-bottom:4px solid var(--red)}
.card span{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.card b{font-size:1.1rem;word-break:break-word}
footer{text-align:center;color:var(--muted);padding:30px 16px;font-size:.85rem}

/* SEO content blocks */
.headline{font-family:Oswald,Impact,sans-serif;color:var(--navy);font-size:clamp(1.7rem,4.5vw,2.8rem);line-height:1.1;margin:6px 0 10px;font-weight:700}
h1.eyebrow{font-size:.9rem;font-weight:500;line-height:1.3}
.faq{margin:36px auto 0;max-width:760px}
.faq h2{color:var(--navy);text-align:center;margin-bottom:14px}
.faq details{background:#fff;border-left:4px solid var(--red);border-radius:6px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600;min-height:48px}
.faq details p{padding:0 16px 14px;color:var(--muted)}
.faq a,footer a{color:var(--red)}
footer address{font-style:normal;margin-bottom:6px}

/* Mobile */
html{-webkit-text-size-adjust:100%}
.scene{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.call,.btn{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:600px){
  .top{padding:8px 16px;gap:10px}
  .brand img{height:56px}
  .call{padding:8px 12px;font-size:.85rem;white-space:nowrap}
  main{padding:20px 16px}
  .tip{font-size:.8rem;top:6px}
  .pop{font-size:1rem}
  .status{font-size:.9rem;gap:8px}
  .done-banner{font-size:1rem;padding:8px}
  .stage{border-radius:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}

/* Roof care tips */
.care{padding:0 16px 18px}
.care-lead{color:var(--ink);font-size:1.02rem;margin-bottom:14px;padding-left:12px;border-left:3px solid var(--gold)}
.care-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.care-list li{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border-radius:8px;padding:12px 14px}
.tip-num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-family:Oswald,sans-serif;font-weight:700;display:grid;place-items:center}
.care-list strong{display:block;color:var(--navy);font-family:Oswald,sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:.02em}
.care-list li span:not(.tip-num){color:var(--muted);font-size:.93rem;line-height:1.45}
.care-cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;border-radius:8px;padding:14px 16px}
.care-cta span{font-weight:600}
.care-cta .btn{color:#fff;text-decoration:none}
@media (max-width:600px){.care{padding:0 12px 14px}.care-cta{flex-direction:column;align-items:stretch;text-align:center}.care-cta .btn{justify-content:center}}