@font-face{font-family:Bar;src:url(barlow-latin.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:Zil;src:url(zilla-slab-700-latin.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ink:#191b17;--ink2:#22251f;--lime:#d9f21b;--stone:#cfd1c4;--paper:#ecede4;--mute:#9a9d90;--red:#ff5b3a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:Bar,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.k{font:600 12px Bar,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.strip{background:var(--stone);color:#191b17;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px}
.strip a{font-weight:700}
.pt-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4vw;background:rgba(25,27,23,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #30332b}
.logo{display:flex;align-items:center;gap:10px;font:700 20px Zil,serif;text-transform:uppercase;letter-spacing:.02em;text-decoration:none}
.logo.lg-g:before{content:attr(data-g);flex:none;width:30px;height:30px;background:var(--lime);display:grid;place-items:center;color:var(--ink);font-style:normal;clip-path:polygon(50% 8%,100% 55%,100% 100%,0 100%,0 55%)}
.pt-bar nav{display:flex;gap:22px;font-size:14px;color:#c9cbbf;text-transform:uppercase;letter-spacing:.06em}.pt-bar nav a{text-decoration:none}
.acts{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;padding:13px 18px;font:700 14px Bar,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.l{background:var(--lime);color:var(--ink)}.btn.o{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn.r{background:var(--red);color:#fff}
.btn:active{transform:scale(.97)}

/* HERO: storm vs new roof */
.pt-hero{position:relative;height:calc(100svh - 96px);min-height:620px;overflow:hidden;background:#0e0f0d;--x:0%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pt-hero img{-webkit-user-drag:none;pointer-events:none}
body.dragging{-webkit-user-select:none;user-select:none;cursor:ew-resize}
.scene{position:absolute;inset:0}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.scene .new{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
canvas.rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:inset(0 0 0 var(--x))}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;clip-path:inset(0 0 0 var(--x))}
.flash.go{animation:flash .9s}
@keyframes flash{0%,100%{opacity:0}8%{opacity:.55}16%{opacity:.05}24%{opacity:.35}40%{opacity:0}}
.line{position:absolute;top:0;bottom:0;left:var(--x);width:4px;margin-left:-2px;background:var(--lime);box-shadow:0 0 22px var(--lime);z-index:4;pointer-events:none}
.grip{position:absolute;top:44%;left:var(--x);width:60px;height:60px;margin:-30px 0 0 -30px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font:800 20px Bar,sans-serif;z-index:5;cursor:ew-resize;touch-action:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0;transition:opacity .4s}
.pt-hero.ready .grip{opacity:1}
.tag{position:absolute;top:22px;z-index:4;padding:7px 12px;font:700 12px Bar,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:opacity .4s}
.tag.a{left:22px;background:var(--lime);color:var(--ink)}.tag.b{right:22px;background:#111;color:var(--red)}
.pt-hero.anim .scene .new,.pt-hero.anim canvas.rain,.pt-hero.anim .flash{transition:clip-path 1.6s cubic-bezier(.65,0,.25,1)}
.pt-hero.anim .line,.pt-hero.anim .grip{transition:left 1.6s cubic-bezier(.65,0,.25,1),opacity .4s}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,13,.85) 0%,rgba(14,15,13,.4) 38%,transparent 60%);pointer-events:none;z-index:2}
.copy{position:absolute;left:4vw;bottom:8vh;z-index:3;max-width:620px}
.copy .k{color:var(--lime)}
h1{font:700 clamp(48px,7vw,112px)/.9 Zil,serif;text-transform:uppercase;letter-spacing:-.01em;margin:14px 0 16px}
h1 em{font-style:normal;color:var(--lime)}
.lead{font-size:clamp(17px,1.5vw,20px);color:#dfe1d6;max-width:34ch;line-height:1.45}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hint{position:absolute;left:var(--x);top:calc(44% + 44px);transform:translateX(-50%);z-index:5;font:600 12px Bar,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.65);padding:6px 10px;white-space:nowrap;opacity:0;transition:opacity .4s}
.pt-hero.ready .hint{opacity:1}.pt-hero.touched .hint{opacity:0}

/* LAYERS */
.layers{background:var(--ink2);padding:100px 4vw;display:grid;grid-template-columns:1.25fr 1fr;gap:4vw;align-items:center}
.layers h2,.pt-fix h2,.pt-help h2,.pt-trust h2{font:700 clamp(38px,5.5vw,84px)/.92 Zil,serif;text-transform:uppercase}
.layers .k{color:var(--lime);display:block;margin-bottom:12px}
.cut{position:relative;width:100%;aspect-ratio:896/743}
.cut img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(30px 40px 30px rgba(0,0,0,.5))}
.dot{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:var(--lime);color:var(--ink);font:800 15px Bar,sans-serif;border:0;cursor:pointer;box-shadow:0 0 0 0 rgba(217,242,27,.6);animation:pulse 2s infinite}
.dot.on{background:#fff;animation:none;box-shadow:0 0 0 6px rgba(217,242,27,.5)}
@keyframes pulse{70%{box-shadow:0 0 0 14px rgba(217,242,27,0)}}
.info{background:var(--ink);border:2px solid var(--lime);padding:26px;margin-top:26px;min-height:250px}
.info .k{color:var(--lime)}
.info h3{font:700 32px Zil,serif;text-transform:uppercase;margin:8px 0 12px}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;color:#c9cbbf;line-height:1.45}
.info dt{color:var(--lime);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.1em;padding-top:3px}
.info .note{color:var(--mute);margin-top:14px;font-size:14px}

/* SERVICES */
.pt-fix{background:var(--lime);color:var(--ink);padding:100px 4vw}
.pt-fix header{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.pt-fix header p{max-width:36ch;font-size:17px;line-height:1.45;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{position:relative;background:#c8e012;padding:18px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;cursor:pointer;opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s cubic-bezier(.2,.9,.3,1),background .3s}
.card.in{opacity:1;transform:none}.card:hover{background:#e3f74a}
.card img{position:absolute;top:14px;left:50%;width:72%;height:58%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(18px 26px 14px rgba(40,50,0,.35));transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.card:hover img{transform:translateX(-50%) translateY(-6px) scale(1.06) rotate(-3deg)}
.card .k{opacity:.6}.card h3{font:700 24px Zil,serif;text-transform:uppercase;margin:4px 0 8px}.card .go{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.card.wide{grid-column:span 2}

/* HELPER */
.pt-help{padding:100px 4vw;background:var(--ink)}
.pt-help .k{color:var(--lime)}
.pt-help h2{margin:10px 0 30px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#262922;color:#e4e6db;border:1px solid #3a3e34;padding:13px 18px;font:600 15px Bar,sans-serif;cursor:pointer}
.chip.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.answer{margin-top:24px;max-width:720px;padding:22px;background:#20231d;border:2px solid #3a3e34;display:none}
.answer.show{display:block;animation:rise .45s cubic-bezier(.2,.9,.3,1)}
.answer.urgent{border-color:var(--red);background:#2a1914}
.answer h4{font:700 24px Zil,serif;text-transform:uppercase;margin-bottom:8px}.answer ol{margin:0 0 16px 20px;color:#c9cbbf;line-height:1.6}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.meter{display:flex;gap:4px;margin:6px 0 14px}.meter i{height:6px;flex:1;background:#3a3e34}
.meter.l1 i:nth-child(-n+1),.meter.l2 i:nth-child(-n+2){background:var(--lime)}.meter.l3 i{background:var(--red)}

/* TRUST */
.pt-trust{background:var(--paper);color:var(--ink);padding:100px 4vw;display:grid;grid-template-columns:1.1fr 1fr;gap:5vw}
.pt-trust dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;font-size:17px;margin-top:26px}.pt-trust dt{color:#6d7066;text-transform:uppercase;font-size:13px;letter-spacing:.08em;padding-top:3px}
.pt-trust dl a{font-weight:700}
.rev{display:grid;gap:12px}
.rev blockquote{background:#fff;padding:20px;border-left:6px solid var(--lime);font-size:17px;line-height:1.45}
.rev cite{display:block;margin-top:10px;font-size:12px;color:#7d8075;font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.rev .note{font-size:12px;color:#7d8075;letter-spacing:.1em;text-transform:uppercase}
footer{background:var(--ink);color:#7d8075;padding:26px 4vw 110px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:35;display:none;gap:8px;padding:8px;background:rgba(25,27,23,.94);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.dock .btn{flex:1;justify-content:center}
/* booking */
.shade{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;opacity:0;pointer-events:none;transition:.35s}
.shade.open{opacity:1;pointer-events:auto}
.pt-drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100vw);z-index:41;background:#151713;transform:translateX(102%);transition:transform .5s cubic-bezier(.2,.9,.2,1);display:flex;flex-direction:column;padding:24px;overflow:auto;border-left:3px solid var(--lime)}
.pt-drawer.open{transform:none}
.pt-drawer .x{position:absolute;right:18px;top:16px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
.steps{display:flex;gap:6px;margin:6px 0 20px}.steps i{height:4px;flex:1;background:#30332b}.steps i.on{background:var(--lime)}
.pt-drawer h4{font:700 30px Zil,serif;text-transform:uppercase;margin-bottom:6px}
.pt-drawer p.sub{color:var(--mute);margin-bottom:18px}
.opts{display:grid;gap:8px}
.opt{text-align:left;background:#1f221c;border:1px solid #33372e;color:#eceee4;padding:14px 16px;font:600 16px Bar,sans-serif;cursor:pointer}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.slots .opt{text-align:center;padding:12px 6px;font-size:15px}
.lbl{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.12em;margin:12px 0 8px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field input{background:#1f221c;border:1px solid #33372e;padding:14px;color:#fff;font:16px Bar,sans-serif}
.field input:focus{outline:2px solid var(--lime);border-color:transparent}
.err{color:#ffa18d;font-size:14px;min-height:18px;margin-bottom:6px}
.pt-drawer .next{margin-top:auto;width:100%;justify-content:center;padding:16px}
.done{text-align:center;padding-top:30px}
.done svg{width:84px;height:84px;margin:0 auto 18px}
.done path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:900px){
 .pt-bar nav{display:none}.pt-bar .acts .o{display:none}
 .pt-hero{height:calc(100svh - 100px);min-height:640px}
 .scene img{object-position:62% 30%}
 .copy{left:5vw;right:5vw;bottom:96px}.ctas{display:none}
 .scrim{background:linear-gradient(0deg,rgba(14,15,13,.94) 0%,rgba(14,15,13,.6) 42%,transparent 66%)}
 .grip{top:30%}.hint{top:calc(30% + 44px)}
 .layers{grid-template-columns:1fr}
 .grid{grid-template-columns:1fr 1fr}.card{min-height:270px;padding:14px}.card img{height:44%;width:78%;top:12px}.card h3{font-size:20px}.card.wide{grid-column:span 2}.card.wide img{height:56%}
 .pt-trust{grid-template-columns:1fr}
 .dock{display:flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.card{opacity:1;transform:none}}

.pt-film{position:relative;background:var(--ink);overflow:hidden;min-height:min(78vh,720px);display:flex;align-items:flex-end}
.pt-film-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.pt-film:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,27,23,0) 30%,rgba(25,27,23,.92))}
.pt-film-cap{position:relative;z-index:1;padding:0 4vw 70px;max-width:760px}
.pt-film-cap .k{color:var(--lime)}
.pt-film-cap p{color:#d4d6cb;font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:46ch}
@media (max-width:900px){.pt-film{min-height:72vh}.pt-film-cap{padding-bottom:110px}}

/* 11-04 gate fix: the picture sits in the card's flow above the text, so a 2-line title can never run under it */
.card img{position:static;top:auto;left:auto;transform:none;flex:1 1 0;min-height:0;width:70%;height:auto;align-self:center;margin:0 0 10px}
.card:hover img{transform:translateY(-6px) scale(1.06) rotate(-3deg)}
@media (max-width:900px){.card img{width:78%;height:auto}.card.wide img{height:auto}}
@media (max-width:374px){.card h3{font-size:16px}}